next/previous article/project section rewritten

assets/scss/_default/single.scss

@@ -54,58 +54,38 @@
 }
 
 .section-articles {
-  margin: 20px auto;
+  margin: 20px auto -50px auto;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 1rem;
   max-width: 720px;
-  a {
-    color: rgb(255, 255, 255);
-    text-decoration: none;
-  }
   article {
-    background: rgb(60, 60, 90);
     color: rgb(255, 255, 255);
-    padding: 20px;
+    margin: 20px 0;
     border-radius: 5px;
     display: flex;
     flex-flow: column;
     height: max-content;
     transition: background .2s;
-    img {
-      order: -1;
-      max-width: calc(100% + 40px);
-      border-radius: 5px;
-      margin: -20px -20px 20px -20px;
-      background: rgb(80, 80, 120);
-      object-fit: cover;
-      max-height: 170px;
-    }
-    h1 {
-      margin-top: 0px;
-    }
     a {
-      color: rgb(255, 255, 255);
+      margin: 10px 0;
     }
     a:hover {
       text-decoration: underline;
     }
-    .meta {
-      margin: 0;
   }
-    .author {
+  .previous-article {
-      font-style: italic;
+    text-align: right;
-      color: rgb(200, 200, 230);
-    }
-  }
-  article:hover {
-      background: rgb(70, 70, 105);
   }
 }
-@media (max-width: 600px) {
+.section-articles::after {
-  .section-articles {
+  content: '';
-    grid-template-columns: repeat(1, 1fr);
+  position: absolute;
-  }
+  width: 100vw;
+  background: rgb(50, 50, 75);
+  height: 230px;
+  left: 0;
+  z-index: -10;
 }
 
 @import '../partials/footer';

assets/scss/partials/_main.scss

@@ -8,6 +8,8 @@
 html {
   scrollbar-width: thin;
   scrollbar-color: rgb(255, 130, 130) rgb(60, 60, 90);
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 body {
   background: rgb(40, 40, 60);
@@ -15,7 +17,6 @@ body {
   margin: 0;
   font-family: PoppinsLatin, Monaco, Lucida Console, monospace;
   display: grid;
-  overflow-x: hidden;
 }
 a {
   color: rgb(255, 130, 130);

config.yaml

@@ -3,7 +3,7 @@ languageCode: en-us
 title: vrifox.cc
 enableRobotsTXT: true
 params:
-  version: 2020-09-21
+  version: 2020-09-22
 menu:
   main:
   - identifier: blog

layouts/_default/single.html

@@ -36,34 +36,14 @@
       </article>
     </section>
     <section class="section-articles">
-      {{ with .PrevInSection }}
+      <article class="next-article">
-      <a href="{{ .Permalink }}">
+        {{ with .NextInSection }}<span>{{ if eq .Params.type "project" }}next project{{ end }}{{ if ne .Params.type "project" }}next article{{ end }}</span>
-        <article>
+        <a href="{{ .Permalink }}">{{ .Title }}</a>{{ end }}
-          <h1>{{ .Title }}</h1>
-          <p class="meta" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}"><span class="date">{{ .Date.Format "2 January 2006" }}</span> <span class="author">{{ with .Params.author }}by{{ end}} {{ .Params.author }}</span></p>
-          {{ with .Description }}
-          <p>{{ . }}</p>
-          {{ end }}
-          {{ with .Params.featured_image }}
-          <img src="{{ . | relURL }}">
-          {{ end }}
       </article>
-      </a>
+      <article class="previous-article">
-      {{ end }}
+        {{ with .PrevInSection }}<span>{{ if eq .Params.type "project" }}previous project{{ end }}{{ if ne .Params.type "project" }}previous article{{ end }}</span>
-      {{ with .NextInSection }}
+        <a href="{{ .Permalink }}">{{ .Title }}</a>{{ end }}
-      <a href="{{ .Permalink }}">
-        <article>
-          <h1>{{ .Title }}</h1>
-          <p class="meta" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}"><span class="date">{{ .Date.Format "2 January 2006" }}</span> <span class="author">{{ with .Params.author }}by{{ end }} {{ .Params.author }}</span></p>
-          {{ with .Description }}
-          <p>{{ . }}</p>
-          {{ end }}
-          {{ with .Params.featured_image }}
-          <img src="{{ . | relURL }}">
-          {{ end }}
       </article>
-      </a>
-      {{ end }}
     </section>
   </div>
 </main>

layouts/index.html

@@ -13,7 +13,7 @@
   </section>
   <h1>latest <a href="{{ "/blog" | relURL }}">posts</a></h1>
   <section class="section-articles">
-    {{ range first 3 (where .Site.RegularPages "Type" "post") }}
+    {{ range first 2 (where .Site.RegularPages "Type" "post") }}
     <a href="{{ .Permalink }}">
       <article>
         <h1>{{ .Title }}</h1>

resources/_gen/assets/scss/scss/_default/single.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -7,15 +7,16 @@
 
 html {
   scrollbar-width: thin;
-  scrollbar-color: #ff8282 #3c3c5a; }
+  scrollbar-color: #ff8282 #3c3c5a;
+  overflow-x: hidden;
+  overflow-y: scroll; }
 
 body {
   background: #28283c;
   color: #f0f0ff;
   margin: 0;
   font-family: PoppinsLatin, Monaco, Lucida Console, monospace;
-  display: grid;
+  display: grid; }
-  overflow-x: hidden; }
 
 a {
   color: #ff8282;
@@ -104,48 +105,34 @@ nav {
           background: #464669; }
 
 .section-articles {
-  margin: 20px auto;
+  margin: 20px auto -50px auto;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 1rem;
   max-width: 720px; }
-  .section-articles a {
-    color: white;
-    text-decoration: none; }
   .section-articles article {
-    background: #3c3c5a;
     color: white;
-    padding: 20px;
+    margin: 20px 0;
     border-radius: 5px;
     display: flex;
     flex-flow: column;
     height: max-content;
     transition: background .2s; }
-    .section-articles article img {
-      order: -1;
-      max-width: calc(100% + 40px);
-      border-radius: 5px;
-      margin: -20px -20px 20px -20px;
-      background: #505078;
-      object-fit: cover;
-      max-height: 170px; }
-    .section-articles article h1 {
-      margin-top: 0px; }
     .section-articles article a {
-      color: white; }
+      margin: 10px 0; }
     .section-articles article a:hover {
       text-decoration: underline; }
-    .section-articles article .meta {
+  .section-articles .previous-article {
-      margin: 0; }
+    text-align: right; }
-    .section-articles article .author {
-      font-style: italic;
-      color: #c8c8e6; }
-  .section-articles article:hover {
-    background: #464669; }
 
-@media (max-width: 600px) {
+.section-articles::after {
-  .section-articles {
+  content: '';
-    grid-template-columns: repeat(1, 1fr); } }
+  position: absolute;
+  width: 100vw;
+  background: #32324b;
+  height: 230px;
+  left: 0;
+  z-index: -10; }
 
 footer {
   background: #1e1e2d;

resources/_gen/assets/scss/scss/index.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -7,15 +7,16 @@
 
 html {
   scrollbar-width: thin;
-  scrollbar-color: #ff8282 #3c3c5a; }
+  scrollbar-color: #ff8282 #3c3c5a;
+  overflow-x: hidden;
+  overflow-y: scroll; }
 
 body {
   background: #28283c;
   color: #f0f0ff;
   margin: 0;
   font-family: PoppinsLatin, Monaco, Lucida Console, monospace;
-  display: grid;
+  display: grid; }
-  overflow-x: hidden; }
 
 a {
   color: #ff8282;