projects / web.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 5b8a31e)
develop a new style
authorRalf Jung <post@ralfj.de>
Thu, 8 Oct 2015 18:23:28 +0000 (20:23 +0200)
committerRalf Jung <post@ralfj.de>
Thu, 8 Oct 2015 18:23:28 +0000 (20:23 +0200)
_includes/menu-level.html patch | blob | history
_layouts/default.html patch | blob | history
_plugins/menu.rb patch | blob | history
style.scss patch | blob | history

diff --git a/_includes/menu-level.html b/_includes/menu-level.html
index df0c6eafd63fddee9b706443173271139bc7da51..2b6ca01d25e5ea86b3bc8de57b1c8d5193bc3e49 100644 (file)
--- a/_includes/menu-level.html
+++ b/_includes/menu-level.html
@@ -1,6 +1,6 @@
 <ul><!--{% for item in include.menu %}
 <ul><!--{% for item in include.menu %}
-    --><li class="{{ item.class }}"><a href="{{ item.url }}">{{ item.title }}</a></li><!--
+    --><li class="{{ item.class }}"><a class="{{ item.class }}" href="{{ item.url }}">{{ item.title }}</a></li><!--
     {% if item.sub %}
     {% if item.sub %}
-        -->{% include menu-level.html menu=item.sub %}<!--
+        --><li class="sub">{% include menu-level.html menu=item.sub %}</li><!--
     {% endif %}
     {% endif %}
-{% endfor %}--></ul>
\ No newline at end of file
+{% endfor %}--></ul>
diff --git a/_layouts/default.html b/_layouts/default.html
index bd9f1f65cebec5fb577168a7fa65a6870b0d0c90..b373206c81f4810f52521c68c97cebb9c4d36b24 100644 (file)
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -14,20 +14,19 @@
     {% if page.rss %}<link rel="alternate" type="application/rss+xml" title="{{ site.blog.title }}" href="/blog/feed.xml" />{% endif %}
   </head>
 
     {% if page.rss %}<link rel="alternate" type="application/rss+xml" title="{{ site.blog.title }}" href="/blog/feed.xml" />{% endif %}
   </head>
 
-
   <body><div id="-frame">
   <body><div id="-frame">
-  
-    <header id="-title">
-      <h1>{{ page.title }}</h1>
-    </header>
 
     <nav id="-navi">
       {% assign menu = site.pages | menu: page.url %}
       {% include menu-level.html menu=menu %}
     </nav>
 
     <nav id="-navi">
       {% assign menu = site.pages | menu: page.url %}
       {% include menu-level.html menu=menu %}
     </nav>
-
+  
     <article id="-content">
     <article id="-content">
-      {{ content }}
+        <header id="-title">
+          <h1>{{ page.title }}</h1>
+        </header>
+
+        {{ content }}
     </article>
 
   </div></body>
     </article>
 
   </div></body>
diff --git a/_plugins/menu.rb b/_plugins/menu.rb
index 37c0851f960ac78385e2c5c5f48c4473182cd8c1..48befa744554a401219d35667b016724eae50881 100644 (file)
--- a/_plugins/menu.rb
+++ b/_plugins/menu.rb
@@ -30,6 +30,10 @@ module Jekyll
                 sub_nodes.each { |page| page['class'] = 'child' }
               end
             end
                 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
             # store menu node
             result.push(menu_node)
           end
diff --git a/style.scss b/style.scss
index 0b509232297bdde2054749be2c28805cacdf20cc..0fa1fa77e82b530a5b27e1e8e1389f0d0fd344b3 100644 (file)
--- a/style.scss
+++ b/style.scss
@@ -32,59 +32,54 @@ h4 {
 
 /* Layout and Color stuff */
 $navi-width:      11em;
 
 /* 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;
 
 $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;
 $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 */
 
 
 /* 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;
     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;
     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 */
 }
 
 /* The content of the frame */
-#-title {
-    border-bottom: solid $title-color 2px;
-    text-align: center;
-}
 #-title h1 {
 #-title h1 {
-    padding: 0 0.7em;
-    margin-bottom: 0;
+    margin: 0;
 }
 #-content {
 }
 #-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 {
     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;
     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;
     /* 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;
     /* 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 */
 }
 
 /* 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;
     body, #-frame, #-title, #-content, #-navi {
         margin: 0;
+        padding: 0;
+        height: auto;
         width: auto;
         max-width: none;
         clear: both;
         width: auto;
         max-width: none;
         clear: both;
-    }
-    #-navi {
-        /* Place navi above the title */
         float: none;
         position: static;
         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;
 
     code {
         padding: 0.1em 0.2em;
-        background-color: $outer-background-color;
         font-family: monospace;
         font-size: 82%;
     }
     pre {
         padding: 0.6em;
         font-family: monospace;
         font-size: 82%;
     }
     pre {
         padding: 0.6em;
-        background-color: $outer-background-color;
     }
     pre code {
     }
     pre code {
+        background-color: $code-background-color;
         padding: 0;
     }
 
         padding: 0;
     }
 
@@ -226,12 +226,10 @@ body { /* This centers us in the page, and handles the "too wide" case */
         line-height: 1.3;
     }
     a {
         line-height: 1.3;
     }
     a {
+        text-decoration: none;
         color:$link-color;
     }
         color:$link-color;
     }
-    a:visited {
-        color:$link-color-visited;
-    }
-    a:hover {
-        color:$link-color-hover;
+    a:hover, a:focus {
+        text-decoration: underline;
     }
 }
     }
 }
sources for my website