diff options
| -rw-r--r-- | design/index.html | 60 | ||||
| -rw-r--r-- | design/log.html | 4 | ||||
| -rw-r--r-- | design/style.css | 59 |
3 files changed, 97 insertions, 26 deletions
diff --git a/design/index.html b/design/index.html new file mode 100644 index 0000000..93c1e11 --- /dev/null +++ b/design/index.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html lang="fr"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>anhgelus</title> + <link href="reset.css" rel="stylesheet"> + <link href="style.css" rel="stylesheet"> +</head> +<body> + <header> + <img src="https://cdn.anhgelus.world/pfp.jpg" alt="pfp"> + <nav> + <a href="">Home</a> + <a href="">Logs</a> + <a href="">Work</a> + <a href="">Philosophy</a> + <a href="">Lien 1</a> + <a href="">Lien 2</a> + <a href="">Lien 3</a> + <a href="">Lien 4</a> + </nav> + </header> + <main> + <div class="introduction"> + <h1>logs</h1> + <p> + 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> + </div> + <article> + <article> + <h2><a href="log.html">Article title</a></h2> + <figure> + <img src="https://placehold.co/1920x1080" alt=""> + <figcaption>A placeholder.</figcaption> + </figure> + <p> + 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> + <article> + <h2><a href="log.html">Article title</a></h2> + <figure> + <img src="https://placehold.co/1920x1080" alt=""> + <figcaption>A placeholder.</figcaption> + </figure> + <p> + 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> + </article> + </main> + <footer> + <p>© 2025 - Anhgelus Morhtuuzh</p> + <p>Une citation</p> + <p><a href="">Mentions légales</a></p> + </footer> +</body> +</html> diff --git a/design/log.html b/design/log.html index 62678f7..9cac47c 100644 --- a/design/log.html +++ b/design/log.html @@ -87,9 +87,9 @@ func main() { </ol> </article> <footer> - <p>© 2025 - William Hergès</p> + <p>© 2025 - Anhgelus Morthuuzh</p> <p>Une citation</p> - <p><a href="https://william.herges.fr/legal/">Mentions légales</a></p> + <p><a href="">Mentions légales</a></p> </footer> </body> </html> diff --git a/design/style.css b/design/style.css index cc22c2a..e37624b 100644 --- a/design/style.css +++ b/design/style.css @@ -7,10 +7,12 @@ --font-size-tiny: 0.85rem; /* quote, legend, code */ - --content-width: 700px; - --deco-width: 900px; + --width-content: 700px; + --width-deco: 900px; + --height-header: 8rem; - --base-margin: 1.5rem; + --margin-base: 1.5rem; + --margin-header: calc(var(--height-header) / 2); font-size: 20px; } @@ -28,8 +30,8 @@ body * { line-height: 1.4em; } -article { - max-width: var(--content-width); +main, article { + max-width: var(--width-content); margin: 0 auto; } @@ -41,22 +43,23 @@ h1, h2, h3 { h1 { font-size: 2rem; + font-weight: 600; } h2 { font-size: 1.66rem; - margin-top: calc(var(--base-margin) + 1rem); + margin-top: calc(var(--margin-base) + 1rem); } h3 { font-size: 1.33rem; - margin-top: calc(var(--base-margin) + 0.5rem); + margin-top: calc(var(--margin-base) + 0.5rem); } p { - margin-bottom: var(--base-margin); + margin-bottom: var(--margin-base); } a { @@ -82,7 +85,7 @@ b { ul, ol { margin-top: -0.5rem; - margin-bottom: var(--base-margin - 0.5rem); + margin-bottom: var(--margin-base - 0.5rem); margin-left: 1rem; list-style-position: outside; @@ -121,11 +124,13 @@ figure { text-align: center; + margin-bottom: var(--margin-base); + & img { max-height: max(60vh, 400px); &.larger { - --max-width: var(--deco-width); + --max-width: var(--width-deco); --width: min(calc(100vw - 4rem), var(--max-width)); margin-left: max(-15%, calc((100% - var(--width))/2)); width: var(--max-width); @@ -158,7 +163,7 @@ code { pre { border: var(--color-light) 2px solid; - margin: 0 -1rem var(--base-margin) -1rem; + margin: 0 -1rem var(--margin-base) -1rem; padding: 0.5rem 1rem; & code { @@ -170,10 +175,10 @@ pre { } header { - max-width: var(--deco-width); - height: 8rem; + max-width: var(--width-deco); + height: var(--height-header); - margin: 0 auto 4rem auto; + margin: 0 auto var(--margin-header) auto; padding-bottom: 2rem; display: flex; @@ -185,13 +190,8 @@ header { @media only screen and (max-width: 600px) { flex-direction: column; height: auto; - min-height: 8rem; - } - - & img { - filter: saturate(0.9) sepia(0.1); - - @media only screen and (max-width: 600px) { + min-height: var(--height-header); + & img { width: max(33%, 128px); margin: 0 auto; } @@ -214,13 +214,24 @@ header { } footer { - max-width: var(--deco-width); - height: 8rem; + max-width: var(--width-deco); + height: var(--height-header); - margin: 4rem auto 0 auto; + margin: var(--margin-header) auto 0 auto; padding-top: 2rem; border-top: var(--color-light) 2px solid; font-size: var(--font-size-tiny); } + +.introduction { + margin: var(--margin-header) 0; +} + +article article { + margin-bottom: var(--margin-header); + &:last-child { + margin-bottom: 0; + } +} |