From 8e34b59d0717e5ac46e5a57637a6e751fc2d18c4 Mon Sep 17 00:00:00 2001
From: cbax <me+forgejo@cbax.dev>
Date: Tue, 22 Oct 2024 18:38:28 -0400
Subject: [PATCH] latest version

---
 static/css/styles.css | 110 ++++++++++++++++++++++++------------------
 templates/index.html  |  54 ++++++++++++++-------
 2 files changed, 100 insertions(+), 64 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index 58bb6b4..f6839f3 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,3 +1,6 @@
+
+@import url('/res/css/nord.css');
+
 @font-face {
   font-family: 'Intel One Mono Regular';
   font-style: normal;
@@ -12,18 +15,34 @@
   src: local('Sans Forgetica Regular'), url('/res/woff/sf.woff') format('woff');
 }
 
+:root {
+  --bg-accent: var(--nord2);
+  --bg-main: var(--nord0);
+  --text-primary: var(--nord4);
+  --highlight-primary: #00fcff;
+  --highlight-secondary: var(--nord5);
+
+  --card-margin: 2svh;
+  --card-radius: 15px;
+  --card-shadow-size: 5px;
+  font-family: "Intel One Mono Regular", monospace, sans-serif;
+	scrollbar-width: none;
+
+	background-color: var(--base);
+	color: var(--text);
+}
+
 body {
-  background: #00fcff;
+  background: var(--bg-accent);
   padding: 0px;
   margin: 0px;
-  font-family: 'Intel One Mono Regular';
-  color: #ededed;
+  color: var(--text-primary);
 }
 
 h1 {
   font-family: 'Sans Forgetica Regular';
   font-size: 4em;
-  color: #00fcff;
+  color: var(--highlight-primary);
   text-shadow: #ededed 3px -3px;
   margin-top: 2svh;
   margin-bottom: 2svh;
@@ -33,37 +52,21 @@ span {
   display: inline-block;
 }
 
-.vl {
-  border-left: 1px solid #ededed;
-  border-right: 1px solid #ededed;
-  margin-left: 1ch;
-  margin-right: 1ch;
-  height: 4rem;
-}
-
-.icon {
-  width: 4rem;
-  height: 4rem;
-}
-
 .container {
   display: flex;
   flex-flow: column;
   height: 100svh;
 }
 
-.links {
-  display: flex
-}
-
 figure {
   display: inline-block;
   margin: 20px; /* adjust as needed */
 }
+
 figure img {
   width: 10vw;
   height: auto;
-  border-radius: 20px;
+  border-radius: var(--card-radius);
   vertical-align: top;
 }
 figure figcaption {
@@ -73,18 +76,19 @@ figure figcaption {
 
 .main {
   flex: 1 1 auto;
-  border-radius: 20px;
-  margin-top: 1svh;
-  margin-left: 1svh;
-  margin-right: 1svh;
-  margin-bottom: 1svh;
-  padding: 1svh;
+  border-radius: var(--card-radius);
+  margin-top: var(--card-margin);
+  margin-left: var(--card-margin);
+  margin-right: var(--card-margin);
+  margin-bottom: var(--card-margin);
+  padding: 2svh;
   /*height: 78svh;*/
-  background: #3c3c3c;
+  background: var(--bg-main);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  box-shadow: var(--highlight-primary) calc(var(--card-shadow-size) * -1) var(--card-shadow-size);
 }
 
 .card {
@@ -101,43 +105,57 @@ figure figcaption {
 
 footer {
   flex: 0 1 15svh;
-  border-radius: 20px;
-  margin-left: 1svh;
-  margin-right: 1svh;
-  margin-bottom: 1svh;
+  border-radius: var(--card-radius);
+  margin-left: var(--card-margin);
+  margin-right: var(--card-margin);
+  margin-bottom: var(--card-margin);
   padding: 1svh;
-  background: #3c3c3c;
+  background: var(--bg-main);
   display: flex;
-  /*height: 15svh;
-  min-height: 32px;*/
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
-  gap: 1em;
+  gap: 0.25vw;
+  box-shadow: var(--highlight-secondary) calc(var(--card-shadow-size) * -1) var(--card-shadow-size);
 }
 
 a {
-  color: #ededed;
-  text-decoration: underline #00fcff;
+  color: var(--text-primary);
+  text-decoration: underline var(--highlight-primary);
 }
 
 a:visited {
   color: #444;
-  text-decoration: underline #00fcff;
+  text-decoration: underline var(--highlight-primary);
+}
+
+td:nth-child(1) {
+  font-weight: 900;
+  word-break: keep-all;
+}
+
+td:nth-child(2) {
+	padding-left: 0.5em;
+	word-break: break-all;
+}
+
+fieldset {
+  border-color: var(--bg-accent);
+  border-radius: var(--card-radius);
 }
 
 .fancy {
   background-image: linear-gradient(
     to right,
-    #00fcff,
-    #00fcff 50%,
+    var(--highlight-primary),
+    var(--highlight-primary) 50%,
     #ededed 50%
   );
-  text-decoration: underline #00fcff;
+  text-decoration: underline var(--highlight-primary);
   background-size: 200% 100%;
   background-position: -100%;
   display: inline-block;
-  padding: 5px 0;
+  padding: 0px 0;
   position: relative;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -146,10 +164,10 @@ a:visited {
 
 .fancy:before {
   content: '';
-  background: #00fcff;
+  background: var(--highlight-primary);
   display: block;
   position: absolute;
-  bottom: -3px;
+  bottom: 0px;
   left: 0;
   width: 0;
   height: 3px;
diff --git a/templates/index.html b/templates/index.html
index 423829f..32cb0fe 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -18,33 +18,51 @@
           <br>
           <hl></hl>
           <br>
-          <div>
+          <fieldset>
+            <legend>Contacts & Links</legend>
+            <table>
+              <tbody>
+                <tr>
+                  <td>Email</td>
+                  <td>me (at) cbax dot dev</td>
+                </tr>
+                <tr>
+                  <td>GitHub</td>
+                  <td><a href="//github.com/mrcbax" class="fancy">mrcbax</a></td>
+                </tr>
+                <tr>
+                  <td>Blog</td>
+                  <td><a href="//computeco.de" class="fancy">ComputeCode</a></td>
+                </tr>
+              </tbody>
+            </table>
+          </fieldset>
+          <fieldset>
+            <legend>About</legend>
             <ul>
               <li>42U homelab owner <a class="fancy" href="/homelab">See Details</a></li>
               <li>Amateur radio operator</li>
               <li>AS202239 - 44net member</li>
               <li>Retro-tech enthusiast</li>
             </ul>
-          </div>
+          </fieldset>
         </div>
-        <span class="links">
-          <a href="//computeco.de"><img class="icon" src="/res/img/blog.svg"/></a><div class="vl"></div><a href="//github.com/mrcbax"><img class="icon" src="/res/img/github.svg"/></a>
-        </span>
       </div>
       <footer>
-          <a href="//cbax.dev"><img src="/res/img/cbax.gif"/></a>
-          <a href="//ssi.fyi"><img src="/res/img/ssi.gif"/></a>
-          <a href="//matdoes.dev"><img src="/res/img/mat.png"/></a>
-          <a href="//adryd.com"><img src="/res/img/adryd.png"/></a>
-          <a href="//kibty.town"><img src="/res/img/eva.gif"/></a>
-          <a href="//shrecked.dev"><img src="/res/img/shwecky.png"/></a>
-          <a href="//honbra.com"><img src="/res/img/honbra.png"/></a>
-          <a href="//notnite.com"><img src="/res/img/notnite.gif"/></a>
-          <a href="//archlinux.org"><img src="/res/img/archbtw.png"/></a>
-          <a href="//neovim.io"><img src="/res/img/neovim.gif"/></a>
-          <a href="//ublockorigin.com"><img src="/res/img/ublockorigin.png"/></a>
-          <a href="//www.mozilla.org/en-US/firefox/new"><img src="/res/img/abc.gif"/></a>
-          <a href="//ko-fi.com/mrcbax"><img src="/res/img/kofi.gif"/></a>
+        <a href="//cbax.dev"><img src="/res/img/cbax.gif"/></a>
+        <a href="//ssi.fyi"><img src="/res/img/ssi.gif"/></a>
+        <a href="//adryd.com"><img src="/res/img/adryd.png"/></a>
+        <a href="//matdoes.dev"><img src="/res/img/mat.png"/></a>
+        <a href="//shrecked.dev"><img src="/res/img/shwecky.png"/></a>
+        <a href="//honbra.com"><img src="/res/img/honbra.png"/></a>
+        <a href="//notnite.com"><img src="/res/img/notnite.gif"/></a>
+	<a href="//damcraft.de"><img src="/res/img/dam.gif"/></a>
+        <a href="//kibty.town"><img src="/res/img/eva.gif"/></a>
+        <a href="//alpinelinux.org"><img src="/res/img/powered_by_alpine.gif"/></a>
+        <a href="//neovim.io"><img src="/res/img/neovim.gif"/></a>
+        <a href="//ublockorigin.com"><img src="/res/img/ublockorigin.png"/></a>
+        <a href="//www.mozilla.org/en-US/firefox/new"><img src="/res/img/abc.gif"/></a>
+        <a href="//ko-fi.com/mrcbax"><img src="/res/img/kofi.gif"/></a>
       </footer>
     </div>
   </body>