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)} - +
Banner - - +
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; + } + } + } + } +}