Update colors and sizes

This commit is contained in:
Mylloon 2023-10-13 12:52:20 +02:00
parent cc451bd5b4
commit d0042dfa65
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
4 changed files with 47 additions and 11 deletions

View file

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

View file

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

View file

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

View file

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