R E D

NAME	SIZE	PERMISSION
Kanit-Regular.otf	77.91 KB	-rw-r--r--
Kanit-Regular.ttf	171.84 KB	-rw-r--r--
Prompt_Regular.otf	75.23 KB	-rw-r--r--
Prompt_Regular.ttf	166.28 KB	-rw-r--r--
THSarabunNew.otf	148.04 KB	-rw-r--r--
THSarabunNew.ttf	468.39 KB	-rw-r--r--
WDB_Bangna.eot	75.36 KB	-rw-r--r--
WDB_Bangna.ttf	75.18 KB	-rw-r--r--
index.html	147 B	-rw-r--r--
layout.css	9.34 KB	-rw-r--r--
mini.css	17.14 KB	-rw-r--r--
spectre-exp.css	19.71 KB	-rw-r--r--
spectre-icons.css	10.67 KB	-rw-r--r--
spectre-old.css	59.8 KB	-rw-r--r--
spectre.css	56.21 KB	-rw-r--r--
style.css	44.39 KB	-rw-r--r--
style_original.css	43.92 KB	-rw-r--r--
w3-theme-sky.css	2.05 KB	-rw-r--r--
w3.css	22.88 KB	-rw-r--r--

Code Editor : layout.css

/*--------------------------------------------------------------
--------------------------- 600px -----------------------------
--------------------------------------------------------------*/
@media screen and (min-width: 600px) {
/* --- --- --- ## Content Navigation  --- --- ---*/
  .nav-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0;
  }
  
/* --- --- --- ## Global layouts  --- --- ---*/
  .site-main {
    padding: 2em;
  }
  
/* --- --- --- ## Header  --- --- ---*/
  .site-header {
    padding: 1em 2em;
  }

.custom-logo-link {
    display: block;
    padding: 1.5em;
  }

.menu-toggle {
    display: none;
  }

.hide-on-phone {
    display: inherit;
  }

.show-on-phone {
    display: none;
  }

.main-navigation ul {
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /*margin-top: 1em;*/
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

.main-navigation ul ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: 0;
  }

.main-navigation ul ul li {
    padding-left: 0;
  }

.main-navigation ul ul li a {
    width: 218px;
  }

.main-navigation ul a {
    padding: .4em 1em;
    background: rgba(255, 255, 255, 0.1);
  }

/* --- --- --- ## Posts and pages  --- --- ---*/

body:not(.archive-view) .site-main {
    padding: 2em;
  }

/* --- --- --- ## Footer  --- --- ---*/
  .site-footer {
    padding: 0.2em 2em;
  }

}

/*--------------------------------------------------------------
--------------------------- 990px -----------------------------
--------------------------------------------------------------*/
@media screen and (min-width: 990px) {
    body:not(.archive-view) .entry-header {
      grid-area: header;
    }

body:not(.archive-view) .entry-meta {
      grid-area: meta;
    }

body:not(.archive-view) .featured-image {
      grid-area: featimg;
    }

body:not(.archive-view) .entry-content {
      grid-area: content;
      max-width: 100%;
    }

body:not(.archive-view) .entry-footer {
      grid-area: footer;
    }

body:not(.archive-view) .post-navigation {
      grid-area: nav;
    }

body:not(.archive-view) .persons-area {
      grid-area: persons;
    }
	
	.entry-title {
		font-size: 2.3em;
	}

/* --- --- --- ## Footer  --- --- ---*/
	.site-info {
		text-align: right;
	}
	
	@supports (grid-area: auto) {
		body:not(.archive-view) .site-main {
		  display: -ms-grid;
		  display: grid;
		  -ms-grid-columns: 1fr minmax(auto, 46em) 1fr;
		  grid-template-columns: 1fr minmax(auto, 46em) 1fr;
		  -ms-flex-line-pack: start;
		  align-content: start;
		  grid-template-areas: ". post ." ". nav ." ". persons .";
		}

body:not(.archive-view) .post,    body:not(.archive-view) .page {
		  grid-area: post;
		  display: -ms-grid;
		  display: grid;
		  -ms-grid-columns: (1fr)[4];
		  grid-template-columns: repeat(4, 1fr);
		  grid-column-gap: 20px;
		  grid-template-areas: "header header header header" "meta meta meta meta" "featimg featimg featimg featimg" "content content content content" "footer footer footer footer";
		}

body:not(.archive-view) .post .entry-meta,    body:not(.archive-view) .page .entry-meta {
		  margin: -1em 0 1em;
		}

.menu-toggle {
		  display: none;
		}

.main-navigation ul {
		  display: block;
		  padding-top: 2em;
		}

.main-navigation .menu-item-has-children > a,    .main-navigation .page_item_has_children > a {
		  padding-right: 2em;
		}

.main-navigation ul {
		  display: block;
		  margin-top: 0;
		  padding-top: 2em;
		}

.main-navigation ul ul {
		  margin-left: 0;
		}

.main-navigation ul ul li {
		  padding-left: 0;
		}

.main-navigation ul ul li a {
		  width: auto;
		}

.main-navigation ul a {
		  padding: .4em 0;
		  background: none;
		}
		
		.posts-navigation {
		  width: 100%;
		  margin: 0;
		  padding: 0;
		}

.nav-links {
		  display: -webkit-box;
		  display: -ms-flexbox;
		  display: flex;
		}
		
		.site {
		  display: -ms-grid;
		  display: grid;
		  -ms-grid-columns: 16.5em 1fr;
		  grid-template-columns: 16.5em 1fr;
		  -ms-grid-rows: 1fr minmax(1em, auto);
		  grid-template-rows: 1fr minmax(1em, auto);
		  grid-template-areas: "header main" "header sidebar" "header footer";
		}

.site-header {
		  grid-area: header;
		}

.site-main {
		  grid-area: main;
		}

.widget-area {
		  grid-area: sidebar;
		}

.site-footer {
		  grid-area: footer;
		}

}
}

