make things a lot prettier

_layouts/home.html

@@ -8,6 +8,7 @@ layout: default
   {% include back-link.html %}
 {% else %}
   <header class="site-masthead">
+    {% include menu.html %}
     {% if site.title %}
       <h1>
         {{ site.title }}
@@ -18,7 +19,6 @@ layout: default
         {{ site.description }}
       </h2>
     {% endif %}
-    {% include menu.html %}
   </header>
 {% endif %}
 

_sass/_article.scss

@@ -1,3 +1,11 @@
+.post {
+  background: white;
+  margin: 2em auto;
+  max-width: 60rem;
+  padding: 2em 0;
+  box-shadow: 12px 18px 24px rgba(darken($brand-color, 50%), .1);
+}
+
 .post > * {
   margin-left: auto;
   margin-right: auto;

_sass/_base.scss

@@ -1,4 +1,5 @@
 body {
+  background: $brand-color;
   color: $text-color;
   font-family: $font-family;
   font-size: 1.3125em;
@@ -151,7 +152,6 @@ figcaption {
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
-  transition: all .125s ease-in-out;
   &:hover,
   &:focus {
     background: lighten($brand-color, 2.5%);

_sass/_masthead.scss

@@ -1,23 +1,14 @@
 .site-masthead {
-  background: $brand-color;
   box-sizing: border-box;
-  min-height: 50vh;
+  padding: 0 2em;
-  padding: 2em;
   position: relative;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
   text-align: center;
-  @media screen and (min-width: $on-laptop) {
-    padding: 6em 2em;
-  } 
 }
 
 .site-masthead h1 {
   font-size: 3em;
   margin-bottom: 0;
-  margin-top: 0;
+  margin-top: 1em;
   @media (min-width: $on-tablet) {
     font-size: 6em;
   }

_sass/_search.scss

@@ -5,6 +5,7 @@
 }
 
 #search__input {
+  background: transparent;
   border: 0;
   font: 1em $font-family;
   padding: .5em;
@@ -17,4 +18,17 @@
 
 #search button[type="submit"] {
   display: none;
+}
+
+::-webkit-input-placeholder {
+  color: $muted-text-color;
+}
+::-moz-placeholder {
+  color: $muted-text-color;
+}
+:-ms-input-placeholder {
+  color: $muted-text-color;
+}
+:-moz-placeholder {
+  color: $muted-text-color;
 }

_sass/_variables.scss

@@ -1,4 +1,4 @@
-$brand-color:         #f2e300;
+$brand-color:         #fede00;
 $highlight:           lighten($brand-color, 35%);
 $text-color:          #0b0404;
 $muted-text-color:    #64644B;
@@ -6,5 +6,5 @@ $font-family:         "EB Garamond", Garamond, "Times New Roman", serif;
 
 $on-bigphone:         375px;
 $on-tablet:           768px;
-$on-laptop:           928px;
+$on-laptop:           960px;
-$on-desktop:          1024px;
+$on-desktop:          1200px;