From: Ralf Jung Date: Thu, 8 Oct 2015 18:23:28 +0000 (+0200) Subject: develop a new style X-Git-Url: https://git.ralfj.de/web.git/commitdiff_plain/56d4ba025a1ac4a2a69e05b1d79f2e9bde199883 develop a new style --- diff --git a/_includes/menu-level.html b/_includes/menu-level.html index df0c6ea..2b6ca01 100644 --- a/_includes/menu-level.html +++ b/_includes/menu-level.html @@ -1,6 +1,6 @@ \ No newline at end of file +{% endfor %}--> diff --git a/_layouts/default.html b/_layouts/default.html index bd9f1f6..b373206 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -14,20 +14,19 @@ {% if page.rss %}{% endif %} -
- -
-

{{ page.title }}

-
- +
- {{ content }} +
+

{{ page.title }}

+
+ + {{ content }}
diff --git a/_plugins/menu.rb b/_plugins/menu.rb index 37c0851..48befa7 100644 --- a/_plugins/menu.rb +++ b/_plugins/menu.rb @@ -30,6 +30,10 @@ module Jekyll sub_nodes.each { |page| page['class'] = 'child' } end end + # remember the root + if base == "" + menu_node['class'] += ' root' + end # store menu node result.push(menu_node) end diff --git a/style.scss b/style.scss index 0b50923..0fa1fa7 100644 --- a/style.scss +++ b/style.scss @@ -32,59 +32,54 @@ h4 { /* Layout and Color stuff */ $navi-width: 11em; -$outer-margin: 1em; -$frame-max-width: 52em; +$navi-indent: 1.2em; +$frame-max-width: 50em; +$intrusion-width: 0.8em; +$outer-margin: 0.8em; +$full-content-width: $frame-max-width + $navi-width + 2*$outer-margin + $intrusion-width; $frame-color: #121212; $title-color: #08f; $navi-color: #36ff00; $current-color: #ffa700; -$outer-background-color: #505050; -$inner-background-color: #252525; -$text-color: #DDD; +$background-color: white; +$text-color: #313131; +$code-background-color: #505050; $light-text-color: #888; -$link-color: #9ed2ff; -$link-color-visited: #bfe1ff; -$link-color-hover: #5089ba; +$link-color: #268BD2; /* General page structure */ body { /* This centers us in the page, and handles the "too wide" case */ - padding: $outer-margin; + padding: 0; margin: 0 auto; color: $text-color; - background-color: $outer-background-color; - max-width: calc(#{$frame-max-width + 2 * $navi-width} + 2px); + background-color: $background-color; + max-width: calc(#{$full-content-width + $navi-width} + 1px); /* add the right-hand "navi" for centering - and the border... ;-) */ } -#-frame { /* Add a frame */ +#-frame { /* Add a frame, full height */ 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); + padding-top: 1em; + border-left: solid $text-color 1px; + min-height: calc(100vh); } /* The content of the frame */ -#-title { - border-bottom: solid $title-color 2px; - text-align: center; -} #-title h1 { - padding: 0 0.7em; - margin-bottom: 0; + margin: 0; } #-content { - padding: 0.7em; + margin-left: $intrusion-width; + padding: $outer-margin; padding-top: 1px; /* If we use 0 here, things get ugly. What?!? */ } /* Navigation menu */ #-navi { - background-color: $outer-background-color; - /* No border, no padding, so all the width computations become easy. */ padding: 0; margin: 0; - width: $navi-width; + margin-left: -#{$navi-indent}; + width: #{$navi-width + $navi-indent}; /* Put it into the right spot */ float: left; position: relative; @@ -92,94 +87,100 @@ body { /* This centers us in the page, and handles the "too wide" case */ /* Make it not take space away from the main text */ height: 0; overflow: visible; -} -#-navi ul { - margin: 0px; - padding: 0px; - list-style-type: none; -} -#-navi ul ul { - /* Indentation for nested nodes */ - margin-left: 1.2em; -} -#-navi li { - /* Border around the links */ - margin-bottom:0.1em; - 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; -} -#-navi li a { - display: block; - width: 100%; + + ul { + margin: 0; + padding: 0; + list-style-type: none; + /* Indentation for nested nodes */ + margin-left: $navi-indent; + } + 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; - color: $link-color; - font-size:110%; - text-decoration: none; - text-align: center; -} -#-navi li.current -{ - border-color: $current-color; -} -#-navi li:hover { - border-color: $title-color; - border-radius: 0; + color: $link-color; + font-size:110%; + text-decoration: none; + text-align: left; + } + a.current { + padding-top: 0.1em; + margin: 0.05em 0; + border: solid $text-color 1px; + border-right: solid $background-color 1px; + background-color: $background-color; + } + a.root { + margin-top: 0.5em; + border-bottom: solid $text-color 1px; + margin-bottom: 0.3em; + } + a:hover, a:focus { + text-decoration: underline; + } } -#-navi li:hover a { - color: $text-color; + +/* Medium-size screens */ +@media screen and (max-width:#{ $full-content-width } ) { + #-frame { + margin-right: 0; + } } /* Small screens */ -@media screen and (max-width:#{ $frame-max-width + 2 * $outer-margin } ) { +@media screen and (max-width:#{ $frame-max-width } ) { body, #-frame, #-title, #-content, #-navi { margin: 0; + padding: 0; + height: auto; width: auto; max-width: none; clear: both; - } - #-navi { - /* Place navi above the title */ float: none; position: static; - background-color: $inner-background-color; - padding: 0; - height: auto; - } - #-navi ul, #-navi ul ul, #-navi li, #-navi li a { - margin: 0; - padding: 0; - display: inline; - } - #-navi > ul { - padding: 0.3em; - display: block; - border-bottom: solid $navi-color 2px; } - /* Display only parent and children, and deocare them appropriately */ - #-navi li { - display:inline-block; - margin: 0 0.2em; + #-content { + padding: $outer-margin; } - #-navi li.sibling { - display:none; - } - #-navi li.parent:before, #-navi li.current:before { - content: "» "; - } - #-navi li.child:before { - content: "» "; - } - #-navi li.child + li:before { - content: "| "; - } - #-navi li { - border: none; - } - #-navi li.current a { - text-decoration: underline; + #-navi { + padding: $outer-margin; + border-bottom: solid $text-color 1px; + + ul { + display: inline; + padding: 0; + margin: 0; + } + li { + display: inline-block; + } + /* Display only parent and children, and decorate them appropriately */ + a { + display:inline-block; + margin: 0 0.3em !important; + padding: 0 !important; + border: none !important; + width: auto !important; + } + a.sibling { + display:none; + } + a.current { + text-decoration: underline; + } + li.parent::before, li.current:before { + content: "»"; + } + li.child::before { + content: "»"; + } + li.child + li.child::before { + content: "|"; + } } } @@ -209,15 +210,14 @@ body { /* This centers us in the page, and handles the "too wide" case */ code { padding: 0.1em 0.2em; - background-color: $outer-background-color; font-family: monospace; font-size: 82%; } pre { padding: 0.6em; - background-color: $outer-background-color; } pre code { + background-color: $code-background-color; padding: 0; } @@ -226,12 +226,10 @@ body { /* This centers us in the page, and handles the "too wide" case */ line-height: 1.3; } a { + text-decoration: none; color:$link-color; } - a:visited { - color:$link-color-visited; - } - a:hover { - color:$link-color-hover; + a:hover, a:focus { + text-decoration: underline; } }