Tweak font metrics for website and fix typos

danirod · Aug 7, 2024 · 83e9441 · 83e9441
1 parent bf1ea41
commit 83e9441
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/doc/website/index.html b/doc/website/index.html
@@ -34,13 +34,14 @@ <h1 class="title">
           </a></p>
           <p>Also available in <a href="https://aur.archlinux.org/packages/cartero">Arch Linux AUR</a>
           and <a href="https://github.com/danirod/cartero?tab=readme-ov-file#nixnixos">as a Nix flake</a>.</p>
-          <p><small>Cartero is published under the terms of the <a href="https://www.gnu.org/licenses/gpl-3.0.html">GNU GPL 3.0 or later</a>. The source code is <a href="https://github.com/danirod/cartero">available here</a>.</small></p>
+          <p><small>Cartero is free software released as <a href="https://www.gnu.org/licenses/gpl-3.0.html">GNU GPL 3.0 or later</a>.
+            The source code is <a href="https://github.com/danirod/cartero">available here</a>.</small></p>
         </div>
         <div class="download-other">
           <p><strong>Other operating systems:</strong></p>
           <ul class="extra-download">
             <li><a href="https://github.com/danirod/cartero/releases/download/v0.1.1/Cartero-0.1.1-windows-x64.exe">Windows (x64)</a></li>
-            <li><a href="https://github.com/danirod/cartero/releases/download/v0.1.1/Cartero-0.1.1-macOS-ARM64.dmg">macOS (Sillicon)</a></li>
+            <li><a href="https://github.com/danirod/cartero/releases/download/v0.1.1/Cartero-0.1.1-macOS-ARM64.dmg">macOS (Silicon)</a></li>
             <li><a href="https://github.com/danirod/cartero/releases/download/v0.1.1/Cartero-0.1.1-macOS-Intel.dmg">macOS (Intel)</a></li>
           </ul>
           <p class="disclaimer">

diff --git a/doc/website/style.css b/doc/website/style.css
@@ -2,6 +2,7 @@
   --brand-link-color: black;
   --brand-background-color: #bbd1e5;
   --brand-foreground-color: black;
+  --brand-shadow-color: white;
 
   --link-color: #0461be;
   --background-color: #fafafa;
@@ -17,6 +18,7 @@
     --brand-link-color: white;
     --brand-background-color: #526678;
     --brand-foreground-color: #ffffff;
+    --brand-shadow-color: black;
 
     --link-color: #81d0ff;
     --background-color: #242424;
@@ -34,7 +36,7 @@
 
 body {
   font-family: system-ui, sans-serif;
-  font-size: 14pt;
+  font-size: 13pt;
   margin: 0;
   padding: 0;
   display: flex;
@@ -44,8 +46,8 @@ body {
 }
 
 .wrapper {
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: 30px;
+  padding-right: 30px;
 }
 
 header, .download {
@@ -81,7 +83,7 @@ h1 {
   margin-top: 0;
   margin-bottom: 0;
   line-height: 1;
-  text-shadow: 0 1pt 0 black;
+  text-shadow: 0 1pt 0 var(--brand-shadow-color);
 }
 
 .logo {
@@ -92,12 +94,17 @@ h1 {
 .lead {
   font-weight: 300;
   font-size: 18pt;
+  text-wrap: balance;
 }
 
 .download {
   text-align: center;
 }
 
+.download-linux {
+  text-wrap: balance;
+}
+
 .extra-download {
   list-style: none;
   padding-left: 0;
@@ -110,6 +117,7 @@ h1 {
 .features {
   margin-top: 0;
   padding: 2rem;
+  padding-top: 0;
 }
 
 .features img {
@@ -148,11 +156,12 @@ footer {
 
 .feature-text h2 {
   margin-top: 0;
+  text-wrap: balance;
 }
 
 @media screen and (min-width: 800px) {
   body {
-    font-size: 16pt;
+    font-size: 14pt;
   }
 
   .wrapper {
@@ -166,7 +175,11 @@ footer {
   }
 
   .download {
-    padding-bottom: 4rem;
+    padding-bottom: 14rem;
+  }
+
+  .features {
+    margin-top: -14rem;
   }
 
   h1 {