940a43d388e7725cff2c8e6d1b02d740b31a7ded — Matthew Jorgensen 3 months ago 4130cce dev
Big redesign!
M _includes/widget-author-bio.html => _includes/widget-author-bio.html +3 -3
@@ 1,8 1,8 @@
 
-    <p class="hero-avatar"><img src="/avatar.png" alt="{{name}}" class="avatar" /></p>
-    <p class="hero-greeting">
+    <p class="author-avatar"><img src="/avatar.png" alt="{{name}}" class="avatar" /></p>
+    <p class="author-greeting">
       Hi there!
     </p>
-    <p class="hero-bio">
+    <p class="author-bio">
       {%- include author_bio.md -%}
     </p>

M _includes/widget-recent-posts.html => _includes/widget-recent-posts.html +1 -1
@@ 5,7 5,7 @@
 <div class="recent-posts">
   {% for post in site.posts limit:3 %}
   <div class="post-stub">
-    {{ post.date || date: "%Y-%m-%d" }}<br />
+    {{ post.date || date: "%Y-%m-%d" }}
     <a class="recent-post-link" href="{{ post.url }}">
       {{ post.title }}
     </a>

M _layouts/base.html => _layouts/base.html +47 -31
@@ 1,41 1,57 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <!-- Document Settings -->
-  <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Document Settings -->
+    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-  <!-- Page Meta -->
-  <title>{{ site.title }}</title>
-  <meta name="description=" content="True" />
-  <link rel="icon" type="image/png" href="/avatar.png" />
+    <!-- Page Meta -->
+    <title>{{ site.title }}</title>
+    <meta name="description=" content="True" />
+    <link rel="icon" type="image/png" href="/avatar.png" />
 
-  <!-- Stylesheets -->
-  <link rel="stylesheet" type="text/css" href="/css/style.css" />
+    <!-- Stylesheets -->
+    <link rel="stylesheet" type="text/css" href="/css/style.css" />
 </head>
 
 <body>
-  <div class="container">
-
-    {{ content }}
-
-    <div class="sidebar">
-
-      {%- include widget-author-bio.html -%}
-
-      {%- include navigation.html -%}
-
-      {%- include widget-external-links.html -%}
-
-      {% if page.url != '/' %}
-      {%- include widget-recent-posts.html -%}
-      {% endif %}
-
-      <hr />
-
-      {%- include footer.html -%}
-
+    <div class="container">
+        <header>
+            <h1 class="page-title">
+                {% if page.title %}
+                {{ page.title }}
+                {% else %}
+                {{ site.title }}
+                {% endif %}
+            </h1>
+
+            <navigation>
+                {%- include navigation.html -%}
+            </navigation>
+        </header>
+
+        {{ content }}
+
+            {% if page.url != '/' %}
+            <div class="recent-posts">
+                {%- include widget-recent-posts.html -%}
+            </div>
+            {% endif %}
+            
+        <div class="widgets">
+            <div class="widget-column-1">
+                <div class="author-bio">
+                    {%- include widget-author-bio.html -%}
+                </div>
+            </div>
+            <div class="widget-column-2">
+                <div class="external-links">
+                    {%- include widget-external-links.html -%}
+                </div>
+
+                {%- include footer.html -%}
+            </div>
+        </div>
     </div>
-  </div>
 </body>
-</html>>
\ No newline at end of file
+</html>

M _layouts/page.html => _layouts/page.html +0 -8
@@ 2,14 2,6 @@
 layout: base
 ---
 
-<h1 class="page-title">
-  {% if page.title %}
-  {{ page.title }}
-  {% else %}
-  {{ site.title }}
-  {% endif %}
-</h1>
-
 <div class="content">
   {% if page.url contains '/archive/' %}
   {% else %}

M css/style.css => css/style.css +38 -151
@@ 1,29 1,3 @@
-/* Table of Contents
-/* --------------------------------------------------------------------------------
-
-This is a development CSS file which is built to a minified production
-stylesheet in asset/built/screen.css
-
-  1. Layout
-  2. Widgets
-  2.1. Hero Avatar
-  2.2. Author Bio
-  2.3. Navigation
-  2.4. External Links
-  2.5. Recent Posts
-  2.6. Tag cloud
-  3. Article
-  3.1. Article Meta
-  3.2. Article Stub (index)
-  4. Pagination Buttons
-  5. Footer
-  6. @media Properties
-  7. Ghost Required Classes
-
-*/
-
-/* 1. Layout - Basic Layout & Main Content
-/* ---------------------------------------------------------- */
 html, body {
   /* overflow-x: hidden; */
   font-family: sans-serif;


@@ 69,6 43,7 @@
 blockquote {
 
 }
+
 blockquote p {
   font-size: 11pt !important;
 }


@@ 83,52 58,45 @@
     width: 85%;
 }
 
