From 3921e00bc5a589033f1ba737a1ef45ecdbd7e383 Mon Sep 17 00:00:00 2001
From: jpl
Date: Tue, 31 Jan 2017 18:55:00 +0100
Subject: Refs #2482: StyleAssets gardening

---
 app/assets/stylesheets/_layout.sass                |  23 ++
 app/assets/stylesheets/application_new.sass        |  12 +-
 app/assets/stylesheets/base/_config.sass           |  21 ++
 app/assets/stylesheets/components/_buttons.sass    |  22 ++
 app/assets/stylesheets/components/_main_nav.sass   | 306 +++++++++++++++++++++
 .../stylesheets/components/_page_header.sass       |  10 +
 .../stylesheets/main/compliance_check_tasks.sass   |   1 -
 app/assets/stylesheets/main/subscriptions.sass     |   5 -
 app/assets/stylesheets/main/timebands.sass         |   0
 app/assets/stylesheets/main/users.sass             |   5 -
 .../stylesheets/main/vehicle_journey_imports.sass  |   1 -
 app/assets/stylesheets/main/welcome.sass           |   3 -
 app/assets/stylesheets/new/_config.sass            |  21 --
 app/assets/stylesheets/new/_fonts.sass             |  31 ---
 app/assets/stylesheets/new/_layout.sass            |  17 --
 app/assets/stylesheets/new/_typography.sass        |  22 --
 .../stylesheets/new/components/_main_nav.sass      | 305 --------------------
 app/assets/stylesheets/typography/_fonts.sass      |  31 +++
 app/assets/stylesheets/typography/_typography.sass |  22 ++
 19 files changed, 442 insertions(+), 416 deletions(-)
 create mode 100644 app/assets/stylesheets/_layout.sass
 create mode 100644 app/assets/stylesheets/base/_config.sass
 create mode 100644 app/assets/stylesheets/components/_buttons.sass
 create mode 100644 app/assets/stylesheets/components/_main_nav.sass
 create mode 100644 app/assets/stylesheets/components/_page_header.sass
 delete mode 100644 app/assets/stylesheets/main/compliance_check_tasks.sass
 delete mode 100644 app/assets/stylesheets/main/subscriptions.sass
 delete mode 100644 app/assets/stylesheets/main/timebands.sass
 delete mode 100644 app/assets/stylesheets/main/users.sass
 delete mode 100644 app/assets/stylesheets/main/vehicle_journey_imports.sass
 delete mode 100644 app/assets/stylesheets/main/welcome.sass
 delete mode 100644 app/assets/stylesheets/new/_config.sass
 delete mode 100644 app/assets/stylesheets/new/_fonts.sass
 delete mode 100644 app/assets/stylesheets/new/_layout.sass
 delete mode 100644 app/assets/stylesheets/new/_typography.sass
 delete mode 100644 app/assets/stylesheets/new/components/_main_nav.sass
 create mode 100644 app/assets/stylesheets/typography/_fonts.sass
 create mode 100644 app/assets/stylesheets/typography/_typography.sass

diff --git a/app/assets/stylesheets/_layout.sass b/app/assets/stylesheets/_layout.sass
new file mode 100644
index 000000000..0a5006333
--- /dev/null
+++ b/app/assets/stylesheets/_layout.sass
@@ -0,0 +1,23 @@
+//----------//
+//  Layout  //
+//----------//
+
+html
+  box-sizing: border-box
+
+  *
+    box-sizing: inherit
+
+body
+  padding-top: 40px
+  font-family: $base-font-family
+  font-size: $base-font-size
+  line-height: $line-height
+  color: $darkgrey
+  background-color: #fff
+
+.page_header
+  padding: 40px 35px 0 35px
+
+.page_content
+  padding: 20px 35px 0 35px
diff --git a/app/assets/stylesheets/application_new.sass b/app/assets/stylesheets/application_new.sass
index 3713be739..74919f7b4 100644
--- a/app/assets/stylesheets/application_new.sass
+++ b/app/assets/stylesheets/application_new.sass
@@ -2,11 +2,13 @@
 //  Custom  //
 //----------//
 
-@import 'new/config'
+@import 'base/config'
 
-@import 'new/fonts'
-@import 'new/typography'
+@import 'typography/fonts'
+@import 'typography/typography'
 
