texts : sort and style
All checks were successful
Deploy / Deploy to Production (push) Successful in 6s
All checks were successful
Deploy / Deploy to Production (push) Successful in 6s
This commit is contained in:
parent
680871d6e2
commit
80efbf3d5f
6 changed files with 148 additions and 112 deletions
|
|
@ -1,85 +1,88 @@
|
|||
article #main-content {
|
||||
scroll-margin-block-start: calc(var(--unit--vertical) * 6);
|
||||
padding-bottom: calc(var(--unit--vertical) * 2);
|
||||
margin-top: calc(2 * var(--unit--vertical));
|
||||
}
|
||||
[data-template="linear"],
|
||||
[data-template="grid"] {
|
||||
article #main-content {
|
||||
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 {
|
||||
margin-top: calc(2 * var(--unit--vertical));
|
||||
}
|
||||
#main-content .texts {
|
||||
margin-top: calc(2 * var(--unit--vertical));
|
||||
}
|
||||
|
||||
#main-content .see-more {
|
||||
margin-top: calc(var(--unit--vertical) * 0.5);
|
||||
}
|
||||
#main-content .see-more {
|
||||
margin-top: calc(var(--unit--vertical) * 0.5);
|
||||
}
|
||||
|
||||
[data-template="year"] article > h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
[data-template="year"] article > h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
article #main-content #chapo::after {
|
||||
content: "";
|
||||
display: block;
|
||||
margin-top: calc(2 * var(--unit--vertical));
|
||||
margin-bottom: calc(4 * var(--unit--vertical));
|
||||
article #main-content #chapo::after {
|
||||
content: "";
|
||||
display: block;
|
||||
margin-top: calc(2 * var(--unit--vertical));
|
||||
margin-bottom: calc(4 * var(--unit--vertical));
|
||||
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
article #main-content li:not(.text) {
|
||||
list-style-type: inherit;
|
||||
}
|
||||
article #main-content li:not(.text) {
|
||||
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 h4 {
|
||||
scroll-margin-top: calc(var(--unit--vertical) * 5);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 640px) {
|
||||
article #main-content {
|
||||
max-width: auto;
|
||||
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 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
13
assets/css/src/_year.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -878,25 +878,26 @@ button.see-more {
|
|||
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);
|
||||
padding-bottom: calc(var(--unit--vertical) * 2);
|
||||
margin-top: calc(2 * var(--unit--vertical));
|
||||
}
|
||||
|
||||
#main-content .texts {
|
||||
[data-template=linear] #main-content .texts,
|
||||
[data-template=grid] #main-content .texts {
|
||||
margin-top: calc(2 * var(--unit--vertical));
|
||||
}
|
||||
|
||||
#main-content .see-more {
|
||||
[data-template=linear] #main-content .see-more,
|
||||
[data-template=grid] #main-content .see-more {
|
||||
margin-top: calc(var(--unit--vertical) * 0.5);
|
||||
}
|
||||
|
||||
[data-template=year] article > h1 {
|
||||
[data-template=linear] [data-template=year] article > h1,
|
||||
[data-template=grid] [data-template=year] article > h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
article #main-content #chapo::after {
|
||||
[data-template=linear] article #main-content #chapo::after,
|
||||
[data-template=grid] article #main-content #chapo::after {
|
||||
content: "";
|
||||
display: block;
|
||||
margin-top: calc(2 * var(--unit--vertical));
|
||||
|
|
@ -905,65 +906,70 @@ article #main-content #chapo::after {
|
|||
height: 1px;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
article #main-content li:not(.text) {
|
||||
[data-template=linear] article #main-content li:not(.text),
|
||||
[data-template=grid] article #main-content li:not(.text) {
|
||||
list-style-type: inherit;
|
||||
}
|
||||
|
||||
article h3,
|
||||
article h4 {
|
||||
[data-template=linear] article h3,
|
||||
[data-template=linear] article h4,
|
||||
[data-template=grid] article h3,
|
||||
[data-template=grid] article h4 {
|
||||
scroll-margin-top: calc(var(--unit--vertical) * 1);
|
||||
margin-bottom: calc(1 * var(--unit--vertical));
|
||||
}
|
||||
|
||||
article h3 {
|
||||
[data-template=linear] article h3,
|
||||
[data-template=grid] article h3 {
|
||||
margin-top: calc(3 * var(--unit--vertical));
|
||||
}
|
||||
|
||||
article h4 {
|
||||
[data-template=linear] article h4,
|
||||
[data-template=grid] article h4 {
|
||||
margin-top: calc(2 * var(--unit--vertical));
|
||||
}
|
||||
|
||||
article li,
|
||||
article ol {
|
||||
[data-template=linear] article li,
|
||||
[data-template=linear] article ol,
|
||||
[data-template=grid] article li,
|
||||
[data-template=grid] article ol {
|
||||
margin-left: var(--unit--horizontal);
|
||||
}
|
||||
|
||||
article figure {
|
||||
[data-template=linear] article figure,
|
||||
[data-template=grid] article figure {
|
||||
margin: 4rem 0;
|
||||
}
|
||||
|
||||
article figure img {
|
||||
[data-template=linear] article figure img,
|
||||
[data-template=grid] article figure img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
[data-template=linear] blockquote,
|
||||
[data-template=grid] blockquote {
|
||||
border-left: 1px solid #fff;
|
||||
margin: calc(var(--unit--vertical) * 2) 0;
|
||||
padding-left: var(--unit--horizontal);
|
||||
}
|
||||
|
||||
blockquote footer {
|
||||
[data-template=linear] blockquote footer,
|
||||
[data-template=grid] blockquote footer {
|
||||
margin-top: calc(var(--unit--vertical) / 2);
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
blockquote.big {
|
||||
[data-template=linear] blockquote.big,
|
||||
[data-template=grid] blockquote.big {
|
||||
font-weight: var(--font-weight-light);
|
||||
font-size: var(--font-size-l);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
article h3,
|
||||
article h4 {
|
||||
[data-template=linear] article h3,
|
||||
[data-template=linear] article h4,
|
||||
[data-template=grid] article h3,
|
||||
[data-template=grid] article h4 {
|
||||
scroll-margin-top: calc(var(--unit--vertical) * 5);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 640px) {
|
||||
article #main-content {
|
||||
[data-template=linear] article #main-content,
|
||||
[data-template=grid] article #main-content {
|
||||
max-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* ================= SPECIFIC TO VIRTUAL PAGES ================= */
|
||||
[data-template=year] .edito {
|
||||
margin-bottom: var(--unit--vertical);
|
||||
|
|
@ -1285,6 +1291,15 @@ body.full-width #main-content {
|
|||
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 {
|
||||
--color-primary--transparent: rgba(255, 255, 255, 0.86);
|
||||
--color-secondary-rgb: 200, 200, 200;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -13,6 +13,7 @@
|
|||
@import "src/toggle-light-mode";
|
||||
@import "src/print";
|
||||
@import "src/toc";
|
||||
@import "src/year";
|
||||
|
||||
:root {
|
||||
--color-primary--transparent: rgba(255, 255, 255, 0.86);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<?php
|
||||
class YearPage extends Page{
|
||||
public function allTexts(){
|
||||
$texts = $this->children()->listed();
|
||||
$princeps = $this->children()->listed()->first();
|
||||
|
||||
$texts = $this->children()->listed()->without($princeps);
|
||||
$linked = $this->linkedTexts()->toPages();
|
||||
return $texts->merge($linked);
|
||||
$allTexts = $texts->merge($linked);
|
||||
|
||||
return $allTexts->sort('published', 'desc')->prepend($princeps);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue