From 5ea0d31cdbbde97ea36c41704305c06131b5b961 Mon Sep 17 00:00:00 2001
From: Danilo Cesa <dev.github@dan.dcesa.cc>
Date: Tue, 3 Jun 2025 23:19:34 +0800
Subject: [PATCH] feature: initial commit

---
 assets/styling/main.css   | 822 +-------------------------------------
 assets/styling/media.css  |   4 +-
 assets/styling/navbar.css |   7 +-
 assets/tailwind.css       |   3 -
 src/main.rs               |   7 +-
 5 files changed, 18 insertions(+), 825 deletions(-)

diff --git a/assets/styling/main.css b/assets/styling/main.css
index 4a1e0b7..c10b918 100644
--- a/assets/styling/main.css
+++ b/assets/styling/main.css
@@ -1,13 +1,4 @@
-body {
-    margin:0
-}
-
-* {
-    transition-duration: .2s;
-    transition-property:background, border-color, opacity, box-shadow, top, bottom, left, margin, ri
-}
-
-.body {
+:root {
     --dark-0: #000;
     --dark-00: #3b3b3b;
     --dark-1: #1e1e1e;
@@ -45,39 +36,6 @@ body {
     --text-f: "Inter";
     --title-f: "Inter";
     overflow-y:scroll;
-}
-
-.body[data-theme=dark] {
-    color-scheme: dark;
-    --main: var(--dark-0);
-    --main-close: var(--dark-00);
-    --main-hover: var(--dark-1);
-    --secondary: var(--dark-1);
-    --secondary-hover: var(--dark-2);
-    --tertiary: var(--dark-2);
-    --tertiary-hover: var(--dark-3);
-    --accent: var(--dark-3);
-    --accent-hover: var(--dark-4);
-    --main-text: var(--light-0);
-    --main-text-hover: var(--light-1);
-    --secondary-text: var(--light-1);
-    --secondary-text-hover: var(--light-2);
-    --tertiary-text: var(--light-2);
-    --tertiary-text-hover: var(--light-3);
-    --accent-text: var(--light-3);
-    --accent-text-hover: var(--light-4);
-    --border: var(--dark-2);
-    --border-hover: var(--light-7);
-    --main-60: var(--dark-0-60);
-    --code-keyword: var(--code-keyword-dark);
-    --code-string: var(--code-string-dark);
-    --code-function: var(--code-function-dark);
-    --code-constant: var(--code-constant-dark);
-    --code-operator: var(--code-operator-dark);
-    --link: var(--link-light)
-}
-
-.body[data-theme=light] {
     color-scheme: light;
     --main: var(--light-0);
     --main-close: var(--light-00);
@@ -107,777 +65,9 @@ body {
     --link: var(--link-dark)
 }
 
-.col {
-    display: flex;
-    flex-direction:column
-}
-
-.col-center {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content:center
-}
-
-.row {
-    display: flex;
-    flex-direction:row
-}
-
-.row-center {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content:center
-}
-
-.inset-0px {
-    inset:0
-}
-
-.bottom-0 {
-    bottom:0
-}
-
-.top-0 {
-    top:0
-}
-
-.top-51px {
-    top:51px
-}
-
-.line-clamp-3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    line-clamp:3
-}
-
-.hover\:z-5:hover {
-    z-index:5
-}
-
-.m-\[2\.5px\] {
-    margin:2.5px
-}
-
-.m17\.12 {
-    margin:4.28rem
-}
-
-.m-x-10px {
-    margin-left: 10px;
-    margin-right:10px
-}
-
-.m-x-2\.5px {
-    margin-left: 2.5px;
-    margin-right:2.5px
-}
-
-.m-x-auto {
-    margin-left: auto;
-    margin-right:auto
-}
-
-.m-y-0px {
-    margin-top: 0;
-    margin-bottom:0
-}
-
-.m-y-10px, .my-\[10px\] {
-    margin-top: 10px;
-    margin-bottom:10px
-}
-
-.m-y-2 {
-    margin-top: .5rem;
-    margin-bottom:.5rem
-}
-
-.m-y-5 {
-    margin-top: 1.25rem;
-    margin-bottom:1.25rem
-}
-
-.m-y-auto {
-    margin-top: auto;
-    margin-bottom:auto
-}
-
-.m-b-15px {
-    margin-bottom:15px
-}
-
-.m-b-2, .mb-2 {
-    margin-bottom:.5rem
-}
-
-.m-b-40px {
-    margin-bottom:40px
-}
-
-.m-b-5px {
-    margin-bottom:5px
-}
-
-.m-l-1 {
-    margin-left:.25rem
-}
-
-.m-l-auto {
-    margin-left:auto
-}
-
-.m-r-5px {
-    margin-right:5px
-}
-
-.m-t-10, .mt-10 {
-    margin-top:2.5rem
-}
-
-.m-t-20px {
-    margin-top:20px
-}
-
-.m-t-7 {
-    margin-top:1.75rem
-}
-
-.m-t-8 {
-    margin-top:2rem
-}
-
-.m-t-auto {
-    margin-top:auto
-}
-
-.mb-5 {
-    margin-bottom:1.25rem
-}
-
-.mb-7 {
-    margin-bottom:1.75rem
-}
-
-.ml-0 {
-    margin-left:0
-}
-
-.ml-2 {
-    margin-left:.5rem
-}
-
-.mr-2 {
-    margin-right:.5rem
-}
-
-.mt-5 {
-    margin-top:1.25rem
-}
-
-.aspect-video {
-    aspect-ratio:16/9
-}
-
-.h-\[1px\], .h-1px {
-    height:1px
-}
-
-.h-100\%, .h-full {
-    height:100%
-}
-
-.h-120px {
-    height:120px
-}
-
-.h-15px {
-    height:15px
-}
-
-.min-h-\[200px\] {
-    min-height:200px
-}
-
-.w-\[0\.5px\] {
-    width:.5px
-}
-
-.w-\[100\%\], .w-100\%, .w-full {
-    width:100%
-}
-
-.w-\[20px\] {
-    width:20px
-}
-
-.w-120px {
-    width:120px
-}
-
-.w-150px {
-    width:150px
-}
-
-.w-15px {
-    width:15px
-}
-
-.w-75\% {
-    width:75%
-}
-
-.flex {
-    display:flex
-}
-
-.flex-\[0\.5\] {
-    flex:.5
-}
-
-.gap-1 {
-    gap:.25rem
-}
-
-.gap-10 {
-    gap:2.5rem
-}
-
-.gap-10px {
-    gap:10px
-}
-
-.gap-2 {
-    gap:.5rem
-}
-
-.gap-3 {
-    gap:.75rem
-}
-
-.gap-5 {
-    gap:1.25rem
-}
-
-.gap-7 {
-    gap:1.75rem
-}
-
-.border-\[var\(--border\)\] {
-    border-color:var(--border)
-}
-
-.hover\:border-\[var\(--border-hover\)\]:hover {
-    border-color:var(--border-hover)
-}
-
-.rounded {
-    border-radius:.25rem
-}
-
-.rounded-\[15px\], .rounded-15px {
-    border-radius:15px
-}
-
-.rounded-\[20px\] {
-    border-radius:20px
-}
-
-.rounded-\[50\%\] {
-    border-radius:50%
-}
-
-.rounded-10px {
-    border-radius:10px
-}
-
-.rounded-xl {
-    border-radius:.75rem
-}
-
-.bg-\[\#000000dd\] {
-    --un-bg-opacity: .87;
-    background-color:rgba(0, 0, 0, var(--un-bg-opacity))
-}
-
-.bg-\[transparent\], .bg-transparent {
-    background-color:transparent
-}
-
-.bg-\[var\(--accent\)\] {
-    background-color:var(--accent)
-}
-
-.bg-\[var\(--border\)\] {
-    background-color:var(--border)
-}
-
-.bg-\[var\(--main-60\)\] {
-    background-color:var(--main-60)
-}
-
-.bg-\[var\(--main-hover\)\] {
-    background-color:var(--main-hover)
-}
-
-.bg-\[var\(--main\)\] {
-    background-color:var(--main)
-}
-
-.hover\:bg-\[color\:var\(--main-hover\)\]:hover {
-    background-color:var(--main-hover)
-}
-
-.hover\:bg-\[var\(--accent-hover\)\]:hover {
-    background-color:var(--accent-hover)
-}
-
-.hover\:bg-\[var\(--main-hover\)\]:hover {
-    background-color:var(--main-hover)
-}
-
-.p-10px {
-    padding:10px
-}
-
-.p-15px {
-    padding:15px
-}
-
-.p-2 {
-    padding:.5rem
-}
-
-.p-25px {
-    padding:25px
-}
-
-.p-5 {
-    padding:1.25rem
-}
-
-.p-50px {
-    padding:50px
-}
-
-.p-5px {
-    padding:5px
-}
-
-.p-x-0px {
-    padding-left: 0;
-    padding-right:0
-}
-
-.p-x-10px, .px-10px {
-    padding-left: 10px;
-    padding-right:10px
-}
-
-.p-x-2, .px-2 {
-    padding-left: .5rem;
-    padding-right:.5rem
-}
-
-.p-x-5 {
-    padding-left: 1.25rem;
-    padding-right:1.25rem
-}
-
-.p-y-0px {
-    padding-top: 0;
-    padding-bottom:0
-}
-
-.p-y-15px {
-    padding-top: 15px;
-    padding-bottom:15px
-}
-
-.p-y-20 {
-    padding-top: 5rem;
-    padding-bottom:5rem
-}
-
-.px, .px-4 {
-    padding-left: 1rem;
-    padding-right:1rem
-}
-
-.px-\[15px\] {
-    padding-left: 15px;
-    padding-right:15px
-}
-
-.px-\[20px\] {
-    padding-left: 20px;
-    padding-right:20px
-}
-
-.px-6 {
-    padding-left: 1.5rem;
-    padding-right:1.5rem
-}
-
-.py-\[10px\] {
-    padding-top: 10px;
-    padding-bottom:10px
-}
-
-.py-\[5px\] {
-    padding-top: 5px;
-    padding-bottom:5px
-}
-
-.py-3 {
-    padding-top: .75rem;
-    padding-bottom:.75rem
-}
-
-.py-4 {
-    padding-top: 1rem;
-    padding-bottom:1rem
-}
-
-.py-50px {
-    padding-top: 50px;
-    padding-bottom:50px
-}
-
-.pb-1 {
-    padding-bottom:.25rem
-}
-
-.pb-10 {
-    padding-bottom:2.5rem
-}
-
-.pt-3 {
-    padding-top:.75rem
-}
-
-.text-\[0\.9em\], .text-0\.9em {
-    font-size:.9em
-}
-
-.text-\[1\.15em\], .text-1\.15em {
-    font-size:1.15em
-}
-
-.text-\[1\.2em\] {
-    font-size:1.2em
-}
-
-.text-\[1\.3em\], .text-1\.3em {
-    font-size:1.3em
-}
-
-.text-0\.85em {
-    font-size:.85em
-}
-
-.text-0\.8em {
-    font-size:.8em
-}
-
-.text-1\.25em {
-    font-size:1.25em
-}
-
-.text-1em {
-    font-size:1em
-}
-
-.text-2\.5em {
-    font-size:2.5em
-}
-
-.text-2em {
-    font-size:2em
-}
-
-.text-3\.5em {
-    font-size:3.5em
-}
-
-.text-sm {
-    font-size: .875rem;
-    line-height:1.25rem
-}
-
-.font-300, .font-light {
-    font-weight:300
-}
-
-.font-400 {
-    font-weight:400
-}
-
-.font-500 {
-    font-weight:500
-}
-
-.font-black {
-    font-weight:900
-}
-
-.font-bold {
-    font-weight:700
-}
-
-.font-extralight {
-    font-weight:200
-}
-
-.tracking-\[4px\] {
-    letter-spacing:4px
-}
-
-.tracking-wider {
-    letter-spacing:.05em
-}
-
-.font-\[var\(--title-f\)\] {
-    font-family:var(--title-f)
-}
-
-.font-italic {
-    font-style:italic
-}
-
-.\ !text-\[var\(--secondary-text\)\] {
-    color:var(--secondary-text) !important
-}
-
-.text-\[inherit\], .text-inherit {
-    color:inherit
-}
-
-.text-\[var\(--accent-text\)\] {
-    color:var(--accent-text)
-}
-
-.text-\[var\(--border\)\] {
-    color:var(--border)
-}
-
-.text-\[var\(--main-close\)\] {
-    color:var(--main-close)
-}
-
-.text-\[var\(--secondary-text\)\] {
-    color:var(--secondary-text)
-}
-
-.text-\[var\(--tertiary-text\)\] {
-    color:var(--tertiary-text)
-}
-
-.text-\[var\(--text\)\] {
-    color:var(--text)
-}
-
-.decoration-none {
-    text-decoration:none
-}
-
-.hover\:grayscale-0:hover {
-    --un-grayscale: grayscale(0);
-    filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)
-}
-
-.duration-\[150ms\] {
-    transition-duration:.15s
-}
-
-.ease {
-    transition-timing-function:cubic-bezier(.4, 0, .2, 1)
-}
-
-.markdown-container {
-    --code-comment: var(--tertiary-text);
-    --code-punctuation: var(--main-text);
-    --code-builtin: var(--secondary-text);
-    --code-number: var(--secondary-text);
-    --code-interpolation: var(--code-keyword);
-    --code-class-name: var(--secondary-text);
-    font-family: Space Mono, monospace;
-    font-size: 14px;
-    color: var(--tertiary-text);
-    overflow-y:auto !important
-}
-
-.markdown-container code[class * =language-], .markdown-container pre[class * =language-] {
-    overflow-x: auto;
-    min-width: 0px;
-    color:var(--main-text-hover)
-}
-
-.markdown-container pre[class * =language-] {
-    margin-top: 1em;
-    margin-bottom:1em
-}
-
-.markdown-container .token.selector, .markdown-container .token.important, .markdown-container .token.atrule, .markdown-container .token.keyword {
-    color:var(--code-keyword)
-}
-
-.markdown-container .token.punctuation {
-    color:var(--code-punctuation)
-}
-
-.markdown-container .token.string {
-    color:var(--code-string)
-}
-
-.markdown-container .token.function {
-    color:var(--code-function)
-}
-
-.markdown-container .token.comment {
-    color:var(--code-comment)
-}
-
-.markdown-container .token.token.builtin {
-    color:var(--code-builtin)
-}
-
-.markdown-container .token.token.number {
-    color:var(--code-number)
-}
-
-.markdown-container .token.token.constant {
-    color:var(--code-constant)
-}
-
-.markdown-container .token.token.operator {
-    color:var(--code-operator)
-}
-
-.markdown-container .token.token.interpolation {
-    color:var(--code-interpolation)
-}
-
-.markdown-container .token.token.class-name {
-    color:var(--code-function)
-}
-
-.markdown-container h1, .markdown-container h2, .markdown-container h3 {
-    color: var(--text);
-    margin-bottom:.45em
-}
-
-.markdown-container h1 {
-    font-size:2em
-}
-
-.markdown-container h2 {
-    font-size:1.8em
-}
-
-.markdown-container h3 {
-    font-size:1.6em
-}
-
-.markdown-container h4 {
-    font-size:1.45em
-}
-
-.markdown-container h5 {
-    font-size:1.3em
-}
-
-.markdown-container h6 {
-    font-size:1.2em
-}
-
-.markdown-container p {
-    line-height:1.75rem
-}
-
-.markdown-container ul {
-    margin: 0;
-    padding:0 20px
-}
-
-.markdown-container li {
-    padding: 5px 0;
-    line-height:1.75rem
-}
-
-.markdown-container a {
-    color:var(--link)
-}
-
-.markdown-container :is(code):not(pre code) {
-    color: var(--accent-text);
-    background-color: var(--tertiary);
-    padding: 1px 6px;
-    border-radius:.25em
-}
-
-.markdown-container :not(pre) > code[class * =language-], .markdown-container pre[class * =language-] {
-    background-color: var(--main-hover);
-    border: 1px solid var(--border);
-    border-radius: .25em;
-    font-size:.9em
-}
-
-.markdown-container :not(pre) > code[class * =language-]:hover, .markdown-container pre[class * =language-]:hover {
-    background-color: var(--secondary-hover);
-    border-color:var(--border-hover)
-}
-
-.markdown-container a :is(code):not(pre code) {
-    color:inherit
-}
-
-.markdown-container blockquote {
-    padding: 5px 20px;
-    background-color: var(--main-hover);
-    border: 1px solid var(--dividerLight);
-    margin-right: 0;
-    margin-left: 0;
-    border-radius:.25em
-}
-
-.markdown-container blockquote strong {
-    font-style:normal
-}
-
-.markdown-container hr {
-    border-top: .5px solid var(--border-low);
-    color: var(--border-low);
-    margin:30px 0
-}
-
 .content .mb6t29 {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    padding:0
-}
-
-.body .mb6t29 {
-    margin: 0;
-    background-color: var(--main);
-    color: var(--main-text);
-    font-family: var(--text-f);
-    display: flex;
-    flex-direction: column;
-    transition-duration: .2s;
-    letter-spacing: 1px;
-    min-height:100vh
-}
-
-p {
-    margin:0
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin: 5px 0
-}
+display: flex;
+flex-direction: column;
+flex: 1;
+padding: 0;
+}
\ No newline at end of file
diff --git a/assets/styling/media.css b/assets/styling/media.css
index 8fc47ec..25361a9 100644
--- a/assets/styling/media.css
+++ b/assets/styling/media.css
@@ -27,7 +27,7 @@
         max-width:1536px
     }
 }
