Merge pull request #39 from markusjura/styling-updates

WIP - DO NOT MERGE - Documentation overhaul

Author: huntc

app/assets/css/main.sass

@@ -6,7 +6,7 @@
 // Make sure the charset is set appropriately
 
 @import foundation/functions
-$row-width: rem-calc(1200)
+$row-width: rem-calc(1000)
 $small-range: (0em, 55em)
 $medium-range: (55.063em, 64em)
 $large-range: (64.063em, 90em)

app/assets/css/modules/_base.sass

@@ -2,7 +2,7 @@
 body
     background: $navy
     padding: 0
-    margin: 0
+    margin: 0    
 
 .fw-wrapper
     padding: 60px 0px
@@ -30,6 +30,8 @@ body
         background-color: $slate-tt
         h1,h2,h3,h4,p,a
             color: $white
+    &.white
+        background-color: $white
     &.white-ltr
         background-color: $white-ltr
     &.white-dkr
@@ -76,17 +78,15 @@ body
     &.scala
         background-color: $scala-red
         h1,h2,h3,h4,p,a
-            color: $white
+            color: $white            
 
 #site-header
     background: $white
     margin: 0px 0 5px 0
     height: 75px
     border-top: 5px solid $navy
-    position: fixed
     display: block
     width: 100%
-    z-index: 9999
     box-shadow: 0 0 8px rgba(black,.5)
     &.fw-wrapper
         padding: 0
@@ -125,7 +125,7 @@ body
                     height: 70px
                     line-height: 70px
                     padding: 0 30px
-                    color: navy
+                    color: slate-text
                     border-left: 1px solid $white-dkr
                     font-weight: bold
                     font-stretch: condensed
@@ -134,14 +134,14 @@ body
                     transition: all 150ms ease-in-out
                     text-transform: uppercase
                     &:link, &:visited
-                        color: $navy
+                        color: $slate-text
                     &:hover
                         background: rgba(#f0f3f6,0.2)
-                        box-shadow: inset 0 4px 0 $navy,inset 0 0 1px $grey-ltr
+                        box-shadow: inset 0 4px 0 $slate-text,inset 0 0 1px $grey-ltr
                         transition: all 150ms ease-in-out
                         text-decoration: none
                     &:active
-                        color: $navy
+                        color: $slate-text
                 .svg-icon-typesafe-full-color
                     width: 100px
                     height: 40px
@@ -151,8 +151,8 @@ body
         float: left
 
 .page-title
-    min-height: 140px
-    padding: 100px 0 20px 0
+    height: 65px
+    padding: 25px 0 20px 0
     background: transparent url(../images/conductr-bg-strip.png) repeat-x bottom left
     h3
         color: $white
@@ -163,7 +163,7 @@ body
         font-style: italic
 
 .page-content
-    background: $white-ltr
+    background: $white
     min-height: 600px
 
 .left-off-canvas-menu
@@ -205,7 +205,7 @@ body
                 text-decoration: none
             &.active
                 background: $white-dkr
-                color: $navy
+                color: $slate-text
                 padding: 3px 3px 3px 10px
                 border-radius: $br
                 &:after
@@ -214,66 +214,75 @@ body
                     font-weight: 700
                     float: right
 
-.in-page-toc
+#sidebar
     padding: 0
     background: $white
     background: linear-gradient(left,0% $white-ltr,5% $white)
     box-shadow: shadow
     border-radius: $br
     border: 1px solid $white-dkr
     border-bottom: 3px solid $white-dkr
-    h3, h3 a
-        color: $navy
-        &:hover
-            text-decoration: none
-            color: $blue-text
-        &.active
-            color: $blue-text
-    aside > ul
-        padding-top: 14px
-    ul
-        margin: 0
-        padding: 0
-        line-height: 2em
-        > li
-            list-style-type: none
-            font-size: 1.4em
-            padding-left: 20px
-            a
-                display: block
-                margin-left: -20px
+    #toolbar
+        padding: 1em 20px .5em
+        margin-bottom: 1em
+        border-bottom: 1px solid $white-ltr
+        h3
+            display: inline-block
+            font-weight: 500
+        .versionNumber
+            float: right
+    #toc
+        h3, h3 a
+            color: $slate-text
+            &:hover
+                text-decoration: none
+                color: $blue-text
+            &.active
+                color: $blue-text
+        ul
+            padding-top: 14px
+            margin: 0
+            padding: 0
+            line-height: 2em
+            > li
+                list-style-type: none
+                font-size: 1.4em
                 padding-left: 20px
-                border-bottom: 1px solid $white-ltr
-                transition: $anime
-                &.active
-                    border-left: 10px solid $blue
-                    border-bottom: none
-                    background: $white-dkr
-                    font-weight: 700
-                    transition: $anime
-                    color: $navy
-                &:hover
-                    background: $white-ltr
-                    text-decoration: none
+                a
+                    display: block
+                    margin-left: -20px
+                    padding-left: 20px
+                    border-bottom: 1px solid $white-ltr
                     transition: $anime
-            > ul li
-                font-size: 0.8em
-                padding-left: 0
+                    &.active
+                        border-left: 10px solid $blue
+                        border-bottom: none
+                        background: $white-ltr
+                        font-weight: 700
+                        transition: $anime
+                        color: $slate-text
+                    &:hover
+                        background: $white-ltr
+                        text-decoration: none
+                        transition: $anime
+                > ul li
+                    font-size: 0.9em
+                    padding-left: 0
 
 #site-footer
     color: $white
-    .footer-toc aside > ul > li
-        border-top: 1px solid $white-dkr
-        padding-top: 4px
-        margin: 0 0 10px 0
-        float: left
-        width: 100%
+    .footer-toc a:hover
+        text-decoration: none
+        color: $blue-text
+    .footer-toc h2
+        font-size: 1em
+        font-weight: 700
         text-transform: uppercase
-        @media only screen and (min-width: $medium)
-            width: 29%
-            margin-right: 2%
+        margin-bottom: .2rem
         > a
-            color: white
+            color: $red
+    .footer-toc ul > li > a
+        color: $white
 
     .footer-toc ul
         margin: 0
@@ -284,18 +293,6 @@ body
             >ul li
                 padding-left: 0
                 text-transform: none
-        a.active
-            background: $white-dkr
-            display: inline-block
-            padding: 2px 15px 2px 6px
-            color: $navy
-            border-radius: $br
-            &:hover
-                text-decoration: none
-            &:before
-                content: "\203A"
-                margin-right: 5px
-                font-weight: 700
 
     .logo-copyright
         height: 30px
@@ -327,7 +324,7 @@ body
         text-decoration: none
 
 .next-prev-nav
-    background: $white-dkr
+    background: $white-ltr
     padding: 2em
     border-radius: $br
     p
@@ -364,5 +361,19 @@ body
     margin-right: 6px
 
 body .support-detail a:hover
-    color: #ffffff
-    text-decoration: underline
+    color: $blue
+    text-decoration: none
+
+.section-marker
+    position: absolute
+    width: 1em
+    margin-left: -1em
+    display: block
+    text-decoration: none
+    visibility: hidden
+    text-align: center
+    font-weight: normal
+h1:hover > a, h2:hover > a, h3:hover > a, h4:hover > a, h5:hover > a
+    visibility: visible
+    color: inherit
+    text-decoration: none

app/assets/css/modules/_tables.sass

@@ -2,7 +2,7 @@
 table
     color: $navy
     thead tr th
-        background: $blue
+        background: $navy
         color: $white
     tr td
         color: $navy