Finish basic site

content/posts/another-one.md

@@ -0,0 +1,6 @@
+---
+title: "Another One"
+date: 2023-09-05T19:35:11-04:00
+draft: false 
+---
+

data/index.json

@@ -22,13 +22,7 @@
                 "value": "Software Architecture"
             },
             {
-                "value": "Front End Development"
-            },
-            {
-                "value": "Back End Development"
-            },
-            {
-                "value": "Web Design"
+                "value": "Web Development"
             },
             {
                 "value": "Welding"
@@ -46,7 +40,7 @@
                 "value": "Philosophy"
             },
             {
-                "value": "Ham Radio (CQCQCQ KE8TIZ CQCQCQ)"
+                "value": "Ham Radio (CQCQCQ KE8TIZ QRK?)"
             },
             {
                 "value": "Chemistry"
@@ -66,20 +60,11 @@
             {
                 "value": "Homesteading"
             },
-            {
-                "value": "Self-Sufficiency"
-            },
             {
                 "value": "Embedded Systems"
             },
             {
                 "value": "Computer Engineering"
-            },
-            {
-                "value": "Artifical Intelligence (Language Models)"
-            },
-            {
-                "value": "Cryptocurrencies (Monero)"
             }
         ]
     }

layouts/index.html

@@ -9,7 +9,7 @@
     </div>
     <div class="homepage-card">
         <div>
-            <h1 data-show="about-description" data-value="uname -a" class="typewriter card-title">~ $&nbsp;</h1>
+            <h4 data-show="about-description" data-value="uname -a" class="typewriter card-title">~ $&nbsp;</h1>
             <br/>
             <small>AKA About for non-nerds</small>
         </div>
@@ -21,29 +21,7 @@
             </div>
             <div class="mini-terminal">
                 <p data-show="about-interests" data-value="cat interests.txt | less" class="typewriter">~ $&nbsp;</p>
-                <div id="about-interests">
-                    {{ range .Site.Data.index.About.Interests }}
-                        <p class="terminal-text" data-value="{{ .value }}"></p>
-                    {{ end }}
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="homepage-card">
-        <div>
-            <h1 data-show="about-description" data-value="uname -a" class="typewriter card-title">~ $&nbsp;</h1>
-            <small>AKA About for non-nerds</small>
-        </div>
-        <div class="about-grid">
-            <div id="about-description" class="about-description">
-                {{ range .Site.Data.index.About.Content }}
-                    <p data-value="{{ .value }}"></p>
-                {{ end }}
-            </div>
-            <div class="mini-terminal">
-                <p data-show="about-interests" data-value="cat interests.txt | less" class="typewriter">~ $&nbsp;</p>
-                <div id="about-interests">
+                <div id="about-interests" class="terminal-contents">
                     {{ range .Site.Data.index.About.Interests }}
                         <p class="terminal-text" data-value="{{ .value }}"></p>
                     {{ end }}

static/css/styles.css

@@ -22,7 +22,7 @@ body {
     background-color: rgba(11,11,12,1);
 }
 
