Replace tricks with mods (fixes #88)

content/mods/index.ar.md

@@ -0,0 +1 @@
+index.md

content/mods/index.es.md

@@ -0,0 +1 @@
+index.md

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/mods/index.ms.md

@@ -0,0 +1 @@
+index.md

content/mods/index.ru.md

@@ -0,0 +1 @@
+index.md