FEATURE: Added blurred white theme

.gitignore

@@ -2,3 +2,4 @@ node_modules
 src/dist
 dev/docker/stacks/main/assets
 .env
+.DS_Store

assets/config/config.yml

@@ -1,7 +1,7 @@
 name: "Nikurasu"                                # The name on the linktree
 # summaryText: 'A simple sample text'           # A short summary for what you do, will appear under the name if uncommened
 # profilePic:                                   # uncomment and set this if your profile pic has a custom name
-theme: 'simple-orange'
+theme: 'blurred-white'
 links:
   - text: "YouTube"                             # text on the link
     hyperlink: "Test"                           # the actual hyperlink

src/public/themes/blurred-white.scss

@@ -0,0 +1,27 @@
+@import '../util/main.scss';
+@import '../util/blurred-basic.scss';
+@import '../util/colors.scss';
+
+$gradient1: #e0f3ff;
+$gradient2: #d5efff;
+$gradient3: #a6d0ff;
+$gradient4: #c1dbff;
+
+
+body {
+    background-image: linear-gradient(120deg, $gradient1, $gradient2, $gradient3, $gradient4, $gradient3, $gradient2, $gradient1);
+}
+
+.mainLinkbox {
+    >a{
+        >button{
+            background-color: $white;
+        }
+    }
+}
+
+.smallLinkbox {
+    a {
+        color: $white;
+    }
+}

src/public/util/blurred-basic.scss

@@ -0,0 +1,102 @@
+@import './fonts/open-sans.scss';
+@import './encodedImages/noise.scss';
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    display: flex;
+    justify-content: center;
+    min-height: 100vh;
+    
+    &::before {
+        content: '';
+        background-image: url($noiseTexture);
+        opacity: 7.5%;
+        filter: blur(.5px);
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        z-index: -1;      
+    }
+}
+
+.container {
+    padding-top: 3rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: .5rem;
+}
+
+.headingbox{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: .5rem;
+    margin-bottom: 1.5rem;
+
+    h1 {
+        font-size: 1.5rem;
+        font-weight: 800;
+    }
+
+    .summaryBox {
+        max-width: 90vw;
+        width: 750px;
+        .summaryText {
+            font-weight: 600;
+            font-size: 1rem;
+            text-align: center;
+        }
+    }
+}
+
+.imgbox>img {
+    height: 10rem;
+    width: 10rem;
+    border-radius: .5rem;
+}
+
+.mainLinkbox {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    >a{
+        >button {
+            font-family: 'Open Sans', sans-serif;
+            font-size: 1rem;
+            font-weight: 600;
+            border: none;
+            border-radius: .25rem;
+            width: 750px;
+            max-width: 90vw;
+            height: 3rem;
+            cursor: pointer;
+            transition: transform .25s ease-in-out;
+            filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
+
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+    }
+}
+
+.smallLinkbox {
+    margin: 1rem 0;
+    width: 500px;
+    max-width: 90vw;
+    justify-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    a {
+        font-size: 2rem;
+        text-decoration: none;
+        filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
+        transition: transform .25s ease-in-out;
+        
+        &:hover {
+            transform: scale(1.15);
+        }
+    }
+}

src/public/util/fonts/open-sans.scss

@@ -0,0 +1,4 @@
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/OpenSans.ttf'), format('truetype');
+}

src/public/util/simple-basic.scss

@@ -1,6 +1,5 @@
-@import "colors.scss";
-
 body {
+    font-family: monospace;
     display: flex;
     justify-content: center;
     min-height: 100vh;
@@ -15,7 +14,6 @@ body {
 }
 
 .headingbox{
-    font-family: monospace;
     display: flex;
     flex-direction: column;
     align-items: center;