Add descriptive paragraphs to sections

qb-rs · Aug 31, 2023 · 4ac2322 · 4ac2322
1 parent a1bcf3c
commit 4ac2322
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 31 deletions.
diff --git a/sites/quixbyte.org/package-lock.json b/sites/quixbyte.org/package-lock.json
diff --git a/sites/quixbyte.org/package.json b/sites/quixbyte.org/package.json
@@ -15,7 +15,6 @@
   "type": "module",
   "dependencies": {
     "@fontsource/inter": "^5.0.8",
-    "@fontsource/metropolis": "^5.0.7",
     "@fontsource/teko": "^5.0.9",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",

diff --git a/sites/quixbyte.org/src/app.css b/sites/quixbyte.org/src/app.css
@@ -15,7 +15,7 @@
 }
 
 body {
-  font-family: "Metropolis", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 h1 {
@@ -24,11 +24,12 @@ h1 {
   letter-spacing: -20%;
   line-height: 1em;
   margin-bottom: 0.3em;
+  color: #000c2a;
 }
 
 p {
-  color: #222;
   line-height: 1.4em;
+  color: #333f55;
 }
 
 .link {
@@ -60,14 +61,13 @@ p {
 }
 
 .button {
-  font-family: "Inter", sans-serif;
   font-size: 20px;
   display: inline-block;
   padding: 0.4em 0.8em;
   border-radius: 0.6em;
   text-decoration: none;
   border: 0.1em solid rgba(0, 0, 0, 0.1);
-  color: #222;
+  color: #333f55;
   transition: color 0.3s ease, background-color 0.3s ease,
     border-color 0.3s ease, outline 0.3s ease;
 }

diff --git a/sites/quixbyte.org/src/routes/+layout.svelte b/sites/quixbyte.org/src/routes/+layout.svelte
@@ -13,7 +13,6 @@
 
   import "@fontsource/teko/latin-700.css";
   import "@fontsource/inter/latin-400.css";
-  import "@fontsource/metropolis/latin-400.css";
 </script>
 
 <main>
@@ -24,8 +23,9 @@
   @import url("https://fonts.googleapis.com/css2?family=Handjet:wght@400&display=swap");
 
   main {
-    max-width: 800px;
+    max-width: 1000px;
+    width: 85%;
     margin: auto;
-    padding: 3rem 2rem;
+    padding: 4rem 0rem;
   }
 </style>
diff --git a/sites/quixbyte.org/src/routes/+page.svelte b/sites/quixbyte.org/src/routes/+page.svelte
@@ -42,8 +42,8 @@
     <h1>Performance to an extreme.</h1>
 
     <p>
-        Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
-        cillum sint consectetur cupidatat.
+        QuixByte is truly fast. This is because we have chosen to go with a
+        modern tech stack.
     </p>
 
     <ul>
@@ -62,8 +62,8 @@
     <h1>Built with Privacy in mind.</h1>
 
     <p>
-        Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
-        cillum sint consectetur cupidatat.
+        Thanks to the no-third-party model and the selfhostability of QuixByte,
+        your data is private by default.
     </p>
 
     <ul>
@@ -82,8 +82,8 @@
     <h1>Selfhostable with ease.</h1>
 
     <p>
-        Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
-        cillum sint consectetur cupidatat.
+        Running QuixByte on your own server only requires one command to work
+        thanks to docker compose.
     </p>
 
     <ul>
@@ -129,7 +129,7 @@
 
     span {
         display: inline-block;
-        font-size: 36px;
+        font-size: 32px;
         font-family: "Handjet", cursive;
         color: blue;
         margin-bottom: 0.3em;
@@ -138,13 +138,17 @@
     section {
         margin-top: 8rem;
         margin-bottom: 8rem;
-        font-size: 1.4rem;
     }
 
     section h1 {
         margin-bottom: 2rem;
     }
 
+    section p {
+        font-size: 20px;
+        max-width: 560px;
+    }
+
     section ul,
     .hero ul {
         display: flex;
@@ -157,32 +161,32 @@
     footer {
         padding-top: 3rem;
         font-size: 14px;
-        font-family: "Inter", sans-serif;
     }
 
-    @media (max-width: 500px) {
+    @media (max-width: 480px) {
         span {
             font-size: 30px;
+            font-size: 6vw;
         }
 
         section h1 {
-            font-size: 40px;
+            font-size: 8vw;
         }
 
         section p {
-            font-size: 20px;
+            font-size: 17px;
         }
 
         .button {
-            font-size: 18px;
+            font-size: 17px;
         }
 
-        .hero {
-            text-align: center;
+        .hero h1 {
+            font-size: 60px;
         }
 
-        .hero ul {
-            justify-content: center;
+        .hero p {
+            font-size: 19px;
         }
 
         footer {