added discreteTags option; fixed hamburger

README.md

@@ -54,6 +54,7 @@ summaryLength = 70  # number of words for article summaries
     contentWidth = "1000px"  # maximum width of the site content, css syntax
 
     discreteCards = false  # enable discrete card style; default false
+    discreteTags = false  # enable discrete tag style; default false
     gridView = false  # show post list as a grid. goes well with discreteCards
     highlightBgColor = "#34363b"  # card and circle navigation background color for discrete card mode
 

assets/scss/style.scss

@@ -8,6 +8,7 @@ $mono_font: {{ .Site.Params.monospaceFontFamily | default "JetBrains Mono" }};
 $highlight_bg_color: {{ .Site.Params.highlightBgColor | default "#34363b" }};
 $content_width: {{ .Site.Params.contentWidth | default "1000px" }};
 $border_radius: 10px;
+$content_spacing: 25px;
 
 ::selection, ::-moz-selection {
     background: $accent_color;
@@ -51,7 +52,7 @@ footer {
         color: $dim_fg_color;
     }
     hr {
-        margin-top: 50px;
+        margin-top: (2 * $content_spacing);
     }
     .footerColumns {
         font-size: .9rem;
@@ -59,7 +60,7 @@ footer {
         flex-direction: row;
         flex-wrap: wrap;
         ul {
-            margin: 12px;
+            margin: ($content_spacing / 2);
             list-style-type: none;
             padding: 0;
             li > strong {
@@ -70,7 +71,7 @@ footer {
 }
 
 #links {
-    padding: 5px 0 40px 0;
+    padding: 5px 0;
 }
 
 article, .articlePreview {
@@ -224,7 +225,7 @@ h1, h2, h3, h4, h5, h6 {
 .postlist {
         display: grid;
         grid-gap: 25px;
-        margin-bottom: 25px;
+        margin-bottom: $content_spacing;
         grid-template-columns: 1fr;
     &.gridView {
         grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
@@ -374,12 +375,8 @@ ul.list {
     }
 }
 
-.loadMoreButton {
-    text-align: center;
-    font-size: 1.2rem;
-    font-weight: bold;
-    &.buttonLike {
-        a {
+@mixin buttonLikeLink {
+    display: inline-block;
     border-radius: $border_radius;
     background-color: $highlight_bg_color;
     padding: 15px;
@@ -388,10 +385,20 @@ ul.list {
         background-color: $accent_color;
     }
 }
+
+.loadMoreButton {
+    text-align: center;
+    font-size: 1.2rem;
+    font-weight: bold;
+    &.buttonLike {
+        a {
+            @include buttonLikeLink;
+        }
     }
 }
 
 .relatedArticlesContainer {
+    margin: $content_spacing 0;
     #relatedArticles .postlistitem {
         @extend .featuredCard;
     }
@@ -411,7 +418,7 @@ ul.list {
     }
 
     img {
-        margin-right: 10px;
+        margin-right: ($content_spacing / 2);
         margin-top: 7px;
         align-self: flex-start;
         width: 50px;
@@ -432,12 +439,13 @@ nav, #links {
 }
 
 header {
+    margin-bottom: $content_spacing;
     .titleAndHamburger {
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         align-items: flex-start;
-        align-self: flex-start
+        justify-content: space-between;
     }
     nav {
         font-size: .9em;
@@ -459,6 +467,14 @@ header {
     }
 }
 
+.articleTagsContainer {
+    margin: $content_spacing 0;
+}
+
+a.discreteTag {
+    @include buttonLikeLink;
+}
+
 {{ if .Site.Params.mobileHamburgerNav | default false }}
 header {
     #hamburger-menu {
@@ -478,8 +494,8 @@ header {
             cursor: pointer;
             text-align: center;
             margin: 0;
-            padding: 12px;
-            width: 35px;
+            padding: ($content_spacing / 4);
+            align-self: center;
         }
         nav {
             ul#main-nav {
@@ -491,6 +507,7 @@ header {
                     text-align: right;
                     a {
                         padding-left: 0;
+                        padding-right: ($content_spacing / 4);
                     }
                 }
             }

layouts/_default/single.html

@@ -10,17 +10,21 @@
         <img src="{{ .Params.Image }}" alt="" />
         {{ end }}
         <div>{{ .Content }}</div>
+    </article>
     {{ if .Params.tags }}
-            <hr />
-            <p>
+        {{ if not .Site.Params.discreteCards }}<hr />{{ end }}
+        <p class="articleTagsContainer">
             <span> </span>
             <strong>Tags:</strong>
             {{ range .Params.tags }}
-                    <a href="/tags/{{ . | urlize }}">#{{ . }}</a>
+                <a
+                    {{ if site.Params.discreteTags | default false }}
+                    class="discreteTag"
+                    {{ end }}
+                    href="/tags/{{ . | urlize }}">#{{ . }}</a>
             {{ end }}
         </p>
     {{ end }}
-    </article>
     {{- partial "inject/content-after.html" . -}}
     {{ if .Site.Params.commento }}
         <script

layouts/partials/header.html

@@ -3,7 +3,7 @@
     <div class="titleAndSearchContainer">
         <div id="titleContainer">
             <img src='{{ .Site.Params.Logo | default "/logo.svg" }}' />
-            <div>
+            <div style="width: 100%">
                 <div class="titleAndHamburger">
                     <h1>{{ .Site.Title | default "Ficurinia" }}</h1>
                     {{ if .Site.Params.mobileHamburgerNav | default false }}