MediaWiki:Citizen.css: Unterschied zwischen den Versionen

Aktuelle Version vom 26. August 2024, 17:35 Uhr

#siteSub {
    display: none;
}
.citizen-footer__siteinfo {
    display: grid;
    grid-template-columns: 125px 1fr auto; /* Logo, Text, und Links in Spalten aufteilen */
    align-items: center; /* Zentriert die Inhalte vertikal */
    padding: 10px 20px;
    column-gap: 20px; /* Abstand zwischen den Spalten */
}

.footer-logo {
    width: 125px;
    height: 88px;
}

.footer-text {
    font-size: 14px;
    color: #ccc;
    line-height: 1.5;
    text-align: left; /* Text linksbündig ausrichten */
}

.footer-links {
    text-align: right; /* Links rechtsbündig ausrichten */
    display: flex;
    flex-direction: column; /* Links untereinander anordnen */
    gap: 5px; /* Abstand zwischen den Links */
}

.footer-links a {
    color: #fff;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

@@ Zeile 1: / Zeile 1: @@
-/* Das folgende CSS wird für Benutzer des Citizen-Skins geladen */
 #siteSub {
      display: none;
 }
-/* das "siteSub nicht löschen */
-.citizen-footer__content {
-    position: relative;
-    height: 150px; /* Höhe des Footers festlegen, nach Bedarf anpassen */
-    padding: 20px;
-    background-color: #1a1a1a; /* Beispiel für Hintergrundfarbe, anpassbar */
-}
 .citizen-footer__siteinfo {
-     position: relative;
+     display: grid;
-     height: 100%;
+     grid-template-columns: 125px 1fr auto; /* Logo, Text, und Links in Spalten aufteilen */
+    align-items: center; /* Zentriert die Inhalte vertikal */
+    padding: 10px 20px;
+    column-gap: 20px; /* Abstand zwischen den Spalten */
 }
 .footer-logo {
-    position: absolute;
-    left: 20px;
-    top: 50%;
-    transform: translateY(-50%);
      width: 125px;
      height: 88px;
@@ Zeile 30: / Zeile 16: @@
 .footer-text {
-    position: absolute;
-    left: 160px; /* Passt den Abstand vom Logo an */
-    top: 50%;
-    transform: translateY(-50%);
-    color: #ccc; /* Farbe des Textes */
      font-size: 14px;
-     max-width: 50%; /* Stellt sicher, dass der Text nicht über den Links hinausgeht */
+     color: #ccc;
+    line-height: 1.5;
+    text-align: left; /* Text linksbündig ausrichten */
 }
 .footer-links {
-     position: absolute;
+     text-align: right; /* Links rechtsbündig ausrichten */
-    right: 20px;
+     display: flex;
-     top: 50%;
+     flex-direction: column; /* Links untereinander anordnen */
-     transform: translateY(-50%);
+     gap: 5px; /* Abstand zwischen den Links */
-     text-align: right;
 }
@@ Zeile 50: / Zeile 32: @@
      color: #fff;
      text-decoration: none;
-    display: block; /* Stellt sicher, dass die Links untereinander stehen */
-    margin-bottom: 5px; /* Fügt Abstand zwischen den Links hinzu */
 }