-.container {
-  max-width: 960px;
-  margin: 0 auto;
+header {
   display: grid;
-  grid-template-columns: 2fr 1fr;
 }
 
-.container .content {
+header h1 {
   grid-column-start: 1;
 }
 
-.post-class .post-title,
-.container .site-title {
+navigation {
+  grid-column-start: 2;
+}
+
+.container {
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+.container .content {
   grid-column-start: 1;
-  grid-column-end: 3;
 }
 
 .page-title {
   margin-bottom: 0;
 }
 
-.container .site-title a {
-  color: black;
-  text-decoration: none;
-}
-
-/* 2. Widgets
-/* ---------------------------------------------------------- */
-.container .sidebar {
-  grid-column-start: 2;
-  padding-left: 1rem;
+.widgets {
+  display: grid;
+  grid-template-columns: 2fr 0.5fr 2fr;
 }
 
-.sidebar,
-.sidebar a {
-  color: #444;
+.widget-column-1 {
+  grid-column-start: 1;
 }
 
-.sidebar hr {
-  border-top: #aaa;
-  width: 75%;
+.widget-column-2 {
+  grid-column-start: 3;
 }
 
-/* 2.1. Hero Avatar
-/* ---------------------------------------------------------- */
-.hero-avatar {
+.author-avatar {
   width: 150px;
   height: 150px;
   margin: 0 auto;


@@ 138,15 106,11 @@
   border-radius: 10%;
 }
 
-/* 2.2. Author Bio
-/* ---------------------------------------------------------- */
-.hero-greeting,
-.hero-bio {
+.author-greeting,
+.author-bio {
   font-size: 12pt;
 }
 
-/* 2.3. Navigation
-/* ---------------------------------------------------------- */
 .navigation {
   text-align: center;
   position: relative;


@@ 186,14 150,13 @@
   display: inline;
 }
 
-/* 2.4. External Links
-/* ---------------------------------------------------------- */
 .external-links .context {
   position: absolute;
   top: -0.9rem;
   left: 0;
   font-size: 0.8rem;
   color: black;
+  text-align: right
 }
 
 .external-links > p {


@@ 204,36 167,15 @@
   padding-bottom: 0.5rem;
 }
 
-/* 2.5. Recent Posts
-/* ---------------------------------------------------------- */
 .recent-posts {
   font-size: 11pt;
   padding-bottom: 1rem;
 }
 
-.recent-post-item {
-  margin: .5rem 0;
-}
-
-.recent-post-date {
-
-}
-
 .recent-post-link {
 
 }
 
-/* 3. Article
-/* ---------------------------------------------------------- */
-
-.post-content {
-  margin: 6px 0;
-}
-
-.post-footer .post-tags {
-  font-size: 10pt;
-}
-
 img {
   max-width: 100%;
   margin: 0 auto;


@@ 261,19 203,6 @@
   }
 }
 
-.post-content p {
-  line-height: 1.25;
-  font-size: 12pt;
-}
-
-/* 3.1. Article Meta
-/* ---------------------------------------------------------- */
-
-.post-meta-container {
-  grid-column-start: 1;
-  grid-column-end: 3;
-}
-
 .meta {
   color: #999;
 }


@@ 282,27 211,6 @@
   color: #999;
 }
 
-.post-feature-image-container {
-
-}
-
-.post-feature-image {
-
-}
-
-/* 3.2. Article Stub (index)
-/* ---------------------------------------------------------- */
-
-.post-stub .post-content a {
-  color: #444;
-}
-
-.post-stub .post-tags {
-  font-size: 10pt;
-}
-
-/* 3.3. Article Footnotes
-/* ---------------------------------------------------------- */
 .footnotes {
   margin-top: 3rem;
 }


@@ 312,8 220,6 @@
 .footnotes p {
 }
 
-/* 4. Pagination Buttons
-/* ---------------------------------------------------------- */
 
 .pagination-container {
   display: grid;


@@ 377,8 283,6 @@
   fill: currentColor;
 }
 
-/* #. Projects
-/* ---------------------------------------------------------- */
 .project-title h2 {
   font-size: 12pt;
   display: inline;


@@ 389,8 293,6 @@
   min-width: 3rem;
 }
 
-/* #. Travel
-/* ---------------------------------------------------------- */
 .trip-title h2 {
     font-size: unset;
     display: inline;


@@ 401,9 303,7 @@
     min-width: 4.5rem;
 }
 
-/* #. Special Formatting
-/* ---------------------------------------------------------- */
-.alert, .tip {
+.alert{
   padding: 0.5rem;
   margin-bottom: 0.5rem;
   border-width: 1px;


@@ 416,27 316,17 @@
   border-color: #ab2e14;
 }
 
-.tip {
-  color: #004085;
-  background-color: #cce5ff;
-  border-color: #b8daff;
-}
-
-/* 5. Footer
-/* ---------------------------------------------------------- */
 .site-footer {
   font-size: 10pt;
   padding-top: 0.5rem;
 }
 
-/* 6. @media Properties
-/* ---------------------------------------------------------- */
 @media (max-width: 768px) {
   .container {
     display:block
   }
-  .container .sidebar {
-    padding: 3rem 0 0 0;
+  header {
+    display: block;
   }
   .site-footer {
     text-align: center;


@@ 446,22 336,19 @@
   }
 }
 
+@media (max-width: 550px) {
+
+  .container .widgets {
+    display:block;
+    padding: 3rem 0 0 0;
+  }
+  .hero-bio {
+    margin-bottom: 2rem;
+  }
+}
+
 @media (min-width: 576px) {
   .visible-xs {
   display:none
   }
 }
-
-/* 7. Ghost Required Classes
-/* The following classes are required for this theme to pass
-/* gscan validation. 
-/* ---------------------------------------------------------- */
-.kg-gallery-container,
-.kg-gallery-row,
-.kg-gallery-image {
-
-}
-.kg-width-full img,
-.kg-width-wide img{
-
-}