Jelajahi Sumber

Darken the nav dropdown menus and add a slight text shadow

This is to make the text easier to read when the site primary color is
on the lighter side.

Also increase the color intensity on the social icons in the footer.
Markus Ochel 12 tahun lalu
induk
melakukan
ecb2fd8167
2 mengubah file dengan 15 tambahan dan 11 penghapusan
  1. 8 6
      site/static/css/setup-theme.styl
  2. 7 5
      site/static/css/theme.styl

+ 8 - 6
site/static/css/setup-theme.styl

@@ -58,17 +58,19 @@ setupTheme($primaryColor = $blueColor, $secondaryColor = $lightGrey, $linkColor
       html.no-touch &:hover
       html.touch &:active
         background: darken($primaryColor, 10%)
+      &.open
+        background: darken($primaryColor, 10%)
     > ul
-      background: $primaryColor
+      background: darken($primaryColor, 10%)
       &:before
-        background: $primaryColor
+        background: darken($primaryColor, 10%)
       > li
         a
           html.no-touch &:hover
           html.touch &:active
-            background: darken($primaryColor, 5%)
+            background: darken($primaryColor, 14%)
           &.active
-            background: darken($primaryColor, 10%)
+            background: darken($primaryColor, 20%)
 
   .doc-nav
     > div
@@ -111,7 +113,7 @@ setupTheme($primaryColor = $blueColor, $secondaryColor = $lightGrey, $linkColor
       border-color: $primaryColor
     .social-icons
       a
-        color: $primaryColor
+        color: darken($primaryColor, 10%)
         html.no-touch &:hover
         html.touch &:active
-          color: darken($primaryColor, 10%)
+          color: darken($primaryColor, 20%)

+ 7 - 5
site/static/css/theme.styl

@@ -72,6 +72,7 @@
 
     &.open
       height: $iconSize+11
+      background: darken($primaryColor, 10%)
 
     span
       display: block
@@ -101,7 +102,8 @@
     list-style-type: none
     padding: 0
     margin: 0
-    background: $primaryColor
+    text-shadow: 0 1px 1px rgba(0,0,0,0.2)
+    background: darken($primaryColor, 10%)
     box-shadow(-4px 4px 0 rgba(0, 0, 0, 0.1))
     overflow-y: scroll
     overflow-x: hidden
@@ -119,10 +121,10 @@
 
         html.no-touch &:hover
         html.touch &:active
-          background: darken($primaryColor, 5%)
+          background: darken($primaryColor, 14%)
 
         &.active
-          background: darken($primaryColor, 10%)
+          background: darken($primaryColor, 20%)
 
         i
           margin-right: 0.5em
@@ -619,12 +621,12 @@ footer
       font-size: 30px
       line-height: 30px
       text-align: center
-      color: $primaryColor
+      color: darken($primaryColor, 10%)
       overflow: hidden
 
       html.no-touch &:hover
       html.touch &:active
-        color: darken($primaryColor, 10%)
+        color: darken($primaryColor, 20%)
 
   .footer-html