Style rework #35

Merged
Anri merged 70 commits from rework into main 2023-10-15 20:58:23 +02:00
4 changed files with 47 additions and 11 deletions
Showing only changes of commit d0042dfa65 - Show all commits

View file

@ -18,5 +18,5 @@
/* Global parameters */ /* Global parameters */
:root { :root {
--font-size: 17px; --font-size: 1.15rem;
} }

View file

@ -1,41 +1,50 @@
/* Parameters light */ /* Parameters light */
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--name-color: #e61515; --name-color: #d30f39;
--pronouns-color: #646062; --pronouns-color: #6c6f85;
--font-color: #4c4f69;
} }
} }
/* Parameters dark */ /* Parameters dark */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--name-color: #ee9cc5; --name-color: #f38ba8;
--pronouns-color: #7c7579; --pronouns-color: #a6adc8;
--font-color: #c8d0ee;
} }
} }
:root {
--title-weight: 600;
}
/* Page theme */ /* Page theme */
main { main {
color: var(--font-color); color: var(--font-color);
font-size: var(--font-size); font-size: var(--font-size);
margin-inline: 25%; margin-inline: 27%;
padding: 2em 1em; padding: 2em 1em;
font-family: "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol";
color: var(--font-color);
} }
/* Name header */ /* Name header */
.name { .name {
font-size: 2.2rem; font-size: calc(var(--font-size) * 2.5);
font-weight: var(--title-weight);
color: var(--name-color); color: var(--name-color);
} }
.subname { .subname {
margin-top: 0; margin-top: 0;
font-size: large; font-size: calc(var(--font-size) * 1.07);
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
.pronouns { .pronouns {
font-size: smaller; font-size: calc(var(--font-size) * 0.8);
color: var(--pronouns-color); color: var(--pronouns-color);
} }
@ -45,8 +54,23 @@ main {
float: right; float: right;
} }
@media only screen and (max-width: 640px) {
main {
margin-inline: 0;
}
.avatar {
visibility: collapse;
}
}
/* Description */ /* Description */
h1 { h1,
font-weight: 600; h2,
h3,
h4,
h5,
h6 {
font-weight: var(--title-weight);
font-size: calc(var(--font-size) * 1.6);
margin-bottom: 0; margin-bottom: 0;
} }

View file

@ -25,6 +25,12 @@ a {
padding: 10px; padding: 10px;
} }
@media only screen and (max-width: 640px) {
.navbar p::after {
padding: 4px;
}
}
.navbar li:last-child p::after { .navbar li:last-child p::after {
content: ""; content: "";
} }

View file

@ -26,6 +26,12 @@
<p>Content de vous voir ici !</p> <p>Content de vous voir ici !</p>
</article> </article>
<!-- <article>
<h1>Awesome people</h1>
<img alt="273C15" />
<img alt="Azazouille" />
</article> -->
{{/data}} {{/data}}
</main> </main>
</body> </body>