-@import 'new/layout'
+@import 'layout'
 
-@import 'new/components/*'
+@import 'components/buttons'
+@import 'components/main_nav'
+@import 'components/page_header'
diff --git a/app/assets/stylesheets/base/_config.sass b/app/assets/stylesheets/base/_config.sass
new file mode 100644
index 000000000..2660ae3cb
--- /dev/null
+++ b/app/assets/stylesheets/base/_config.sass
@@ -0,0 +1,21 @@
+//-------------//
+//  Variables  //
+//-------------//
+
+// Typography
+$base-font-size: 1.4rem
+$line-height: 1.4
+$h1-size: 3rem
+$h2-size: 1.8rem
+
+$base-font-family: 'Open Sans', sans-serif
+
+// Colors
+$darkblue: #004d87
+$blue: #007fbb
+
+$darkgrey: #4b4b4b
+$grey: #a4a4a4
+
+$green: #006d5c
+$red: #e22019
diff --git a/app/assets/stylesheets/components/_buttons.sass b/app/assets/stylesheets/components/_buttons.sass
new file mode 100644
index 000000000..32f0def24
--- /dev/null
+++ b/app/assets/stylesheets/components/_buttons.sass
@@ -0,0 +1,22 @@
+//-----------//
+//  Buttons  //
+//-----------//
+
+.btn
+  &.btn-primary
+    background-color: $darkblue
+    border-color: darken($darkblue, 2.5%)
+    color: #fff
+
+    &:hover, &:focus, &.focus, &:active, &.active,
+    .open > .btn-primary.dropdown-toggle
+      background-color: darken($darkblue, 2.5%)
+      border-color: darken($darkblue, 2.5%)
+      color: #fff
+
+.btn-helper-txt
+  font-size: 0.85em
+  margin: 5px 0 0 0
+
+  &:first-child
+    margin: 0 0 5px 0
diff --git a/app/assets/stylesheets/components/_main_nav.sass b/app/assets/stylesheets/components/_main_nav.sass
new file mode 100644
index 000000000..c4dbc95e4
--- /dev/null
+++ b/app/assets/stylesheets/components/_main_nav.sass
@@ -0,0 +1,306 @@
+$menuH: 40px
+$menuW: 300px
+
+#main_nav
+  display: block
+  height: $menuH
+  position: fixed
+  top: 0
+  left: 0
+  right: 0
+  z-index: 1040
+
+  .brandname
+    font-size: $h2-size
+    font-weight: 700
+    line-height: $menuH
+    padding-left: 10px
+    opacity: 0.6
+
+  #menu_left
+    position: absolute
+    top: 0
+    left: 0
+    z-index: 1
+
+    .openMenu, .closeMenu
+      display: inline-block
+      width: $menuH
+      height: $menuH
+      line-height: $menuH
+      font: normal normal normal 14px/1 FontAwesome
+      text-rendering: auto
+      -webkit-font-smoothing: antialiased
+      font-size: 1.3333em
+      text-align: center
+      color: #fff
+      background-color: $darkblue
+      cursor: pointer
+      list-style: 0.75em
+      visibility: -15%
+
+      &:before
+        content: '\f0c9'
+        line-height: $menuH
+
+    .closeMenu
+      &:before
+        content: '\f00d'
+
+      + .brandname
+        display: inline-block
+
+    .menu-content
+      display: block
+      background-color: $darkblue
+      color: #fff
+      width: $menuW
+      margin-left: -($menuW)
+      transition: 0.2s
+      position: fixed
+      top: 0
+      left: 0
+      bottom: 0
+      z-index: 1050
+
+    &.open .menu-content
+      margin-left: 0
+      transition: 0.2s
+
+    // Menu items
+    .menu-content
+      .panel-group
+        margin: 0
+        padding: 25px 0 0 0
+
+        .panel
+          border-radius: 0
+          border: none
+          box-shadow: none
+          background-color: transparent
+
+          + .panel
+            margin-top: 2px
+
+          .panel-heading
+            border-radius: 0
+            padding: 0
+            background-color: rgba(#fff, 0.2)
+
+            > .panel-title
+              font-weight: 400
+              font-size: $h2-size
+              line-height: 30px
+
+              > a
+                display: block
+                text-decoration: none
+                padding: 0 25px
+                color: rgba(#fff, 0.75)
+                transition: 0.2s
+
+                &:hover
+                  text-decoration: none
+                  color: rgba(#fff, 1)
+                  transition: 0.2s
+
+                &:after
+                  content: '\f078'
+                  display: inline-block
+                  transform: rotate(180deg)
+                  transition: 0.2s
+                  font: normal normal normal 14px/1 FontAwesome
+                  text-rendering: auto
+                  -webkit-font-smoothing: antialiased
+                  font-size: 0.725em
+                  list-style: 0.75em
+                  line-height: 30px
+                  visibility: -15%
+                  position: absolute
+                  right: 10px
+
+                &.collapsed, &[aria-expanded='false']
+                  &:after
+                    transform: rotate(0deg)
+
+          .panel-body
+            border-top: 0
+            padding: 10px 25px 10px 50px
+            color: #fff
+
+            .text-muted
+              color: rgba(#fff, 0.4)
+
+          .list-group
+            border: none
+            background-color: transparent
+            padding-top: 5px
+
+            .list-group-item
+              position: relative
+              margin: 0
+              padding: 5px 25px 5px 40px
+              border: none
+              background-color: transparent
+              color: #fff
+              font-weight: 700
+
+              &:last-child
+                padding-bottom: 15px
+
+              &:first-child
+                &:last-child
+                  padding-bottom: 8px
+
+              > span
+                display: block
+                border-radius: 3px
+                padding: 5px 10px
+                background-color: rgba(#fff, 0)
+                transition: 0.2s
+
+              &, &:first-child, &:last-child
+                border-radius: 0
+
+              &:hover
+                > span
+                  background-color: rgba(#fff, 0.1)
+                  transition: 0.2s
+
+              &.active
+                > span
+                  background-color: rgba(#fff, 0.9)
+                  color: $darkblue
+                  transition: 0.2s
+
+              &.separator
+                display: block
+                height: 2px
+                width: 30px
+                padding: 0
+                margin: 5px 0 5px 50px
+                background-color: rgba(#fff, 0.2)
+
+        + .panel-group
+          padding-top: 10px
+          border-top: 2px solid rgba(#fff, 0.2)
+
+          .list-group
+            .list-group-item
+              padding: 0 15px
+              font-weight: 400
+
+              > span > .fa:first-child
+                padding-right: 1em
+
+  #menu_top
+    display: block
+    letter-spacing: -0.31em
+    text-rendering: optimizespeed
+    font-weight: 400
+    height: $menuH
+    padding-left: $menuH
+    background-color: $blue
+    color: #fff
+
+    > .brandname, > .menu-content
+      display: inline-block
+      letter-spacing: normal
+      word-spacing: normal
+      text-rendering: auto
+      vertical-align: top
+      overflow: hidden
+
+      &.brandname
+        width: 65px
+        padding-right: 10px
+
+      &.menu-content
+        position: relative
+        width: calc(100% - 65px)
+        height: $menuH
+        line-height: $menuH
+
+        &:before
+          content: ''
+          display: block
+          position: absolute
+          height: 14px
+          width: 1px
+          background-color: rgba(#fff, 0.8)
+          left: 0
+          top: 13px
+
+        .menu-item
+          padding: 0 10px
+
+          .fa
+            padding-left: 0.5em
+
+            &:first-child
+              padding-left: 0
+
+        > *, .menu-item
+          display: inline-block
+          color: #fff
+
+        .menu-item-group
+          > .menu-item
+            background-color: rgba(#fff, 0)
+            text-decoration: none
+
+            &:hover, &.active
+              text-decoration: none
+              background-color: rgba(#fff, 0.2)
+
+  // Breadcrumb in nav
+  .breadcrumb
+    padding: 0
+    margin: 0
+    background-color: transparent
+    border-radius: 0
+
+    > li
+      > a
+        color: rgba(#fff, 0.9)
+        transition: 0.2s
+
+        &:hover
+          text-decoration: none
+          color: rgba(#fff, 1)
+          transition: 0.2s
+
+      &.active
+        color: #fff
+
+      + li:before
+        content: '\003e'
+        color: #fff
+        padding: 0 0.5em
+
+  // Nav panels
+  .nav_panel
+    display: none
+    letter-spacing: normal
+    word-spacing: normal
+    text-rendering: auto
+    width: $menuW
+    float: right
+    background-color: #fff
+    color: $darkgrey
+    box-shadow: 0 0 3px $darkgrey
+
+    &.open
+      display: block
+
+    .panel-title
+      margin: 0
+      padding: 15px 20px
+      font-size: inherit
+      border-bottom: 1px solid $grey
+
+      > h1, > h2, h3
+        margin: 0
+
+    .panel-body
+      padding: 15px 20px
diff --git a/app/assets/stylesheets/components/_page_header.sass b/app/assets/stylesheets/components/_page_header.sass
new file mode 100644
index 000000000..85fff908f
--- /dev/null
+++ b/app/assets/stylesheets/components/_page_header.sass
@@ -0,0 +1,10 @@
+.page_header
+  background-color: $blue
+  color: #fff
+
+  h1
+    margin: 0
+
+    .small.fa
+      color: #fff
+      margin-left: 0.5em
diff --git a/app/assets/stylesheets/main/compliance_check_tasks.sass b/app/assets/stylesheets/main/compliance_check_tasks.sass
deleted file mode 100644
index 78141bf22..000000000
--- a/app/assets/stylesheets/main/compliance_check_tasks.sass
+++ /dev/null
@@ -1 +0,0 @@
-#workspace.compliance_check_tasks.new, #workspace.compliance_check_tasks.create
\ No newline at end of file
diff --git a/app/assets/stylesheets/main/subscriptions.sass b/app/assets/stylesheets/main/subscriptions.sass
deleted file mode 100644
index 0ef6aba3e..000000000
--- a/app/assets/stylesheets/main/subscriptions.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-// Place all the styles related to the lines controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-
-// #workspace.subscriptions.create, #workspace.subscriptions.new
\ No newline at end of file
diff --git a/app/assets/stylesheets/main/timebands.sass b/app/assets/stylesheets/main/timebands.sass
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/assets/stylesheets/main/users.sass b/app/assets/stylesheets/main/users.sass
deleted file mode 100644
index e99c60660..000000000
--- a/app/assets/stylesheets/main/users.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-// Place all the styles related to the lines controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-
-#workspace.users.edit, #workspace.lines.new
\ No newline at end of file
diff --git a/app/assets/stylesheets/main/vehicle_journey_imports.sass b/app/assets/stylesheets/main/vehicle_journey_imports.sass
deleted file mode 100644
index c02139389..000000000
--- a/app/assets/stylesheets/main/vehicle_journey_imports.sass
+++ /dev/null
@@ -1 +0,0 @@
-// #workspace.vehicle_journey_imports.new
\ No newline at end of file
diff --git a/app/assets/stylesheets/main/welcome.sass b/app/assets/stylesheets/main/welcome.sass
deleted file mode 100644
index 77ce11a74..000000000
--- a/app/assets/stylesheets/main/welcome.sass
+++ /dev/null
@@ -1,3 +0,0 @@
-// Place all the styles related to the welcome controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/app/assets/stylesheets/new/_config.sass b/app/assets/stylesheets/new/_config.sass
deleted file mode 100644
index 2660ae3cb..000000000
--- a/app/assets/stylesheets/new/_config.sass
+++ /dev/null
@@ -1,21 +0,0 @@
-//-------------//
-//  Variables  //
-//-------------//
-
-// Typography
-$base-font-size: 1.4rem
-$line-height: 1.4
-$h1-size: 3rem
-$h2-size: 1.8rem
-
-$base-font-family: 'Open Sans', sans-serif
-
-// Colors
-$darkblue: #004d87
-$blue: #007fbb
-
-$darkgrey: #4b4b4b
-$grey: #a4a4a4
-
-$green: #006d5c
-$red: #e22019
diff --git a/app/assets/stylesheets/new/_fonts.sass b/app/assets/stylesheets/new/_fonts.sass
deleted file mode 100644
index cb370eb86..000000000
--- a/app/assets/stylesheets/new/_fonts.sass
+++ /dev/null
@@ -1,31 +0,0 @@
-//---------//
-//  Fonts  //
-//---------//
-
-@font-face
-  // Regular
-  font-family: 'Open Sans'
-  src: url(asset-path('OpenSans/Regular/OpenSans-Regular.woff2')) format('woff2'), url(asset-path('OpenSans/Regular/OpenSans-Regular.woff')) format('woff'), url(asset-path('OpenSans/Regular/OpenSans-Regular.ttf')) format('ttf')
-  font-weight: 400
-  font-style: normal
-
-@font-face
-  // Regular Italic
-  font-family: 'Open Sans'
-  src: url(asset-path('OpenSans/Regular/OpenSans-Italic.woff2')) format('woff2'), url(asset-path('OpenSans/Regular/OpenSans-Italic.woff')) format('woff'), url(asset-path('OpenSans/Regular/OpenSans-Italic.ttf')) format('ttf')
-  font-weight: 400
-  font-style: italic
-
-@font-face
-  // Bold
-  font-family: 'Open Sans'
-  src: url(asset-path('OpenSans/Bold/OpenSans-Bold.woff2')) format('woff2'), url(asset-path('OpenSans/Bold/OpenSans-Bold.woff')) format('woff'), url(asset-path('OpenSans/Bold/OpenSans-Bold.ttf')) format('ttf')
-  font-weight: 700
-  font-style: normal
-
-@font-face
-  // Bold Italic
-  font-family: 'Open Sans'
-  src: url(asset-path('OpenSans/Bold/OpenSans-BoldItalic.woff2')) format('woff2'), url(asset-path('OpenSans/Bold/OpenSans-BoldItalic.woff')) format('woff'), url(asset-path('OpenSans/Bold/OpenSans-BoldItalic.ttf')) format('ttf')
-  font-weight: 700
-  font-style: italic
diff --git a/app/assets/stylesheets/new/_layout.sass b/app/assets/stylesheets/new/_layout.sass
deleted file mode 100644
index 4321b6cb4..000000000
--- a/app/assets/stylesheets/new/_layout.sass
+++ /dev/null
@@ -1,17 +0,0 @@
-//----------//
-//  Layout  //
-//----------//
-
-html
-  box-sizing: border-box
-
-  *
-    box-sizing: inherit
-
-body
-  padding-top: 60px
-  font-family: $base-font-family
-  font-size: $base-font-size
-  line-height: $line-height
-  color: $darkgrey
-  background-color: #fff
diff --git a/app/assets/stylesheets/new/_typography.sass b/app/assets/stylesheets/new/_typography.sass
deleted file mode 100644
index 4060a2449..000000000
--- a/app/assets/stylesheets/new/_typography.sass
+++ /dev/null
@@ -1,22 +0,0 @@
-h1
-  font-size: $h1-size
-  font-weight: 700
-
-h2
-  font-size: $h2-size
-  font-weight: 700
-
-p
-  &:last-child
-    margin-bottom: 0
-
-  a
-    color: inherit
-    border-bottom: 1px dashed rgba($blue, 0.5)
-    transition: 0.2s
-
-    &:hover, &:focus
-      text-decoration: none
-      color: $blue
-      border-color: $blue
-      transition: 0.2s
diff --git a/app/assets/stylesheets/new/components/_main_nav.sass b/app/assets/stylesheets/new/components/_main_nav.sass
deleted file mode 100644
index 7420b9bff..000000000
--- a/app/assets/stylesheets/new/components/_main_nav.sass
+++ /dev/null
@@ -1,305 +0,0 @@
-$menuH: 40px
-$menuW: 300px
-
-#main_nav
-  display: block
-  height: $menuH
-  position: fixed
-  top: 0
-  left: 0
-  right: 0
-  z-index: 1040
-
-  .brandname
-    font-size: $h2-size
-    font-weight: 700
-    line-height: $menuH
-    padding-left: 10px
-    opacity: 0.6
-
-  #menu_left
-    position: absolute
-    top: 0
-    left: 0
-    z-index: 1
-
-    .openMenu, .closeMenu
-      display: inline-block
-      width: $menuH
-      height: $menuH
-      line-height: $menuH
-      font: normal normal normal 14px/1 FontAwesome
-      text-rendering: auto
-      -webkit-font-smoothing: antialiased
-      font-size: 1.3333em
-      text-align: center
-      color: #fff
-      background-color: $darkblue
-      cursor: pointer
-      list-style: 0.75em
-      visibility: -15%
-
-      &:before
-        content: '\f0c9'
-        line-height: $menuH
-
-    .closeMenu
-      &:before
-        content: '\f00d'
-
-      + .brandname
-        display: inline-block
-
-    .menu-content
-      display: block
-      background-color: $darkblue
-      color: #fff
-      width: $menuW
-      margin-left: -($menuW)
-      transition: 0.2s
-      position: fixed
-      top: 0
-      left: 0
-      bottom: 0
-      z-index: 1050
-
-    &.open .menu-content
-      margin-left: 0
-      transition: 0.2s
-
-    // Menu items
-    .menu-content
-      .panel-group
-        margin: 0
-        padding: 25px 0 0 0
-
-        .panel
-          border-radius: 0
-          border: none
-          box-shadow: none
-          background-color: transparent
-
-          + .panel
-            margin-top: 2px
-
-          .panel-heading
-            border-radius: 0
-            padding: 0
-            background-color: rgba(#fff, 0.2)
-
-            > .panel-title
-              font-weight: 400
-              font-size: $h2-size
-              line-height: 30px
-
-              > a
-                display: block
-                padding: 0 25px
-                color: rgba(#fff, 0.75)
-                transition: 0.2s
-
-                &:hover
-                  text-decoration: none
-                  color: rgba(#fff, 1)
-                  transition: 0.2s
-
-                &:after
-                  content: '\f078'
-                  display: inline-block
-                  transform: rotate(180deg)
-                  transition: 0.2s
-                  font: normal normal normal 14px/1 FontAwesome
-                  text-rendering: auto
-                  -webkit-font-smoothing: antialiased
-                  font-size: 0.725em
-                  list-style: 0.75em
-                  line-height: 30px
-                  visibility: -15%
-                  position: absolute
-                  right: 10px
-
-                &.collapsed, &[aria-expanded='false']
-                  &:after
-                    transform: rotate(0deg)
-
-          .panel-body
-            border-top: 0
-            padding: 10px 25px 10px 50px
-            color: #fff
-
-            .text-muted
-              color: rgba(#fff, 0.4)
-
-          .list-group
-            border: none
-            background-color: transparent
-            padding-top: 5px
-
-            .list-group-item
-              position: relative
-              margin: 0
-              padding: 5px 25px 5px 40px
-              border: none
-              background-color: transparent
-              color: #fff
-              font-weight: 700
-
-              &:last-child
-                padding-bottom: 15px
-
-              &:first-child
-                &:last-child
-                  padding-bottom: 8px
-
-              > span
-                display: block
-                border-radius: 3px
-                padding: 5px 10px
-                background-color: rgba(#fff, 0)
-                transition: 0.2s
-
-              &, &:first-child, &:last-child
-                border-radius: 0
-
-              &:hover
-                > span
-                  background-color: rgba(#fff, 0.1)
-                  transition: 0.2s
-
-              &.active
-                > span
-                  background-color: rgba(#fff, 0.9)
-                  color: $darkblue
-                  transition: 0.2s
-
-              &.separator
-                display: block
-                height: 2px
-                width: 30px
-                padding: 0
-                margin: 5px 0 5px 50px
-                background-color: rgba(#fff, 0.2)
-
-        + .panel-group
-          padding-top: 10px
-          border-top: 2px solid rgba(#fff, 0.2)
-
-          .list-group
-            .list-group-item
-              padding: 0 15px
-              font-weight: 400
-
-              > span > .fa:first-child
-                padding-right: 1em
-
-  #menu_top
-    display: block
-    letter-spacing: -0.31em
-    text-rendering: optimizespeed
-    font-weight: 400
-    height: $menuH
-    padding-left: $menuH
-    background-color: $blue
-    color: #fff
-
-    > .brandname, > .menu-content
-      display: inline-block
-      letter-spacing: normal
-      word-spacing: normal
-      text-rendering: auto
-      vertical-align: top
-      overflow: hidden
-
-      &.brandname
-        width: 65px
-        padding-right: 10px
-
-      &.menu-content
-        position: relative
-        width: calc(100% - 65px)
-        height: $menuH
-        line-height: $menuH
-
-        &:before
-          content: ''
-          display: block
-          position: absolute
-          height: 14px
-          width: 1px
-          background-color: rgba(#fff, 0.8)
-          left: 0
-          top: 13px
-
-        .menu-item
-          padding: 0 10px
-
-          .fa
-            padding-left: 0.5em
-
-            &:first-child
-              padding-left: 0
-
-        > *, .menu-item
-          display: inline-block
-          color: #fff
-
-        .menu-item-group
-          > .menu-item
-            background-color: rgba(#fff, 0)
-            text-decoration: none
-
-            &:hover, &.active
-              text-decoration: none
-              background-color: rgba(#fff, 0.2)
-
-  // Breadcrumb in nav
-  .breadcrumb
-    padding: 0
-    margin: 0
-    background-color: transparent
-    border-radius: 0
-
-    > li
-      > a
-        color: rgba(#fff, 0.9)
-        transition: 0.2s
-
-        &:hover
-          text-decoration: none
-          color: rgba(#fff, 1)
-          transition: 0.2s
-
-      &.active
-        color: #fff
-
-      + li:before
-        content: '\003e'
-        color: #fff
-        padding: 0 0.5em
-
-  // Nav panels
-  .nav_panel
-    display: none
-    letter-spacing: normal
-    word-spacing: normal
-    text-rendering: auto
-    width: $menuW
-    float: right
-    background-color: #fff
-    color: $darkgrey
-    box-shadow: 0 0 3px $darkgrey
-
-    &.open
-      display: block
-
-    .panel-title
-      margin: 0
-      padding: 15px 20px
-      font-size: inherit
-      border-bottom: 1px solid $grey
-
-      > h1, > h2, h3
-        margin: 0
-
-    .panel-body
-      padding: 15px 20px
diff --git a/app/assets/stylesheets/typography/_fonts.sass b/app/assets/stylesheets/typography/_fonts.sass
new file mode 100644
index 000000000..cb370eb86
--- /dev/null
+++ b/app/assets/stylesheets/typography/_fonts.sass
@@ -0,0 +1,31 @@
+//---------//
+//  Fonts  //
+//---------//
+
+@font-face
+  // Regular
+  font-family: 'Open Sans'
+  src: url(asset-path('OpenSans/Regular/OpenSans-Regular.woff2')) format('woff2'), url(asset-path('OpenSans/Regular/OpenSans-Regular.woff')) format('woff'), url(asset-path('OpenSans/Regular/OpenSans-Regular.ttf')) format('ttf')
+  font-weight: 400
+  font-style: normal
+
+@font-face
+  // Regular Italic
+  font-family: 'Open Sans'
+  src: url(asset-path('OpenSans/Regular/OpenSans-Italic.woff2')) format('woff2'), url(asset-path('OpenSans/Regular/OpenSans-Italic.woff')) format('woff'), url(asset-path('OpenSans/Regular/OpenSans-Italic.ttf')) format('ttf')
+  font-weight: 400
+  font-style: italic
+
+@font-face
+  // Bold
+  font-family: 'Open Sans'
+  src: url(asset-path('OpenSans/Bold/OpenSans-Bold.woff2')) format('woff2'), url(asset-path('OpenSans/Bold/OpenSans-Bold.woff')) format('woff'), url(asset-path('OpenSans/Bold/OpenSans-Bold.ttf')) format('ttf')
+  font-weight: 700
+  font-style: normal
+
+@font-face
+  // Bold Italic
+  font-family: 'Open Sans'
+  src: url(asset-path('OpenSans/Bold/OpenSans-BoldItalic.woff2')) format('woff2'), url(asset-path('OpenSans/Bold/OpenSans-BoldItalic.woff')) format('woff'), url(asset-path('OpenSans/Bold/OpenSans-BoldItalic.ttf')) format('ttf')
+  font-weight: 700
+  font-style: italic
diff --git a/app/assets/stylesheets/typography/_typography.sass b/app/assets/stylesheets/typography/_typography.sass
new file mode 100644
index 000000000..ef6d05203
--- /dev/null
+++ b/app/assets/stylesheets/typography/_typography.sass
@@ -0,0 +1,22 @@
+h1
+  font-size: $h1-size
+  font-weight: 400
+
+h2
+  font-size: $h2-size
+  font-weight: 700
+
+p
+  &:last-child
+    margin-bottom: 0
+
+  a
+    color: inherit
+    border-bottom: 1px dashed rgba($blue, 0.5)
+    transition: 0.2s
+
+    &:hover, &:focus
+      text-decoration: none
+      color: $blue
+      border-color: $blue
+      transition: 0.2s
-- 
cgit v1.2.3