Remove reduant class

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

content/demo/index.md

@@ -638,15 +638,27 @@ You know, <span class="spoiler solid">Duckquill is a pretty dumb name.</span> I
 ### Buttons Dialog
 
 ```html.j2
-<div class="dialog-buttons">
+<div class="buttons">
-  <a class="inline-button" href="#top">Go to Top</a>
+  <a href="#top">Go to Top</a>
-  <a class="inline-button colored external" href="https://example.org">Example</a>
+  <a class="colored external" href="https://example.org">Example</a>
 </div>
 ```
 
-<div class="dialog-buttons">
+<div class="buttons">
-  <a class="inline-button" href="#top">Go to Top</a>
+  <a href="#top">Go to Top</a>
-  <a class="inline-button colored external" href="https://example.org">Example</a>
+  <a class="colored external" href="https://example.org">Example</a>
+</div>
+
+With `centered` and `big` classes:
+
+```html.j2
+<div class="buttons centered">
+  <button class="big colored">Do Something…</button>
+</div>
+```
+
+<div class="buttons centered">
+  <button class="big colored">Do Something…</button>
 </div>
 
 [^1]: Footnote

content/demo/page.md

@@ -6,6 +6,6 @@ title = "Cake Party"
 
 Sadly, the cake is a _lie_
 
-<div class="dialog-buttons">
+<div class="buttons">
-  <a class="inline-button" href="../">Go Crying</a>
+  <a href="../">Go Crying</a>
 </div>

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 {
+	&.centered {
-	text-decoration: none;
+		justify-content: space-around;
-}
+	}
 
-button.inline-button {
+	a {
-	appearance: none;
+		text-decoration: none;
-	cursor: pointer;
+	}
-	border: none;
 
-	&:disabled {
+	button {
-		cursor: not-allowed;
+		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);
+			background-color: var(--fg-muted-2);
-			color: var(--fg-muted-5);
+			color: var(--fg-color);
 		}
 
 		&:active {
-			transform: none;
+			transform: var(--active);
 		}
-	}
-}
 
-a.inline-button,
+		&.colored {
-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);
 			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;
 		}
 	}
 }

sass/_comments.scss

@@ -20,7 +20,7 @@
 		}
 	}
 
-	.dialog-buttons {
+	.buttons {
 		justify-content: start;
 		gap: 0.25rem;
 		margin-block-start: 2rem;

templates/404.html

@@ -11,10 +11,10 @@
 
 <p>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 %}</p>
 
-<div class="dialog-buttons">
+<div class="buttons">
-	<a class="inline-button" href="{{ get_url(path='/', lang=lang) }}">Go Home</a>
+	<a href="{{ get_url(path='/', lang=lang) }}">Go Home</a>
 	{%- if config.extra.issues_url %}
-		<a class="inline-button colored external" href="{{ config.extra.issues_url }}" rel="{{ rel_attributes }}">File an Issue</a>
+		<a class="colored external" href="{{ config.extra.issues_url }}" rel="{{ rel_attributes }}">File an Issue</a>
 	{%- endif %}
 </div>
 {% endblock content %}

templates/partials/comments.html

@@ -47,11 +47,11 @@
 	{%- endif -%}
 	<h2>{{ macros_translate::translate(key="comments", default="Comments", language_strings=language_strings) }}</h2>
 	<p>{{ 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) }}</p>
-	<div class="dialog-buttons">
+	<div class="buttons">
-		<button id="load-comments" class="inline-button">
+		<button id="load-comments">
 			{{- macros_translate::translate(key="load_comments", default="Load Comments", language_strings=language_strings) -}}
 		</button>
-		<a class="inline-button colored external" href="https://{{ host }}/@{{ user }}/{{ id }}" rel="{{ rel_attributes }}">
+		<a class="colored external" href="https://{{ host }}/@{{ user }}/{{ id }}" rel="{{ rel_attributes }}">
 			{{- macros_translate::translate(key="open_post", default="Open Post", language_strings=language_strings) -}}
 		</a>
 	</div>