Add "tricks" page (partially fixes #29)

config.toml

@@ -97,7 +97,9 @@ show_feed = true
 links = [
   { url = "@/blog/_index.md", name = "Blog" },
   { url = "@/demo/index.md", name = "Demo" },
+  { url = "@/tricks/index.md", name = "Tricks" },
   { url = "https://codeberg.org/daudix/duckquill", name = "Repo" },
+
 ]
 
 [extra.footer]
@@ -106,6 +108,7 @@ links = [
 links = [
   { url = "@/blog/_index.md", name = "Blog" },
   { url = "@/demo/index.md", name = "Demo" },
+  { url = "@/tricks/index.md", name = "Tricks" },
   { url = "https://codeberg.org/daudix/duckquill", name = "Repo" },
 ]
 # Social links in the footer.

content/_index.md

@@ -138,10 +138,6 @@ primary_color_dark_alpha = "rgba(255, 120, 0, 0.2)"
 
 Files named `favicon.png` and `apple-touch-icon.png` are used as favicon and apple touch icon respectively. For animated favicon you can use APNG with `png` file extension.
 
-## Test Pages
-
-- [Demo page](@/demo/index.md)
-
 ## In the Wild
 
 <details>

content/tricks/index.ar.md

@@ -0,0 +1,5 @@
++++
+title = "Tricks (العربية)"
++++
+
+# Tricks (العربية)

content/tricks/index.md

@@ -0,0 +1,123 @@
++++
+title = "Tricks"
++++
+
+# Tricks
+
+Several lesser known Duckquill thingies.
+
+## Styling
+
+Duckquill is pretty easy to restyle with just a few lines of SCSS in the [appropriate location](@/_index.md#custom-stylesheets). Let's see some examples.
+
+### Navbar
+
+You can make navbar have more classic look:
+
+![clasic navabr](https://files.catbox.moe/udj332.png)
+
+```scss
+#site-nav {
+    top: 0;
+    margin-top: 0;
+    box-shadow: 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
+    border-radius: 0;
+    width: 100%;
+    max-width: 100%;
+
+    nav,
+    #search-container {
+        margin: 0 auto;
+        width: min(var(--container-width), 90%);
+    }
+
+    nav ul li a,
+    nav ul li#search button,
+    nav ul li#language-switcher details summary {
+        border-radius: var(--rounded-corner);
+    }
+    #search-container {
+        #search-bar {
+            border-radius: var(--rounded-corner);
+        }
+    }
+}
+```
+
+Or you can make it sticked to top:
+
+![sticked navabr](https://files.catbox.moe/wkweqh.png)
+
+```scss
+#site-nav {
+    top: 0;
+    margin-top: 0;
+    box-shadow: 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
+    border-radius: 0 0 1.625rem 1.625rem;
+}
+```
+
+### Headings
+
+Default headings might not fit your taste, that's understandable. Good thing that we can ~~make them boring~~ fix them:
+
+![boring headings](https://files.catbox.moe/gwa9cc.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 for you? Let's sort this out:
+
+![plain strikethrough](https://files.catbox.moe/y2tbwm.png)
+
+```scss
+del {
+    box-shadow: none;
+    border-radius: unset;
+    background-color: unset;
+    padding: 0;
+    color: inherit;
+}
+```
+
+### Edge Highlights
+
+Hate the skeuomorphic edge highlight on all semi-transparent elements? It's easy to get rid of them:
+
+```scss
+:root {
+    --edge-highlight: 0 0 0 transparent;
+}
+```
+
+### Horizontal Rule
+
+Don't like that fancy horizontal rule? Let's make it more modern:
+
+![modern horizontal rule](https://files.catbox.moe/qyqzoy.png)
+
+```scss
+hr {
+    border-top: 0.25rem solid var(--fg-muted-2);
+    width: 50%;
+
+    &::after {
+        display: none;
+    }
+}
+```

content/tricks/index.ru.md

@@ -0,0 +1,5 @@
++++
+title = "Tricks (Русский)"
++++
+
+# Tricks (Русский)

i18n/ar.toml

@@ -11,6 +11,7 @@ date_locale = "ar_SA"
 # Should match the names in config.extra.nav.links and config.extra.footer.links.
 Blog = "المدونة"
 Demo = "العرض"
+Tricks = "الحيل"
 Repo = "المستودع"
 
 all_tags = "انظر جميع العلامات"

i18n/en.toml

@@ -11,6 +11,7 @@ date_locale = "en_US"
 # Should match the names in config.extra.nav.links and config.extra.footer.links.
 Blog = "Blog"
 Demo = "Demo"
+Tricks = "Tricks"
 Repo = "Repo"
 
 all_tags = "See all tags"

i18n/ru.toml

@@ -15,6 +15,7 @@ date_locale = "ru_RU"
 # Should match the names in config.extra.nav.links and config.extra.footer.links.
 Blog = "Блог"
 Demo = "Демо"
+Tricks = "Трюки"
 Repo = "Репо"
 
 all_tags = "Показать все теги"

sass/_nav.scss

@@ -290,7 +290,7 @@
 			gap: 0.5rem;
 			backdrop-filter: var(--blur);
 			box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
-			border-radius: 1.125rem;
+			border-radius: calc(var(--rounded-corner) + 0.5rem);
 			background-color: var(--nav-bg);
 			padding: 0.5rem;
 			width: 100%;