docs: update styling

docs/index.md

@@ -27,12 +27,12 @@ hide:
 
 ![TagStudio screenshot](./assets/tag_bubbles.png)
 
-**TagStudio** is a photo & file organization application with an underlying tag-based system that focuses on giving freedom and flexibility to the user. No proprietary programs or formats, no sea of sidecar files, and no complete upheaval of your filesystem structure.
+<span style="font-family: Bai Jamjuree, Roboto, sans-serif; font-size: 1.1rem; letter-spacing: -0.05rem;"><span style="font-weight: 900;">Tag</span><span style="font-weight: 500;"><i>Studio</i></span></span> is a photo & file organization application with an underlying tag-based system that focuses on giving freedom and flexibility to the user. No proprietary programs or formats, no sea of sidecar files, and no complete upheaval of your filesystem structure.
 
 </div>
 
 <figure markdown="span">
-  [:material-download: Download Latest Release](https://github.com/TagStudioDev/TagStudio/releases){ .md-button .md-button--primary }
+  [:material-github: Download Latest Release](https://github.com/TagStudioDev/TagStudio/releases){ .md-button .md-button--primary }
 </figure>
 
 ## :material-star: Core Features

docs/stylesheets/extra.css

@@ -3,11 +3,14 @@
  * SPDX-License-Identifier: GPL-3.0-only
  */
 /* Dark Theme */
+
 [data-md-color-scheme="slate"] {
+    --md-primary-fg-color: rgb(197, 110, 255);
+    --md-accent-fg-color: rgb(92, 222, 255);
     --md-default-bg-color: #060617;
     --md-default-fg-color: #eae1ff;
-    --md-default-fg-color--light: #b898ff;
-    --md-code-fg-color: #eae1ffcc;
+    --md-default-fg-color--light: #c2a5ff;
+    --md-code-fg-color: #d8c7ffcc;
     --md-code-hl-string-color: rgb(92, 255, 228);
     --md-code-hl-keyword-color: rgb(61, 155, 255);
     --md-code-hl-constant-color: rgb(205, 78, 255);
@@ -17,6 +20,8 @@
 
 /* Light Theme */
 [data-md-color-scheme="default"] {
+    --md-primary-fg-color: #7758ff;
+    --md-accent-fg-color: rgb(22, 166, 255);
     --md-default-fg-color--light: #090a26;
 }
 
@@ -73,6 +78,11 @@ td {
     padding: 0.5em 1em 0.5em 1em !important;
 }
 
+hr {
+    border-bottom-width: 2px !important;
+    border-color: #9988ff50 !important;
+}
+
 .md-typeset ul li ul {
     margin-top: 0;
     margin-bottom: 0.1rem;
@@ -119,6 +129,18 @@ h2,
     margin-right: -0.8rem;
 }
 
+.md-code__nav,
+.md-content__button,
+.headerlink {
+    border-radius: 0.2rem;
+    background: none;
+    color: #9988ff50 !important;
+}
+
+.md-code__nav:hover {
+    background-color: #9988ff50;
+}
+
 figcaption {
     margin-top: 0 !important;
 }
@@ -149,6 +171,51 @@ td code {
     padding: 0 !important;
 }
 
+.admonition {
+    border-radius: 0.4rem !important;
+    border-width: 2px !important;
+}
+
+.highlight > .filename {
+    border-width: 2px !important;
+    border: solid;
+    border-color: #9988ff10 !important;
+    border-radius: 0.4rem 0.4rem 0 0 !important;
+}
+
+code {
+    border-radius: 0.4rem !important;
+    border-width: 2px !important;
+    border: solid;
+    border-color: #9988ff10;
+}
+
+:is(span, ul, li, td, p, a) > code {
+    border-width: 1px !important;
+    border-radius: 0.1rem !important;
+}
+
+.filename + pre > code {
+    border-top-width: 0 !important;
+    border-radius: 0 0 0.4rem 0.4rem !important;
+}
+
+.tabbed-labels.tabbed-labels--linked {
+    padding-left: 0.4rem;
+    padding-right: 0.4rem;
+    box-shadow: none !important;
+}
+
+.admonition-title {
+    font-size: 0.7rem;
+    font-family: "Bai Jamjuree", Roboto, sans-serif;
+    font-weight: 600 !important;
+}
+
+.admonition-title span {
+    margin-top: 0.05rem !important;
+}
+
 /* Matches the palette used by mkdocs-material */
 .priority-high {
     color: #f1185a;

docs/stylesheets/home.css

@@ -29,3 +29,30 @@ h2 {
         margin-right: 0;
     }
 }
+
+.grid.cards > ul > li {
+    border-radius: 0.4rem !important;
+    border-width: 2px !important;
+    border-color: #9988ff20 !important;
+}
+
+.md-button--primary {
+    margin: 1rem;
+    padding: 0.3rem 1.2rem !important;
+    border-radius: 0.4rem !important;
+    font-size: 1rem;
+    font-family: "Bai Jamjuree", Roboto, sans-serif;
+    background: linear-gradient(60deg, rgb(205, 78, 255) 0%, rgb(116, 123, 255) 100%);
+    border-style: solid;
+    border-width: 0 0 2px 0 !important;
+    border-color: #ffffff33 !important;
+}
+
+.md-button--primary:hover {
+    background: linear-gradient(60deg, rgb(205, 78, 255) 30%, rgb(116, 123, 255) 100%);
+    border-color: #ffffff55 !important;
+}
+
+.md-button--primary span {
+    margin-top: 0.1rem !important;
+}

mkdocs.yml

@@ -70,16 +70,16 @@ theme:
     # Palette toggle for light mode
     - media: "(prefers-color-scheme: light)"
       scheme: default
-      primary: purple
-      accent: purple
+      primary: custom
+      accent: custom
       toggle:
         icon: material/lightbulb
         name: Switch to Dark Mode
     # Palette toggle for dark mode
     - media: "(prefers-color-scheme: dark)"
       scheme: slate
-      primary: purple
-      accent: purple
+      primary: custom
+      accent: custom
       toggle:
         icon: material/lightbulb-night-outline
         name: Switch to System Preference