fix: remove unused css (#2084)

Remove some css that isn't actually used and simplify the templates. For example, get rid of the color-scheme logic, as we're just going to use media preference.
kai687 · Nov 28, 2024 · ca83188 · ca83188
1 parent 8e9dced
commit ca83188
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 186 deletions.
diff --git a/src/sphinxawesome_theme/header.html b/src/sphinxawesome_theme/header.html
@@ -1,7 +1,6 @@
 {#- Template file for the header -#}
 
-<header
-  class="sticky top-0 z-40 w-full border-b shadow-sm border-border supports-backdrop-blur:bg-background/60 bg-background/95 backdrop-blur">
+<header class="sticky top-0 z-40 w-full border-b shadow-sm border-border bg-background/90 backdrop-blur">
 
   {#- Extra block at the top of the header #}
   {%- block header_before %}{% endblock header_before -%}
@@ -29,7 +28,7 @@
 
       {%- block header_main_nav %}
       {%- if theme_main_nav_links|tobool -%}
-      <nav class="flex items-center space-x-6 text-sm font-medium">
+      <nav class="flex items-center gap-6 text-sm font-medium">
         {%- for text,url in theme_main_nav_links.items() %}
         {%- set _active = "text-foreground" if pagename in url else "text-foreground/60" -%}
         {%- if url.startswith("http") %}
@@ -61,21 +60,21 @@
     {%- endblock mobile_menu %}
 
     {%- block header_right %}
-    <div class="flex items-center justify-between flex-1 space-x-2 sm:space-x-4 md:justify-end">
+    <div class="flex items-center justify-between flex-1 gap-2 sm:gap-4 md:justify-end">
       {%- if docsearch or hasdoc('search') %}
       <div class="flex-1 w-full md:w-auto md:flex-none">
         {%- include "searchbox.html" %}
       </div>
       {%- endif %}
 
       {%- block extra_header_link_icons %}
-      <nav class="flex items-center space-x-1">
+      <nav class="flex items-center gap-1">
         {%- if theme_extra_header_link_icons|tobool %}
         {%- for text,url in theme_extra_header_link_icons.items() %}
         {%- if url is mapping %}
         <a href="{{ url.link }}" title="Visit {{ text }}" rel="noopener nofollow">
           <div
-            class="inline-flex items-center justify-center px-0 text-sm font-medium transition-colors rounded-md disabled:opacity-50 disabled:pointer-events-none hover:bg-accent hover:text-accent-foreground h-9 w-9">
+            class="inline-flex items-center justify-center px-0 text-sm font-medium transition-colors rounded-md hover:bg-accent hover:text-accent-foreground h-9 w-9">
             {{ url.icon }}
           </div>
         </a>

diff --git a/src/sphinxawesome_theme/layout.html b/src/sphinxawesome_theme/layout.html
@@ -1,37 +1,23 @@
 {%- set lang_attr = "en" if language == None else (language|replace('_','-')) -%}
 
 {%- if not embedded and docstitle -%}
-  {%- if title == docstitle -%}
-    {%- set titlesuffix = "" -%}
-  {%- else -%}
-    {%- set titlesuffix = " | "|safe + docstitle|e -%}
-  {%- endif -%}
+{%- if title == docstitle -%}
+{%- set titlesuffix = "" -%}
+{%- else -%}
+{%- set titlesuffix = " | "|safe + docstitle|e -%}
+{%- endif -%}
 {%- else -%}
-  {%- set titlesuffix = "" -%}
+{%- set titlesuffix = "" -%}
 {%- endif -%}
 
 <!DOCTYPE html>
-<html lang="{{ lang_attr }}" {% if sphinx_version_tuple>= (7, 2) %}data-content_root="{{ content_root }}"{% endif %}
-      x-data="{
-        darkMode: window.matchMedia('(prefers-color-scheme: dark)').matches,
-        activeSection: '',
-        init() {
-          const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-          darkModeQuery.addEventListener('change', (event) => {
-            this.darkMode = event.matches
-          });
-        },
-      }"
-      x-init="init()"
-      class="scroll-smooth"
-      :class="{'dark': darkMode}"
->
+<html lang="{{ lang_attr }}" data-content_root="{{ content_root|default('', true) }}" x-data="{activeSection: ''}">
 
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta charset="utf-8" />
-  <meta name="theme-color" media="(prefers-color-scheme: light)" content="white" />
-  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#030711" />
   {{ metatags }}
 
   {%- block htmltitle %}
@@ -77,20 +63,6 @@
   <link rel="prev" title="{{ prev.title|striptags|e }}" href="{{ prev.link|e }}" />
   {%- endif %}
   {%- endblock linktags %}
-
-  <script>
-    <!-- Prevent Flash of wrong theme -->
-    const userPreference = localStorage.getItem('darkMode');
-    let mode;
-    if (userPreference === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      mode = 'dark';
-      document.documentElement.classList.add('dark');
-    } else {
-      mode = 'light';
-    }
-    if (!userPreference) {localStorage.setItem('darkMode', mode)}
-  </script>
-
   {%- block extrahead %}{%- endblock extrahead %}
 </head>
 
@@ -124,9 +96,9 @@
 
       {%- if not only_main_nav and sidebars|length > 0 -%}
       <div
-        class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
+        class="container md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
         {%- else -%}
-        <div class="container items-start flex-1">
+        <div class="container">
           {%- endif -%}
 
           {%- block sidebar %}

diff --git a/src/sphinxawesome_theme/sidebar.html b/src/sphinxawesome_theme/sidebar.html
@@ -4,15 +4,15 @@
 
 {%- if not only_main_nav and sidebars|length > 0 -%}
 <aside id="left-sidebar"
-  class="fixed inset-y-0 left-0 md:top-14 z-50 md:z-30 bg-background md:bg-transparent transition-all duration-100 -translate-x-full md:translate-x-0 ml-0 p-6 md:p-0 md:-ml-2 md:h-[calc(100vh-3.5rem)] w-5/6 md:w-full shrink-0 overflow-y-auto border-r border-border md:sticky"
+  class="fixed inset-y-0 left-0 md:top-14 z-50 md:z-30 bg-background md:bg-transparent transition-all duration-100 -translate-x-full md:translate-x-0 ml-0 p-6 md:p-0 md:-ml-2 md:h-[calc(100vh-3.5rem)] w-5/6 md:w-full overflow-y-auto border-r border-border md:sticky"
   :aria-hidden="!showSidebar" :class="{ 'translate-x-0': showSidebar }">
   {%- else %}
   <aside id="left-sidebar"
-    class="fixed inset-y-0 left-0 md:hidden z-50 bg-background transition-all duration-100 -translate-x-full ml-0 p-6 w-5/6 shrink-0 overflow-y-auto border-r border-border"
+    class="fixed inset-y-0 left-0 md:hidden z-50 bg-background transition-all duration-100 -translate-x-full ml-0 p-6 w-5/6 overflow-y-auto border-r border-border"
     :aria-hidden="!showSidebar" :class="{ 'translate-x-0': showSidebar }">
     {%- endif %}
 
-    <a href="{{ pathto(master_doc) }}" class="!justify-start text-sm md:!hidden bg-background">
+    <a href="{{ pathto(master_doc) }}" class="justify-start text-sm md:!hidden bg-background">
       {%- if logo_url %}
       <img height="16" width="16" class="mr-2 dark:invert" src="{{ logo_url }}" alt="Logo" />
       {%- endif -%}
@@ -27,7 +27,7 @@
       <span class="font-bold text-clip whitespace-nowrap">{{ docstitle }}</span>
     </a>
 
-    <div class="relative overflow-hidden md:overflow-auto my-4 md:my-0 h-[calc(100vh-8rem)] md:h-auto">
+    <div class="relative overflow-hidden md:overflow-auto my-4 md:my-0">
       <div class="overflow-y-auto h-full w-full relative pr-6">
         {%- for section in sidebars %}
         {%- include section %}

diff --git a/src/sphinxawesome_theme/static/theme.css b/src/sphinxawesome_theme/static/theme.css
diff --git a/src/sphinxawesome_theme/static/theme.js b/src/sphinxawesome_theme/static/theme.js
diff --git a/src/theme-src/.eslintrc.js b/src/theme-src/.eslintrc.js
@@ -1,15 +1,10 @@
 module.exports = {
-  extends: ['eslint:recommended', 'prettier'],
+  extends: ["eslint:recommended", "prettier"],
   env: {
     browser: true,
-    node: true,
   },
   parserOptions: {
-    ecmaVersion: 6,
-    sourceType: 'module',
+    ecmaVersion: "latest",
+    sourceType: "module",
   },
-  globals: {
-    _: 'readable',
-    Documentation: 'readable',
-  },
-}
+};
diff --git a/src/theme-src/css/styles.css b/src/theme-src/css/styles.css
@@ -14,6 +14,8 @@
 
 @layer base {
   :root {
+    color-scheme: light dark;
+
     --background: 0 0% 100%;
     --foreground: 222.2 47.4% 11.2%;
 
@@ -30,52 +32,42 @@
     --card-foreground: 222.2 47.4% 11.2%;
 
     --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
 
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
 
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
-
     --ring: 215 20.2% 65.1%;
 
     --radius: 0.5rem;
   }
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
 
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: 224 71% 4%;
+      --foreground: 213 31% 91%;
 
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
+      --muted: 223 47% 11%;
+      --muted-foreground: 215.4 16.3% 56.9%;
 
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
+      --accent: 216 34% 17%;
+      --accent-foreground: 210 40% 98%;
 
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
+      --popover: 224 71% 4%;
+      --popover-foreground: 215 20.2% 65.1%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
+      --border: 216 34% 17%;
+      --input: 216 34% 17%;
 
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
+      --card: 224 71% 4%;
+      --card-foreground: 213 31% 91%;
 
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
+      --primary: 210 40% 98%;
+      --primary-foreground: 222.2 47.4% 1.2%;
 
-    --ring: 216 34% 17%;
+      --ring: 216 34% 17%;
 
-    --radius: 0.5rem;
+      --radius: 0.5rem;
+    }
   }
 }
 
@@ -89,3 +81,9 @@
     @apply px-4;
   }
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  :has(:target) {
+    scroll-behavior: smooth;
+  }
+}
diff --git a/src/theme-src/package.json b/src/theme-src/package.json
@@ -13,8 +13,8 @@
   "author": "Kai Welke",
   "license": "MIT",
   "dependencies": {
-    "@alpinejs/intersect": "^3.14.3",
-    "alpinejs": "^3.14.3",
+    "@alpinejs/intersect": "^3.14.5",
+    "alpinejs": "^3.14.5",
     "clipboard": "^2.0.11"
   },
   "devDependencies": {
@@ -35,10 +35,10 @@
     "postcss-import": "^16.1.0",
     "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^10.1.1",
-    "prettier": "^3.4.0",
+    "prettier": "^3.4.1",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-tailwindcss": "^0.6.9",
-    "stylelint": "^16.10.0",
+    "stylelint": "^16.11.0",
     "stylelint-prettier": "^5.0.2",
     "stylelint-webpack-plugin": "^5.0.1",
     "tailwindcss": "^3.4.15",