header {
position: relative; padding: 50px 0; width: 100%; &:before { position: absolute; content: ""; @include header-before(center, 0.2) { background-size: cover; background-repeat: no-repeat; top: 0; bottom: 0; left: 0; right: 0; background-image: url($header-image); }; } #about, #posts_header { position: relative; margin-top: 50px; } #about { line-height: 1.7em; text-align: justify; a { display: inline-block; text-decoration: underline; } .messenger { text-decoration: none; color: $color; } } // OPTIMIZE: if page.path contains '.md' #posts_header { display: grid; padding: 25px 0; a { text-decoration: none; h1 { margin-bottom: 10px; line-height: 0.8em; font-weight: normal; text-transform: capitalize; @include media-query($mobile-l){ line-height: normal; }; } } #meta { display: flex; font-size: smaller; span { margin-right: 10px; padding-right: 10px; border-right: 1px dotted white; } time { margin-right: 10px; } sub { padding: 0 5px; border: 1px dotted; border-radius: 3px; } } } @include media-query($mobile-l){ padding: 40px 0; #about, #posts_header { margin-top: 40px; text-align: left; } };
}
nav {
position: relative; display: flex; width: 100%; #logo { border: 2px dashed white; border-radius: 5px; width: 40px; height: 40px; @include header-before(center, 1) { background-size: cover; background-image: url($navbar-logo); }; } #nav-menu { display: grid; padding-left: 15px; .title { font-size: x-large; font-weight: bold; line-height: 1em; color: $color; } menu { display: flex; .home { padding-right: 10px; border-right: 1px dotted white; font-size: x-small; &:hover { text-decoration: none; } } .dropdown { display: flex; margin-left: 10px; font-size: x-small; width: 100%; cursor: pointer; ul { position: absolute; display: none; margin-top: 15px; z-index: 1; li { margin-bottom: 2px; a { text-decoration: none; } } } &:hover ul { display: inline-block; } } } }
}
main {
max-width: $laptop; margin: 0 auto; #writing, #projects, #comments { display: grid; margin-top: 50px; h3 { margin-bottom: 10px; } #post_list, #project-list { margin-top: 15px; li { display: flex; margin-bottom: 10px; padding-left: 15px; time { // color: lightgray; } a { padding-left: 10px; } } } #posts_paginator { display: flex; justify-content: center; margin-top: 50px; a { padding: 0 10px; text-decoration: none; font-weight: bold; } } @include media-query($laptop){ padding: 0 10px; }; @include media-query($mobile-l){ margin-top: 40px; #posts_paginator { margin-top: 40px; } #post_list, #project-list { li { padding-left: 0; } } }; }
}
article {
display: grid; margin-top: 50px; img { width: 100%; } h1,h2,h3,h4,h5,h6 { margin-top: 10px; margin-bottom: 5px; font-weight: bold; } h1,h2,h3 { color: $color; &:first-child { margin-top: 0; } } p, ol { margin-bottom: 10px; line-height: 1.7em; text-align: justify; a { display: inline-block; text-decoration: underline; } em { padding: 0 5px; border: 1px dashed white; border-radius: 3px; font-style: normal; } } ol { text-align: left; li { list-style: unset; } } table { margin-bottom: 10px; border: 1px dashed white; border-spacing: 0; text-align: left; thead { text-align: center; } td { padding: 3px; border-top: 1px dashed white; border-left: 1px dashed white; } } figure, .highlighter-rouge { margin-bottom: 10px; padding: 20px; border-radius: 5px; background-color: $highlight; code { font-size: larger; line-height: 1.3em; text-transform: lowercase; } } @include media-query($laptop){ padding: 0 10px; }; @include media-query($mobile-l){ margin-top: 40px; };
}
footer {
margin: 50px 0; font-size: smaller; width: 100%; a { display: inline-block; &:hover { color: $color; } } @include media-query($mobile-l){ margin: 40px 0; };
}