-h1, h2, h3, h4 {
+h1, h2, h3 {
     font-family: 'Hermit', Helvetica, Arial, sans-serif;
     font-size: 56px;
     line-height: 80px;
@@ -30,6 +30,15 @@ h1, h2, h3, h4 {
     color: white;
 }
 
+h4 {
+    font-family: 'Hermit', Helvetica, Arial, sans-serif;
+    font-size: 40px;
+    line-height: 60px;
+    text-shadow: 1px 1px 1px grey;
+    color: white;
+
+}
+
 p, a, li, tr, td, span, noscript, figcaption {
     font-family: 'Hermit', Helvetica, Arial, sans-serif;
     font-size: 16px;
@@ -61,11 +70,7 @@ html {
 }
 
 .dashed-bottom {
-    border-bottom: 5px dashed white;
-}
-
-.light-dashed-bottom {
-    border-bottom: 2px dashed #e6e6e6;
+    border-bottom: 5px solid rgba(11,11,12,1);
 }
 
 .intro-content {
@@ -84,15 +89,15 @@ html {
 }
 
 .homepage-card {
-    height: calc(100vh - 6vh);
+    height: calc(70vh - 6vh);
     width: calc(100vw  - 6vw);
     padding: 1vh 1vw;
     padding-top: 2vh;
     background-color: rgba(11,11,12,0.4);
     corner-radius: 10px;
     margin: 2vh 2vw;
-    display: grid;
-    grid-template-rows: auto 1fr;
+    display: flex;
+    flex-direction: column;
     overflow-y: hidden;
 }
 
@@ -100,8 +105,10 @@ html {
     display: grid;
     grid-template-columns: 65% 1fr;
     grid-template-rows: 1fr max-content;
-    height: 100%;
+    flex-grow: 1;
     width: 100%;
+    max-height: calc(100% - 100px);
+    overflow-y: hidden;
 }
 
 .card-title {
@@ -109,7 +116,6 @@ html {
     margin: 10px;
     margin-right: auto;
     padding-right: 10px;
-
 }
 
 .about-description {
@@ -129,10 +135,15 @@ html {
 
 .mini-terminal {
     background-color: black;
-    height: 100%;
+    height: calc(100% - 20px);
+    max-height: calc(100% - 20px);
     padding: 10px;
 }
 
+.terminal-contents {
+    overflow-y: scroll;
+}
+
 .page-header {
     text-align: center;
     padding: 50px;
@@ -181,12 +192,12 @@ article a {
     height: 30vh;
     padding-bottom: 25px;
     overflow: hidden;
-    background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(0,0,0,0) 100%);
+    background: linear-gradient(rgba(11,11,12,0) 0%, rgba(11,11,12,0.6) 5%, rgba(0,0,0,0) 100%);
+    transition: background 200ms linear;
 }
 
 article a:hover {
-    background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(32,42,68,0.5) 100%);
-    transition: 300ms linear;
+    background: black;
 }
 
 .post {
@@ -243,6 +254,8 @@ figure {
     article a {
         padding: 0px;
         height: 100%;
+        max-height: 75vh;
+        margin-bottom: 1vh;
         flex-direction: column;
         text-align: center;
     }
@@ -255,4 +268,17 @@ figure {
         background: rgba(22, 22, 22, 0.9);
         margin-bottom: 20px;
     }
+
+    .about-grid {
+        display: grid;
+        grid-template-rows: 60% 40%;
+        grid-template-columns: 100%;
+        height: 100%;
+        width: 100%;
+    }
+
+    .about-description {
+        margin: 5px;
+        overflow-y: scroll;
+    }
 }

themes/clortox/layouts/_default/list.html

@@ -1,10 +1,10 @@
 {{ define "main" }}
-<div class="page-header dashed-bottom">
+<div class="page-header">
     <h1 data-value="Posts" class="typewriter scramble"></h1>
     <p>Ideas, projects, and other musings.</p>
 </div>
 {{ range.Pages }}
-    <article class="light-dashed-bottom">
+    <article>
         <a href="{{ .Permalink }}">
             {{ if .Params.banner }}
             <div class="post-list-body-container">

themes/clortox/layouts/_default/single.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div class="page-header dashed-bottom">
+<div class="page-header">
     <h1 data-value="{{ .Title }}" class="scramble">{{ .Title }}</h1>
     <small class="post-list-date">{{ .Date.Format "January 2, 2006" }}</small>
 </div>

themes/clortox/static/js/script.js

@@ -10,7 +10,7 @@ window.onload = function() {
         let parallax = document.querySelector('.parallax')
         let scrollPosition = window.pageYOffset;
 
-        let newSize = (document.querySelector('#content').offsetHeight * 0.66);
+        let newSize = (document.querySelector('#content').offsetHeight * 0.8);
         if(newSize < window.innerHeight)
             newSize = window.innerHeight;
         parallax.style.height = newSize + "px";