css: unify colors and swap bg/fg

Reviewed-on: Trianta/trianta.dev#12

Jenkinsfile

@@ -1,22 +1,53 @@
 pipeline {
-    agent any
+    agent none
     stages {
         stage('Checkout') {
+            agent { label 'agent-12' }
+            when { expression { return env.GIT_BRANCH == 'origin/main' } }
             steps {
                 checkout scm
             }
         }
         stage('Build') {
+            agent { label 'agent-12' }
+            when { expression { return env.GIT_BRANCH == 'origin/main' } }
+            steps {
+                script {
+                    docker.build('trianta.dev:latest')
+                }
+            }
+        }
+        stage('Deploy') {
+            agent { label 'agent-12' }
+            when { expression { return env.GIT_BRANCH == 'origin/main' } }
+            steps {
+                sh 'docker stop trianta.dev && docker rm trianta.dev || exit 0'
+                sh 'docker run -d -e USER=scv -e USER_UID=1001 -e USER_GID=1001 --restart=unless-stopped -p 3466:80 --name trianta.dev trianta.dev:latest'
+            }
+        }
+        stage('Test Checkout') {
+            agent { label 'agent-13' }
+            when { expression { return env.GIT_BRANCH != 'origin/main' } }
+            steps {
+                sh 'echo $GIT_BRANCH'
+                checkout scm
+            }
+        }
+        stage('Test Build') {
+            agent { label 'agent-13' }
+            when { expression { return env.GIT_BRANCH != 'origin/main' } }
             steps {
                 script {
                     docker.build('test.trianta.dev:latest')
                 }
             }
         }
-        stage('Deploy') {
+        stage('Test Deploy') {
+            agent { label 'agent-13' }
+            when { expression { return env.GIT_BRANCH != 'origin/main' } }
             steps {
-                sh 'docker stop test && docker rm test || exit 0'
+                sh 'docker stop test.trianta.dev && docker rm test.trianta.dev || exit 0'
-                sh 'docker run -d -p 3466:80 --name test test.trianta.dev:latest'
+                sh 'docker run -d -e USER=scv -e USER_UID=1001 -e USER_GID=1001 --restart=unless-stopped -p 3466:80 --name test.trianta.dev test.trianta.dev:latest'
             }
         }
     }

default.css

@@ -1,34 +1,62 @@
 /*
- * base text: #06CDFF
+ * text / border: #8c7862
- * important text: #8200FF
+ * foreground: #89bea6
- * background: #03001C
+ * background: #61937c 
  */
 
+
 body {
-    font-family: Arial, sans-serif;
+    font-family: "Departure Mono", sans-serif;
-    color: #06CDFF;
+    font-optical-sizing: auto;
-    background: #03001C;
+    font-weight: 400;
+    color: #8c7862;
+    background: #61937c;
     line-height: 1.5;
     margin-inline: auto;
     margin: 0 auto;
 }
 
 .inside {
-    max-width: 80rem;
+    max-width: 60rem;
     margin: 0 auto;
     padding: 2rem 1.5rem;
+    background: #89bea6;
+    border: 4px solid #8c7862;
 }
 
-#navigation {
+nav {
     padding: 1rem;
     text-align: center;
+    width: 6rem;
+}
+
+nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.gap {
+    width: 4rem;
+}
+
+.content {
+    width: 48rem;
+    text-align: left;
+}
+
+@media screen and (max-width: 600px) {
+    .column {
+        width: 100%;
+    }
+    .gap {
+        visibility: hidden;
+    }
 }
 
 .trianta {
-    font-size: 3.5rem !important;
+    font-size: 2.5rem !important;
-    color: #06CDFF !important;
+    min-width: 12rem;
-    border: none !important;
-    margin: -1rem;
 }
 
 .canvas {
@@ -36,13 +64,12 @@ body {
     display: inline-block;
     width: 60rem;
     vertical-align: bottom;
-    border: solid 4px #06CDFF;
+    border: solid 4px #8c7862;
 }
 
 .stats {
     font-size: 18px;
     display: inline-block;
-    width: 12rem;
     vertical-align: middle;
 }
 
@@ -53,7 +80,7 @@ h1 {
 }
 
 h2 {
-    border: solid 2px #06CDFF;
+    border: solid 2px #8c7862;
     margin: auto;
     padding: 8px;
     text-align: center;
@@ -67,14 +94,12 @@ h3 {
 }
 
 p {
-    margin: 0px;
+    margin: 1rem;
 }
 
 a {
-    background-color: #03001C;
+    border: solid 2px #8c7862;
-    border: solid 2px #06CDFF;
     border-radius: 12px;
-    color: #06CDFF;
     display: inline-block;
     margin: 6px;
     margin-top: 0px;
@@ -99,8 +124,7 @@ a.button {
 }
 
 a:visited {
-    border: solid 2px #8200FF;
+    color: #8c7862;
-    color: #8200FF;
 }
 
 @keyframes hover {
@@ -130,5 +154,5 @@ a:visited {
 
 #pong {
     margin: 6px;
-    background: #03001C;
+    background: #61937c;
 }

index.html

@@ -3,21 +3,26 @@
 <head>
     <meta charset="utf-8"/>
     <title>Trianta</title>
-    <link rel="stylesheet" href="/default.css" />
+    <link rel="stylesheet" href="/default.css">
+    <link rel="stylesheet" href="https://www.nerdfonts.com/assets/css/webfont.css">
 </head>
 <body>
     <div class="inside">
-        <div>
+        <div style="display: flex;">
             <a href="/" class="trianta">TRIANTA</a>
-            <p>Function over form by design</p>
+            <div class="column">
+                <a href="https://www.github.com/trimutex" alt="GitHub"><i class="nf nf-dev-github"></i></a>
+                <a href="https://lab.trianta.dev/Trianta" alt="Personal Projects"><i class="nf nf-linux-gitea"></i></a>
+                <a href="/completed" alt="Completed"><i class="nf nf-dev-javascript"></i></a>
+                <a href="/current" alt="Current"><i class="nf nf-dev-git_branch"></i></a>
+                <a href="/other" alt="Other"><i class="nf nf-dev-git_merge"></i></a>
+                <a href="/contact" alt="Contact"><i class="nf nf-oct-feed_person"></i></a>
             </div>
-        <div id="navigation">
+        </div>
-            <a href="https://www.github.com/trimutex">GitHub</a>
+        <p>Function over form by design</p>
-            <a href="https://lab.trianta.dev/Trianta">Projects</a>
+        <div style="display: flex;">
-            <a href="/completed">Completed</a>
+            <div class="column gap"></div>
-            <a href="/current">Current</a>
+            <div class="column content"></div>
-            <a href="/other">Other</a>
-            <a href="/contact">Contact</a>
         </div>
     </div>
 </body>

package-lock.json

@@ -13,9 +13,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.6.3",
+      "version": "5.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
-      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",

pages/completed/index.html

@@ -11,14 +11,19 @@
             <a href="/" class="trianta">TRIANTA</a>
             <p>Function over form by design</p>
         </div>
-        <div id="navigation">
+        <div style="display: flex;">
-            <a href="https://www.github.com/trimutex">GitHub</a>
+            <nav class="column">
-            <a href="https://lab.trianta.dev/Trianta">Projects</a>
+                <ul>
-            <a href="/completed">Completed</a>
+                    <li><a href="https://www.github.com/trimutex">GitHub</a></li>
-            <a href="/current">Current</a>
+                    <li><a href="https://lab.trianta.dev/Trianta">Projects</a></li>
-            <a href="/other">Other</a>
+                    <li><a href="/completed">Completed</a></li>
-            <a href="/contact">Contact</a>
+                    <li><a href="/current">Current</a></li>
-        </div>
+                    <li><a href="/other">Other</a></li>
+                    <li><a href="/contact">Contact</a></li>
+                </ul>
+            </nav>
+            <div class="column gap"></div>
+            <div class="column content">
                 <h2>Completed Projects</h2>
                 <div class="card reserve">
                     <div class="canvas">
@@ -57,5 +62,7 @@
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 </body>
 </html>

pages/contact/index.html

@@ -11,17 +11,25 @@
             <a href="/" class="trianta">TRIANTA</a>
             <p>Function over form by design</p>
         </div>
-        <div id="navigation">
+        <div style="display: flex;">
-            <a href="https://www.github.com/trimutex">GitHub</a>
+            <nav class="column">
-            <a href="https://lab.trianta.dev/Trianta">Projects</a>
+                <ul>
-            <a href="/completed">Completed</a>
+                    <li><a href="https://www.github.com/trimutex">GitHub</a></li>
-            <a href="/current">Current</a>
+                    <li><a href="https://lab.trianta.dev/Trianta">Projects</a></li>
-            <a href="/other">Other</a>
+                    <li><a href="/completed">Completed</a></li>
-            <a href="/contact">Contact</a>
+                    <li><a href="/current">Current</a></li>
-        </div>
+                    <li><a href="/other">Other</a></li>
+                    <li><a href="/contact">Contact</a></li>
+                </ul>
+            </nav>
+            <div class="column gap"></div>
+            <div class="column content">
                 <h2>Contact Methods</h2>
                 <p>E-mail:  gregcraw2001@gmail.com</p>
                 <p>Discord: trianta</p>
+                <p>Matrix:  @trimutex:matrix.org</p>
+            </div>
+        </div>
     </div>
 </body>
 </html>

pages/current/index.html

@@ -11,14 +11,19 @@
             <a href="/" class="trianta">TRIANTA</a>
             <p>Function over form by design</p>
         </div>
-        <div id="navigation">
+        <div style="display: flex;">
-            <a href="https://www.github.com/trimutex">GitHub</a>
+            <nav class="column">
-            <a href="https://lab.trianta.dev/Trianta">Projects</a>
+                <ul>
-            <a href="/completed">Completed</a>
+                    <li><a href="https://www.github.com/trimutex">GitHub</a></li>
-            <a href="/current">Current</a>
+                    <li><a href="https://lab.trianta.dev/Trianta">Projects</a></li>
-            <a href="/other">Other</a>
+                    <li><a href="/completed">Completed</a></li>
-            <a href="/contact">Contact</a>
+                    <li><a href="/current">Current</a></li>
-        </div>
+                    <li><a href="/other">Other</a></li>
+                    <li><a href="/contact">Contact</a></li>
+                </ul>
+            </nav>
+            <div class="column gap"></div>
+            <div class="column content">
                 <h2>Current Personal Projects</h2>
                 <div class="card">
                     <h3>Wrench</h3>
@@ -34,5 +39,7 @@
                     <a href="https://github.com/Trimutex/synopsis">View Repository</a>
                 </div>
             </div>
+        </div>
+    </div>
 </body>
 </html>

pages/other/index.html

@@ -11,14 +11,19 @@
             <a href="/" class="trianta">TRIANTA</a>
             <p>Function over form by design</p>
         </div>
-        <div id="navigation">
+        <div style="display: flex;">
-            <a href="https://www.github.com/trimutex">GitHub</a>
+            <nav class="column">
-            <a href="https://lab.trianta.dev/Trianta">Projects</a>
+                <ul>
-            <a href="/completed">Completed</a>
+                    <li><a href="https://www.github.com/trimutex">GitHub</a></li>
-            <a href="/current">Current</a>
+                    <li><a href="https://lab.trianta.dev/Trianta">Projects</a></li>
-            <a href="/other">Other</a>
+                    <li><a href="/completed">Completed</a></li>
-            <a href="/contact">Contact</a>
+                    <li><a href="/current">Current</a></li>
-        </div>
+                    <li><a href="/other">Other</a></li>
+                    <li><a href="/contact">Contact</a></li>
+                </ul>
+            </nav>
+            <div class="column gap"></div>
+            <div class="column content">
                 <h2>Other Projects</h2>
                 <div class="card">
                     <h3>Hyprland</h3>
@@ -64,5 +69,7 @@
                     <p>Tools: CMake</p>
                 </div>
             </div>
+        </div>
+    </div>
 </body>
 </html>