From 0a88ade33bff3f714e701f8c4b210e824c3d231d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yaroslav=20de=20la=20Pe=C3=B1a=20Smirnov?= Date: Thu, 6 Oct 2022 04:54:57 +0300 Subject: CSS and templates revamp Had been thinking for a long while (prob about 2y now) that I wanted for there to be no distractions while reading the content (i.e. no sidebar). Didn't know how to handle navigation, though. Have made a lot of changes and am actually pretty satisfied with the results. Looks much cleaner now, and for those who know how to use browsers is actually more comfortable, since you can just press the end key and you are taken to the footer where all the navigation is. Of course, where it is relevant there are some navigation links at the top of the page. Phone users have it a little more uncomfortable, but phone usage overall has and always will be uncomfy. Such is the nature of small touch screens. --- sass/css/_colors.scss | 2 +- sass/css/yaroslavps.scss | 186 ++++++++++++++++------------------------------- 2 files changed, 65 insertions(+), 123 deletions(-) (limited to 'sass/css') diff --git a/sass/css/_colors.scss b/sass/css/_colors.scss index e633b53..f3667bb 100644 --- a/sass/css/_colors.scss +++ b/sass/css/_colors.scss @@ -1,6 +1,6 @@ $bg0: #000000; $bg1: #0a0a0f; -$white: #e5e9f0; +$white: #fcf8e2; $gray: #7c818c; $gray1: #5c5c64; $red: #b73030; diff --git a/sass/css/yaroslavps.scss b/sass/css/yaroslavps.scss index ff9c239..df76b80 100644 --- a/sass/css/yaroslavps.scss +++ b/sass/css/yaroslavps.scss @@ -13,9 +13,6 @@ html, body { min-height: 100vh; font-size: 14px; background: $bg0; - // background: linear-gradient(to left, #000, #18214a 30%, #18214a 70%, #000); - // background: #000 repeat center fixed url("/img/grid.png"); - // background-size: auto, 20%; } ul, @@ -35,6 +32,23 @@ p { line-height: 1.4; font-family: $font_mono; } +.new-year, +h1 { + color: $red; + font-family: $font_serif; + font-variant-caps: small-caps; + font-weight: 500; + font-size: 2.5em; +} + +h2 { + font-size: 1.7em; +} + +h3 { + font-size: 1.5em; +} + h2, h3, @@ -55,7 +69,7 @@ h3, h4, h5, h6 { - color: $red1; + color: $white; } a, a:visited { @@ -67,23 +81,6 @@ a:hover:visited { color: $cyan; } -.new-year, -h1 { - color: $red; - font-family: $font_serif; - font-variant-caps: small-caps; - font-weight: 500; - font-size: 2.5em; -} - -h2 { - font-size: 1.8em; -} - -h3 { - font-size: 1.5em; -} - hr { border-style: solid; border-color: $white; @@ -155,10 +152,7 @@ span.publish-date { } .main-container { - display: grid; - grid-template-columns: minmax(0, 5fr) 2fr; - grid-template-rows: min-content; - max-width: 1180px; + max-width: 990px; margin: 1em auto; min-height: 90vh; height: auto; @@ -166,58 +160,43 @@ span.publish-date { border-bottom: 1px solid $white; } -.landing-page-container { - grid-column-start: 1; - grid-column-end: 3; - padding: 2em; +.landing-header { + text-align: center; } -.landing-page-container > h1 { +.nav-container { + padding: 0.2em; text-align: center; - font-size: 3em; + list-style: none; } -.landing-page-container > .links-container { - padding: 0.5em; +.nav-container a { + background: #000; } -.landing-page-container > .links-container > a { +.nav-container > li { display: inline-block; - font-size: 1.5em; - margin: auto 1em; } -.landing-page-container > .links-container > a > span.icon { - font-size: 1.5em; +.nav-container > li ~ li::before { + display: inline-block; + color: $white; + content: " · "; + margin: 0 0.4em; + text-decoration: none; } .header-container { padding: 0 2em; } -.landing-page-container, -.content-container, -.sidebar-container { - background-color: $bg0; -} - -.foot-container { - background: #000 repeat center fixed url("/img/grid.png"); - border-top: 1px solid $white; -} - -.foot-container p { - display: inline-block; - background: $bg0; +.header-container .nav-container { + text-align: left; } -.foot-container p::after { - content: '\A'; - white-space: pre; -} - -.sidebar-container { - border-left: 1px solid $white; +.content-container { + background-color: $bg0; + min-height: 90vh; } .new-year { @@ -226,31 +205,6 @@ span.publish-date { font-size: 2em; } -.nav-container { - text-align: center; -} - -.nav-container > a ~ a::before { - display: inline-block; - color: $white; - content: " · "; - margin: 0 0.4em; - text-decoration: none; -} - -.foot-container { - text-align: center; - grid-column-start: 1; - grid-column-end: 3; - grid-row-start: 3; - grid-row-end: 3; - padding: 2em; -} - -.content-container { - min-height: 90vh; -} - .album-container { padding: 1em 2em; } @@ -264,39 +218,10 @@ span.publish-date { } a.see-more { - display: inline-block; - text-align: center; font-weight: bold; } -.sidebar-container { - grid-row-start: 1; - grid-row-end: 2; - grid-column-start: 2; - grid-column-end: 3; - padding-bottom: 2em; -} - -.sidebar-container span.icon { - font-size: 2em; - margin: auto 0.5em; -} - -.sticky-wrapper { - padding: 1em 2em; - position: sticky; - top: 1em; - max-height: 100vh; -} - -.links-container { - text-align: center; -} - -.links-container a { - text-decoration: none; -} - +.landing-container, .post-container { padding: 1em 2em; overflow: auto; @@ -312,15 +237,11 @@ a.see-more { display: block; margin: 0 auto; max-width: 100%; - max-height: 40vh; -} - -.post-container img { - max-width: 100%; + max-height: 50vh; } .post-container.full img:nth-of-type(1) { - max-height: 60vh; + max-height: 70vh; } .footnote-definition { @@ -364,6 +285,23 @@ pre.literal { color: $gray; } +.foot-container { + background: #000 repeat center fixed url("/img/grid.png"); + border-top: 1px solid $white; + text-align: center; + padding: 1em; +} + +.foot-container p { + display: inline-block; + background: $bg0; +} + +.foot-container p::after { + content: '\A'; + white-space: pre; +} + @media (max-width: 768px){ .landing-page-container { font-size: 1em; @@ -432,8 +370,12 @@ pre.literal { border: none; } - .sidebar-container { - display: none; + .foot-container p { + background: none; + } + + .nav-container a { + background: none; } .header-container, -- cgit v1.2.3