Layout fixes

.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-prettier-scss"
+  ],
+  "rules": {
+    "max-empty-lines": 1 
+  }
+}
+

assets/css/buttons.scss

@@ -15,9 +15,10 @@ a.button {
   margin-bottom: 5px;
   text-decoration: none;
   text-align: center;
-  border-radius: 0;
+  border-radius: 8;
   border: 1px solid $accent;
   background: $accent;
+  color: $background;
   font: inherit;
   font-weight: bold;
   appearance: none;

assets/css/font.scss

@@ -4,7 +4,6 @@
   font-style:  normal;
   font-weight: 400;
   src: url("../fonts/FiraCode-Regular.woff") format("woff");
-  font-display: swap;
 }
 
 @font-face {
@@ -13,5 +12,4 @@
   font-style:  normal;
   font-weight: 800;
   src: url("../fonts/FiraCode-Bold.woff") format("woff");
-  font-display: swap;
 }

assets/css/footer.scss

@@ -22,9 +22,11 @@
 
   .copyright {
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
+    flex: 1;
     align-items: center;
     font-size: 1rem;
+    justify-content: center;
 
     &--user {
       margin: auto;
@@ -33,17 +35,10 @@
 
     & > *:first-child:not(:only-child) {
       margin-right: 10px;
-
-       @media ($tablet) {
-        border: none;
-        padding: 0;
-        margin: 0;
-      }
     }
 
-    @media ($tablet) {
+    span {
-      flex-direction: column;
+      white-space: nowrap;
-      margin-top: 10px;
     }
   }
 }

assets/css/pagination.scss

@@ -47,7 +47,6 @@
 .button {
   position: relative;
   display: inline-flex;
-  flex: 1;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
@@ -57,12 +56,18 @@
   appearance: none;
   overflow: hidden;
 
+  @media($phone) {
+    flex: 1;
+  }
+
   + .button {
     margin-left: 10px;
   }
 
   a {
     display: flex;
+    justify-content: center;
+    flex: 1;
     padding: 8px 16px;
     text-decoration: none;
     text-overflow: ellipsis;

layouts/partials/pagination.html

@@ -1,20 +1,16 @@
 <div class="pagination">
   <div class="pagination__buttons">
     {{ if .Paginator.HasPrev }}
-      <span class="button previous">
+      <a href="{{ .Paginator.Prev.URL }}" class="button previous">
-        <a href="{{ .Paginator.Prev.URL }}">
+        <span class="button__icon">←</span>
-          <span class="button__icon">←</span>
+        <span class="button__text">{{ $.Site.Params.newerPosts | default "Newer posts" }}</span>
-          <span class="button__text">{{ $.Site.Params.newerPosts | default "Newer posts" }}</span>
+      </a>
-        </a>
-      </span>
     {{ end }}
     {{ if .Paginator.HasNext }}
-      <span class="button next">
+      <a href="{{ .Paginator.Next.URL }}" class="button next">
-        <a href="{{ .Paginator.Next.URL }}">
+        <span class="button__text">{{ $.Site.Params.olderPosts | default "Older posts" }}</span>
-          <span class="button__text">{{ $.Site.Params.olderPosts | default "Older posts" }}</span>
+        <span class="button__icon">→</span>
-          <span class="button__icon">→</span>
+      </a>
-        </a>
-      </span>
     {{ end }}
   </div>
 </div>

layouts/shortcodes/prismjs.html

@@ -20,6 +20,7 @@
       >{{ $inner }}</code></pre>
   {{ else }}
     <pre class="language-{{ .Get 0 }}">
-      <code class="language-{{ .Get 0 }}">{{ $inner }}</code></pre>
+      <code class="language-{{ .Get 0 }}">{{ $inner }}</code>
+    </pre>
   {{ end }}
 {{ end }}

package.json

@@ -35,6 +35,9 @@
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "husky": "^5.1.3"
+    "husky": "^5.1.3",
+    "stylelint": "^14.14.1",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "stylelint-config-standard-scss": "^6.1.0"
   }
 }