Browse Source

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 năm trước cách đây
mục cha
commit
ecb2fd8167
2 tập tin đã thay đổi với 15 bổ sung11 xóa
  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