Update style.css

Author: LinuxJava7

style.css

@@ -1,12 +1,11 @@
-/* Import the external Catppuccin palette */
 @import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
 
-/* Global Styles */
 :root { 
   font-family: Inter, sans-serif;
-  font-feature-settings: 'liga' 1, 'calt' 1; /* Chrome fix */
-  word-wrap: break-word; /* Break long words and force line wrapping */
-  overflow-wrap: break-word; /* Ensures long words break */
+  font-feature-settings: 'liga' 1, 'calt' 1;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  font-size: 16px;
 }
 
 @supports (font-variation-settings: normal) {
@@ -16,80 +15,77 @@
 }
 
 body {
-  background: rgb(var(--ctp-latte-base-rgb)); /* Default to latte theme */
+  background: rgb(var(--ctp-latte-base-rgb));
   margin: 0;
+  font-size: 1rem;
 }
 
 .content {
-  margin: 0px 16px 16px 8px;
-  padding-top: 76px;
-
+  margin: 0 1rem 1rem 1rem;
+  padding-top: 4.75rem;
 }
 
 h1 {
   color: var(--ctp-latte-lavender);
   font-size: 4.5rem;
   font-weight: 900;
   letter-spacing: -0.04em;
-  line-height: 0.9em;
+  line-height: 1.25;
   margin: 0 0 0.25em;
 }
 
-/* Headerbar */
 .headerbar {
   display: flex;
   background: rgba(239, 241, 245, 0.8); 
-  justify-content: center; /* Center the view switcher horizontally */
-  align-items: center; /* Align items vertically in the center */
-  height: 47px; /* Set the headerbar height to 47px */
-  padding: 0; /* Remove padding around the header */
-  width: 100%; /* Ensure the header bar spans the full width */
+  justify-content: center;
+  align-items: center;
+  height: 2.9375rem;
+  padding: 0;
+  width: 100%;
   position: fixed;
   backdrop-filter: blur(12px);
-  z-index: 9999; /* Ensure it appears above other content */
+  z-index: 9999;
 }
 
-/* View Switcher */
 .view-switcher {
-  display: flex; /* Horizontally align the list items */
-  justify-content: center; /* Center the items */
-  padding: 0; /* Remove padding */
+  display: flex;
+  justify-content: center;
+  padding: 0;
 }
 
 .view-switcher ul {
-  display: flex; /* Ensure the <ul> is also displayed in a row */
-  list-style: none; /* Remove bullet points */
+  display: flex;
+  list-style: none;
   margin: 0;
   padding: 0;
-  gap: 4px;
+  gap: 0.25rem;
 }
 
 .view-switcher li {
   display: inline-block;
 }
 
 .view-switcher a {
-  color: rgb(var(--ctp-latte-text-rgb)); /* Text color */
+  color: rgb(var(--ctp-latte-text-rgb));
   text-decoration: none;
   font-weight: bold;
-  width: 118px; /* Static width for the navigation items */
-  height: 32px;
-  display: flex; /* Align icon and text horizontally */
-  align-items: center; /* Center items vertically */
-  justify-content: center; /* Center text and icon within the fixed width */
-  gap: 4px; /* Space between the icon and text */
-  border-radius: 6px;
-  transition: background-color 0.2s ease, color 0.2s ease; /* Add smooth color transition */
+  width: 7.375rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s ease, color 0.2s ease;
 }
 
 .view-switcher a:hover,
 .view-switcher a:focus {
-  background-color: rgba(124,127,147,0.3); /* Latte hover/focus */
-  border-radius: 6px;
+  background-color: rgba(124,127,147,0.3);
+  border-radius: 0.375rem;
 }
 
 .view-switcher .current {
   background-color: rgb(201, 207, 219, 0.5);
-  border-radius: 6px;
+  border-radius: 0.375rem;
 }
-