940a43d388e7725cff2c8e6d1b02d740b31a7ded — Matthew Jorgensen 2 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{
- 
- }