diff options
| author | Anhgelus Morhtuuzh <william@herges.fr> | 2025-09-30 11:57:48 +0200 |
|---|---|---|
| committer | Anhgelus Morhtuuzh <william@herges.fr> | 2025-09-30 11:57:48 +0200 |
| commit | 9729848e9887b2f146eb477a261d632e2d8d4705 (patch) | |
| tree | 8b6282fc6e400d8d39088e498029406eed03ae13 /design | |
| parent | 4bda1d9049832b9dd6ed761807ce246adbd84092 (diff) | |
feat(design): pagination for home page
Diffstat (limited to 'design')
| -rw-r--r-- | design/index.html | 5 | ||||
| -rw-r--r-- | design/log.html | 2 | ||||
| -rw-r--r-- | design/style.css | 15 |
3 files changed, 17 insertions, 5 deletions
diff --git a/design/index.html b/design/index.html index 93c1e11..1078cc0 100644 --- a/design/index.html +++ b/design/index.html @@ -49,6 +49,11 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. </p> </article> + <div class="pagination"> + <a href="">Précédent</a> + <p>1/15</p> + <a href="">Suivant</a> + </div> </article> </main> <footer> diff --git a/design/log.html b/design/log.html index 9cac47c..33e4755 100644 --- a/design/log.html +++ b/design/log.html @@ -27,7 +27,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere. </p> <figure> - <img src="https://placehold.co/1920x1080" alt="" class="larger"> + <img src="https://placehold.co/1920x1080" alt="" class="large"> <figcaption>A placeholder large image.</figcaption> </figure> <h2>A. Section</h2> diff --git a/design/style.css b/design/style.css index e37624b..0554e27 100644 --- a/design/style.css +++ b/design/style.css @@ -7,9 +7,9 @@ --font-size-tiny: 0.85rem; /* quote, legend, code */ - --width-content: 700px; - --width-deco: 900px; - --height-header: 8rem; + --width-content: 700px; /* main, article */ + --width-deco: 900px; /* header, footer, large image */ + --height-header: 8rem; /* header, footer, introduction */ --margin-base: 1.5rem; --margin-header: calc(var(--height-header) / 2); @@ -129,7 +129,7 @@ figure { & img { max-height: max(60vh, 400px); - &.larger { + &.large { --max-width: var(--width-deco); --width: min(calc(100vw - 4rem), var(--max-width)); margin-left: max(-15%, calc((100% - var(--width))/2)); @@ -235,3 +235,10 @@ article article { margin-bottom: 0; } } + +.pagination { + display: flex; + flex-direction: row; + justify-content: center; + gap: var(--margin-base); +} |