Update clock and contact CSS styles

friesenkatharina · Mar 19, 2024 · e92478f · e92478f
1 parent 9ff49e1
commit e92478f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 94 deletions.
diff --git a/clock/clock.css b/clock/clock.css
@@ -5,7 +5,7 @@
 .container {
   position: absolute;
   top: 20%;
-  left: 60%;
+  left: 70%;
   transform: translate(-50%, -50%);
 }
 
@@ -104,7 +104,7 @@
 
 #clock {
   position: absolute;
-  top: -10px;
+  top: -5px;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
@@ -175,71 +175,11 @@
 }
 /* Mobile Responsive Anpassungen */
 @media (max-width: 768px) {
-  .container {
-    top: 15%;
-    left: 50%;
-  }
-
+  .container,
   .rim,
-  .outer {
-    width: 100px;
-    height: 100px;
-  }
-
-  .rim {
-    border-width: 10px;
-  }
-
-  .outer {
-    border-width: 5px;
-  }
-
-  .inner {
-    top: -5px;
-    width: 100px;
-    height: 100px;
-    border-width: 4px;
-  }
-
-  .inner::before {
-    border-width: 4px;
-  }
-
-  .inner::after {
-    border-width: 0.5px;
-  }
-
+  .outer,
+  .inner,
   #clock {
-    top: -5px;
-    font-size: 20px;
-    text-shadow: 0 0 15px #8dcaed;
-  }
-
-  @keyframes shift {
-    /* Anpassungen für kleinere Animationen */
-    50% {
-      height: 140px;
-    }
-  }
-
-  @keyframes shift-rim {
-    /* Anpassungen für kleinere Animationen */
-    50% {
-      height: 140px;
-    }
-  }
-
-  @keyframes shift-inner {
-    /* Anpassungen für kleinere Animationen */
-    50% {
-      height: 95px;
-    }
-  }
-
-  @keyframes shift-clock {
-    /* Anpassungen für kleinere Animationen */
-    50% {
-      top: 50px;
-    }
+    display: none;
   }
 }
diff --git a/styles/contact.css b/styles/contact.css
@@ -19,13 +19,6 @@ section {
   align-items: center;
   grid-gap: 6rem;
 }
-.contact-img img {
-  max-width: 100%;
-
-  width: 720px;
-  height: auto;
-  border-radius: 10px;
-}
 
 .contact-form h1 {
   font-size: 80px;
@@ -80,37 +73,36 @@ form textarea {
   background: transparent;
   transform: scale(1.1);
 }
-@media (min-width: 1024px) {
+@media (max-width: 768px) {
   section {
-    padding: 80px 3%;
-    transition: 0.2s;
+    padding: 40px 5%; /* Mehr Raum auf kleinen Geräten */
+  }
+
+  .contact {
+    grid-template-columns: 1fr; /* Stapelt Elemente vertikal */
+    grid-gap: 2rem;
   }
+
   .contact-form h1 {
-    font-size: 50px;
+    font-size: 40px; /* Kleinere Überschrift */
   }
+
   .contact-form p {
-    margin-bottom: 2rem;
-  }
-}
-@media (max-width: 1000px) {
-  .contact {
-    grid-template-columns: 1fr;
-  }
-  .contact-form {
-    order: 2;
+    font-size: 1rem; /* Kleinerer Text */
   }
+
   .contact-img img {
-    max-width: 100%;
-    width: 100%;
-    height: auto;
-    text-align: center;
+    width: 100%; /* Vollbreite Bilder */
     margin-bottom: 30px;
   }
 }
 
-@media (min-width: 768px) {
-  .contact {
-    grid-gap: 2rem;
-    transition: 0.3s;
+@media (max-width: 480px) {
+  .contact-form h1 {
+    font-size: 32px; /* Noch kleinere Überschrift für sehr kleine Geräte */
+  }
+
+  .contact-form .btn {
+    width: 100%; /* Button voller Breite */
   }
 }