/*--------------------------------------------------------------
------------------------- 990  && 1799 -------------------------
--------------------------------------------------------------*/
@media screen and (min-width: 990px) and (max-width: 1799px) {
/* --- --- --- # basic  --- --- ---*/
  .basic-area {
    padding: 0px 0px 0px 25px;
    background-color: #FFF;
  }
  
/* --- --- --- # Widgets  --- --- ---*/
  .widget-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-top: 1px solid white;
  }

.widget-area .widget {
    width: 47.5%;
  }
    .widget-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-top: 1px solid white;
  }

}

/* --- --- --- ## Content Navigation  --- --- ---*/

/* --- --- --- # Widgets  --- --- ---*/
@supports (grid-area: auto) {
@media screen and (min-width: 1300px) {
    .widget-area {
      margin-top: 0;
    }
}
}

@media screen and (min-width: 990px) and (max-width: 1799px) and (min-width: 1300px) {
  .widget-area .widget {
    width: 30%;
  }
}

@media screen and (min-width: 1300px) {
  .archive-view .widget-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: #f2f2f2;
    border-top: 1px solid white;
  }

.archive-view .widget-area .widget {
    width: 30%;
  }
}

@media screen and (min-width: 1300px) and (min-width: 1800px) {
  .archive-view .widget-area .widget {
    width: 22.5%;
  }
}

@media screen and (min-width: 1300px) and (min-width: 2300px) {
  .archive-view .widget-area .widget {
    width: 18.5%;
  }
}

/* --- --- --- ## Global layouts  --- --- ---*/

@media screen and (min-width: 1300px) {
  .site-main {
    max-width: 45em;
  }
}

@supports (grid-area: auto) {
@media screen and (min-width: 990px) {
}

@media screen and (min-width: 1800px) {
    body:not(.archive-view) .site {
      -ms-grid-columns: 16.5em 1fr 16.5em;
      grid-template-columns: 16.5em 1fr 16.5em;
      -ms-grid-rows: 1fr minmax(1em, auto);
      grid-template-rows: 1fr minmax(1em, auto);
      grid-template-areas: "header main sidebar" "header footer footer";
    }
}
}

/* --- --- --- ## Archives  --- --- ---*/

@supports (grid-area: auto) {
  .archive-view .site-main {
    max-width: 40em;
    padding: 0.25em;
  }

@media screen and (min-width: 990px) {
    .archive-view .site-main {
      max-width: none;
      padding: 8px;
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 8px;
      background: #A2BAF9;
    }
}

@media screen and (min-width: 990px) and (min-width: 1300px) {
    .archive-view .site-main {
      -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 990px) and (min-width: 1800px) {
    .archive-view .site-main {
      -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (min-width: 990px) and (min-width: 2300px) {
    .archive-view .site-main {
      -ms-grid-columns: (1fr)[5];
      grid-template-columns: repeat(5, 1fr);
    }
}

@media screen and (min-width: 990px) {
    .archive-view .post {
      background: white;
      display: flex;
      justify-content: flex-start;
      /*space-between;*/
      flex-direction: column;
    }

.archive-view .post:after {
      display: none;
    }

.archive-view .category-featured {
      -ms-grid-column: span 2;
      grid-column: span 2;
    }

.archive-view .entry-title {
      word-break: break-word;
      font-size: 2em;
    }

.archive-view .featured-image {
      margin: -1em -1em 0;
      width: calc(100% + 2em);
    }
}
}

/* --- --- --- ## Header  --- --- ---*/

@media screen and (min-width: 990px) {
@supports (grid-area: auto) {
    .site-header {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
    }
}

@supports (grid-area: auto) {
    .site-header {
      position: fixed;
      width: 16.5em;
      height: 100vh;
      border-bottom: none;
      overflow-y: auto;
    }
}
}

${this.title}

Code Editor : layout.css