From: Ralf Jung Date: Wed, 7 Oct 2015 10:02:23 +0000 (+0200) Subject: re-do the layout: use SCSS, put the boxes differently to have the entire frame as... X-Git-Url: https://git.ralfj.de/web.git/commitdiff_plain/931546ff862b5b310ecb900e64429ae4f76535d5?ds=sidebyside;hp=ce25c00d60dce89a77d38e44793d9aad561a32dd re-do the layout: use SCSS, put the boxes differently to have the entire frame as one element, to give it a min-height --- diff --git a/_layouts/default.html b/_layouts/default.html index 7db3ba6..3abd894 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -17,17 +17,17 @@

{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}

+ -

{{ content }} -

diff --git a/style.css b/style.scss similarity index 64% rename from style.css rename to style.scss index d13bd3a..c20dedf 100644 --- a/style.css +++ b/style.scss @@ -1,3 +1,6 @@ +--- +# YAML front matter +--- @charset "utf-8"; /* General Fonts */ @@ -28,39 +31,48 @@ h4 { } /* Layout and Color stuff */ +$navi-width: 11em; +$outer-margin: 1em; +$frame-max-width: 52em; + +$frame-color: #121212; +$title-color: #08f; +$navi-color: #36ff00; +$current-color: #ffa700; +$outer-background-color: #505050; +$inner-background-color: #252525; +$text-color: #DDD; +$link-color: #9ed2ff; +$link-color-visited: #bfe1ff; +$link-color-hover: #5089ba; + + /* General page structure */ -body { - padding: 0.8em; - margin: 0; - color:#DDD; - background-color:#505050; -} -#frame { +body { /* This centers us in the page, and handles the "too wide" case */ + padding: $outer-margin; margin: 0 auto; - max-width: calc(50em + 2*11em); /* content width plus 2*navi width */ + color: $text-color; + background-color: $outer-background-color; + max-width: calc(#{$frame-max-width + 2 * $navi-width} + 2px); } - -/* The inner box */ -#title, #content { - border: solid #121212 1px; - background-color: #252525; - margin: 0 11.0em; /* navi width */ - padding: 0; +#frame { /* Add a frame */ + margin: 0 $navi-width; + border: solid $frame-color 1px; + background-color: $inner-background-color; + border-radius: 10px; + min-height: calc(100vh - #{2* $outer-margin} - 2px); } + +/* The content of the frame */ #title { - border-bottom: none; - border-radius: 10px 10px 0px 0px; + border-bottom: solid $title-color 2px; + text-align: center; } #title h1 { - border-bottom: solid #08f 2px; - text-align: center; padding: 0 0.7em; margin-bottom: 0; } #content { - border-top: none; - border-radius: 0px 0px 10px 10px; - display: block; padding: 0.7em; padding-top: 1px; /* If we use 0 here, things get ugly. What?!? */ } @@ -69,10 +81,13 @@ body { #navi { /* No border, no padding, so all the width computations become easy. */ float: left; - background-color:#505050; - width: 11.0em; /* navi width */ + background-color: $outer-background-color; + width: $navi-width; padding: 0; margin: 0; + position: relative; + left: -#{$navi-width}; + margin-bottom: calc(-100% - #{$frame-max-width}); } #navi ul { margin: 0px; @@ -86,9 +101,9 @@ body { #navi li { /* Border around the links */ margin-bottom:0.1em; - background-color: #252525; - border-left: solid #36ff00 2px; - border-right: solid #36ff00 2px; + background-color: $inner-background-color; + border-left: solid $navi-color 2px; + border-right: solid $navi-color 2px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } @@ -96,26 +111,26 @@ body { display: block; width: 100%; - color: #9ed2ff; + color: $link-color; font-size:110%; text-decoration: none; text-align: center; } #navi li.current { - border-color: #ffa700; + border-color: $current-color; } #navi li:hover { - border-color: #08f; + border-color: $title-color; border-radius: 0; } #navi li:hover a { - color: #DDD; + color: $text-color; } /* Small screens */ -@media screen and (max-width:60em) { - #frame, #title, #content, #navi { +@media screen and (max-width:#{ $frame-max-width + 2 * $outer-margin } ) { + body, #frame, #title, #content, #navi { margin: 0; width: auto; max-width: none; @@ -124,9 +139,8 @@ body { #navi { /* Place navi above the title */ float: none; - border: solid #121212 1px; - border-bottom: none; - background-color: #252525; + position: static; + background-color: $inner-background-color; padding: 0; } #navi ul, #navi ul ul, #navi li, #navi li a { @@ -137,7 +151,7 @@ body { #navi > ul { padding: 0.3em; display: block; - border-bottom: solid #36ff00 2px; + border-bottom: solid $navi-color 2px; } /* Display only parent and children, and deocare them appropriately */ #navi li { @@ -166,7 +180,7 @@ body { /* Printing */ @media print { - #frame, #title, #content { + body, #frame, #title, #content { margin: 0; padding: 0; width: auto; @@ -206,11 +220,11 @@ article.rst .rst-literal, article.rst pre { } article.rst .rst-literal { padding: 0.1em 0.2em; - background-color: #505050; + background-color: $outer-background-color; } article.rst pre { padding: 0.6em; - background-color: #505050; + background-color: $outer-background-color; } /* Content styling */ @@ -219,11 +233,11 @@ article.rst pre { line-height: 1.3; } #content a { - color:#9ed2ff; + color:$link-color; } #content a:visited { - color:#bfe1ff; + color:$link-color-visited; } #content a:hover { - color:#5089ba; + color:$link-color-hover; }