bessere Lesbarkeit css

Leuchtturm/style.css

@@ -1,3 +1,7 @@
+/*
+ * Seitenaufbau allgemein
+ */
+
 body {
     margin: 0 auto;
     height: 100vh;
@@ -8,84 +12,48 @@ body {
 header {
     margin: 0;
     text-align: center;
-    padding: 1em 0 3em;
+    padding: 1rem 0 3rem;
     background: linear-gradient(to top, deepskyblue, ivory);
 }
 
-footer {
-    margin: 0;
-    text-align: center;
-    padding: 3em 0 1em;
-    background-color: ivory;
-}
-
-footer > *, header > * {
-    padding: .5rem;
-}
-button {
-    border: none;
-    background-color: inherit;
-    transition: 0.5s ease;
-}
-
-button:hover {
-    background-color: deepskyblue;
-    border-radius: 0.5em;
-    cursor: pointer;
-}
-
-.active {
-    color: white;
-    background-color: dodgerblue;
-    border-radius: 0.5em;
-    font-weight: 800;
-}
-
 main {
     background: linear-gradient(to bottom, deepskyblue, ivory);
     padding: 3rem 5vw;
     overflow-y: auto;
 }
 
-main section{
+footer {
-    margin: auto;
+    margin: 0;
-    display: grid;
+    text-align: center;
-    grid-template-columns: auto auto;
+    padding: 3rem 0 1rem;
-    grid-gap: 5rem;
+    background-color: ivory;
-    place-items: center;
 }
 
-.content-img{
+footer > *, header > * {
-    width: clamp(200px, 30vw, 500px);
+    padding: .5rem;
 }
 
-main section .left{
+/*
-    grid-column: 1;
+ * Darstellung Buttons und Links
-    grid-row: 1;
+ */
+
+button {
+    border: none;
+    background-color: inherit;
+    transition: 0.5s ease;
 }
 
-main section .right{
+button:hover {
-    grid-column: 2;
+    background-color: deepskyblue;
-    grid-row: 1;
-}
-
-.content-img img {
-    max-width: 100%;
-    transition: .5s ease;
-    border: 2px solid dodgerblue;
     border-radius: .5rem;
+    cursor: pointer;
 }
 
-.content-img img:hover {
+.active {
-    transform: scale(1.2);
+    color: white;
-}
+    background-color: dodgerblue;
-
+    border-radius: .5rem;
-.content-img.left img:hover {
+    font-weight: 800;
-    transform-origin: top left;
-}
-
-.content-img.right img:hover {
-    transform-origin: top right;
 }
 
 a{
@@ -97,3 +65,49 @@ a{
 a:hover{
     color: black; /* Ändert die Textfarbe auf schwarz beim Hover */
 }
+
+/*
+ * Aufbau Main-Content
+ */
+main section{
+    margin: auto;
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-gap: 5rem;
+    place-items: center;
+}
+
+main section {
+    .left{
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    .right{
+        grid-column: 2;
+        grid-row: 1;
+    }
+
+    .content-img{
+        width: clamp(200px, 30vw, 500px);
+    }
+
+    img {
+        max-width: 100%;
+        transition: .5s ease;
+        border: 2px solid dodgerblue;
+        border-radius: .5rem;
+    }
+
+    img:hover {
+        transform: scale(1.2);
+    }
+
+    .left img:hover {
+        transform-origin: top left;
+    }
+
+    .right img:hover {
+        transform-origin: top right;
+    }
+}