hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace tricks with mods (fixes #88)

Browse Source
This commit is contained in:
daudix
2024-09-25 20:51:11 +03:00
parent 75f993017e
commit c00e2da03e
20 changed files with 210 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

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

4
config.toml
View File

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

0
content/tricks/index.ar.md → content/mods/index.ar.md
View File

0
content/tricks/index.es.md → content/mods/index.es.md
View File

100
content/mods/index.md Normal file
View File

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

0
content/tricks/index.ms.md → content/mods/index.ms.md
View File

0
content/tricks/index.ru.md → content/mods/index.ru.md
View File

190
content/tricks/index.md
View File

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

2
i18n/ar.toml
View File

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

2
i18n/en.toml
View File

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

3
i18n/es.toml
View File

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

2
i18n/ms.toml
View File

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

2
i18n/ru.toml
View File

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

2
sass/_typography.scss
View File

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

7
sass/mods/_classic-del.scss Normal file
View File

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

39
sass/mods/_classic-nav.scss Normal file
View File

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

13
sass/mods/_modern-headings.scss Normal file
View File

@ -0,0 +1,13 @@
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
font-family: var(--font-system-ui)
}
h1 {
font-weight: 900;
}

12
sass/mods/_modern-hr.scss Normal file
View File

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

7
sass/mods/_no-edge-highlight.scss Normal file
View File

@ -0,0 +1,7 @@
@import "../_variables.scss";
@include theme-variables using ($theme) {
@if $theme == "light" {
--edge-highlight: 0 0 0 transparent;
}
}

23
sass/mods/_sticked-nav.scss Normal file
View File

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