nested css

Author: hyperknot

website/astro.config.mjs

@@ -1,4 +1,13 @@
 import { defineConfig } from 'astro/config'
 
 // https://astro.build/config
-export default defineConfig({})
+
+export default defineConfig({
+  vite: {
+    css: {
+      transformer: "lightningcss",
+    },
+  },
+})
+
+

website/package.json

@@ -10,6 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.10.2"
+    "astro": "^4.10.2",
+    "lightningcss": "^1.25.1"
   }
 }

website/pnpm-lock.yaml

@@ -1,9 +1,7 @@
 #support-plans-slider {
   margin: 200px auto 150px;
-}
 
-@media (max-width: 550px) {
-  #support-plans-slider {
+  @media (max-width: 550px) {
     max-width: 98%;
     margin: 170px auto 120px;
   }
@@ -26,13 +24,15 @@
   margin-top: 15px;
   background: linear-gradient(32deg, #03a9f4, transparent) #f441a5;
   transition: background-color 1s;
-}
 
-.plan-link:hover,
-.plan-link:focus {
-  background-color: #fdb900;
+  &:hover,
+  &:focus {
+    background-color: #fdb900;
+  }
 }
 
+
+
 /* noUI slider customizations */
 
 .noUi-connects {
@@ -45,35 +45,36 @@
   font-size: 30px;
   transition: font-size 0.3s ease;
   cursor: pointer;
-}
 
-.noUi-value.active {
-  font-size: 45px;
+  &.active {
+    font-size: 45px;
+  }
 }
 
-.noUi-marker-horizontal.noUi-marker-large {
-  height: 5px;
-}
+.noUi-marker-horizontal {
+  &.noUi-marker-large {
+    height: 5px;
+  }
 
-.noUi-marker-horizontal.noUi-marker {
-  margin-left: 0;
-  width: 1px;
+  &.noUi-marker {
+    margin-left: 0;
+    width: 1px;
+  }
 }
 
 .noUi-tooltip {
   border-color: #ccc;
   border-radius: 10px;
   padding: 10px;
-}
 
-.noUi-tooltip.first {
-  left: 0;
-  transform: unset;
-}
+  &.first {
+    left: 0;
+    transform: unset;
+  }
 
-.noUi-tooltip.last {
-  right: 0;
-  left: unset;
-  transform: unset;
+  &.last {
+    right: 0;
+    left: unset;
+    transform: unset;
+  }
 }
-

website/src/styles/donate.css

@@ -1,5 +1,4 @@
 body {
-  padding-bottom: 100px;
   line-height: 1.5;
   font-size: 17px;
   -webkit-font-smoothing: antialiased;
@@ -8,12 +7,6 @@ body {
   color: #000;
 }
 
-@media (max-width: 550px) {
-  body {
-    padding-bottom: 40px;
-  }
-}
-
 .container {
   max-width: 700px;
   margin-left: auto;
@@ -46,16 +39,18 @@ h1 {
   margin-top: 1em;
 }
 
-p a {
-  color: #333;
-  font-weight: bold;
-  text-decoration: none;
-  box-shadow: 0 1px 0 #adc2ee;
-  transition: box-shadow 200ms ease 0s;
-}
+p {
+  a {
+    color: #333;
+    font-weight: bold;
+    text-decoration: none;
+    box-shadow: 0 1px 0 #adc2ee;
+    transition: box-shadow 200ms ease 0s;
 
-p a:hover {
-  box-shadow: 0 2px 0 #adc2ee;
+    &:hover {
+      box-shadow: 0 2px 0 #adc2ee;
+    }
+  }
 }
 
 strong {
@@ -79,14 +74,15 @@ hr {
 }
 
 .footer {
-  margin-top: 3em;
+  margin-top: 6em;
+  margin-bottom: 4em;
   display: flex;
   justify-content: space-evenly;
-}
 
-.footer a {
-  color: #777;
-  text-decoration: none;
+  a {
+    color: #777;
+    text-decoration: none;
+  }
 }
 
 .logo {
@@ -105,4 +101,24 @@ hr {
   padding: 14px;
   font-weight: bold;
   overflow-x: auto;
-}
+}
+
+.quick-start-button {
+  /*display: block;*/
+  text-decoration: none;
+  color: white;
+  font-weight: bold;
+  letter-spacing: 0.05rem;
+  font-size: 15px;
+  border-radius: 20px;
+  padding: 6px 16px;
+  margin-top: 15px;
+  background: linear-gradient(32deg, #03a9f4, transparent) #f441a5;
+  transition: background-color 1s;
+
+  &:hover,
+  &:focus {
+    background-color: #fdb900;
+  }
+}
+