From: Ralf Jung Date: Thu, 8 Oct 2015 21:19:38 +0000 (+0200) Subject: make better use of medium width; more menu space tuning X-Git-Url: https://git.ralfj.de/web.git/commitdiff_plain/1bb7244af87b4b86590e358352a3d424f9cf0164 make better use of medium width; more menu space tuning --- diff --git a/style.scss b/style.scss index 2539cd0..53116bd 100644 --- a/style.scss +++ b/style.scss @@ -9,7 +9,9 @@ $navi-indent: 1.2em; $frame-max-width: 50em; $intrusion-width: 1.0em; $outer-margin: 0.8em; -$full-content-width: $frame-max-width + $navi-width + 2*$outer-margin + $intrusion-width; + +$small-width: $frame-max-width + 2*$outer-margin; +$medium-width: $small-width + $intrusion-width + $navi-width; $background-color: white; $text-color: #313131; @@ -67,7 +69,7 @@ body { /* This centers us in the page, and handles the "too wide" case */ padding: 0; margin: 0 auto; background-color: $background-color; - max-width: calc(#{$full-content-width + $navi-width} + 1px); /* add the right-hand "navi" for centering - and the border... ;-) */ + max-width: calc(#{$medium-width + $navi-width} + 1px); /* add the right-hand "navi" space for centering - and the border... ;-) */ } #-frame { /* Add a frame, full height */ margin: 0 $navi-width; @@ -92,7 +94,7 @@ body { /* This centers us in the page, and handles the "too wide" case */ /* Put it into the right spot */ float: left; position: relative; - left: -#{$navi-width}; + left: calc(-#{$navi-width} - 1px); /* Make it not take space away from the main text */ height: 0; overflow: visible; @@ -106,18 +108,18 @@ body { /* This centers us in the page, and handles the "too wide" case */ } a { display: block; - width: calc(100% - 2*0.1em - 2*1px + #{$intrusion-width}); - padding: 0 0.1em; - /* Always have a border, for the width to stay constant */ - border: solid transparent 1px; + width: calc(100% - 2*0.1em - 1px + #{$intrusion-width}); /* minus the padding, the border, and plus how much we want to overlap */ + padding: 0.08em 0.1em 0.02em; /* top left-right bottom */ + /* Always have *one* border, for the width to stay constant */ + border-left: solid transparent 1px; font-size:110%; text-align: left; } a.current { - padding: 0.05em 0.1em; + padding-top: 0.12em; border: solid $text-color 1px; - border-right: solid $background-color 1px; + border-right: none; /* solid $background-color 1px; */ background-color: $background-color; } a.root { @@ -128,14 +130,18 @@ body { /* This centers us in the page, and handles the "too wide" case */ } /* Medium-size screens */ -@media screen and (max-width:#{ $full-content-width } ) { +@media screen and (max-width:#{ $medium-width + $navi-width } ) { + body { + margin-left: 0; + max-width: calc(#{ $medium-width} + 1px); /* add the left-hand *only* navi space for centering - and the border... ;-) */ + } #-frame { margin-right: 0; } } /* Small screens */ -@media screen and (max-width:#{ $frame-max-width + 2*$outer-margin } ) { +@media screen and (max-width:#{ $small-width } ) { body, #-frame, #-title, #-content, #-navi { margin: 0; padding: 0;