Vorlage:Unternehmen-Entwickler/style.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied

Vorlage:Unternehmen-Entwickler/style.css (Quelltext anzeigen)

Version vom 18. März 2024, 13:57 Uhr

1.041 Bytes hinzugefügt , 18 März

K

keine Bearbeitungszusammenfassung

RaWen

Oberflächenadministratoren, Administratoren

20.787

Bearbeitungen

@@ Zeile 1: / Zeile 1: @@
 .infobox{
      background: #f8f8f8;
-     border-radius: 6px;
+     border-radius: 6px; /* Abgerundete Ecken */
      box-sizing: border-box;
      max-width: 330px;
@@ Zeile 10: / Zeile 10: @@
      margin: 0 0 1.4em 1.4em;
      padding: 1.4em;}
+.logo, .bild {
+    box-sizing: border-box;}
 /* Grid-Container f. Logo & Bild */
 .logo-bild-container {
      display: grid;
-     grid-template-columns: repeat(12, 1fr); /* 12-Spalten-Grid für detaillierte Kontrolle */
+     grid-template-columns: repeat(25, 4%); /* 25-Spalten-Grid für minutiöse Kontrolle, jede Spalte 4 % der Infobox breit */
-     grid-template-rows: repeat(20, 0.1fr); /* Viele kleine Zeileneinheiten für das Logo und Bild */
+     grid-template-rows: repeat(4, auto) 1fr; /* Automatische Höhe für Logo, Grid verbleibender Platz für Bild */
-     width: 100%; /* Container nimmt volle Breite ein */}
+     width: 100%; /* Container nimmt volle Breite ein */
+    margin: 0 0 1.8em 0 /* unterer Abstand zum Text der Infobox*/}
+.logo img, .bild img {
+    height: auto;}
 /* Stil für das Logo */
 .logo {
      z-index: 2;
-     grid-column: 1 / -1; /* Logo nimmt alle Spalten ein */
+     grid-column: 1 / -1; /* Logo nimmt alle Spalten der Grid ein */
-     grid-row: 1 / 5; /* Logo erstreckt sich über 4 Zeilen */
+     grid-row: 1 / 5; /* Logo erstreckt sich über 5 Zeilen der Grid */
-     display: flex; /* Flexibles Layout für den Inhalt */
+     display: flex; /* Logo wird im Grid angeordnet */
      justify-content: center; /* Zentriert das Logo horizontal */
      align-items: center; /* Zentriert das Logo vertikal */
-     padding: 6px; /* Inneres Padding */
+     padding: 6px;
-    box-sizing: content-box; /* Padding zählt nicht zur Breite */
      background: #fff; /* Hintergrundfarbe */
      border-radius: 6px; /* Runde Ecken */
      box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten */
+    max-width: 85%;
      width: max-content;
      height: max-content;}
 .logo img {
-    max-width: 85%;
-    width: auto;
      max-height: 100px;
-     height: auto;}
+     max-width: 100%;
+    width: auto;}
 /* Stil für das Bild*/
 .bild {
      grid-column: 2 / -1; /* Bild erstreckt sich über Spalte 2 bis Ende */
-     grid-row: 4 / -1; /* Bild beginnt in einer Zeile, die sich mit dem Logo überschneidet */
+     grid-row: 4 / -1; /* Bild beginnt in 4. Zeile, um sich mit dem Logo zu überschneiden */
      width: 100%; /* Nimmt die volle Breite ein */}
-/* Stil für das Bild */
 .bild img {
      width: 100%; /* Bild nimmt volle Breite ein */
@@ Zeile 74: / Zeile 79: @@
      font-size: 1.1em;
      font-weight: bold;
+    line-height: 1.6;
      margin: 1em 0;
      border: 0;
@@ Zeile 93: / Zeile 99: @@
      box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
      max-width: 85%;}
+/* Stil für den Titel der Infobox, wenn kein Logo vorhanden ist */
+.title-no-logo {
+    grid-column: 1 / -1; /* Überschrift nimmt alle Spalten ein, wie das Logo */
+    grid-row: 1 / 5; /* Überschrift erstreckt sich über dieselben Zeilen wie das Logo */
+    display: flex; /* Flexibles Layout für Zentrierung */
+    justify-content: center; /* Zentriert den Text horizontal */
+    align-items: center; /* Zentriert den Text vertikal */
+    z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */
+    background: #fff;
+    border-radius: 6px; /* Runde Ecken */
+    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten für Hervorhebung */
+    padding: 6px;
+    max-width: 85%;
+    width: max-content;
+    height: max-content;
+    font-size: 1.2em;
+    font-weight: bold;
+    line-height: 1.6;}
+.title-no-logo.overlap {
+    background: #fff;
+    z-index: 2;}
+.infobox .title-noshow{
+    display: none;}
+/* Stil für den Titel der Infobox, wenn kein Bild vorhanden ist */
 .infobox .title-no-img{
@@ Zeile 100: / Zeile 135: @@
      text-align: left;
      background: #fff;
-     color: #000;
+     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
      padding: 0.4em 0.8em 0.4em 0.8em;
      font-size: 1.2em;
      font-weight: bold;
-     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}
+     line-height: 1.6;
+     color: #000;}
-.infobox .title-noshow{
-     display: none;}
 .infobox .motto{
-     font-size: 120% !important;
+     font-size: 115% !important;
      font-weight: normal;
      padding: 0;
-     margin: 2.2em 0 0 0;
+     margin: 0;
      font-style: italic !important;
-     text-align: center;}
+     text-align: left;}
 .infobox .media-container{
@@ Zeile 136: / Zeile 169: @@
 .infobox .leaflet-container{
-     width: 100% !important; /* Override the (inline) width property */
+     width: 100% !important; /* Überschreibt die (inline) width-Anweisung */
      border-radius: 6px;
      margin: 0 auto;}
@@ Zeile 169: / Zeile 202: @@
 .infobox .unter_logo{
      padding-top: 2em;}
-.infobox .overlap{
-    background: #fff;
-    position: absolute;
-    z-index: 2;}
 .infobox .strassenbild p{