update: put templates' styles all together

Author: proxyerium

assets/css/baseof.css

@@ -9,10 +9,13 @@
 }
 
 html,
-body,
+body {
+    height: 100dvh;
+}
+
 main {
-    width: clamp(320px, 100vw, 100vw);
     height: 100dvh;
+    display: grid;
 }
 
 a {

assets/css/home.css

@@ -1,4 +1,4 @@
-main.home {
+.home {
     display: grid;
     justify-content: center;
     justify-items: center;
@@ -8,13 +8,56 @@ main.home {
         align-self: center;
     }
 }
+.home.hero {
+    background-color: #111111;
+    padding: 2rem 2rem 2rem 1rem;
+
+    > h1 {
+        padding-left: 1rem;
+        border-left: .3rem solid #fff;
+        color: #fff;
+        font-family: var(--font-mono);
+        &::first-letter {
+            color: magenta;
+        }
+        &::after{
+            content: "_";
+            animation: .5s blinking alternate infinite;
+        }
+    }
+}
+.home.links {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    font-size: 18px;
+}
+.home.category {
+    font-size: 22px;
+    margin-top: 4rem;
 
-main.section {
     display: flex;
     flex-direction: column;
+    gap: 1rem;
+}
+
+
+.section {
+    grid-template-rows: auto auto 1fr auto;
+    align-content: start;
+    justify-items: center;
 
     > h2 {
-        margin: 2rem auto;
-        align-self: center;
+        margin: 4rem;
     }
 }
+
+
+.single {
+    grid-template-rows: min-content auto;
+}
+.single.breadcrumb {
+    place-self: center;
+    margin: 1rem 0;
+}

assets/css/layouts.css

@@ -3,7 +3,6 @@
 
     display: flex;
     flex-direction: column;
-
 }
 
 .article.header {
@@ -19,13 +18,14 @@
 
         > li {
             list-style-type: none;
-            margin: 1rem;
+            margin: 1rem 0 0 0;
             font-size: 1rem;
         }
     }
 }
 
 .article.content {
+
     > * {
         margin: 1rem 0 1rem 1rem;
     }
@@ -43,7 +43,6 @@
             margin-top: .4rem;
             content: '';
             display: block;
-            width: 120%;
             height: .1rem;
             background-color: light-dark(var(--light-minor), var(--dark-minor) 0%);
         }

assets/css/partials/article.css

@@ -2,8 +2,9 @@
     margin: 1rem auto;
 }
 
-.list.articles {
+.list.items {
     overflow: auto;
+    font-size: 20px;
     margin: 1rem auto;
     > li {
         list-style-type: none;