new colors

demo-386.scss

@@ -5,6 +5,7 @@
 
 $text-color: #000;
 $link-color: #fefe5b;
+$link-background-color: #008106;
 $background-color: #000084;
 $background-contrast-color: #bbbbbb;
 
@@ -38,21 +39,35 @@ a {
  *
  */
 
-nav {
+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    background-color: $background-contrast-color;
+
     ul {
         list-style: none;
-        border: 3px solid #000;
         margin: 0;
         padding: 0.6em 0.8em;
 
-        a {
-            display: block;
-            padding: 0.1em;
-            margin: -0.1em;
+        li {
+            display: inline-block;
+
+            a {
+                display: inline-block;
+                padding: 0.1em;
 
-            &:hover, &.current {
-                color: #fff;
-                background-color: $text-color;
+                &:hover {
+                    background-color: $link-background-color;
+                }
+            }
+
+            &.current {
+                a {
+                    background-color: $link-background-color;
+                }
             }
         }
     }
@@ -114,25 +129,6 @@ footer {
     color: $link-color;
 }
 
-.icon-tiny-hamburger-open,  .icon-tiny-hamburger-close {
-    position: absolute;
-    top: 3px;
-    transition: transform .2s;
-    margin: 3px;
-
-    &:after {
-        content: '\2bc5';
-    }
-}
-
-.icon-tiny-hamburger-open {
-    transform: rotate(0deg);
-}
-
-.icon-tiny-hamburger-close {
-    transform: rotate(180deg);
-}
-
 
 /**
  * tiny-tiny-hamburger
@@ -140,7 +136,7 @@ footer {
  *
  */
 
-.tiny-hamburger {
+.tiny-one-page {
     &__inner {
         padding: 4px 8px 5px;
     }
@@ -170,30 +166,3 @@ footer {
         }
     }
 }
-
-.navbar {
-    position: fixed;
-    width: 100%;
-    text-align: center;
-    background-color: white;
-
-    li {
-        display: inline-block;
-        margin: 0 0.3em;
-
-        a {
-            display: block;
-            transition: all .1s ease-in-out;
-
-            &:hover {
-                transform: scale(1.3);
-            }
-        }
-
-        &.current {
-            a {
-                transform: scale(1.3);
-            }
-        }
-    }
-}

dist/css/demo-386.css

@@ -1 +1,155 @@
-body{color:#000;background-color:#000084;font-family:PxPlus IBM VGA8,sans-serif;font-style:normal;font-size:1.2rem}:first-letter{color:#fefe5b}a{color:#000;text-decoration:none}nav ul{list-style:none;border:3px solid #000;margin:0;padding:.6em .8em}nav ul a{display:block;padding:.1em;margin:-.1em}nav ul a.current,nav ul a:hover{color:#fff;background-color:#000}main{max-width:960px;margin:2em auto 0}footer{text-align:center;font-size:3rem;width:100%;background:#000;padding:.8em 0}footer i{color:#fff!important}.section{padding:4em;margin:1em 0;line-height:1.8;background-color:#bbb}[class*=" icon-tiny"],[class^=icon-tiny]{font-family:PxPlus IBM VGA8,sans-serif!important;font-style:normal;color:#fefe5b}.icon-tiny-hamburger-close,.icon-tiny-hamburger-open{position:absolute;top:3px;transition:transform .2s;margin:3px}.icon-tiny-hamburger-close:after,.icon-tiny-hamburger-open:after{content:"\2BC5"}.icon-tiny-hamburger-open{transform:rotate(0deg)}.icon-tiny-hamburger-close{transform:rotate(180deg)}.tiny-hamburger__inner{padding:4px 8px 5px}.tiny-hamburger__modal{height:auto;max-height:0;overflow:hidden;transition:max-height .2s}.tiny-hamburger__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:.3em .5em}.tiny-hamburger__button:hover{cursor:pointer;outline:none;background-color:#bbb}.tiny-hamburger__button:focus{outline:none}.navbar{position:fixed;width:100%;text-align:center;background-color:#fff}.navbar li{display:inline-block;margin:0 .3em}.navbar li a{display:block;transition:all .1s ease-in-out}.navbar li.current a,.navbar li a:hover{transform:scale(1.3)}
+/**
+ * variables
+ *
+ */
+
+/**
+ * default elements
+ *
+ */
+
+body {
+  color: #000;
+  background-color: #000084;
+  font-family: "PxPlus IBM VGA8", sans-serif;
+  font-style: normal;
+  font-size: 1.2rem;
+}
+
+*:first-letter {
+  color: #fefe5b;
+}
+
+a {
+  color: #000;
+  text-decoration: none;
+}
+
+/**
+ * navigation
+ *
+ *
+ */
+
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  background-color: #bbbbbb;
+}
+
+.navbar ul {
+  list-style: none;
+  margin: 0;
+  padding: 0.6em 0.8em;
+}
+
+.navbar ul li {
+  display: inline-block;
+}
+
+.navbar ul li a {
+  display: inline-block;
+  padding: 0.1em;
+}
+
+.navbar ul li a:hover {
+  background-color: #008106;
+}
+
+.navbar ul li.current a {
+  background-color: #008106;
+}
+
+/**
+ *
+ *
+ */
+
+main {
+  max-width: 960px;
+  margin: 2em auto 0;
+}
+
+/**
+ * footer
+ *
+ *
+ */
+
+footer {
+  text-align: center;
+  font-size: 3rem;
+  width: 100%;
+  background: #000;
+  padding: 0.8em 0;
+}
+
+footer i {
+  color: #fff !important;
+}
+
+/**
+ * section
+ *
+ *
+ */
+
+.section {
+  padding: 4em;
+  margin: 1em 0;
+  line-height: 1.8;
+  background-color: #bbbbbb;
+}
+
+/**
+ * icons
+ *
+ *
+ */
+
+[class^=icon-tiny],
+[class*=" icon-tiny"] {
+  font-family: "PxPlus IBM VGA8", sans-serif !important;
+  font-style: normal;
+  color: #fefe5b;
+}
+
+/**
+ * tiny-tiny-hamburger
+ *
+ *
+ */
+
+.tiny-one-page__inner {
+  padding: 4px 8px 5px;
+}
+
+.tiny-one-page__modal {
+  height: auto;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s;
+}
+
+.tiny-one-page__button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0.3em 0.5em;
+}
+
+.tiny-one-page__button:hover {
+  cursor: pointer;
+  outline: none;
+  background-color: #bbbbbb;
+}
+
+.tiny-one-page__button:focus {
+  outline: none;
+}
+