add new sass stylesheet and refactor layout with semantic classes

1 files changed, 33 insertions, 0 deletions

diff --git a/source/stylesheets/base.css.scss b/source/stylesheets/base.css.scss
new file mode 100644
index 0000000..a38b784
--- /dev/null
+++ b/source/stylesheets/base.css.scss
@@ -0,0 +1,33 @@
+@import "bootstrap";
+
+header {
+  @extend .row;
+}
+
+body {
+  @extend .container;
+}
+
+nav {
+  @extend .row;
+}
+
+nav ul {
+  @extend .nav;
+  @extend .navbar-nav;
+  @extend .navbar-justified;
+}
+
+@media (min-width: 768px){
+  .navbar-nav{
+    margin: 0 auto;
+    display: table;
+    table-layout: fixed;
+    float:none;
+  }
+}
+
+ul.nav li.dropdown:hover ul.dropdown-menu{
+  display: block;
+  margin-top:0px
+}