Update site branding (#3)

* Add new SUI brand assets
* Update link previews with new color scheme
* Split new-release link preview into one per platform
* Update light theme colors
* Update link preview image src links for release pages
* Adjust theme switcher for new colors
* Redesign footer buttons
* $emoves the 'Quick Links' card from the home page
* Various style improvements

404.html

@@ -70,14 +70,16 @@ <h1>ERROR! Page not found.</h1>
     </main>
     <div class="spacer"></div>
     <footer>
-        <a rel="me" target="_blank" href="https://mastodon.world/@SignalUpdateInfo">Mastodon</a>
-        <p>-</p>
-        <a target="_blank" href="https://github.com/tedgravlin/signal-update-info">GitHub</a>
-        <br>
-        <div class="theme-button-mobile " id="theme-button-mobile">
-            <p>Theme:</p>
-            <img alt="Auto Theme Icon" class="theme-icon-mobile" id="theme-icon-mobile"
-                src="/assets/images/icons/theme-auto.svg">
+        <div class="footer-button-container">
+            <div class="theme-button-mobile " id="theme-button-mobile">
+                <p>Theme:</p>
+                <img alt="Auto Theme Icon" class="theme-icon-mobile" id="theme-icon-mobile"
+                    src="/assets/images/icons/theme-auto.svg">
+            </div>
+            <a class="footer-button" rel="me" target="_blank" href="https://mastodon.world/@SignalUpdateInfo"><img
+                    src="/assets/images/icons/mastodon-logo.svg">Mastodon</a>
+            <a class="footer-button" target="_blank" href="https://github.com/tedgravlin/signal-update-info"><img
+                    src="/assets/images/icons/github-logo.svg">GitHub</a>
         </div>
         <p class="disclaimer">Signal Update Info is not affiliated with Signal and is not an official Signal website.
         </p>

about.html

@@ -69,15 +69,19 @@ <h1>About</h1>
     </main>
     <div class="spacer"></div>
     <footer>
-        <a rel="me" target="_blank" href="https://mastodon.world/@SignalUpdateInfo">Mastodon</a>
-        <p>-</p>
-        <a target="_blank" href="https://github.com/tedgravlin/signal-update-info">GitHub</a>
-        <br>
-        <div class="theme-button-mobile "id="theme-button-mobile">
-            <p>Theme:</p>
-            <img alt="Auto Theme Icon" class="theme-icon-mobile" id="theme-icon-mobile" src="/assets/images/icons/theme-auto.svg">
+        <div class="footer-button-container">
+            <div class="theme-button-mobile " id="theme-button-mobile">
+                <p>Theme:</p>
+                <img alt="Auto Theme Icon" class="theme-icon-mobile" id="theme-icon-mobile"
+                    src="/assets/images/icons/theme-auto.svg">
+            </div>
+            <a class="footer-button" rel="me" target="_blank" href="https://mastodon.world/@SignalUpdateInfo"><img
+                    src="/assets/images/icons/mastodon-logo.svg">Mastodon</a>
+            <a class="footer-button" target="_blank" href="https://github.com/tedgravlin/signal-update-info"><img
+                    src="/assets/images/icons/github-logo.svg">GitHub</a>
         </div>
-        <p class="disclaimer">Signal Update Info is not affiliated with Signal and is not an official Signal website.</p>
+        <p class="disclaimer">Signal Update Info is not affiliated with Signal and is not an official Signal website.
+        </p>
     </footer>
 </body>
 

css/dark-theme.css

@@ -2,8 +2,11 @@
 @media (prefers-color-scheme: dark) {
     :root {
         --main-color: #9db1ff;
+        --text-on-main: #9db1ff;
+        --card-color: #9db1ff;
+        --btn-text: #9db1ff;
         --background-color: #181d44;
-        --on-main-bg-color: #181d44dd; 
+        --on-main-bg-color: #181d44dd;
         --text-color: #182142;
         --platform-selected-bg: #181d44ca;
         --main-color-filter: invert(74%) sepia(95%) saturate(1952%) hue-rotate(192deg) brightness(101%) contrast(100%);
@@ -19,27 +22,34 @@
         background-color: var(--background-color);
     }
 
-    img.theme-button-desktop, img.theme-icon-mobile {
+    img.theme-button-desktop,
+    img.theme-icon-mobile {
         filter: var(--main-color-filter);
     }
 
 
     footer {
         color: var(--main-color);
     }
-
-    footer a, footer a:visited, footer a:active {
+
+    footer a,
+    footer a:visited,
+    footer a:active {
         color: var(--main-color);
     }
 
+    a.footer-button img {
+        filter: var(--main-color-filter);
+    }
+
     div.card,
     div.slim-card {
-        color: var(--text-color);
-        background-color: var(--main-color);
+        color: var(--btn-text);
+        background-color: var(--card-color);
     }
 
     div.release-card {
-        color: var(--main-color);
+        color: var(--btn-text);
         background-color: var(--on-main-bg-color);
     }
 
@@ -60,7 +70,7 @@
     div.card h1,
     div.slim-card h1 {
         background-color: var(--text-color);
-        color: var(--main-color);
+        color: var(--text-on-main);
     }
 
     div.card-content-grid p,
@@ -71,17 +81,22 @@
     div.article-preview,
     div.tool-preview {
         background-color: var(--on-main-bg-color);
-        color: var(--main-color);
+        color: var(--btn-text);
+    }
+
+    div.article-header p {
+        color: var(--text-color);
     }
 
     div.tool-button-preview {
         background-color: var(--main-color);
     }
 
     div.article-preview h1 {
-        color: var(--main-color);
+        color: var(--btn-text);
         background-color: transparent;
     }
+
 
     div.message-option,
     div.style-option,
@@ -124,10 +139,11 @@
 
     div.button-code-container {
         background-color: var(--code-container-bg);
-    }    
+    }
 
     /* Targeting devices with mouse cursor and :hover */
     @media(hover: hover) and (pointer: fine) {
+
         div.message-option:hover,
         div.style-option:hover,
         div.size-option:hover {
@@ -141,16 +157,17 @@
 
 
     input[type=button].platform-selected {
-        color: var(--main-color);
+        color: var(--btn-text);
         border-color: var(--text-color);
         background-color: var(--platform-selected-bg);
     }
 
     input[type=button].platform-unselected {
         color: var(--text-color);
-        background-color: var(--main-color);
+        background-color: var(--card-color);
         border-color: var(--text-color);
     }
+
     input[type=button].no-fill {
         color: var(--main-color);
         background-color: var(--background-color);

css/light-theme.css

@@ -1,12 +1,15 @@
 /* Light mode colors */
 @media (prefers-color-scheme: light) {
     :root {
-        --main-color: white;
-        --background-color: #4166f5;
-        --on-main-bg-color: #4165f5e8;
-        --text-color: #4166f5;
-        --platform-selected-bg: #4165f5e6;
-        --main-color-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+        --main-color: #181d44;
+        --text-on-main: #FFFFFF;
+        --card-color: #FFFFFF;
+        --btn-text: #FFFFFF;
+        --background-color: #9db1ff;
+        --on-main-bg-color: #212962dd;
+        --text-color: #181d44;
+        --platform-selected-bg: #212962dd;
+        --main-color-filter: brightness(0) saturate(100%) invert(11%) sepia(21%) saturate(2448%) hue-rotate(199deg) brightness(99%) contrast(99%);
         --text-color-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(199deg) brightness(109%) contrast(104%);
         --btn-bg-color: #dee6ffbf;
         --btn-border-color: #dee6ffbf;
@@ -34,6 +37,10 @@
         color: var(--main-color);
     }
 
+    a.footer-button img {
+        filter: var(--main-color-filter);
+    }
+
     header,
     header a:visited {
         color: var(--main-color);
@@ -52,12 +59,12 @@
     div.card,
     div.slim-card,
     div.release-card {
-        color: var(--text-color);
-        background-color: var(--main-color);
+        color: var(--btn-text);
+        background-color: var(--card-color);
     }
 
     div.release-card {
-        color: var(--main-color);
+        color: var(--btn-text);
         background-color: var(--on-main-bg-color);
     }
 
@@ -68,7 +75,7 @@
     div.card h1,
     div.slim-card h1 {
         background-color: var(--text-color);
-        color: var(--main-color);
+        color: var(--text-on-main);
     }
 
     div.card-content {
@@ -83,15 +90,19 @@
     div.article-preview,
     div.tool-preview {
         background-color: var(--on-main-bg-color);
-        color: var(--main-color);
+        color: var(--btn-text);
+    }
+
+    div.article-header p {
+        color: var(--text-color);
     }
 
     div.tool-button-preview {
         background-color: var(--main-color);
     }
 
     div.article-preview h1 {
-        color: var(--main-color);
+        color: var(--btn-text);
         background-color: transparent;
     }
 
@@ -151,14 +162,14 @@
     }
 
     input[type=button].platform-selected {
-        color: var(--main-color);
+        color: var(--btn-text);
         border-color: var(--text-color);
         background-color: var(--platform-selected-bg);
     }
 
     input[type=button].platform-unselected {
         color: var(--text-color);
-        background-color: var(--main-color);
+        background-color: var(--card-color);
         border-color: var(--text-color);
     }