Replace tricks with mods (fixes #88)

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).
 

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.

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";
+```

content/tricks/index.md

@@ -1,190 +0,0 @@
-+++
-title = "Tricks"
-[extra]
-toc = true
-+++
-
-Several lesser known Duckquill thingies.
-
-<small>If you have some, please consider sharing them here.</small>
-
-## 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.

i18n/ar.toml

@@ -12,7 +12,7 @@ date_locale = "ar_SA"
 Links = "الروابط"
 Blog = "المدونة"
 Demo = "العرض"
-Tricks = "الحيل"
+Mods = "التعديلات"
 Coffee = "القهوة"
 
 all_tags = "انظر جميع العلامات"

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"

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"
-

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"

i18n/ru.toml

@@ -16,7 +16,7 @@ date_locale = "ru_RU"
 Links = "Ссылки"
 Blog = "Блог"
 Demo = "Демо"
-Tricks = "Трюки"
+Mods = "Моды"
 Coffee = "Кофе"
 
 all_tags = "Показать все теги"

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;
 }

sass/mods/_classic-del.scss

@@ -0,0 +1,7 @@
+del {
+	box-shadow: none;
+	border-radius: 0;
+	background-color: transparent;
+	padding: 0;
+	color: inherit;
+}

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);
+		}
+	}
+}

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;
+}

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;
+	}
+}

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;
+    }
+}

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);
+		}
+	}
+}