diff options
Diffstat (limited to 'sass/css')
-rw-r--r-- | sass/css/_colors.scss | 2 | ||||
-rw-r--r-- | sass/css/yaroslavps.scss | 186 |
2 files changed, 65 insertions, 123 deletions
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, |