aboutsummaryrefslogtreecommitdiff
path: root/design
diff options
context:
space:
mode:
authorAnhgelus Morhtuuzh <william@herges.fr>2025-09-30 10:30:58 +0200
committerAnhgelus Morhtuuzh <william@herges.fr>2025-09-30 10:31:04 +0200
commit4bda1d9049832b9dd6ed761807ce246adbd84092 (patch)
tree3c987b29983d2f971f936b56a671f7166d3593b2 /design
parent85245c1382fa65c7309106ac3359e4835e107f0a (diff)
feat(design): base home
Diffstat (limited to 'design')
-rw-r--r--design/index.html60
-rw-r--r--design/log.html4
-rw-r--r--design/style.css59
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>&copy; 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>&copy; 2025 - William Hergès</p>
+ <p>&copy; 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;
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-03 14:20:43 +0000