--- --- @import "{{ site.theme }}"; $content-width:800px; $link-color: #0082c9; $bg-color: white; $txt-color: #333; $border-color: #e8e8e8; $header-height: 20vh; .fullscreen{ width: 100vw; background-color: black; min-height: calc(100vh - #{$header-height}); margin-top: $header-height; display: flex; justify-content: center; align-item:center; } header.site-header{ position: fixed; width: 100vw; border-top: none; min-height: $header-height; display: flex; align-items: center; background-color: $bg-color; border-bottom: 2px solid $txt-color; a, a:visited { color : $txt-color; } .site-title{ @include relative-font-size(1.2); float:none; // visibility: hidden; // background-image: url('../assets/images/logo.svg'); } // .site-logo{ // background: url('../assets/images/logo.svg') no-repeat; // background-size: contain; // } .wrapper { width: $content-width; display: flex; justify-content: space-between; } .site-nav .page-link{ //color: $bg-color; //background-color: $txt-color; padding: 5px; font-variant: small-caps; @include relative-font-size(1); &:hover{ text-decoration: none; background-color: #2a7ae2; } } } body{ @include relative-font-size(1.4); h3{ font-weight: bold; } .blog { .post-list li { p{ margin-bottom: 10px } } h3{ margin-bottom: 5px; border-bottom: 1px solid $border-color; font-weight: normal; } h3 a, h3 a:visited { // color: $bg-color; // background-color: $txt-color; width: 50%; // padding:5px; } background-color: $bg-color; color: $txt-color; .post-meta-tags-cats { margin-top:5px; @include relative-font-size(0.8); .post-meta::after{ color: $txt-color; content: " / "; } .post-meta-category:not(:last-child)::after{ content: " ยท "; } } .read-more{ @include relative-font-size(0.8); } } } .page-content{ margin-top: $header-height; } .home-page-content{ margin-top: 10px; @include relative-font-size(1.1); } .post-list{ @include relative-font-size(1.1); p{ @include relative-font-size(1); line-height: 200%; } } .post-content{ @include relative-font-size(1.1); h2 { font-weight: 600; margin-top: 50px; } h3{ @include relative-font-size(1.2); margin-top:40px; } } .wrapper{ max-width: $content-width; } .services-list{ list-style-type: none; display: flex; flex-wrap: wrap; li{ display: flex; flex: 1 0 calc(25% - 12px); margin: 5px; border: 1px solid #333; justify-content: center; align-items: center; } li:after{ content: ''; display: block; padding-bottom: 100%; } } // .container{ // border: 2px solid black; // display: flex; // flex-wrap: wrap; // }