Add Rose Pine theme, completely redesign footer!🎉

src/components/Footer.astro

@@ -1,139 +1,67 @@
 ---
 
 import { getLangFromUrl, useTranslations } from "../i18n/utils"
+import WaveSVG from "./WaveSVG.astro";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 
 ---
 
-<div id="footer">
+<div class="footer">
-    <div class="footerflex">
+    <div class="wave-svg-container">
-        <div class="footerbrand">
+        <WaveSVG />
-            <p class="footerlist-heading"><a href="/">{t("footer.brand")}</a></p>
-            <p><a target="_blank" rel="noopener noreferrer" href="https://wearr.dev">{t("footer.madeWithLove")}</a></p>
     </div>
-    <div class="footerlist">
+    <div class="footer-top">
-        <p class="footerlist-heading">{t("footer.services")}</p>
+        <div class="footer-title">
-        <ul>
+            <h2>{t("footer.brand")}</h2>
-            <li><a target="_blank" rel="noopener noreferrer" href="https://github.com/titaniumnetwork-dev/Ultraviolet">Ultraviolet</a></li>
+        </div>
-        </ul>
+    
+        <div class="footer-madeby">
+            <a href="https://wearr.dev">{t("footer.madeWithLove")}</a>
+        </div>
+    </div>
+    <div class="footer-bottom">
+        <div class="footer-links">
+            <a href="https://titaniumnetwork.org">Titanium Network</a>
+        </div>
+    
+        <div class="footer-copyright">
+            <p>&copy; {t("footer.aluProject")} 2024</p>
         </div>
-    <div class="footerlist">
-        <p class="footerlist-heading">{t("footer.socials")}</p>
-        <ul>
-            <li><a target="_blank" rel="noopener noreferrer" href="https://github.com/wearrrrr/AlusUnblocker">GitHub</a></li>
-            <li><a target="_blank" rel="noopener noreferrer" href="#">Discord</a></li>
-        </ul>
     </div>
-</div>
-<p class="copyright">{t("footer.aluProject")} &copy; 2024</p>
-</div>
 </div>
 
 <style>
-:root {
+.wave-svg-container {
-    --footer-svg-url: url("/img/aluwaves.svg");
+    bottom: 0;
-}
+    left: 0;
-[data-theme="mocha"] {
+    position: absolute;
-    --footer-svg-url: url("/img/mochawaves.svg");
-}
-[data-theme="macchiato"] {
-    --footer-svg-url: url("/img/macchiatowaves.svg");
-}
-#footer {
-    padding-top: 22vh;
-    background-image: var(--footer-svg-url);
-    background-repeat: no-repeat;
-    background-size: 100vw auto;
     width: 100%;
+    z-index: -1;
+    overflow: hidden;
+    height: 300px;
 }
 
