tanguy/tanguy.gerome.fi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dark mode, and Indented headings in Markdown

Browse source
This commit is contained in:
Tanguy Gérôme 2025-06-25 17:53:19 +03:00
parent f632ebf557
commit 47e4cccb5d
Signed by untrusted user who does not match committer: tanguy
GPG key ID: 10B2947233740B88
2 changed files with 92 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app.rs
View file

@ -101,14 +101,13 @@ pub fn Header() -> impl IntoView {
<A href="/resume">{t!(i18n, resume)}</A> <A href="/resume">{t!(i18n, resume)}</A>
</div> </div>
</div> </div>
<picture> <div class="image-wrapper">
<img <img
class="image" class="image"
src="https://directus.gerome.fi/assets/efdc0b69-7a48-4434-bf07-d406e42a971e?width=1600&fit=inside&format=auto&quality=50&withoutEnlargement=true" src="https://directus.gerome.fi/assets/efdc0b69-7a48-4434-bf07-d406e42a971e?width=1600&fit=inside&format=auto&quality=50&withoutEnlargement=true"
alt="Banner" alt="Banner"
/> />
<source srcset="https://directus.gerome.fi/assets/efdc0b69-7a48-4434-bf07-d406e42a971e?width=1600&fit=inside&format=jpg&quality=50&withoutEnlargement=true"/> </div>
</picture>
</div> </div>
<LanguageSwitcher/> <LanguageSwitcher/>

104
style/main.scss
View file

@ -1,4 +1,6 @@
$mainGreen: #2b762f; $mainGreen: #409760;
$darkerGreen: darken($mainGreen, 10);
$lighterGreen: lighten($mainGreen, 10);
$mainGrey: #0F0F0F; $mainGrey: #0F0F0F;
@mixin main-width { @mixin main-width {
@ -22,13 +24,13 @@ button {
&.link { &.link {
all: unset; all: unset;
text-decoration: underline; text-decoration: underline;
color: $mainGreen!important; color: $darkerGreen!important;
cursor: pointer; cursor: pointer;
} }
} }
a { a {
color: $mainGreen!important; color: $darkerGreen!important;
} }
body { body {
@ -73,7 +75,7 @@ body {
justify-content: center; justify-content: center;
.title-links-and-banner { .title-links-and-banner {
background: $mainGrey; background: $mainGreen;
color: white; color: white;
width: 100%; width: 100%;
@ -127,21 +129,20 @@ body {
} }
} }
picture { .image-wrapper {
max-width: 800px; flex-shrink: 1;
width: 100%;
max-height: 300px;
height: 100%; height: 100%;
// display: contents;
display: flex;
.image { .image {
max-width: 800px; max-width: 800px;
width: 100%; width: 100%;
max-height: 300px; max-height: 350px;
height: 100%; height: 100%;
object-fit: cover; aspect-ratio: 1600 / 623;
object-fit: contain;
object-position: top; object-position: top;
flex-shrink: 1;
} }
} }
} }
@ -171,10 +172,41 @@ body {
img { img {
max-width: 100%; max-width: 100%;
} }
padding-left: 64px;
h1, h2, h3 {
margin-left: -64px;
}
blockquote {
margin: 16px 32px;
}
@media all and (max-width: 800px) {
padding-left: 32px;
h1, h2, h3 {
margin-left: -32px;
}
img {
padding-right: 32px;
}
}
@media all and (max-width: 400px) {
padding-left: 0px;
padding-right: 0px;
h1, h2, h3 {
margin-left: -0px;
}
blockquote {
margin: 16px 16px;
}
img {
padding-right: 0px;
}
}
} }
footer { footer {
background: $mainGrey; background: $mainGreen;
color: white; color: white;
order: 100; order: 100;
@ -183,7 +215,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 10px 0; padding: 14px 0;
.name-and-links { .name-and-links {
@include top-level-padding; @include top-level-padding;
@ -385,3 +417,47 @@ body {
margin-bottom: 64px; margin-bottom: 64px;
} }
} }
@media all and (prefers-color-scheme: dark) {
body {
background: $mainGrey;
color: white;
header {
.title-links-and-banner {
background: $mainGrey;
color: $mainGreen;
border-bottom: $darkerGreen 4px solid;
.text .links a {
color: $mainGreen!important;
}
}
background: $mainGrey;
color: white;
.language-switcher {
a, .link {
color: $mainGreen!important;
}
}
}
a {
color: $mainGreen!important;
}
footer {
background: $mainGrey;
color: $mainGreen;
border-top: $darkerGreen 4px solid;
.name-and-links .links {
a, .link {
color: $mainGreen!important;
}
}
}
}
}