texts : sort and style
All checks were successful
Deploy / Deploy to Production (push) Successful in 6s

This commit is contained in:
isUnknown 2026-03-28 16:53:17 +01:00
parent 680871d6e2
commit 80efbf3d5f
6 changed files with 148 additions and 112 deletions

View file

@ -1,85 +1,88 @@
article #main-content { [data-template="linear"],
scroll-margin-block-start: calc(var(--unit--vertical) * 6); [data-template="grid"] {
padding-bottom: calc(var(--unit--vertical) * 2); article #main-content {
margin-top: calc(2 * var(--unit--vertical)); scroll-margin-block-start: calc(var(--unit--vertical) * 6);
} padding-bottom: calc(var(--unit--vertical) * 2);
margin-top: calc(2 * var(--unit--vertical));
}
#main-content .texts { #main-content .texts {
margin-top: calc(2 * var(--unit--vertical)); margin-top: calc(2 * var(--unit--vertical));
} }
#main-content .see-more { #main-content .see-more {
margin-top: calc(var(--unit--vertical) * 0.5); margin-top: calc(var(--unit--vertical) * 0.5);
} }
[data-template="year"] article > h1 { [data-template="year"] article > h1 {
margin-bottom: 0; margin-bottom: 0;
} }
article #main-content #chapo::after { article #main-content #chapo::after {
content: ""; content: "";
display: block; display: block;
margin-top: calc(2 * var(--unit--vertical)); margin-top: calc(2 * var(--unit--vertical));
margin-bottom: calc(4 * var(--unit--vertical)); margin-bottom: calc(4 * var(--unit--vertical));
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: var(--color-background); background-color: var(--color-background);
} }
article #main-content li:not(.text) { article #main-content li:not(.text) {
list-style-type: inherit; list-style-type: inherit;
} }
article h3,
article h4 {
scroll-margin-top: calc(var(--unit--vertical) * 1);
margin-bottom: calc(1 * var(--unit--vertical));
}
article h3 {
margin-top: calc(3 * var(--unit--vertical));
}
article h4 {
margin-top: calc(2 * var(--unit--vertical));
}
article li,
article ol {
margin-left: var(--unit--horizontal);
}
article figure {
margin: 4rem 0;
}
article figure img {
max-width: 100%;
}
// Quotes
//
blockquote {
border-left: 1px solid #fff;
margin: calc(var(--unit--vertical) * 2) 0;
padding-left: var(--unit--horizontal);
}
blockquote footer {
margin-top: calc(var(--unit--vertical) / 2);
font-size: var(--font-size-m);
}
blockquote.big {
font-weight: var(--font-weight-light);
font-size: var(--font-size-l);
}
@media screen and (max-width: 640px) {
article h3, article h3,
article h4 { article h4 {
scroll-margin-top: calc(var(--unit--vertical) * 5); scroll-margin-top: calc(var(--unit--vertical) * 1);
} margin-bottom: calc(1 * var(--unit--vertical));
} }
@media screen and (min-width: 640px) { article h3 {
article #main-content { margin-top: calc(3 * var(--unit--vertical));
max-width: auto; }
article h4 {
margin-top: calc(2 * var(--unit--vertical));
}
article li,
article ol {
margin-left: var(--unit--horizontal);
}
article figure {
margin: 4rem 0;
}
article figure img {
max-width: 100%;
}
// Quotes
//
blockquote {
border-left: 1px solid #fff;
margin: calc(var(--unit--vertical) * 2) 0;
padding-left: var(--unit--horizontal);
}
blockquote footer {
margin-top: calc(var(--unit--vertical) / 2);
font-size: var(--font-size-m);
}
blockquote.big {
font-weight: var(--font-weight-light);
font-size: var(--font-size-l);
}
@media screen and (max-width: 640px) {
article h3,
article h4 {
scroll-margin-top: calc(var(--unit--vertical) * 5);
}
}
@media screen and (min-width: 640px) {
article #main-content {
max-width: auto;
}
} }
} }

13
assets/css/src/_year.scss Normal file
View file

@ -0,0 +1,13 @@
[data-template="year"] {
#main-content {
ul.texts {
margin-top: calc(var(--unit--vertical) * 2);
> li:first-child {
padding-left: var(--unit--horizontal);
border-left: 1px solid #fff;
margin-bottom: calc(var(--unit--vertical) * 2);
}
}
}
}

View file

