From d876bdf2d631858588b87308d458190d96994a3d Mon Sep 17 00:00:00 2001
From: ami_sc <hi@mail.ami.sc>
Date: Sat, 17 Aug 2024 17:16:09 -0400
Subject: [PATCH] Update styles

---
 assets/css/styles.css | 94 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 83 insertions(+), 11 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 0106317..0a4e06d 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -15,10 +15,22 @@
 /* Default Container */
 html {
     display: flex;
-    height: 100%;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: center;
-    background-color: #000000;
+    min-height: 100%;
+
+    background:
+        linear-gradient(120deg, #FF00C7 0%, #51003F 100%),
+        linear-gradient(120deg, #0030AD 0%, #00071A 100%),
+        linear-gradient(180deg, #000346 0%, #FF0000 100%),
+        linear-gradient(60deg, #0029FF 0%, #AA0014 100%),
+        radial-gradient(100% 165% at 100% 100%, #FF00A8 0%, #00FF47 100%),
+        radial-gradient(100% 150% at 0% 0%, #FFF500 0%, #51D500 100%);
+    background-blend-mode:
+        overlay, color-dodge,
+        overlay, overlay,
+        difference, normal;
 }
 
 /* Main Grid */
@@ -28,9 +40,36 @@ body {
     grid-template-rows: 0.2fr 1fr 1fr;
     gap: 2rem;
     padding: 2rem;
-    border-radius: 0.8rem;
+    margin: 1rem;
 
-    background-color: #0F0F0F;
+    background-color: rgb(0 0 0 / 75%);
+    border-radius: 0.8rem;
+}
+
+/* Small Screen Layout */
+@media (max-width: 700px) {
+    .link_box {
+        grid-column: span 12;
+    }
+}
+
+@media (min-width: 700px) {
+    .link_box {
+        grid-column: span 6;
+    }
+}
+
+@media (min-width: 900px) {
+    .link_box {
+        grid-column: span 4;
+    }
+}
+
+/* Large Screen Layout */
+@media (min-width: 1200px) {
+    .link_box {
+        grid-column: span 3;
+    }
 }
 
 /* Page Header */
@@ -41,7 +80,7 @@ header {
     grid-column: span 12;
     padding: 1.2rem;
 
-    background-image: linear-gradient(145deg, #3494E6, #EC6EAD);
+    background-image: linear-gradient(145deg, #525252, #3d72b4);
     border-radius: 0.4rem;
 }
 
@@ -49,11 +88,12 @@ header h1 {
     font-family: "Fira Code SemiBold";
     color: #FFFFFF;
     margin: 0;
+    text-shadow: 0.1rem 0.1rem 0.4rem #000000;
 }
 
 /* Link Box */
 .link_box {
-    grid-column: span 3;
+    /* grid-column: span 3; */
 
     display: grid;
     grid-template-columns: repeat(4, [col-start] 1fr);
@@ -68,18 +108,16 @@ header h1 {
     display: flex;
     margin: 0;
     padding: 1rem;
-    background-color: #313131;
+
     align-items: center;
     justify-content: center;
 
     font-family: "Fira Code SemiBold";
     font-size: 1.25rem;
+    text-shadow: 0.1rem 0.1rem 0.4rem #000000;
     color: #FFFFFF;
 
     border-radius: 0.4rem;
-    border-color: #FFFFFF;
-    border-style: solid;
-    border-width: 2px;
 }
 
 /* Link */
@@ -93,7 +131,7 @@ a {
     gap: 1rem;
     padding: 1rem;
 
-    background-color: #313131;
+    background-color: #525252;
     border-radius: 0.4rem;
     border-color: #313131;
     border: 2px solid transparent;
@@ -125,3 +163,37 @@ a img {
     width: 2.5rem;
     height: 2.5rem;
 }
+
+/* Specific Colors for each Category */
+
+.personal > h2 {
+    background-image: linear-gradient(to right, #cb2d3e, #ef473a);
+}
+
+.home > h2 {
+    background-image: linear-gradient(to right, #0083B0, #00B4DB);
+}
+
+.work > h2 {
+    background-image: linear-gradient(to right, #4A00E0, #8E2DE2);
+}
+
+.finance > h2 {
+    background-image: linear-gradient(to right, #11998e, #38ef7d);
+}
+
+.management > h2 {
+    background-image: linear-gradient(to right, #EF629F, #EECDA3);
+}
+
+.productivity > h2 {
+    background-image: linear-gradient(to right, #021B79, #0575E6);
+}
+
+.entertainment > h2 {
+    background-image: linear-gradient(to right, #ec008c, #fc6767);
+}
+
+.shopping > h2 {
+    background-image: linear-gradient(to right, #f8b500, #fceabb);
+}