Procházet zdrojové kódy

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 před 12 roky
rodič
revize
ecb2fd8167
2 změnil soubory, kde provedl 15 přidání a 11 odebrání
  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