From 77b16597b04d2c8be1032a7d3acbc5b098319cd5 Mon Sep 17 00:00:00 2001 From: daudix Date: Sun, 27 Oct 2024 03:19:57 +0300 Subject: [PATCH] Remove reduant class --- CHANGELOG.md | 5 ++ content/demo/index.md | 24 ++++++-- content/demo/page.md | 4 +- sass/_buttons.scss | 96 +++++++++++++++++--------------- sass/_comments.scss | 2 +- templates/404.html | 6 +- templates/partials/comments.html | 6 +- 7 files changed, 84 insertions(+), 59 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4822c24..937b696 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- **[BREAKING]** Rename `dialog-buttons` class to simply `buttons`. - **[BREAKING]** Rename `nav-bg` CSS variable to `glass-bg`. - **[BREAKING]** Rename the visually hidden `hidden` class to `visually-hidden`. `hidden` is now used to completely hide the elements, including screen readers. - Add default width/height to the `icon` class. @@ -47,6 +48,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix hover state of the "Load Comments" button. - Fix navbar mods having broken border radius. +### Removed + +- Remove `inline-button` class and instead apply button styles by default. + ## [5.4.0](https://codeberg.org/daudix/duckquill/compare/v5.3.2...v5.4.0) ### Added diff --git a/content/demo/index.md b/content/demo/index.md index 0fb3f74..56fb390 100644 --- a/content/demo/index.md +++ b/content/demo/index.md @@ -638,15 +638,27 @@ You know, Duckquill is a pretty dumb name. I ### Buttons Dialog ```html.j2 -
- Go to Top - Example +
+ Go to Top + Example
``` -
- Go to Top - Example +
+ Go to Top + Example +
+ +With `centered` and `big` classes: + +```html.j2 +
+ +
+``` + +
+
[^1]: Footnote diff --git a/content/demo/page.md b/content/demo/page.md index 17c53c0..7af1e0c 100644 --- a/content/demo/page.md +++ b/content/demo/page.md @@ -6,6 +6,6 @@ title = "Cake Party" Sadly, the cake is a _lie_ -
- Go Crying +
+ Go Crying
diff --git a/sass/_buttons.scss b/sass/_buttons.scss index 7a1cf83..9ce1fc4 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -1,62 +1,70 @@ -.dialog-buttons { +.buttons { display: flex; flex-direction: row; justify-content: space-between; margin-block-start: 4rem; -} -a.inline-button { - text-decoration: none; -} + &.centered { + justify-content: space-around; + } -button.inline-button { - appearance: none; - cursor: pointer; - border: none; + a { + text-decoration: none; + } - &:disabled { - cursor: not-allowed; + button { + appearance: none; + cursor: pointer; + border: none; + + &:disabled { + cursor: not-allowed; + + &:hover { + background-color: var(--fg-muted-1); + color: var(--fg-muted-5); + } + + &:active { + transform: none; + } + } + } + + a, + button { + transition: var(--transition); + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + background-color: var(--fg-muted-1); + padding: 0.75rem 1rem; + color: var(--fg-muted-5); + font-weight: bold; + font-size: var(--font-size-small); + line-height: 1; &:hover { - background-color: var(--fg-muted-1); - color: var(--fg-muted-5); + background-color: var(--fg-muted-2); + color: var(--fg-color); } &:active { - transform: none; + transform: var(--active); } - } -} -a.inline-button, -button.inline-button { - transition: var(--transition); - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner); - background-color: var(--fg-muted-1); - padding: 0.75rem 1rem; - color: var(--fg-muted-5); - font-weight: bold; - font-size: var(--font-size-small); - line-height: 1; - - &:hover { - background-color: var(--fg-muted-2); - color: var(--fg-color); - } - - &:active { - transform: var(--active); - } - - &.colored { - box-shadow: none; - background-color: transparent; - color: var(--accent-color); - - &:hover { - box-shadow: var(--edge-highlight); + &.colored { background-color: var(--accent-color-alpha); + color: var(--accent-color); + + &:hover { + background-color: var(--accent-color); + color: var(--contrast-color); + } + } + + &.big { + border-radius: 999px; + padding: 1rem 1.5rem; } } } diff --git a/sass/_comments.scss b/sass/_comments.scss index 108e36a..4fe1029 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -20,7 +20,7 @@ } } - .dialog-buttons { + .buttons { justify-content: start; gap: 0.25rem; margin-block-start: 2rem; diff --git a/templates/404.html b/templates/404.html index 4c2f24f..822c669 100644 --- a/templates/404.html +++ b/templates/404.html @@ -11,10 +11,10 @@

The requested page could not be found.{% if config.extra.issues_url %} If you feel this is not normal, then you can create an issue on the issue tracker.{% endif %}

-
- Go Home +
+ Go Home {%- if config.extra.issues_url %} - File an Issue + File an Issue {%- endif %}
{% endblock content %} diff --git a/templates/partials/comments.html b/templates/partials/comments.html index 46db72d..8bda0e0 100644 --- a/templates/partials/comments.html +++ b/templates/partials/comments.html @@ -47,11 +47,11 @@ {%- endif -%}

{{ macros_translate::translate(key="comments", default="Comments", language_strings=language_strings) }}

{{ macros_translate::translate(key="comments_description", default="You can comment on this blog post by publicly replying to this post using a Mastodon or other ActivityPub/Fediverse account. Known non-private replies are displayed below.", language_strings=language_strings) }}

-
- - + {{- macros_translate::translate(key="open_post", default="Open Post", language_strings=language_strings) -}}