udpate: change styles(3)

- layouts/*.css -> layouts/_default/*.css
- article in single page wider 10vw
- add line numbers for code blocks

Author: proxyerium

assets/css/baseof.css

@@ -1,5 +1,6 @@
 :root {
-    --font-base: go, system-ui;
+    /* === fonts === */
+    --font-regular: go, system-ui;
     --font-mono: go-mono, monospace;
 
     color-scheme: light dark;
@@ -17,7 +18,7 @@
     padding: 0;
     box-sizing: border-box;
 
-    font-family: var(--font-base);
+    font-family: var(--font-regular);
 }
 
 html,

assets/css/layouts/home.css renamed to assets/css/layouts/_default/home.css

@@ -0,0 +1,3 @@
+.single {
+    grid-template-rows: min-content auto;
+}

assets/css/layouts/section.css renamed to assets/css/layouts/_default/section.css

@@ -1,5 +1,5 @@
 section.article {
-    padding: 0 20vw;
+    padding: 0 15vw;
 
     display: flex;
     flex-direction: column;
@@ -63,20 +63,56 @@ section.article {
         background: linear-gradient(to right, var(--dark-minor), var(--dark-bg) 60%);
     }
 
-    /* inline code */
-    code{
-        background-color: rgb(35, 102, 102);
-    }
-
-    /* override the default style of per that might be generated by markup renderer */
     pre {
-        overflow-x: auto;
+        /* override the default style of per that might be generated by Goldmark */
         background-color: rgb(51, 60, 60) !important;
         * {
             font-family: var(--font-mono);
         }
+
+        code[data-lang] {
+            &::before {
+                display: block;
+
+                content: attr(data-lang);
+                font-family: var(--font-mono);
+                font-weight: bold;
+
+                padding: 1rem;
+                background-color: rgb(44, 85, 85);
+            }
+
+            counter-reset: line;
+            > span {
+                margin: .2rem auto;
+                padding-left: 4rem;
+                position: relative;
+                /* === line numbers === */
+                &:before {
+                    position: absolute;
+                    left: 0;
+                    content: counter(line);
+                    counter-increment: line;
+
+                    width: 4rem;
+                    text-align: right;
+                    padding-right: 1.2rem;
+                }
+
+                > span {
+                    padding-left: 1rem;
+                    border-left: 2px solid #fff;
+                }
+            }
+        }
+    }
+
+    /* inline code */
+    code {
+        background-color: rgb(35, 102, 102);
     }
 
+
     img {
         width: 60%;
     }