-.footerflex {
+.footer {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-pack: center;
+    flex-direction: column;
-    -ms-flex-pack: center;
+    justify-content: space-around;
-    justify-content: center;
-}
-
-.footersocials {
-    text-align: center;
-}
-
-.footerflex > div {
-    margin: 25px 50px;
-}
-
-@media only screen and (max-width: 600px) {
-    .footerflex > div {
-        margin: 15px 25px;
-    }
-}
-
-@media only screen and (max-width: 380px) {
-    .footerflex > div {
-        margin: 5px 10px;
-    }
-}
-
-.footerbrand div a {
-    font-family: 'Varela Round', sans-serif;
-    color: var(--text-color) !important;
-    font-size: 20px;
-    font-weight: bold;
-}
-
-.footerbrand p {
-    font-family: 'Varela Round', sans-serif;
     color: var(--text-color);
+    position: relative;
+    padding-top: 100px;
+    gap: 50px;
+}
+.footer-top, .footer-bottom {
+    width: 90%;
+    margin: 0 auto;
 }
 
-.footerbrand a {
+.footer-title {
-    font-family: 'Varela Round', sans-serif;
-    color: var(--text-color);
-}
-
-.footerlist-heading {
-    font-weight: bold;
     font-size: 20px;
 }
 
-.footerlist ul {
+a {
-    list-style: none;
-    padding: 0;
-}
-
-.footerlist ul > li {
-    padding: 2px;
-    padding-bottom: 5px;
-}
-
-.footerlist ul > li > a {
     color: var(--text-color);
 }
 
-.footerlist > * {
-    font-family: 'Varela Round', sans-serif;
-    color: var(--text-color);
-}
-
-.footersocials {
-    font-size: 20px;
-}
-
-.footersocials a {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    line-height: 20px;
-    padding: 6px;
-    margin: 0 5px;
-    border-radius: 50%;
-}
-
-.copyright {
-    color: #D8DEE9;
-    text-align: center;
-}
 </style>

src/components/SettingsContent/CustomizationTab.astro

@@ -8,7 +8,8 @@ const t = useTranslations(lang);
 const themeList = [
     {"name": t("settings.customization.theme.Alu"), "value": "alu"},
     {"name": t("settings.customization.theme.Macchiato"), "value": "macchiato"},
-    {"name": t("settings.customization.theme.Mocha"), "value": "mocha"}
+    {"name": t("settings.customization.theme.Mocha"), "value": "mocha"},
+    {"name": "Rosé Pine", "value": "rose_pine"}
 ]
 
 const languageList = [

src/components/WaveSVG.astro

@@ -0,0 +1,64 @@
+<svg width="100%" height="100%" preserveAspectRatio="none" id="svg" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
+  <style>
+          .path-0{
+            animation:pathAnim-0 15s;
+            animation-timing-function: linear;
+            animation-iteration-count: infinite;
+          }
+          @keyframes pathAnim-0{
+            0%{
+              d: path("M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z");
+            }
+            25%{
+              d: path("M 0,400 L 0,100 C 171.19999999999993,71.6 342.39999999999986,43.2 497,54 C 651.6000000000001,64.8 789.6000000000001,114.80000000000001 944,129 C 1098.3999999999999,143.2 1269.1999999999998,121.6 1440,100 L 1440,400 L 0,400 Z");
+            }
+            50%{
+              d: path("M 0,400 L 0,100 C 186.66666666666669,82.13333333333333 373.33333333333337,64.26666666666667 540,54 C 706.6666666666666,43.733333333333334 853.3333333333333,41.06666666666666 1000,50 C 1146.6666666666667,58.93333333333334 1293.3333333333335,79.46666666666667 1440,100 L 1440,400 L 0,400 Z");
+            }
+            75%{
+              d: path("M 0,400 L 0,100 C 110.13333333333333,74.53333333333333 220.26666666666665,49.06666666666666 393,58 C 565.7333333333333,66.93333333333334 801.0666666666666,110.26666666666668 986,123 C 1170.9333333333334,135.73333333333332 1305.4666666666667,117.86666666666666 1440,100 L 1440,400 L 0,400 Z");
+            }
+            100%{
+              d: path("M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z");
+            }
+          }</style>
+  <style media="screen"></style>
+  <defs>
+    <linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%">
+      <stop offset="5%" stop-color="var(--accent-color)"></stop>
+      <stop offset="95%" stop-color="var(--accent-color-brighter)"></stop>
+    </linearGradient>
+  </defs>
+  <path d="M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
+  <style>
+          .path-1{
+            animation:pathAnim-1 15s;
+            animation-timing-function: linear;
+            animation-iteration-count: infinite;
+          }
+          @keyframes pathAnim-1{
+            0%{
+              d: path("M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z");
+            }
+            25%{
+              d: path("M 0,400 L 0,233 C 202,220.46666666666667 404,207.93333333333334 539,220 C 674,232.06666666666666 742.0000000000001,268.7333333333333 881,275 C 1019.9999999999999,281.2666666666667 1230,257.1333333333333 1440,233 L 1440,400 L 0,400 Z");
+            }
+            50%{
+              d: path("M 0,400 L 0,233 C 181.33333333333337,210.86666666666667 362.66666666666674,188.73333333333332 512,188 C 661.3333333333333,187.26666666666668 778.6666666666665,207.93333333333334 928,219 C 1077.3333333333335,230.06666666666666 1258.6666666666667,231.53333333333333 1440,233 L 1440,400 L 0,400 Z");
+            }
+            75%{
+              d: path("M 0,400 L 0,233 C 195.06666666666666,222.86666666666667 390.1333333333333,212.73333333333332 559,216 C 727.8666666666667,219.26666666666668 870.5333333333333,235.93333333333334 1013,241 C 1155.4666666666667,246.06666666666666 1297.7333333333333,239.53333333333333 1440,233 L 1440,400 L 0,400 Z");
+            }
+            100%{
+              d: path("M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z");
+            }
+          }</style>
+  <style media="screen"></style>
+  <defs>
+    <linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%">
+      <stop offset="5%" stop-color="#702dc2"></stop>
+      <stop offset="95%" stop-color="#3d097d"></stop>
+    </linearGradient>
+  </defs>
+  <path d="M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
+</svg>

src/layouts/Layout.astro

@@ -23,6 +23,8 @@ const { title, optionalPreloads } = Astro.props;
 <!doctype html>
 <html lang="en">
 	<head>
+    <ThemeLoader />
+    <CloakLoader transition:persist />
 		<meta charset="UTF-8" />
 		<meta name="description" content="Astro description" />
 		<meta name="viewport" content="width=device-width" />
@@ -35,8 +37,6 @@ const { title, optionalPreloads } = Astro.props;
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
     <ViewTransitions />
-    <ThemeLoader />
-    <CloakLoader transition:persist />
 	</head>
 	<body>
     <Header></Header>
@@ -52,7 +52,7 @@ const { title, optionalPreloads } = Astro.props;
 
 body {
   opacity: 0;
-  animation: fadeIn ease 0.15s forwards;
+  animation: fadeIn ease 0.2s forwards;
 }
 @keyframes fadeIn {
   0% {
@@ -67,7 +67,7 @@ body {
   --background-color: #080808;
   --background-highlight: #252525;
   --accent-color: #6b00c9;
-  --accent-color-brighter: #8800ff;
+  --accent-color-brighter: #7e00e0;
   --text-color: #fff;
   --text-color-accent: #c7c7c7;
   --dropdown-background-color: #1e1e1e;
@@ -89,12 +89,23 @@ body {
   --background-color: #24273a;
   --background-highlight: #494d64;
   --accent-color: #1e2030;
-  --accent-color-brighter: #525571;
+  --accent-color-brighter: #2a2d42;
   --text-color: #cad3f5;
   --text-color-accent: #b8c0e0;
   --dropdown-background-color: #323550;
 }
 
+[data-theme="rose_pine"] {
+  /* Rosé Pine Theme */
+  --background-color: #191724;
+  --background-highlight: #1f1d2e;
+  --accent-color: #26233a;
+  --accent-color-brighter: #2e2b4a;
+  --text-color: #e0def4;
+  --text-color-accent: #c7c5e0;
+  --dropdown-background-color: #1f1d2e;
+}
+
 body, html {
   margin: 0;
   padding: 0;