First version

src/assets/css/base.css

@@ -0,0 +1,31 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    background-color: var(--white);
+    font-family: 'Open Sans', sans-serif;
+}
+
+a{
+    text-decoration: none;
+}
+
+ul{
+    list-style: none;
+}
+
+h1, h2, h3 {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+
+@media (prefers-color-scheme: dark) {
+    a, a:link, a:visited { color: var(--lightblue); }
+    body, html { background-color: var(--darkgray); color: #bebebe; }
+    pre { background-color: #111111; color: #aaaaaa; }
+    .clean { background-color: #111111; color: #aaaaaa; }
+}

src/assets/css/elements.css

@@ -0,0 +1,40 @@
+/* Generic elements */
+
+main {
+    max-width: var(--article);
+    padding: 1rem;
+    margin-left: auto;
+    margin-right: auto; 
+}
+
+pre, code {
+    background-color: var(--black);
+    padding: 5px;
+    font-family: 'Fira Code', monospace;
+}
+
+footer {
+    background-color: var(--black);
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--mute);
+    padding: 1rem;
+    text-align: center;
+}
+
+/* Blog */
+
+.blogmeta {
+    font-weight: 400;
+    font-size: 12px;
+    font-style: normal; 
+}
+
+.blogauthor,
+.blogauthor a {
+    color: var(--lightblue);
+}

src/assets/css/fonts.css

@@ -0,0 +1,69 @@
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/oslight.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/oslighti.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/osreg.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/osita.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/ossb.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/ossbi.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/osbold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/osboldi.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/osebold.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/eosboldi.woff') format('woff');
+    font-weight: 800;
+    font-style: italic;
+}

src/assets/css/header.css

@@ -0,0 +1,97 @@
+.header {
+    background-color: var(--black);
+    position: sticky;
+    top: 0;
+    width: 100%;
+}
+
+.logo {
+    display: inline-block;
+    color: var(--white);
+    font-size: 60px;
+    font-weight: 600;
+    margin-left: 10px;
+}
+
+.nav {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    background-color: var(--black);
+    font-weight: 600;
+    overflow: hidden;
+}
+
+.menu a {
+    display: block;
+    padding: 30px;
+    color: var(--white);
+}
+
+.menu a:hover {
+    background-color: var(--gray);
+}
+
+.nav {
+    max-height: 0;
+    transition: max-height .5s ease-out;
+}
+
+.mnav {
+    cursor: pointer;
+    float: right;
+    padding: 40px 20px;
+}
+
+.mnav-line {
+    background: var(--white);
+    display: block;
+    height: 2px;
+    position: relative;
+    width: 24px;
+}
+
+.mnav-line::before,
+.mnav-line::after{
+    background: var(--white);
+    content: '';
+    display: block;
+    height: 100%;
+    position: absolute;
+    transition: all .2s ease-out;
+    width: 100%;
+}
+
+.mnav-line::before {
+    top: 5px;
+}
+
+.mnav-line::after {
+    top: -5px;
+}
+
+.slide-menu {
+    display: none;
+} 
+
+.slide-menu:checked ~ nav{
+    max-height: 100%;
+}
+
+.slide-menu:checked ~ .mnav .mnav-line {
+    background: transparent;
+}
+
+.slide-menu:checked ~ .mnav .mnav-line::before {
+    transform: rotate(-45deg);
+    top:0;
+}
+
+.slide-menu:checked ~ .mnav .mnav-line::after {
+    transform: rotate(45deg);
+    top:0;
+}
+
+body:has(.slide-menu:checked) {
+    overflow: hidden;
+}

src/assets/css/media.css

@@ -0,0 +1,28 @@
+@media (min-width: 1100px) {
+    .nav{
+        max-height: none;
+        top: 0;
+        position: relative;
+        float: right;
+        width: fit-content;
+        background-color: transparent;
+    }
+    .menu li{
+        float: left;
+    }
+    .menu a:hover{
+        background-color: transparent;
+        color: var(--gray);
+
+    }
+    .hamb{
+        display: none;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+  a, a:link, a:visited { color: var(--lightblue); }
+  body, html { background-color: var(--darkgray); color: #bebebe; }
+  pre { background-color: #111111; color: #aaaaaa; }
+  .clean { background-color: #111111; color: #aaaaaa; }
+}

src/assets/css/style.css

@@ -0,0 +1,27 @@
+/**************************************************
+ ***           HARDENEDBSD STYLESHEET           ***
+ ***                      ---                   ***
+ *** @package: hardenedbsd                      ***
+ *** @version: 2025030801                       ***
+ *** @author:  h3artbl33d                       ***
+ ***                                            ***
+ *** Contents:                                  ***
+ *** 1. Imports                                 ***
+ *** 2. Overrides                               ***
+ **************************************************/
+
+/** Imports **/
+
+@import url('variables.css');
+@import url('base.css');
+@import url('fonts.css');
+@import url('header.css');
+@import url('elements.css');
+@import url('media.css');
+
+/** Overrides **/
+
+.test {
+    font-family: var(--monospace), monospace;
+    font-color: var(--red);
+}

src/assets/css/variables.css

@@ -0,0 +1,13 @@
+:root{
+    /* Colors */
+    --white: #f9f9f9;
+    --black: #111111;
+    --darkgray: #333333;
+    --gray: #85888C;
+    --lightblue: #2fbef2;
+    --darkblue: #00324a;
+    --mute: #bbbbbb;
+    /* Breakpoints */
+    --fullwidth: 100%;
+    --article: 53rem;
+}