Nav 2.0

src/sass/_nav2.sass

@@ -0,0 +1,185 @@
+// Navigation Variables
+$content-width: 100%
+$breakpoint: 799px
+$nav-height: 70px
+$nav-background: hsl(0,0%,100%,0.5)
+$nav-font-color: darkred 
+$link-hover-color: Lightgrey 
+$nav-background2: url("../inc/bg/christmas background.jpg") 0 86% no-repeat
+
+// Blauer klik Hintergrund entfernen
+*:focus 
+  -webkit-tap-highlight-color: transparent
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -khtml-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+  outline: none !important
+    
+// Outer navigation wrapper
+.navigation
+  height: $nav-height
+  background: $nav-background2
+  border-radius: 0 0 2rem 2rem
+  background-size: 100%
+  border-bottom: 4px ridge darkgreen
+
+
+// Logo and branding
+.brand 
+  position: absolute
+  padding-left: 20px
+  float: left
+  line-height: $nav-height
+  text-transform: uppercase
+  font-size: 1.4em
+  font-weight: bold
+  text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
+  a,
+  a:visited 
+    color: $nav-font-color
+    text-decoration: none
+
+
+// Container with no padding for navbar
+.nav-container 
+  max-width: $content-width
+  margin: 0 auto
+
+
+// Navigation 
+nav 
+  float: right
+  font-weight: bold
+  text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
+  ul 
+    list-style: none
+    margin: 0
+    padding: 0
+    background-color: $nav-background
+    li 
+      float: left
+      position: relative
+      a,
+      a:visited 
+        display: block
+        padding: 0 20px
+        line-height: $nav-height
+        color: $nav-font-color
+        text-decoration: none
+        
+        &:hover, &:active, &.active
+          //background: $link-hover-color
+          color: red
+          transform: scale(1.1)
+    
+        &:not(:only-child):after
+          padding-left: 4px
+          content: '▾'
+        
+      // Dropdown list
+      ul li 
+        min-width: 190px
+        a 
+          padding: 15px
+          line-height: 20px
+          
+          
+        
+
+// Dropdown list binds to JS toggle event
+.nav-dropdown 
+  position: absolute
+  display: none
+  z-index: 1
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.20)
+  margin-top: 4px
+  font-weight: bold 
+
+
+/* Mobile navigation */
+
+// Binds to JS Toggle
+.nav-mobile 
+  display: none
+  position: absolute
+  top: 0
+  right: 0
+  height: $nav-height
+  width: $nav-height
+
+@media only screen and (max-width: 798px) 
+  // Hamburger nav visible on mobile only
+  .nav-mobile 
+    display: block
+  
+  nav 
+    width: 100%
+    padding: $nav-height 0 15px 0
+    text-shadow: none 
+    ul 
+      display: none
+      border: 4px ridge darkgreen
+      border-radius: 2rem
+      
+      li 
+        float: none
+        a 
+          padding: 15px
+          line-height: 20px
+        
+        ul li a 
+          padding-left: 30px
+          
+        
+  .nav-dropdown
+    position: static
+    background: none
+    border: none
+    box-shadow: none
+    
+  
+@media screen and (min-width: $breakpoint) 
+  .nav-list 
+    display: block !important
+  
+#nav-toggle 
+  position: absolute
+  left: 18px
+  top: 22px
+  cursor: pointer
+  padding: 10px 0px 16px 0px
+  
+  span,
+  span:before,
+  span:after 
+    cursor: pointer
+    border-radius: 1px
+    height: 5px
+    width: 35px
+    background: $nav-font-color
+    position: absolute
+    display: block
+    content: ''
+    transition: all 300ms ease-in-out
+  
+  span:before 
+    top: -10px
+  
+  span:after 
+    bottom: -10px
+  
+  &.active span 
+    background-color: transparent
+    &:before,
+    &:after 
+      top: 0
+    
+    &:before 
+      transform: rotate(45deg)
+    
+    &:after 
+      transform: rotate(-45deg)
+