-
+/* 
 
 @media (min-width: 640px) {
     .sm\:grid-cols-2 {
@@ -218,4 +218,4 @@
     .lg\:text-\[4em\] {
         font-size:4em
     }
-}
\ No newline at end of file
+} */
\ No newline at end of file
diff --git a/assets/styling/navbar.css b/assets/styling/navbar.css
index 995cca4..06bc1f3 100644
--- a/assets/styling/navbar.css
+++ b/assets/styling/navbar.css
@@ -1,3 +1,7 @@
+.nav-menu {
+    border-bottom: 1px solid var(--secondary);
+}
+
 .nav-menu .jdc7ud {
     display: flex;
     justify-content: center;
@@ -6,7 +10,6 @@
     z-index: 10;
     padding: 0 10px;
     height: 50px;
-    border-bottom: 1px solid var(--secondary);
     background-color:var(--main)
 }
 
@@ -17,7 +20,7 @@
     color: inherit;
     display: flex;
     align-items: center;
-    border-bottom:3px solid transparent
+    /* border-bottom:3px solid transparent */
 }
 
 .nav-menu-item-label .jdc7ud {
diff --git a/assets/tailwind.css b/assets/tailwind.css
index b5a5c15..3375536 100644
--- a/assets/tailwind.css
+++ b/assets/tailwind.css
@@ -566,9 +566,6 @@
   .text-inherit {
     color: inherit;
   }
-  .italic {
-    font-style: italic;
-  }
   .underline {
     text-decoration-line: underline;
   }
diff --git a/src/main.rs b/src/main.rs
index c4da51c..9e63a00 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -45,10 +45,12 @@ enum Route {
 // The macro returns an `Asset` type that will display as the path to the asset in the browser or a local path in desktop bundles.
 const FAVICON: Asset = asset!("/assets/favicon.ico");
 // The asset macro also minifies some assets like CSS and JS to make bundled smaller
-const MAIN_CSS: Asset = asset!("/assets/styling/main.css");
 const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
+const MEDIA_CSS: Asset = asset!("/assets/styling/media.css"); 
+const MAIN_CSS: Asset = asset!("/assets/styling/main.css");
 const ICONS_CSS: Asset = asset!("/assets/styling/icons.css");
 
+
 fn main() {
     // The `launch` function is the main entry point for a dioxus app. It takes a component and renders it with the platform feature
     // you have enabled
@@ -67,8 +69,9 @@ fn App() -> Element {
         // In addition to element and text (which we will see later), rsx can contain other components. In this case,
         // we are using the `document::Link` component to add a link to our favicon and main CSS file into the head of our app.
         document::Link { rel: "icon", href: FAVICON }
-        document::Link { rel: "stylesheet", href: MAIN_CSS }
         document::Link { rel: "stylesheet", href: TAILWIND_CSS }
+        document::Link { rel: "stylesheet", href: MEDIA_CSS }
+        document::Link { rel: "stylesheet", href: MAIN_CSS }
         document::Link { rel: "stylesheet", href: ICONS_CSS }
 
         // The router component renders the route enum we defined above. It will handle synchronization of the URL and render