Styling for responsive

themes/black-and-light/layouts/_default/baseof.html

@@ -9,13 +9,17 @@
     <section id=nav>
       <a href="/">
         <img src="/logo.png" style="width: 150px; float: left;">
-        <h1 style="vertical-align: bottom;">{{ .Site.Params.sitename }}</h1>
       </a>
-      <ul>
-        {{ range .Site.Menus.main }}
-          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
-        {{ end }}
-      </ul>
+      <div class="site-name-and-menu">
+        <h1>
+          <a href="/">{{ .Site.Params.sitename }}</a>
+        </h1>
+        <ul>
+          {{ range .Site.Menus.main }}
+            <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+          {{ end }}
+        </ul>
+      </div>
       <div class="clearfix"></div>
     </section>
 

themes/black-and-light/layouts/partials/styles.html

@@ -1,4 +1,17 @@
 <style>
+/*
+
+Link for colors:
+https://coolors.co/00bbbd-d3f8e2-310a31-ddd7f7-847996
+
+#00bbbd
+#d3f8e2
+#310a31
+#ddd7f7
+#847996
+
+*/
+
   * {
     border:0;
     font:inherit;
@@ -22,12 +35,13 @@
     color:#1d1313;
     max-width:700px;
     margin:auto;
+    padding-left:20px;
+    padding-right:20px;
   }
 
   section, footer
   {
     text-align:left;
-    width:100%;
     font-size:15px;
     margin: 20px 0;
     line-height: 140% !important;
@@ -136,26 +150,34 @@
     font-size:13px;
   }
 
-  #nav h1 {
+  #nav > a
+  {
+    text-decoration: none;
+  }
+
+  #nav h1 a {
     color:#00bbbd;
     padding-bottom: 10px;
     display: block;
     font-weight: bold;
     text-transform: uppercase;
-    font-size: 1.8vw;
-    font-decoration: none;
-    float: right;
+    font-size: 40px;
+    text-decoration: none;
   }
 
   #nav
   {
     margin-bottom: 50px;
-    text-align:center;
     position:static;
     margin-top:60px;
     background-color: transparent;
   }
 
+  .site-name-and-menu
+  {
+    float: right;
+  }
+
   .clearfix
   {
     clear: both;
@@ -163,7 +185,7 @@
 
   #nav ul {
     display: table;
-    margin: 8px auto 0 auto;
+    margin: 8px 0;
     float: right;
   }
 
@@ -245,9 +267,15 @@
   }
 
   @media (max-width: 750px) {
-    body {
-      padding-left:20px;
-      padding-right:20px;
+
+    #nav img {
+      display: block;
+      float: none;
+      margin: 0 auto;
+    }
+
+    #nav h1 a {
+      font-size: 28px;
     }
 
     #nav li {
@@ -256,8 +284,6 @@
     }
 
     section {
-      margin-top:0;
-      padding-top:50px;
       font-size:14px;
     }
 
@@ -270,38 +296,17 @@
     }
 
     .posts_listing li div {
-      font-size:12px;
+      font-size:14px;
     }
   }
 
   @media (max-width: 400px) {
-    body {
-      padding-left:20px;
-      padding-right:20px;
-    }
 
     #nav li {
       font-size:12px;
       padding: 0 10px;
     }
 
-    section {
-      margin-top:0;
-      padding-top:20px;
-      font-size:12px;
-    }
-
-    section h1 {
-      font-size:20px;
-    }
-
-    section h2 {
-      font-size:18px;
-    }
-
-    .posts_listing li div{
-      font-size:12px;
-    }
   }