single page done

11 files changed, 236 insertions, 256 deletions

diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss
index 1a51b62..c8edc95 100644
--- a/assets/scss/_footer.scss
+++ b/assets/scss/_footer.scss
@@ -2,7 +2,7 @@ footer {
   max-width: $screen-max;
   margin: auto auto 0 auto;
   width: 100%;
-  padding-bottom: 10px;
+  padding: 10px 1% 10px;
 }
 .footer {
   display: flex;
diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss
index dc6b3fd..3bcc7f9 100644
--- a/assets/scss/_header.scss
+++ b/assets/scss/_header.scss
@@ -179,8 +179,8 @@ header {
   transform: translateX(-6px);
   padding: 1rem;
   background: var(--color-header-bg);
-  border: 3px solid var(--box-color);
-  box-shadow: 11px 11px var(--box-color);
+  border: 3px solid var(--color-header-border);
+  box-shadow: 11px 11px var(--color-header-border);
   position: relative;
   margin-right: auto;
   margin-left: auto;
@@ -193,7 +193,7 @@ header {
 .header-frame:after {
   content: "";
   position: absolute;
-  background: var(--box-color);
+  background: var(--color-header-border);
   width: 15px;
   height: 15px;
   left: 1px;
@@ -204,7 +204,7 @@ header {
 .header-frame:before {
   content: "";
   position: absolute;
-  background: var(--box-color);
+  background: var(--color-header-border);
   width: 15px;
   height: 15px;
   right: -11px;
diff --git a/assets/scss/_li.scss b/assets/scss/_li.scss
index 4ccd3e9..9444620 100644
--- a/assets/scss/_li.scss
+++ b/assets/scss/_li.scss
@@ -6,6 +6,7 @@
   margin-right: auto;
   margin-left: auto;
   width: calc(100%);
+  max-height: 250px;
   background: var(--color-card-bg);
   transition: transform 0.2s ease;
   border: 1px solid var(--color-border);
@@ -19,7 +20,16 @@
     box-shadow: 1px 1px var(--color-boxshadow);
   }
 
+  &__meta {
+    padding-top: 1.5rem;
+  }
+  &__meta.no-tag{
+    padding-top: 0;
+  }
+
   &__description {
+    line-height:1.5;
+    margin-top: 0.5rem;
     color: var(--color-text-2);
   }
 
@@ -27,23 +37,38 @@
     color: var(--color-text-2);
     font-family: monospace;
   }
+  &--left {
+    flex: 1 1 47%;
+    margin-right: 1rem;
+  }
+
+  &--right {
+    flex: 1 1 47%;
+  }
 
   &__image {
+    display: block;
+    padding-top: 20%;
     border: 1px solid var(--color-border);
     overflow: hidden;
+    position: relative;
 
     & > img {
+      position:absolute;
+      left:0;
+      top:0;
+      right:0;
+      bottom:0;
       width: 100%;
       height: 100%;
       object-fit: cover;
-      max-height: 10rem;
     }
   }
 
   &__title {
+    line-height: 1.2;
     font-size: 1.5rem;
     font-weight: 600;
-    margin-bottom: 0.5rem;
     color: black;
   }
 
@@ -69,92 +94,7 @@
   margin-bottom: 1rem;
 }
 
-.post-item-grid {
-  display: grid;
-  height: 100%;
+.post-item-flex {
+  display: flex;
   overflow: hidden;
-  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
-  grid-template-rows: minmax(auto, 25px) minmax(0, auto) auto;
-  grid-column-gap: 0.5rem;
-  align-items: center;
-  grid-template-areas:
-    'pad image'
-    'title image'
-    'description image';
-
-  &--nopad {
-    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
-    grid-template-rows: minmax(0, auto) auto;
-    grid-column-gap: 0.5rem;
-    align-items: center;
-    grid-template-areas:
-      'title image'
-      'description image';
-  }
-
-  &--noimage {
-    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
-    grid-template-rows: minmax(0, 2rem) auto;
-    grid-column-gap: 0.5rem;
-    align-items: center;
-    grid-template-areas:
-      'pad description'
-      'title description';
-  }
-
-  &--nodesc {
-    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
-    grid-template-rows: minmax(0, 2rem) auto;
-    grid-column-gap: 0.5rem;
-    align-items: center;
-    grid-template-areas:
-      'pad image'
-      'title image';
-  }
-
-  &--only-title {
-    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
-    grid-template-rows: auto;
-    grid-column-gap: 0.5rem;
-    align-items: center;
-    grid-template-areas:
-      'title .';
-  }
-
-  &--title-with-tag {
-    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
-    grid-template-rows: minmax(0, 2rem) auto;
-    grid-column-gap: 0.5rem;
-    align-items: center;
-    grid-template-areas:
-      'pad .'
-      'title .';
-  }
-  &--noimage-nopad {
-    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
-    grid-template-rows: minmax(0, auto) auto;
-    grid-column-gap: 0.5rem;
-    align-items: center;
-    grid-template-areas:
-      'title .'
-      'description .';
-  }
-
-  &__title {
-    grid-area: title;
-    align-self: start;
-    height: 100%;
-    margin-bottom: 1rem;
-  }
-  &__image {
-    grid-area: image;
-  }
-  &__description {
-    grid-area: description;
-    align-self: start;
-    height: 100%;
-  }
-  &__pad {
-    grid-area: pad;
-  }
 }
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
index f84d0c7..f8c961e 100644
--- a/assets/scss/_main.scss
+++ b/assets/scss/_main.scss
@@ -1,4 +1,5 @@
 #content {
+  width: 100%;
   padding: 2%; 
   max-width: $screen-max; 
   margin: 0 auto;
diff --git a/assets/scss/_post.scss b/assets/scss/_post.scss
deleted file mode 100644
index ef22046..0000000
--- a/assets/scss/_post.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-.post {
-  
-}
-
-.post-content {
-  h1{
-    font-size: 3rem;
-    font-weight: bold;
-    margin: 1rem 0;
-  }
-  h2 {
-    font-size: 2.5rem;
-    font-weight: bold;
-    margin: 0.825rem 0;
-  }
-  h3 {
-    font-size: 2rem;
-    font-weight: semibold;
-    margin: 0.825rem 0;
-  }
-  h4 {
-    font-size: 1.5rem;
-    font-weight: semibold;
-    margin: 0.825rem 0;
-  }
-  h5 {
-    font-size: 1rem;
-    margin: 0.825rem 0;
-  }
-  h6 {
-    font-size: 0.75rem;
-    margin: 0.825rem 0;
-  }
-  h1,h2,h3,h4,h5,h6,p,code,blockquote {
-    line-height: 1.3;
-    @media (min-width: $screen-lg) {
-      line-height: 1.5;
-    }
-  }
-  p {
-    margin: 1rem 0;
-    color: var(--color-text-2);
-  }
-  blockquote {
-    margin-left: 1rem;
-    padding-left: 1rem;
-    border-left: 4px solid var(--color-border);
-    font-family: monospace;
-  }
-  code {
-    padding: 1px 2px;
-    border-radius: 2px;
-    background-color: var(--color-code-bg);
-    color: var(--color-text-light);
-  }
-  pre code {
-    color: inherit;
-    background-color: inherit;
-    padding: 0;
-    border-radius: inherit;
-  }
-  .highlight pre {
-    padding: 1rem;
-  }
-  .highlight code {
-    color: inherit;
-    background-color: inherit;
-    padding: 0;
-    border-radius: inherit;
-  }
-  ul {
-    list-style-type: disc;
-    padding-left: 1rem;
-  }
-  ol {
-    list-style-type: decimal;
-    padding-left: 1rem;
-  }
-  table {
-    margin: 0.5rem 0; 
-  }
-  table th {
-    padding: 0.5rem;
-    background: var(--color-extra);
-  }
-  table td {
-    padding: 0.5rem;
-    border-bottom: 1px solid var(--color-border);
-    border-collapse: collapse;
-  }
-  table tbody tr:nth-child(even) {
-    background: var(--color-table-bg);
-  }
-  table tbody tr:hover {
-    background: var(--color-hover);
-    color: var(--color-text-light);
-  }
-}
diff --git a/assets/scss/_single.scss b/assets/scss/_single.scss
new file mode 100644
index 0000000..8712db5
--- /dev/null
+++ b/assets/scss/_single.scss
@@ -0,0 +1,164 @@
+.post {
+  width: 100%;
+  max-width: 1024px;
+  margin: 0 auto;
+}
+.post-content {
+  h1{
+    font-size: 3rem;
+    font-weight: bold;
+    margin: 1rem 0;
+  }
+  h2 {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin: 0.825rem 0;
+  }
+  h3 {
+    font-size: 2rem;
+    font-weight: semibold;
+    margin: 0.825rem 0;
+  }
+  h4 {
+    font-size: 1.5rem;
+    font-weight: semibold;
+    margin: 0.825rem 0;
+  }
+  h5 {
+    font-size: 1rem;
+    margin: 0.825rem 0;
+  }
+  h6 {
+    font-size: 0.75rem;
+    margin: 0.825rem 0;
+  }
+  h1,h2,h3,h4,h5,h6,p,code,blockquote,a {
+    line-height: 1.4;
+    @media (min-width: $screen-lg) {
+      line-height: 1.5;
+    }
+  }
+  p {
+    margin: 1rem 0;
+    color: var(--color-text-2);
+  }
+  blockquote {
+    margin-left: 1rem;
+    padding-left: 1rem;
+    border-left: 4px solid var(--color-border);
+    font-family: $monospace;
+  }
+  code {
+    padding: 1px 3px;
+    border-radius: 2px;
+    background-color: var(--color-code-bg);
+    color: var(--color-text-light);
+  }
+  pre code {
+    color: inherit;
+    background-color: inherit;
+    padding: 0;
+    border-radius: inherit;
+  }
+  .highlight pre {
+    padding: 1rem;
+  }
+  .highlight code {
+    color: inherit;
+    background-color: inherit;
+    padding: 0;
+    border-radius: inherit;
+  }
+  ul {
+    list-style-type: disc;
+    padding-left: 1rem;
+  }
+  ol {
+    list-style-type: decimal;
+    padding-left: 1rem;
+  }
+  a {
+    color: var(--color-link);
+    border-bottom: 1px solid var(--color-border);
+  }
+  a:hover {
+    border-bottom: 3px solid var(--color-border);
+    background-color: var(--color-link-bg);
+  }
+  table {
+    margin: 0.5rem 0; 
+  }
+  table th {
+    padding: 0.5rem;
+    background: var(--color-extra);
+  }
+  table td {
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--color-border);
+    border-collapse: collapse;
+  }
+  table tbody tr:nth-child(even) {
+    background: var(--color-table-bg);
+  }
+  table tbody tr:hover {
+    background: var(--color-hover);
+    color: var(--color-text-light);
+  }
+  cite {
+    font-family: $monospace;
+  }
+  sub {
+    vertical-align: sub;
+  }
+  sup {
+    vertical-align: super;
+  }
+  kbd {
+    background: var(--color-code-bg);
+    padding: 1px 3px;
+    border-radius: 2px;
+    color: var(--color-text-light);
+  }
+  mark {
+    background-color: var(--color-extra);
+    padding: 1px 3px;
+    border-radius: 2px;
+    border: 1px solid var(--color-border);
+  }
+  strong {
+    font-weight: bold;
+  }
+  div[class~="__h_instagram"] {
+    margin: 1rem auto;
+  }
+  div[class~="__h_instagram"].card > .card-header {
+    background-color: var(--color-card-bg);
+    border: 1px solid var(--color-border);
+    padding: 1rem;
+    text-align: center;
+  }
+  div[class~="__h_instagram"].card > a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border:none;
+  }
+  div[class~="__h_instagram"].card > a:hover {
+    border:none;
+  }
+  div[class~="__h_instagram"].card > .card-body {
+    background-color: var(--color-card-bg);
+    border: 1px solid var(--color-border);
+    padding: 1rem;
+    text-align: center;
+  }
+  div[class~="__h_instagram"].card > a > .img-fluid {
+    border: 1px solid var(--color-border);
+    width: 100%;
+    height:auto;
+    object-fit: cover;
+  }
+  blockquote.twitter-tweet {
+    border-left: 4px solid var(--color-twitter);
+  }
+}
diff --git a/assets/scss/_vars.scss b/assets/scss/_vars.scss
index b75fa9a..596bef4 100644
--- a/assets/scss/_vars.scss
+++ b/assets/scss/_vars.scss
@@ -3,3 +3,7 @@ $screen-md: 672px;
 $screen-lg: 1056px;
 $screen-xl: 1312px;
 $screen-max: 1584px;
+
+$monospace: 'Roboto Mono', 'PT Mono', 'IBM Plex Mono', monospace;
+$sans-serif: 'Lato', 'Noto Sans', 'PT Sans', 'Roboto', sans-serif;
+$serif: 'Lora', 'PT Serif', 'Noto Serif', serif;
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 04fce7e..35e55e5 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -1,3 +1,5 @@
+@import "vars";
+
 :root {
   --color-bg: rgba(255,247,240, 1);
   --color-card-bg: rgba(250,250,250,0.8);
@@ -6,62 +8,29 @@
   --color-text-2: #333333;
   --color-text-light: white;
   --color-text-light-2: rgba(255,255,255,0.9);
+  --color-link: #0F4C81;
   --color-hover: linear-gradient(to right, rgba(120,120,120,1) 0%, rgba(120,120, 120,0.7) 50%);
   --color-border: rgba(120,120,120,1);
   --color-border-dark: black;
   --color-border-light: white;
+  --color-header-border: black;
   --color-boxshadow: rgba(100,100,100,1);
   --color-boxshadow-dark: rgba(70,70,70,1);
   --color-extra: #ffecbc;
   --color-footer-bg: rgba(250,250,250,0.8);
   --color-code-bg: rgba(100,100,100,1);
   --color-table-bg: rgba(200,200,200);
-
   --color-blockquote: #999999;
-  --box-color: black;
-  --post-text-color: #343f44;
-  --post-card-bg: rgba(250, 250, 250, 0.8);
-  --post-card-text: rgba(71, 71, 71, 1);
-  --info-bg-color: rgba(255, 255, 255, 0.9);
-  --tags-bg-color: black;
-  --tags-clr: rgba(255, 255, 255, 0.9);
-  --nav-button-clr: rgba(74, 74, 74, 1);
-  --nav-button-lines: black;
-  --post-card-tag-bg-color: black;
-  --post-card-border-clr: rgba(120, 120, 120, 1);
-  --post-card-boxshdw-clr: rgba(100, 100, 100, 1);
-  --post-card-image-outline: rgba(100, 100, 100, 1);
-  --post-header-bg-color: white;
-  --home-btn-bg: white;
-  --home-btn-clr: black;
-  --home-btn-border: black;
-  --home-btn-boxshdw: gray;
-  --other-post-bg: white;
-  --other-post-border: black;
-  --other-post-ptr-clr: white;
-  --other-post-ptr-bg: black;
-  --other-post-title-clr: black;
-  --footer-bg-color: rgba(255, 255, 255, 0.9);
-  --post-page-bg: rgba(255, 255, 255, 0.9);
-  --post-page-thead-bg: rgba(255, 247, 240, 1);
-  --post-table-border: darkgray;
-  --post-code-bg: bisque;
-  --post-code-clr: black;
-  --post-h-color: black;
-  --post-strong-em-color: rgba(0, 0, 0, 0.9);
-  --post-a-color: black;
-  --post-bq-border: black;
-  --post-tr-hover: rgba(100, 100, 100, 0.2);
-  --text-decoration-color: coral;
-  --margin-between-cards: 15px;
+  --color-twitter: rgb(29, 161, 242);
+  --color-link-bg: rgb(200, 200,200, 0.25);
 }
+
 /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
@@ -87,7 +56,7 @@ footer, header, hgroup, menu, nav, section {
 }
 body {
   line-height: 1;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: $sans-serif;
   box-sizing: border-box;
   background: var(--color-bg);
   height: 100vh;
@@ -125,7 +94,6 @@ a {
   color: initial;
 }
 
-@import "vars";
 @import "typography";
 @import "flex";
 @import "spacing";
@@ -136,5 +104,5 @@ a {
 @import "list";
 @import "summary";
 @import "featured-posts";
-@import "post";
+@import "single";
 @import "footer";
diff --git a/layouts/_default/li.html b/layouts/_default/li.html
index f7bd7b5..dc7a053 100644
--- a/layouts/_default/li.html
+++ b/layouts/_default/li.html
@@ -1,31 +1,15 @@
 <article class="post-item">
-        {{$grid_class := ""}}
-        {{if (not (isset .Params "description")) | and (not (isset .Params "image")) | and (not (isset .Params "tags"))}}
-            {{$grid_class = "post-item-grid--only-title"}}
-        {{else if (not (isset .Params "description")) | and (not (isset .Params "image"))}}
-            {{$grid_class = "post-item-grid--title-with-tag"}}
-        {{else if (not (isset .Params "tags") | and (not (isset .Params "image")))}}
-            {{$grid_class = "post-item-grid--noimage-nopad"}}
-        {{else if not (isset .Params "description")}}
-            {{$grid_class = "post-item-grid--nodesc"}}
-        {{else if not (isset .Params "image")}}
-            {{$grid_class = "post-item-grid--noimage"}}
-        {{else if not (isset .Params "tags")}}
-            {{$grid_class = "post-item-grid--nopad"}}
-        {{end}}
-        <div class="post-item-grid {{$grid_class}}">
-        <a class="post-item-grid__title post-item__link" href="{{.Permalink}}">
+        <div class="post-item-flex">
+            <a class="{{if not (isset .Params "tags")}}no-tag{{end}} post-item__meta post-item--left" href="{{.Permalink}}">
             <h2 class="post-item__title">{{.Title}}</h2>
             <time class="post-item__date" datetime="{{.Date.Format "2006-01-02"}}">{{.Date.Format "2006-01-02"}}</time>
-        </a>
         {{if isset .Params "description"}}
-        <a class="post-item-grid__description post-item__link" href="{{.Permalink}}">
             <div class="post-item__description">{{.Description}}</div>
-        </a>
         {{end}}
+        </a>
         {{if isset .Params "image"}}
-        <a class="post-item-grid__image post-item__image" href="{{.Permalink}}">
-            <img src="{{printf "%s%s" .File.Dir .Params.image}}" alt="{{.Title}}" />
+        <a class="post-item--right post-item__image" href="{{.Permalink}}">
+            <img src="{{printf "%s%s" .File.Dir .Params.image | absURL}}" alt="{{.Title}}" />
         </a>
         {{end}}
         {{if isset .Params "tags"}}
diff --git a/layouts/index.html b/layouts/index.html
index c48ca3c..3917405 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -6,7 +6,6 @@
 
 {{ $paginator := .Paginator }}
 {{ if  .Site.Params.featured }}
-<h2 class="featured-title">FEATURED</h2>
 {{ if eq $paginator.PageNumber 1 }}
 <div class="featured-posts">
     {{ $pages := .Site.RegularPages }}
diff --git a/layouts/partials/post-header.html b/layouts/partials/post-header.html
index fea8674..dc9283a 100644
--- a/layouts/partials/post-header.html
+++ b/layouts/partials/post-header.html
@@ -6,10 +6,19 @@
       <div class="header__description">{{.}}</div>
       {{end}}
     </div>
+    {{with .Params.tags}}
     <nav class="header-nav desktop">
       <ul class="header-nav-list">
+        {{ range . }}
+        <li class="header-nav-list__item">
+            <a class="header-nav-list__link" href="{{ "tags" | absURL }}{{. | urlize}}"
+            >{{ . }}</a
+          >
+        </li>
+        {{end}}
       </ul>
     </nav>
+    {{end}}
     <button class="mb-header__menu-btn">
       <span class="mb-header__menu-btn-line"></span>
       <span class="mb-header__menu-btn-line"></span>
@@ -43,8 +52,17 @@
         </svg>
       </button>
     </div>
+    {{with .Params.tags}}
     <ul class="mb-header-nav-list mobile">
+      {{ range . }}
+      <li class="mb-header-nav-list__item">
+          <a class="mb-header-nav-list__link" href="{{ "tags" | absURL}}{{. | urlize}}"
+          >{{.}}</a
+        >
+      </li>
+      {{end}}
     </ul>
+    {{end}}
   </nav>
 </header>