diff --git a/src/Portfolio.Web/Components/Components/TimestampView.razor.css b/src/Portfolio.Web/Components/Components/TimestampView.razor.css index 8e9444c..d93d334 100644 --- a/src/Portfolio.Web/Components/Components/TimestampView.razor.css +++ b/src/Portfolio.Web/Components/Components/TimestampView.razor.css @@ -50,7 +50,7 @@ } } -@media screen and (max-width: var(--mobile-width)) { +@media screen and (max-width: 750px) { .timestamp { gap: 15px; padding-left: 30px; diff --git a/src/Portfolio.Web/Components/Layout/Navigation.razor b/src/Portfolio.Web/Components/Layout/Navigation.razor index f739cd2..cfc54e1 100644 --- a/src/Portfolio.Web/Components/Layout/Navigation.razor +++ b/src/Portfolio.Web/Components/Layout/Navigation.razor @@ -6,7 +6,6 @@ Projekte Technologien Über mich - Kontakt
diff --git a/src/Portfolio.Web/Components/Layout/Navigation.razor.css b/src/Portfolio.Web/Components/Layout/Navigation.razor.css index 407a864..69d20f8 100644 --- a/src/Portfolio.Web/Components/Layout/Navigation.razor.css +++ b/src/Portfolio.Web/Components/Layout/Navigation.razor.css @@ -56,3 +56,13 @@ visibility: visible; transform: scaleX(1); } + +@media screen and (max-width: 750px) { + a:not(.nav-link) { + display: none; + } + + .links { + margin-inline: auto; + } +} diff --git a/src/Portfolio.Web/Components/Pages/AboutPage.razor.css b/src/Portfolio.Web/Components/Pages/AboutPage.razor.css index 6672028..6d42a5b 100644 --- a/src/Portfolio.Web/Components/Pages/AboutPage.razor.css +++ b/src/Portfolio.Web/Components/Pages/AboutPage.razor.css @@ -17,7 +17,7 @@ margin-top: 30px; } -@media screen and (max-width: var(--mobile-width)) { +@media screen and (max-width: 750px) { #about { grid-template-columns: unset; grid-template-rows: repeat(2, max-content); diff --git a/src/Portfolio.Web/Components/Pages/Home.razor b/src/Portfolio.Web/Components/Pages/Home.razor index 90a1267..67ba4bc 100644 --- a/src/Portfolio.Web/Components/Pages/Home.razor +++ b/src/Portfolio.Web/Components/Pages/Home.razor @@ -3,6 +3,8 @@ @using Portfolio.Shared.Services @using Portfolio.Web.Components.Components +Portfolio von Leon Hoppe +
@@ -77,7 +79,8 @@ jobs.state++; } - displayElement.innerText = jobs.display; + if (displayElement.innerText !== jobs.display) + displayElement.innerText = jobs.display; }, 50) diff --git a/src/Portfolio.Web/Components/Pages/Home.razor.css b/src/Portfolio.Web/Components/Pages/Home.razor.css index 8b5c62f..091780a 100644 --- a/src/Portfolio.Web/Components/Pages/Home.razor.css +++ b/src/Portfolio.Web/Components/Pages/Home.razor.css @@ -53,7 +53,6 @@ } .title { - font-size: 35px; display: inline; margin-right: 10px; } @@ -126,3 +125,23 @@ a:not(#main-action):hover::before { opacity: 1; } } + +@media screen and (max-width: 750px) { + #hero > h2 { + font-size: 2rem; + line-height: 2.5rem; + margin-top: 10vh; + } + + .timeline { + flex-direction: column-reverse; + } + + .timeline ::deep .timestamp:last-of-type { + --show-bar: block; + } + + .timeline ::deep .timestamp:first-of-type { + --show-bar: none; + } +} diff --git a/src/Portfolio.Web/wwwroot/app.css b/src/Portfolio.Web/wwwroot/app.css index 6dd35cb..87cdc62 100644 --- a/src/Portfolio.Web/wwwroot/app.css +++ b/src/Portfolio.Web/wwwroot/app.css @@ -9,7 +9,6 @@ --padding: 12.5vw; --padding-small: 5vw; - --mobile-width: 750px; --desc-color: #7c8393; --border-color: #2d2d2d; @@ -90,3 +89,13 @@ h2 { } } } + +@media screen and (max-width: 750px) { + .artwork { + display: none; + } + + h2 { + font-size: 1.625rem; + } +}