From c00e2da03e53bdbe6f6cdf56a7b749b1de9c0c4d Mon Sep 17 00:00:00 2001 From: daudix Date: Wed, 25 Sep 2024 20:51:11 +0300 Subject: [PATCH] Replace tricks with mods (fixes #88) --- CHANGELOG.md | 1 + config.toml | 4 +- content/{tricks => mods}/index.ar.md | 0 content/{tricks => mods}/index.es.md | 0 content/mods/index.md | 100 ++++++++++++++ content/{tricks => mods}/index.ms.md | 0 content/{tricks => mods}/index.ru.md | 0 content/tricks/index.md | 190 --------------------------- i18n/ar.toml | 2 +- i18n/en.toml | 2 +- i18n/es.toml | 3 +- i18n/ms.toml | 2 +- i18n/ru.toml | 2 +- sass/_typography.scss | 2 +- sass/mods/_classic-del.scss | 7 + sass/mods/_classic-nav.scss | 39 ++++++ sass/mods/_modern-headings.scss | 13 ++ sass/mods/_modern-hr.scss | 12 ++ sass/mods/_no-edge-highlight.scss | 7 + sass/mods/_sticked-nav.scss | 23 ++++ 20 files changed, 210 insertions(+), 199 deletions(-) rename content/{tricks => mods}/index.ar.md (100%) rename content/{tricks => mods}/index.es.md (100%) create mode 100644 content/mods/index.md rename content/{tricks => mods}/index.ms.md (100%) rename content/{tricks => mods}/index.ru.md (100%) delete mode 100644 content/tricks/index.md create mode 100644 sass/mods/_classic-del.scss create mode 100644 sass/mods/_classic-nav.scss create mode 100644 sass/mods/_modern-headings.scss create mode 100644 sass/mods/_modern-hr.scss create mode 100644 sass/mods/_no-edge-highlight.scss create mode 100644 sass/mods/_sticked-nav.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 623da6b..89e8e14 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Add `closable` class for making `details` closable when other `details` is open/outside area is clicked. +- Add Duckquill "mods" as a replacement to "tricks" (#88). - Add post tags back to `article.html`. - Add Spanish translation (#87). diff --git a/config.toml b/config.toml index a6efd5f..1d4ee95 100644 --- a/config.toml +++ b/config.toml @@ -146,7 +146,7 @@ links = [ { name = "Links", menu = [ { url = "@/blog/_index.md", name = "Blog" }, { url = "@/demo/index.md", name = "Demo" }, - { url = "@/tricks/index.md", name = "Tricks" }, + { url = "@/mods/index.md", name = "Mods" }, ] }, { url = "https://daudix.one/coffee/", name = "Coffee" }, ] @@ -157,7 +157,7 @@ links = [ links = [ { url = "@/blog/_index.md", name = "Blog" }, { url = "@/demo/index.md", name = "Demo" }, - { url = "@/tricks/index.md", name = "Tricks" }, + { url = "@/mods/index.md", name = "Mods" }, { url = "https://daudix.one/coffee/", name = "Coffee" }, ] # Social links in the footer. diff --git a/content/tricks/index.ar.md b/content/mods/index.ar.md similarity index 100% rename from content/tricks/index.ar.md rename to content/mods/index.ar.md diff --git a/content/tricks/index.es.md b/content/mods/index.es.md similarity index 100% rename from content/tricks/index.es.md rename to content/mods/index.es.md diff --git a/content/mods/index.md b/content/mods/index.md new file mode 100644 index 0000000..e91b37f --- /dev/null +++ b/content/mods/index.md @@ -0,0 +1,100 @@ ++++ +title = "Mods" +[extra] +toc = true ++++ + +Mods enhance/change some Duckquill visuals. They are updated alongside Duckquill to ensure that you don't need to manually update them every release. + +To enable these mods, you need to paste provided Sass to [appropriate file](@/_index.md#custom-styles), e.g `sass/mods.scss` under your website, then enable it in `config.toml`: + +```toml +[extra] +styles = ["mods.css"] +``` + +## Background Image + +Want to set some nice image as a background? We got you covered: + +![background image](https://files.catbox.moe/no8vfc.png) + +```scss +@import "../themes/duckquill/sass/_variables.scss"; + +@include theme-variables using ($theme) { + @if $theme == "dark" { + --bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9)); + } + + @else { + --bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8)); + } +} + +body { + background: var(--bg-overlay), center / cover no-repeat fixed url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843"); +} +``` + +Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-overlay` based on your needs. + +## Classic Navbar + +You can make navbar have more traditional look by using the `classic-nav` mod: + +![classic navabr](https://files.catbox.moe/ga4dmv.png) + +```scss +@use "../themes/duckquill/sass/mods/classic-nav"; +``` + +Or you can make it sticked to top but not full-width with the `sticked-nav` mod: + +{% alert(note=true) %} +Not compatible with the `classic-nav` mod. +{% end %} + +![sticked navabr](https://files.catbox.moe/bfu3p7.png) + +```scss +@use "../themes/duckquill/sass/mods/sticked-nav"; +``` + +## Classic Strikethrough + +The default strikethrough style is too much? It can be fixed using the `classic-del` mod: + +![plain strikethrough](https://files.catbox.moe/y2tbwm.png) + +```scss +@use "../themes/duckquill/sass/mods/classic-del"; +``` + +## Modern Headings + +Default headings might not fit your taste, that's understandable. They can be ~~made boring~~ fixed with the `modern-headings` mod: + +![boring headings](https://files.catbox.moe/6ok740.png) + +```scss +@use "../themes/duckquill/sass/mods/modern-headings"; +``` + +## Modern Horizontal Rule + +Don't like that fancy horizontal rule? Make it more modern with the `modern-hr` mod: + +![modern horizontal rule](https://files.catbox.moe/qyqzoy.png) + +```scss +@use "../themes/duckquill/sass/mods/modern-hr"; +``` + +## No Edge Highlight + +Hate the skeuomorphic edge highlight on all semi-transparent elements? Let's get rid of it using the `no-edge-highlight` mod: + +```scss +@use "../themes/duckquill/sass/mods/no-edge-highlight"; +``` diff --git a/content/tricks/index.ms.md b/content/mods/index.ms.md similarity index 100% rename from content/tricks/index.ms.md rename to content/mods/index.ms.md diff --git a/content/tricks/index.ru.md b/content/mods/index.ru.md similarity index 100% rename from content/tricks/index.ru.md rename to content/mods/index.ru.md diff --git a/content/tricks/index.md b/content/tricks/index.md deleted file mode 100644 index 7b7a0c6..0000000 --- a/content/tricks/index.md +++ /dev/null @@ -1,190 +0,0 @@ -+++ -title = "Tricks" -[extra] -toc = true -+++ - -Several lesser known Duckquill thingies. - -If you have some, please consider sharing them here. - -## Styling - -Duckquill is pretty easy to restyle with just a few lines of SCSS in the [appropriate location](@/_index.md#custom-styles). Let's see some examples. - -### Navbar - -You can make navbar have more traditional look: - -![classic navabr](https://files.catbox.moe/ga4dmv.png) - -```scss -#site-nav { - margin-block-start: 0; - inset-block-start: 0; - box-shadow: var(--shadow-glass); - border-radius: 0; - width: 100%; - max-width: 100%; - - nav, - #search-container { - margin: 0 auto; - width: min(var(--container-width), 90%); - } - - nav ul li { - a, - summary, - &#search button, - &#language-switcher details summary, - &#theme-switcher details summary { - border-radius: var(--rounded-corner); - } - - } - - #home { - margin-inline-end: auto; - } - - .divider { - display: none; - } - - #search-container { - #search-bar { - border-radius: var(--rounded-corner); - } - } -} -``` - -Or you can make it sticked to top but not full-width: - -![sticked navabr](https://files.catbox.moe/bfu3p7.png) - -```scss -#site-nav { - margin-block-start: 0; - inset-block-start: 0; - box-shadow: var(--shadow-glass); - border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem); - - nav ul li { - a, - summary, - &#search button, - &#language-switcher details summary, - &#theme-switcher details summary { - border-radius: var(--rounded-corner); - } - - } - - #search-container { - #search-bar { - border-radius: var(--rounded-corner); - } - } -} -``` - -### Headings - -Default headings might not fit your taste, that's understandable. Good thing is that we can ~~make them boring~~ fix them: - -![boring headings](https://files.catbox.moe/6ok740.png) - -```scss -h1, -h2, -h3, -h4, -h5, -h6 { - font-weight: bold; - font-family: var(--font-system-ui) -} - -h1 { - font-weight: 900; -} -``` - -### Strikethrough - -The default strikethrough style is too much? Let's sort this out: - -![plain strikethrough](https://files.catbox.moe/y2tbwm.png) - -```scss -del { - box-shadow: none; - border-radius: 0; - background-color: transparent; - padding: 0; - color: inherit; -} -``` - -### Edge Highlights - -Hate the skeuomorphic edge highlight on all semi-transparent elements? Let's get rid of them: - -```scss -@import "../themes/duckquill/sass/_variables.scss"; - -@include theme-variables using ($theme) { - @if $theme == "light" { - --edge-highlight: 0 0 0 transparent; - } -} -``` - -### Horizontal Rules - -Don't like that fancy horizontal rule? Let's make it more modern: - -![modern horizontal rule](https://files.catbox.moe/qyqzoy.png) - -```scss -hr { - box-shadow: var(--edge-highlight); - border: none; - border-radius: 999px; - background-color: var(--fg-muted-2); - width: 50%; - height: 0.25rem; - - &::after { - display: none; - } -} -``` - -### Background Image - -Want to set some nice image as a background? We got you covered: - -![background image](https://files.catbox.moe/no8vfc.png) - -```scss -@import "../themes/duckquill/sass/_variables.scss"; - -@include theme-variables using ($theme) { - @if $theme == "dark" { - --bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9)); - } - - @else { - --bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8)); - } -} - -body { - background: var(--bg-overlay), center / cover no-repeat fixed url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843"); -} -``` - -Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-overlay` based on your needs. diff --git a/i18n/ar.toml b/i18n/ar.toml index c338986..9333a38 100644 --- a/i18n/ar.toml +++ b/i18n/ar.toml @@ -12,7 +12,7 @@ date_locale = "ar_SA" Links = "الروابط" Blog = "المدونة" Demo = "العرض" -Tricks = "الحيل" +Mods = "التعديلات" Coffee = "القهوة" all_tags = "انظر جميع العلامات" diff --git a/i18n/en.toml b/i18n/en.toml index 8055364..555bdcb 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -12,7 +12,7 @@ date_locale = "en_US" Links = "Links" Blog = "Blog" Demo = "Demo" -Tricks = "Tricks" +Mods = "Mods" Coffee = "Coffee" all_tags = "See all tags" diff --git a/i18n/es.toml b/i18n/es.toml index f6a3527..e0ae25d 100644 --- a/i18n/es.toml +++ b/i18n/es.toml @@ -12,7 +12,7 @@ date_locale = "es_ES" Links = "Enlaces" Blog = "Blog" Demo = "Demo" -Tricks = "Trucos" +Mods = "Mods" Coffee = "Café" all_tags = "Ver todas las etiquetas" @@ -79,4 +79,3 @@ updated = "Actualizado el" view_comment = "Ver comentario en" view_profile = "Ver perfil en" warning = "Advertencia" - diff --git a/i18n/ms.toml b/i18n/ms.toml index fbd5498..dda5f3c 100644 --- a/i18n/ms.toml +++ b/i18n/ms.toml @@ -12,7 +12,7 @@ date_locale = "ms_MY" Links = "Pautan" Blog = "Blog" Demo = "Demo" -Tricks = "Petua" +Mods = "Mod" Coffee = "Kopi" all_tags = "Lihat semua tag" diff --git a/i18n/ru.toml b/i18n/ru.toml index eb58ff4..5d555d6 100644 --- a/i18n/ru.toml +++ b/i18n/ru.toml @@ -16,7 +16,7 @@ date_locale = "ru_RU" Links = "Ссылки" Blog = "Блог" Demo = "Демо" -Tricks = "Трюки" +Mods = "Моды" Coffee = "Кофе" all_tags = "Показать все теги" diff --git a/sass/_typography.scss b/sass/_typography.scss index d13df83..3f735ef 100644 --- a/sass/_typography.scss +++ b/sass/_typography.scss @@ -8,7 +8,7 @@ h6 { text-wrap: balance; margin: 2rem 0 1rem; font-weight: lighter; - line-height: 1; + line-height: normal; font-family: var(--font-antique); letter-spacing: -0.05em; } diff --git a/sass/mods/_classic-del.scss b/sass/mods/_classic-del.scss new file mode 100644 index 0000000..f664604 --- /dev/null +++ b/sass/mods/_classic-del.scss @@ -0,0 +1,7 @@ +del { + box-shadow: none; + border-radius: 0; + background-color: transparent; + padding: 0; + color: inherit; +} diff --git a/sass/mods/_classic-nav.scss b/sass/mods/_classic-nav.scss new file mode 100644 index 0000000..4a97e7b --- /dev/null +++ b/sass/mods/_classic-nav.scss @@ -0,0 +1,39 @@ +#site-nav { + margin-block-start: 0; + inset-block-start: 0; + box-shadow: var(--shadow-glass); + border-radius: 0; + width: 100%; + max-width: 100%; + + nav, + #search-container { + margin: 0 auto; + width: min(var(--container-width), 90%); + } + + nav ul li { + a, + summary, + &#search button, + &#language-switcher details summary, + &#theme-switcher details summary { + border-radius: var(--rounded-corner); + } + + } + + #home { + margin-inline-end: auto; + } + + .divider { + display: none; + } + + #search-container { + #search-bar { + border-radius: var(--rounded-corner); + } + } +} diff --git a/sass/mods/_modern-headings.scss b/sass/mods/_modern-headings.scss new file mode 100644 index 0000000..80b0ecd --- /dev/null +++ b/sass/mods/_modern-headings.scss @@ -0,0 +1,13 @@ +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; + font-family: var(--font-system-ui) +} + +h1 { + font-weight: 900; +} diff --git a/sass/mods/_modern-hr.scss b/sass/mods/_modern-hr.scss new file mode 100644 index 0000000..152757f --- /dev/null +++ b/sass/mods/_modern-hr.scss @@ -0,0 +1,12 @@ +hr { + box-shadow: var(--edge-highlight); + border: none; + border-radius: 999px; + background-color: var(--fg-muted-2); + width: 50%; + height: 0.25rem; + + &::after { + display: none; + } +} diff --git a/sass/mods/_no-edge-highlight.scss b/sass/mods/_no-edge-highlight.scss new file mode 100644 index 0000000..f48f867 --- /dev/null +++ b/sass/mods/_no-edge-highlight.scss @@ -0,0 +1,7 @@ +@import "../_variables.scss"; + +@include theme-variables using ($theme) { + @if $theme == "light" { + --edge-highlight: 0 0 0 transparent; + } +} diff --git a/sass/mods/_sticked-nav.scss b/sass/mods/_sticked-nav.scss new file mode 100644 index 0000000..3dbf454 --- /dev/null +++ b/sass/mods/_sticked-nav.scss @@ -0,0 +1,23 @@ +#site-nav { + margin-block-start: 0; + inset-block-start: 0; + box-shadow: var(--shadow-glass); + border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem); + + nav ul li { + a, + summary, + &#search button, + &#language-switcher details summary, + &#theme-switcher details summary { + border-radius: var(--rounded-corner); + } + + } + + #search-container { + #search-bar { + border-radius: var(--rounded-corner); + } + } +}