Browse Source

updating navbar & footer styles, adding dotted links in jumbotron and footer

davegandy 11 years ago
parent
commit
e2ef7f022c

+ 1 - 1
src/_includes/navbar.html

@@ -1,4 +1,4 @@
-<div class="navbar navbar-default navbar-static-top hidden-print">
+<div class="navbar navbar-inverse navbar-static-top hidden-print">
   <div class="container">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

+ 1 - 1
src/assets/less/site/bootstrap/jumbotron.less

@@ -1,7 +1,7 @@
 .jumbotron {
   background-color: @jumbotron-bg;
 //  #gradient > .directional(@jumbotron-bg, mix(@jumbotron-bg, @jumbotron-bg-dark, 0%), -40deg);
-  border-bottom: 1px solid @jumbotron-bg-dark;
+  border-bottom: 1px solid @jumbotron-border;
   margin-bottom: 0;
   &, h1 { color: @jumbotron-text; }
   padding: 60px 0 40px;

+ 53 - 40
src/assets/less/site/bootstrap/variables.less

@@ -1,45 +1,5 @@
 ---
 ---
-// BOOTSTRAP OVERRIDES
-// -------------------
-
-// Links
-@link-color:            lighten(@jumbotron-bg, 10%);
-@link-hover-color:      @jumbotron-bg;
-
-// Typography
-@font-family-sans-serif:  proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
-@font-family-serif:       museo-slab, Georgia, "Times New Roman", Times, serif;
-@headings-font-family:    @font-family-serif;
-
-
-// Form states and alerts
-@state-warning-text:             mix(@yellow-dark, @yellow-darker, 80%);
-@state-warning-bg:               @yellow-lighter;
-@state-warning-border:           darken(spin(@state-warning-bg, -10), 7%);
-
-@state-danger-text:              @red;
-@state-danger-bg:                @red-lighter;
-@state-danger-border:            darken(spin(@state-danger-bg, -10), 4%);
-
-@state-success-text:             mix(@green-darker, @green-dark, 30%);
-@state-success-bg:               @green-lighter;
-@state-success-border:           darken(spin(@state-success-bg, -10), 13%);
-
-@state-info-text:                mix(@blue-dark, @blue, 50%);
-@state-info-bg:                  @blue-lighter;
-@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
-
-// Navbar
-@navbar-height:                     40px;
-@navbar-inverse-brand-color:        #fff;
-
-//@brand-primary:         @blue-dark;
-//@brand-success:         @green;
-//@brand-warning:         @yellow-dark;
-//@brand-danger:          @red;
-//@brand-info:            @blue;
-
 // SITE VARIABLES
 // --------------
 
@@ -100,5 +60,58 @@
 @jumbotron-bg:          desaturate(#1d9d74, 0%);
 @jumbotron-bg-dark:     darken(@jumbotron-bg, 10%);
 
+@jumbotron-border:      mix(@jumbotron-bg, @jumbotron-bg-dark, 75%);
 @jumbotron-text:        #fff;
 
+
+
+// BOOTSTRAP OVERRIDES
+// -------------------
+
+// Links
+@link-color:            lighten(@jumbotron-bg, 10%);
+@link-hover-color:      @jumbotron-bg;
+
+// Typography
+@font-family-sans-serif:  proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-serif:       museo-slab, Georgia, "Times New Roman", Times, serif;
+@headings-font-family:    @font-family-serif;
+
+
+// Form states and alerts
+@state-warning-text:             mix(@yellow-dark, @yellow-darker, 80%);
+@state-warning-bg:               @yellow-lighter;
+@state-warning-border:           darken(spin(@state-warning-bg, -10), 7%);
+
+@state-danger-text:              @red;
+@state-danger-bg:                @red-lighter;
+@state-danger-border:            darken(spin(@state-danger-bg, -10), 4%);
+
+@state-success-text:             mix(@green-darker, @green-dark, 30%);
+@state-success-bg:               @green-lighter;
+@state-success-border:           darken(spin(@state-success-bg, -10), 13%);
+
+@state-info-text:                mix(@blue-dark, @blue, 50%);
+@state-info-bg:                  @blue-lighter;
+@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
+
+// Navbar
+@navbar-height:                     40px;
+@navbar-inverse-brand-color:        #fff;
+
+// Reset inverted navbar basics
+@navbar-inverse-color:                      mix(@jumbotron-bg, #fff, 50%);
+@navbar-inverse-bg:                         @jumbotron-bg;
+@navbar-inverse-border:                     @jumbotron-border;
+
+// Inverted navbar links
+@navbar-inverse-link-color:                 mix(@jumbotron-bg, #fff, 35%);
+@navbar-inverse-link-hover-color:           #fff;
+@navbar-inverse-link-active-bg:             @navbar-inverse-border;
+
+
+//@brand-primary:         @blue-dark;
+//@brand-success:         @green;
+//@brand-warning:         @yellow-dark;
+//@brand-danger:          @red;
+//@brand-info:            @blue;

+ 9 - 12
src/assets/less/site/footer.less

@@ -1,22 +1,19 @@
 #footer {
   //  #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
   background-color: @jumbotron-bg;
-  border-top: 1px solid mix(@jumbotron-bg, @jumbotron-bg-dark, 50%);
+  border-top: 1px solid @jumbotron-border;
+  color: mix(@jumbotron-text, @jumbotron-bg, 60%);
+  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
   a {
-    color: #fff;
-    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+    color: mix(@jumbotron-text, @jumbotron-bg, 80%);
+    border-bottom: dotted 1px mix(@jumbotron-text, @jumbotron-bg, 60%);
     &:hover {
-      color: #fff;
+      color: @jumbotron-text;
+      text-decoration: none;
+      border-bottom: solid 1px @jumbotron-text;
     }
-
-  }
-
-  .container {
-    padding-top: 40px;
   }
-
-  color: mix(@jumbotron-bg, #fff, 35%);
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  .container { padding-top: 40px; }
   .project { margin-top: 10px; }
 }
 

+ 13 - 5
src/assets/less/site/jumbotron-carousel.less

@@ -35,18 +35,26 @@
     background-color: @jumbotron-bg;
     text-shadow: 0 1px 0 rgba(0,0,0,0.15);
     &:hover {
-      background-color: @jumbotron-text;
+      background-color: mix(@jumbotron-text, @jumbotron-bg, 95%);
+      border-color: mix(@jumbotron-text, @jumbotron-bg, 95%);
       color: @jumbotron-bg;
-      text-shadow: 0 -1px 0 rgba(0,0,0,0.15);
+      text-shadow: 0 -1px 0 @jumbotron-text;
     }
   }
   .shameless-self-promotion {
     margin-top: @buffer-lg;
     font-size: @font-size-base;
     line-height: @line-height-base;
-    color: mix(@jumbotron-text, @jumbotron-bg, 40%);
+    color: mix(@jumbotron-text, @jumbotron-bg, 50%);
     text-shadow: 0 1px 0 rgba(0,0,0,0.15);
-    a { color: mix(@jumbotron-text, @jumbotron-bg, 70%); }
-    a:hover { color: mix(@jumbotron-text, @jumbotron-bg, 100%); }
+    a {
+      color: mix(@jumbotron-text, @jumbotron-bg, 70%);
+      border-bottom: dotted 1px mix(@jumbotron-text, @jumbotron-bg, 50%);
+      &:hover {
+        color: @jumbotron-text;
+        text-decoration: none;
+        border-bottom: solid 1px @jumbotron-text;
+      }
+    }
   }
 }

+ 1 - 1
src/assets/less/site/social-buttons.less

@@ -5,5 +5,5 @@
   text-align: center;
   background-color: #f5f5f5;
   border-top: 1px solid #fff;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #eee;
 }