Made pages mobile compatible

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;

src/Portfolio.Web/Components/Layout/Navigation.razor

@@ -6,7 +6,6 @@
         <NavLink class="nav-link" Match="NavLinkMatch.All" href="projects">Projekte</NavLink>
         <NavLink class="nav-link" Match="NavLinkMatch.All" href="technologies">Technologien</NavLink>
         <NavLink class="nav-link" Match="NavLinkMatch.All" href="about">Über mich</NavLink>
-        <NavLink class="nav-link" Match="NavLinkMatch.All" href="contact">Kontakt</NavLink>
     </div>
     
     <div class="socials">

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

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);

src/Portfolio.Web/Components/Pages/Home.razor

@@ -3,6 +3,8 @@
 @using Portfolio.Shared.Services
 @using Portfolio.Web.Components.Components
 
+<PageTitle>Portfolio von Leon Hoppe</PageTitle>
+
 <section id="hero">
     <div class="artwork">
         <div class="circle big-circle"></div>
@@ -77,6 +79,7 @@
             jobs.state++;
         }
         
+        if (displayElement.innerText !== jobs.display)
             displayElement.innerText = jobs.display;
     }, 50)
 

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

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