Margin and variables stuff
This commit is contained in:
daudix
@ -9,12 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
### Added
|
||||
|
||||
- Add `bg-overlay` CSS variable to make setting page background image easier.
|
||||
- Add `classic-article-list` mod for returning the classic article list style.
|
||||
- Add `config.extra.debug_no_styles` config variable for debugging.
|
||||
- Add `config.extra.nav.auto_hide` config variable for making the navbar auto-hide unless hovered or keyboard-focused (#106).
|
||||
- Add `config.extra.show_backlinks` config variable for showing the backlinks button for linked articles in the article's quick actions.
|
||||
- Add `external` class to https:// links in navbar/footer.
|
||||
- Add `fediverse:creator` meta tag.
|
||||
- Add `shadow-glow` and `text-shadow-glow` CSS variables so that it's easier to use these.
|
||||
- Add `title` class for use on `<strong>`.
|
||||
- Add back support for lazy async images in comments.
|
||||
- Add missing translation strings for author separator and conjunctions.
|
||||
@ -31,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- **[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.
|
||||
- Adjust navbar, main content, and footer margins.
|
||||
- Improve the look of threads in comments.
|
||||
- Keep images slightly rounded on hover.
|
||||
- Make `emoji` class available outside of comments.
|
||||
@ -38,9 +41,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- Make the shortcodes code much cleaner.
|
||||
- Remove top/bottom margin from the first/last element in `<aside>`.
|
||||
- Rename `show_read_time` to `show_reading_time`.
|
||||
- Rename main content ID from `main` to `main-content`.
|
||||
- Replace "Go Back" button with "Go Home" on 404.
|
||||
- Rewrite JavaScript scripts to not rely on being inline, but rather function as separate files, as required by Content Security Policy.
|
||||
- Tighten the default Content Security Policy.
|
||||
- Use `main` for main content instead of `div` with a `container` class.
|
||||
- Use Zola's built-in reading time variable instead of the custom implementation (#102).
|
||||
|
||||
### Fixed
|
||||
@ -52,6 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
### Removed
|
||||
|
||||
- **[BREAKING]** Remove `container` class in favor of styling the `main` element directly.
|
||||
- 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)
|
||||
|
||||
@ -19,6 +19,17 @@ Want to set some nice image as a background? We got you covered:
|
||||
|
||||
|
||||
|
||||
```scss
|
||||
body {
|
||||
background-image: var(--bg-overlay), url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```scss
|
||||
@import "../themes/duckquill/sass/_variables.scss";
|
||||
|
||||
@ -31,17 +42,8 @@ Want to set some nice image as a background? We got you covered:
|
||||
--bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: var(--bg-overlay), url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
```
|
||||
|
||||
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 Article List
|
||||
|
||||
Prefer the less fancy look of the article list used in Duckquill some time ago (to some extent)? It can be done with the `classic-article-list` mod:
|
||||
|
||||
@ -296,7 +296,7 @@
|
||||
|
||||
main {
|
||||
grid-area: post;
|
||||
margin-block-start: 1rem;
|
||||
margin: 1rem 0 0;
|
||||
width: 100%;
|
||||
|
||||
:first-child {
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
.crt {
|
||||
margin: 1rem 0 1rem;
|
||||
box-shadow:
|
||||
var(--edge-highlight),
|
||||
0 0 0 0.0625rem var(--accent-color-alpha),
|
||||
0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha),
|
||||
0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha);
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-image: radial-gradient(
|
||||
color-mix(in srgb, var(--accent-color) 30%, black),
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
#site-footer {
|
||||
margin-block-start: 4rem;
|
||||
padding: 2rem 0;
|
||||
margin-block-end: 2rem;
|
||||
text-align: center;
|
||||
|
||||
nav {
|
||||
@ -70,7 +69,7 @@
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-block-start: 1rem;
|
||||
margin: 1rem auto 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
|
||||
@ -30,15 +30,13 @@ body {
|
||||
|
||||
// Make focused anchor not get covered by nav,
|
||||
// and flash it with accent color when jumping to it
|
||||
:target:not(#main) {
|
||||
:target:not(#main-content) {
|
||||
transition:
|
||||
all var(--transition),
|
||||
scroll-margin-block-start 0s;
|
||||
scroll-margin-block-start: 15vh;
|
||||
color: var(--accent-color);
|
||||
text-shadow:
|
||||
var(--accent-color-alpha) 0 0 0.25rem,
|
||||
var(--accent-color) 0 0 0.75rem;
|
||||
text-shadow: var(--text-shadow-glow);
|
||||
}
|
||||
|
||||
// Custom focus indicator
|
||||
@ -64,8 +62,8 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 4.25rem auto 0;
|
||||
main {
|
||||
margin: 4.25rem auto 4rem;
|
||||
width: min(var(--container-width), 90%);
|
||||
}
|
||||
|
||||
|
||||
@ -58,7 +58,6 @@
|
||||
|
||||
#site-nav {
|
||||
position: sticky;
|
||||
left: 50%;
|
||||
z-index: 999;
|
||||
margin: 1rem auto 0;
|
||||
inset-block-start: 1rem;
|
||||
@ -82,7 +81,7 @@
|
||||
nav {
|
||||
padding: 0.5rem;
|
||||
|
||||
#main-content {
|
||||
& > a {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
@if $theme == "dark" {
|
||||
// COLORS
|
||||
--bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
|
||||
--bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
|
||||
--fg-color: rgb(255 255 255);
|
||||
--fg-contrast: rgb(0 0 0 / 0.8);
|
||||
--fg-muted-1: rgb(255 255 255 / 0.05);
|
||||
@ -34,9 +35,12 @@
|
||||
--yellow-fg: rgb(248 228 92);
|
||||
|
||||
color-scheme: dark;
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
// COLORS
|
||||
--bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
|
||||
--bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
|
||||
--fg-color: rgb(0 0 0 / 0.8);
|
||||
--fg-contrast: rgb(255 255 255);
|
||||
--fg-muted-1: rgb(0 0 0 / 0.05);
|
||||
@ -45,9 +49,7 @@
|
||||
--fg-muted-4: rgb(0 0 0 / 0.5);
|
||||
--fg-muted-5: rgb(0 0 0 / 0.6);
|
||||
--glass-bg: rgb(242 242 242 / 0.7);
|
||||
--accent-color-alpha: rgb(
|
||||
from var(--accent-color) r g b / var(--color-opacity)
|
||||
);
|
||||
--accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
|
||||
--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
|
||||
--blue-fg: rgb(53 132 228);
|
||||
--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
|
||||
@ -139,6 +141,11 @@
|
||||
0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14),
|
||||
0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
|
||||
--shadow-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
|
||||
--shadow-glow: 0 0 0 0.0625rem var(--accent-color-alpha),
|
||||
0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha),
|
||||
0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha);
|
||||
--text-shadow-glow: var(--accent-color-alpha) 0 0 0.25rem,
|
||||
var(--accent-color) 0 0 0.75rem;
|
||||
|
||||
// STATES
|
||||
--hover: scale(1.1);
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
{%- if config.extra.nav.links %}
|
||||
{% include "partials/nav.html" %}
|
||||
{%- endif %}
|
||||
<div id="main" class="container">
|
||||
<main id="main-content">
|
||||
{% block custom %}{% endblock custom %}
|
||||
{% block content %}{% endblock content %}
|
||||
{% include "partials/extra_features.html" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "partials/footer.html" %}
|
||||
{% endblock body %}
|
||||
</body>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
{%- endif %}
|
||||
<header id="site-nav">
|
||||
<nav>
|
||||
<a href="#main" id="main-content" tabindex="0">
|
||||
<a href="#main-content" tabindex="0">
|
||||
{{ macros_translate::translate(key="skip_to_content", default="Skip to Main Content", language_strings=language_strings) }}
|
||||
</a>
|
||||
<ul>
|
||||
|
||||
Reference in New Issue
Block a user