flexbox -> media query for header

Author: brentyi

css/main.css

@@ -124,55 +124,40 @@ a:visited { color: #205caa; }
 /* Site header */
 
 .site-header {
+  position: relative;
   border-bottom: 1px solid #e8e8e8;
-  min-height: 56px;
   background-color: #8C1515;
-  padding: 10px 10px;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: center;
+  padding: 15px;
+  text-align: center;
 }
 
 .site-title,
 .site-title:hover,
 .site-title:visited {
-  flex: 3 3 800px;
-  margin: 0 auto;
-  text-align: center;
+  display: block;
+  padding: 10px;
   font-size: 26px;
   line-height: 1.2em;
   letter-spacing: -1px;
   color: #FFF;
   font-weight: 100;
 }
 
-.site-header::before,
 .site-link:link,
 .site-link:hover,
 .site-link:visited {
-  /* flex: 1 1 0px; */
+  margin-bottom: 10px;
+  display: inline-block;
   text-align: center;
-  white-space: nowrap;
-  margin: 10px;
   font-size: 18px;
   line-height: 2em;
+  height: 2em;
   padding: 0 10px;
   color: #fff;
   border: 2px solid #fff;
   font-weight: 50;
 }
 
-.site-header::before {
-  /* Pseudo-element for centering */
-  /* Should maintain ~the same width as .site-link */
-  content: "flexbox-dummy";
-  visibility: hidden;
-  height: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 /* Site footer */
 
 .site-footer {
@@ -420,6 +405,15 @@ a:visited { color: #205caa; }
 /* media queries */
 /* ----------------------------------------------------------*/
 
+@media (min-width: 1080px) {
+  .site-link:link,
+  .site-link:visited {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
 
 @media screen and (max-width: 750px) {