Modify nav bar style

jpush1773 · Mar 22, 2017 · c996aa0 · c996aa0
1 parent 6bd82c7
commit c996aa0
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 68 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,36 +4,28 @@
   {% include head.html %}
 
   <body>
-
-    <div class="container">
-      <header>
-        <a href="{{ site.baseurl }}/" title="Home">
-          <h2>{{ site.title | downcase }}</h2>
+    <nav class="nav">
+      <div class="nav-container">
+        <a href="{{ site.baseurl }}/">
+          <h2 class="nav-title">{{ site.title }}</h2>
         </a>
-
-        <div class="line"></div>
-
-        <h4>{{ site.subtitle | upcase }}</h4>
-
-        <div class="nav-container">
-          <nav>
-            <a href="#">about</a>
-            <a href="#">posts</a>
-            <a href="#">updates</a>
-          </nav>
-        </div>
-      </header>
-
-      <main>
-        {{ content }}
-      </main>
-
-      <footer>
-        <span>
-          &copy; <time datetime="{{ site.time }}">{{ site.time | date: '%Y' }}</time> Chester How. All rights reserved.
-        </span>
-      </footer>
+        <h4 class="nav-subtitle">{{ site.subtitle }}</h4>
+        <ul>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Posts</a></li>
+          <li><a href="#">Updates</a></li>
+        </ul>
     </div>
+  </nav>
+
+    <main>
+      {{ content }}
+    </main>
 
+    <footer>
+      <span>
+        &copy; <time datetime="{{ site.time }}">{{ site.time | date: '%Y' }}</time> Chester How. All rights reserved.
+      </span>
+    </footer>
   </body>
 </html>
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -30,7 +30,7 @@ h4,
 h5,
 h6 {
   color: $default-shade;
-  font-family: $palatino;
+  font-family: $sans-font;
   line-height: normal;
 }
 

diff --git a/_sass/_catalogue.scss b/_sass/_catalogue.scss
@@ -2,6 +2,7 @@
   text-align: center;
 
   &-item {
+    display: inline-block;
     padding: 1.5rem 0;
 
     &:first-child {
@@ -11,20 +12,27 @@
     &:last-child {
       padding-bottom: 2.5rem;
     }
+
+    &:hover .catalogue-line,
+    &:focus .catalogue-line {
+      width: 6rem;
+    }
   }
 
   &-title {
-    @include transition(all .3s ease-out);
-    border-bottom: 1px solid $white;
-    border-top: 1px solid $white;
     color: $default-shade;
-    font-family: $palatino;
-    font-size: 1.5rem;
+    display: block;
+    font-family: $sans-font;
+    font-size: 2rem;
     font-weight: 700;
-    padding: .5rem 1rem;
+    margin: .5rem 0;
+  }
 
-    &:hover {
-      border-color: $default-tint;
-    }
+  &-line {
+    @include transition(all .3s ease-out);
+    border-top: .2rem solid $default-shade;
+    display: block;
+    margin: 0 auto;
+    width: 2rem;
   }
 }
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -4,60 +4,90 @@
   width: 80%;
 }
 
-header {
-  padding: 2rem 0 0;
-  text-align: center;
+main,
+footer,
+.nav-container {
+  margin: 0 auto;
+  max-width: 800px;
+  width: 80%;
+}
 
-  * {
-    margin: 0;
+.nav {
+  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .1);
+  overflow: auto;
+
+  &-container {
+    margin: 1rem auto;
+    position: relative;
+    text-align: center;
   }
 
-  h2 {
-    @include transition(all .3s ease-out);
+  &-title {
+    @include transition(all .2s ease-out);
     color: $default-color;
     display: inline-block;
-    font-size: 2.8rem;
-    font-weight: 400;
+    margin: 0;
+    padding-right: .2rem;
 
     &:hover,
     &:focus {
       opacity: .6;
     }
   }
 
-  h4 {
+  &-subtitle {
     color: $default-tint;
-    font-size: .8rem;
+    display: inline-block;
+    font-family: $palatino;
     font-weight: 400;
-    letter-spacing: .1rem;
+    margin: 0;
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 1rem 0 0;
+    padding: 0;
+    text-align: center;
   }
 
-  .line {
-    border-top: 1px solid $default-color;
-    display: block;
-    margin: 0 auto .8rem;
-    width: 1rem;
+  li {
+    @include transition(all .2s ease-out);
+    color: $default-color;
+    display: inline-block;
+    opacity: .6;
+    padding: 0 2rem 0 0;
+
+    &:last-child {
+      padding-right: 0;
+    }
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
   }
 
-  .nav-container {
-    border-bottom: .5px solid $grey-2;
-    border-top: .5px solid $grey-2;
-    margin-top: 1.5rem;
+  a {
+    color: $default-color;
+    font-family: $sans-font;
   }
+}
 
-  nav {
-    display: flex;
-    justify-content: space-around;
-    margin: .5rem auto;
-    max-width: 350px;
+@media (min-width: 600px) {
+  .nav {
+    &-container {
+      text-align: left;
+    }
 
-    a {
-      color: $default-color;
-      font-family: $palatino;
+    ul {
+      bottom: 0;
+      position: absolute;
+      right: 0;
     }
   }
 }
 
+
 footer {
   font-family: $palatino;
   padding: 2rem 0;

diff --git a/_sass/_post.scss b/_sass/_post.scss
@@ -21,7 +21,7 @@
   }
 
   &-line {
-    border-top: .4rem solid $default-color;
+    border-top: .4rem solid $default-shade;
     display: block;
     margin: 0 auto 3rem;
     width: 4rem;

diff --git a/index.html b/index.html
@@ -7,7 +7,9 @@
   {% for post in paginator.posts %}
     <div class="catalogue-item">
       <a href="{{ post.url | prepend: site.url }}" class="catalogue-title">{{ post.title }}</a>
+      <div class="catalogue-line"></div>
     </div>
+    <br>
   {% endfor %}
 </div>