Finish basic site

2023-09-05 19:36:06 -04:00 · 2023-09-05 19:36:06 -04:00 · 9f9260180c
parent 8c6dc0c101
commit 9f9260180c
7 changed files with 55 additions and 60 deletions
--- a/content/posts/another-one.md
+++ b/content/posts/another-one.md
@ -0,0 +1,6 @@
+---
+title: "Another One"
+date: 2023-09-05T19:35:11-04:00
+draft: false 
+---
+
--- a/data/index.json
+++ b/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)"
            }
        ]
    }
--- a/layouts/index.html
+++ b/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 }}
--- a/static/css/styles.css
+++ b/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;
+    }
 }
--- a/themes/clortox/layouts/_default/list.html
+++ b/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">
--- a/themes/clortox/layouts/_default/single.html
+++ b/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>
--- a/themes/clortox/static/js/script.js
+++ b/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";