diff --git a/docs/index.md b/docs/index.md index a6243c92..dfa70ad6 100644 --- a/docs/index.md +++ b/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. +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.
- [: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 }
## :material-star: Core Features diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index d2ed979d..636e457f 100644 --- a/docs/stylesheets/extra.css +++ b/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; diff --git a/docs/stylesheets/home.css b/docs/stylesheets/home.css index a32f0a80..94a9428e 100644 --- a/docs/stylesheets/home.css +++ b/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; +} diff --git a/mkdocs.yml b/mkdocs.yml index a56509bd..0082adee 100644 --- a/mkdocs.yml +++ b/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