diff --git a/src/app.rs b/src/app.rs
index 89a4493..294886a 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -101,14 +101,13 @@ pub fn Header() -> impl IntoView {
{t!(i18n, resume)}
-
+

-
-
+
diff --git a/style/main.scss b/style/main.scss
index 1f44593..f18c9ab 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -1,4 +1,6 @@
-$mainGreen: #2b762f;
+$mainGreen: #409760;
+$darkerGreen: darken($mainGreen, 10);
+$lighterGreen: lighten($mainGreen, 10);
$mainGrey: #0F0F0F;
@mixin main-width {
@@ -22,13 +24,13 @@ button {
&.link {
all: unset;
text-decoration: underline;
- color: $mainGreen!important;
+ color: $darkerGreen!important;
cursor: pointer;
}
}
a {
- color: $mainGreen!important;
+ color: $darkerGreen!important;
}
body {
@@ -73,7 +75,7 @@ body {
justify-content: center;
.title-links-and-banner {
- background: $mainGrey;
+ background: $mainGreen;
color: white;
width: 100%;
@@ -127,21 +129,20 @@ body {
}
}
- picture {
- max-width: 800px;
- width: 100%;
- max-height: 300px;
+ .image-wrapper {
+ flex-shrink: 1;
height: 100%;
- // display: contents;
+
+ display: flex;
.image {
max-width: 800px;
width: 100%;
- max-height: 300px;
+ max-height: 350px;
height: 100%;
- object-fit: cover;
+ aspect-ratio: 1600 / 623;
+ object-fit: contain;
object-position: top;
- flex-shrink: 1;
}
}
}
@@ -171,10 +172,41 @@ body {
img {
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 {
- background: $mainGrey;
+ background: $mainGreen;
color: white;
order: 100;
@@ -183,7 +215,7 @@ body {
display: flex;
align-items: center;
justify-content: center;
- padding: 10px 0;
+ padding: 14px 0;
.name-and-links {
@include top-level-padding;
@@ -385,3 +417,47 @@ body {
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;
+ }
+ }
+ }
+ }
+}