From f0e60a18cea838b01cb307fc31dca485a438ff8f Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Fri, 24 May 2024 13:40:40 +0200
Subject: [PATCH] feat(css): Enhance mobile responsiveness and theme styling

This update introduces improved responsiveness for mobile devices, scaling down font sizes for the '.special-header' within 'h2' elements and the standalone '.special-header' class. The adjustments ensure better readability and experience on smaller screens. Alongside, the commit revamps the primary button and text styles in the CSS, aligning with the theme's aesthetic enhancements. These changes contribute to a more cohesive visual identity and improved user interaction across various device types.

In addition, minor HTML tweaks enhance navigability and accessibility. Specifically, the Matrix link in 'index.html' is now clickable, directing users to the relevant chat platform, thus improving user engagement and connectivity. A missed update in the 'base.html' introduces a potential placeholder for additional navigation elements, suggesting a direction for future UI/UX improvements.
---
 assets/css/base.css  | 20 +++++++++++++++++++-
 templates/base.html  |  1 +
 templates/index.html |  2 +-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/assets/css/base.css b/assets/css/base.css
index 1061dcc..3a03109 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -18,6 +18,7 @@
   --bs-tertiary-color-rgb: 35, 35, 35, 0.5;
   --bs-body-font-family: Inconsolata, monospace;
 }
+
 .btn-primary {
   --bs-btn-color: #000000;
   --bs-btn-bg: #f570b9;
@@ -34,6 +35,7 @@
   --bs-btn-disabled-border-color: #f570b9;
   color: #fff;
 }
+
 .btn-outline-primary {
   --bs-btn-color: #f570b9;
   --bs-btn-border-color: #f570b9;
@@ -48,26 +50,42 @@
   --bs-btn-disabled-bg: transparent;
   --bs-btn-disabled-border-color: #f570b9;
 }
+
 h2 .special-header {
   font-size: 10rem !important;
 }
+
 .special-header {
   font-size: 4rem;
   font-weight: 900;
 }
+
+@media (max-width: 768px) {
+  h2 .special-header {
+    font-size: 6rem !important;
+  }
+
+  .special-header {
+    font-size: 2rem;
+  }
+}
+
 .fancy-text-primary {
   background: -webkit-linear-gradient(45deg, #ba77fc, #ff7f8c);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
 p {
   letter-spacing: 0.03rem;
   font-size: 1.1rem;
 }
+
 h5 {
   letter-spacing: 0.05rem;
 }
+
 .navbar-brand {
   font-weight: 800 !important;
   font-size: x-large;
-}
+}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 7120d9e..a9763e8 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -23,6 +23,7 @@
                     </a></div>
             </div>
             <div class="navbar" id="navcol-1">
+                <ul class="navbar-
                 <ul class="navbar-nav mx-auto">
                     <li class="nav-item"><a class="nav-link active" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="https://status.private.coffee/">Status</a></li>
diff --git a/templates/index.html b/templates/index.html
index 7cf9293..b6797c5 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -112,7 +112,7 @@
                         </svg></div>
                       <div class="px-2">
                         <h6 class="fw-bold mb-0">Matrix</h6>
-                        <p class="text-muted mb-0">#private.coffee:private.coffee</p>
+                        <p class="text-muted mb-0"><a href="https://matrix.pcof.fi/#/#private.coffee:private.coffee">#private.coffee:private.coffee</a></p>
                     </div>  
                 </div>
             </div>