From b2438296c9be5820f1cfccb2623a7f66566b82b1 Mon Sep 17 00:00:00 2001
From: Arne Rief <arne.rief@gmail.com>
Date: Thu, 9 Mar 2023 17:18:33 +0100
Subject: Favicon & phone optimization

---
 style.css | 41 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 2dbe1fe..520ecfa 100644
--- a/style.css
+++ b/style.css
@@ -75,6 +75,11 @@ main {
 main * {
   animation: fade-in 2s ease-out;
 }
+@media screen and (max-width: 600px) {
+  main {
+    margin: 2rem 0.5rem;
+  }
+}
 
 ::selection {
   background-color: #ececec;
@@ -145,7 +150,7 @@ nav ul {
     align-items: center;
     justify-content: center;
     gap: 1rem;
-    padding: 0;
+    padding: 1.5rem 0;
   }
 }
 nav li:first-child {
@@ -194,6 +199,11 @@ nav li a:hover {
     width: 80%;
   }
 }
+@media screen and (max-width: 600px) {
+  .about-section {
+    margin: 3rem auto;
+  }
+}
 
 .welcome-section {
   display: grid;
@@ -215,6 +225,11 @@ nav li a:hover {
     width: 80%;
   }
 }
+@media screen and (max-width: 600px) {
+  .welcome-section {
+    margin: 3rem auto;
+  }
+}
 .welcome-section .welcome-intro {
   border-radius: 10px;
   outline: 3px solid #e79759;
@@ -228,14 +243,24 @@ nav li a:hover {
 .projects-section h2 {
   margin-bottom: 5rem;
 }
+.projects-section > div:not(:nth-child(2)) {
+  margin-top: 10rem;
+}
 @media screen and (max-width: 1400px) {
   .projects-section {
     margin: 8rem auto;
     width: 80%;
   }
 }
-.projects-section > div:not(:nth-child(2)) {
-  margin-top: 10rem;
+@media screen and (max-width: 600px) {
+  .projects-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 8rem 0;
+    width: 100%;
+  }
 }
 
 .contact-section {
@@ -251,6 +276,11 @@ nav li a:hover {
     width: 80%;
   }
 }
+@media screen and (max-width: 600px) {
+  .contact-section {
+    margin: 3rem auto;
+  }
+}
 
 footer {
   background-color: #173d5a;
@@ -313,6 +343,11 @@ footer .big-icon {
     width: auto;
   }
 }
+@media screen and (max-width: 600px) {
+  .text-container {
+    padding: 1rem;
+  }
+}
 .text-container p:not(:last-child) {
   margin-bottom: 1.5rem;
 }
-- 
cgit v1.2.3