@ -878,25 +878,26 @@ button.see-more {
left: 0; left: 0;
} }
} }
article #main-content { [data-template=linear] article #main-content,
[data-template=grid] article #main-content {
scroll-margin-block-start: calc(var(--unit--vertical) * 6); scroll-margin-block-start: calc(var(--unit--vertical) * 6);
padding-bottom: calc(var(--unit--vertical) * 2); padding-bottom: calc(var(--unit--vertical) * 2);
margin-top: calc(2 * var(--unit--vertical)); margin-top: calc(2 * var(--unit--vertical));
} }
[data-template=linear] #main-content .texts,
#main-content .texts { [data-template=grid] #main-content .texts {
margin-top: calc(2 * var(--unit--vertical)); margin-top: calc(2 * var(--unit--vertical));
} }
[data-template=linear] #main-content .see-more,
#main-content .see-more { [data-template=grid] #main-content .see-more {
margin-top: calc(var(--unit--vertical) * 0.5); margin-top: calc(var(--unit--vertical) * 0.5);
} }
[data-template=linear] [data-template=year] article > h1,
[data-template=year] article > h1 { [data-template=grid] [data-template=year] article > h1 {
margin-bottom: 0; margin-bottom: 0;
} }
[data-template=linear] article #main-content #chapo::after,
article #main-content #chapo::after { [data-template=grid] article #main-content #chapo::after {
content: ""; content: "";
display: block; display: block;
margin-top: calc(2 * var(--unit--vertical)); margin-top: calc(2 * var(--unit--vertical));
@ -905,65 +906,70 @@ article #main-content #chapo::after {
height: 1px; height: 1px;
background-color: var(--color-background); background-color: var(--color-background);
} }
[data-template=linear] article #main-content li:not(.text),
article #main-content li:not(.text) { [data-template=grid] article #main-content li:not(.text) {
list-style-type: inherit; list-style-type: inherit;
} }
[data-template=linear] article h3,
article h3, [data-template=linear] article h4,
article h4 { [data-template=grid] article h3,
[data-template=grid] article h4 {
scroll-margin-top: calc(var(--unit--vertical) * 1); scroll-margin-top: calc(var(--unit--vertical) * 1);
margin-bottom: calc(1 * var(--unit--vertical)); margin-bottom: calc(1 * var(--unit--vertical));
} }
[data-template=linear] article h3,
article h3 { [data-template=grid] article h3 {
margin-top: calc(3 * var(--unit--vertical)); margin-top: calc(3 * var(--unit--vertical));
} }
[data-template=linear] article h4,
article h4 { [data-template=grid] article h4 {
margin-top: calc(2 * var(--unit--vertical)); margin-top: calc(2 * var(--unit--vertical));
} }
[data-template=linear] article li,
article li, [data-template=linear] article ol,
article ol { [data-template=grid] article li,
[data-template=grid] article ol {
margin-left: var(--unit--horizontal); margin-left: var(--unit--horizontal);
} }
[data-template=linear] article figure,
article figure { [data-template=grid] article figure {
margin: 4rem 0; margin: 4rem 0;
} }
[data-template=linear] article figure img,
article figure img { [data-template=grid] article figure img {
max-width: 100%; max-width: 100%;
} }
[data-template=linear] blockquote,
blockquote { [data-template=grid] blockquote {
border-left: 1px solid #fff; border-left: 1px solid #fff;
margin: calc(var(--unit--vertical) * 2) 0; margin: calc(var(--unit--vertical) * 2) 0;
padding-left: var(--unit--horizontal); padding-left: var(--unit--horizontal);
} }
[data-template=linear] blockquote footer,
blockquote footer { [data-template=grid] blockquote footer {
margin-top: calc(var(--unit--vertical) / 2); margin-top: calc(var(--unit--vertical) / 2);
font-size: var(--font-size-m); font-size: var(--font-size-m);
} }
[data-template=linear] blockquote.big,
blockquote.big { [data-template=grid] blockquote.big {
font-weight: var(--font-weight-light); font-weight: var(--font-weight-light);
font-size: var(--font-size-l); font-size: var(--font-size-l);
} }
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
article h3, [data-template=linear] article h3,
article h4 { [data-template=linear] article h4,
[data-template=grid] article h3,
[data-template=grid] article h4 {
scroll-margin-top: calc(var(--unit--vertical) * 5); scroll-margin-top: calc(var(--unit--vertical) * 5);
} }
} }
@media screen and (min-width: 640px) { @media screen and (min-width: 640px) {
article #main-content { [data-template=linear] article #main-content,
[data-template=grid] article #main-content {
max-width: auto; max-width: auto;
} }
} }
/* ================= SPECIFIC TO VIRTUAL PAGES ================= */ /* ================= SPECIFIC TO VIRTUAL PAGES ================= */
[data-template=year] .edito { [data-template=year] .edito {
margin-bottom: var(--unit--vertical); margin-bottom: var(--unit--vertical);
@ -1285,6 +1291,15 @@ body.full-width #main-content {
margin-left: 0; margin-left: 0;
} }
[data-template=year] #main-content ul.texts {
margin-top: calc(var(--unit--vertical) * 2);
}
[data-template=year] #main-content ul.texts > li:first-child {
padding-left: var(--unit--horizontal);
border-left: 1px solid #fff;
margin-bottom: calc(var(--unit--vertical) * 2);
}
:root { :root {
--color-primary--transparent: rgba(255, 255, 255, 0.86); --color-primary--transparent: rgba(255, 255, 255, 0.86);
--color-secondary-rgb: 200, 200, 200; --color-secondary-rgb: 200, 200, 200;

File diff suppressed because one or more lines are too long

View file

@ -13,6 +13,7 @@
@import "src/toggle-light-mode"; @import "src/toggle-light-mode";
@import "src/print"; @import "src/print";
@import "src/toc"; @import "src/toc";
@import "src/year";
:root { :root {
--color-primary--transparent: rgba(255, 255, 255, 0.86); --color-primary--transparent: rgba(255, 255, 255, 0.86);

View file

@ -1,8 +1,12 @@
<?php <?php
class YearPage extends Page{ class YearPage extends Page{
public function allTexts(){ public function allTexts(){
$texts = $this->children()->listed(); $princeps = $this->children()->listed()->first();
$texts = $this->children()->listed()->without($princeps);
$linked = $this->linkedTexts()->toPages(); $linked = $this->linkedTexts()->toPages();
return $texts->merge($linked); $allTexts = $texts->merge($linked);
return $allTexts->sort('published', 'desc')->prepend($princeps);
} }
} }