malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Apply more container query units

Browse Source
This commit is contained in:
Tetrakern 2024-01-22 10:36:09 +01:00
parent 992f188bb5
commit 2bbeeac1a5
7 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
INSTALLATION.md
View File

@ -934,14 +934,16 @@ If you want to have a grid on the list page templates as well, for example Stori
```css
/* Targeting the unique IDs of the lists is safe. */
#list-of-stories, #list-of-chapters {
grid-template-columns: repeat(auto-fill, minmax(308px, 1fr));
gap: max(2cqw, 2rem) max(2cqw, 2rem); /* Larger by default than shortcode grids! */
--card-list-row-gap: max(4cqw, 2rem); /* Larger by default than shortcode grids! */
--card-list-col-gap: max(4cqw, 2rem); /* Larger by default than shortcode grids! */
--card-list-template-columns: repeat(auto-fill, minmax(308px, 1fr));
}
/* Fallback for older browsers that do not support container queries. */
@supports (width: 1cqw) {
#list-of-stories, #list-of-chapters {
gap: 2rem 2rem;
--card-list-row-gap: 2rem;
--card-list-col-gap: 2rem;
}
}
```

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

2
src/scss/_card.scss
View File

@ -190,7 +190,7 @@
&__header {
display: flex;
align-items: center;
gap: .5rem;
gap: .5em;
font-size: var(--card-title-font-size, clamp(15px, 3.065cqw, 18px));
margin-bottom: 0.75em; // Based on font-size
}

9
src/scss/_showcase.scss
View File

@ -1,4 +1,6 @@
.showcase {
container-type: inline-size;
&:not(:first-child) {
margin-top: 2rem;
}
@ -24,7 +26,12 @@
&__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(#{get_clamp(160, 175, 375, 480)}, 1fr));
gap: 1rem;
gap: var(--showcase-row-gap, max(3cqw, 1.5rem)) var(--showcase-row-col, max(3cqw, 1.5rem));
// Fallback
@supports not (width: 1cqw) {
gap: var(--showcase-row-gap, 1.5rem) var(--showcase-row-col, 1.5rem);
}
}
&__list-item {

9
src/scss/common/_base.scss
View File

@ -353,8 +353,13 @@ button[type=submit]:where(:not(._inline)) {
.card-list {
display: grid;
grid-template-columns: 100%;
gap: 2rem 0;
grid-template-columns: var(--card-list-template-columns, 100%);
gap: var(--card-list-row-gap, max(4cqw, 2rem)) var(--card-list-row-col, 0);
// Fallback
@supports not (width: 1cqw) {
gap: var(--card-list-row-gap, 2rem) var(--card-list-row-col, 0);
}
> .pagination:is(li) {
padding-top: 0;

2
src/scss/common/_utility.scss
View File

@ -58,7 +58,7 @@ body:not(.is-editor):not(.is-admin) {
grid-template-columns: repeat(auto-fill, minmax(var(--grid-columns-min, 308px), 1fr));
gap: var(--grid-columns-row-gap, max(3cqw, 1.5rem)) var(--grid-columns-row-col, max(3cqw, 1.5rem));
// Fallbacks
// Fallback
@supports not (width: 1cqw) {
gap: var(--grid-columns-row-gap, 1.5rem) var(--grid-columns-row-col, 1.5rem);
}