25.095
Bearbeitungen
Vorlage:Infobox/style.css: Unterschied zwischen den Versionen
keine Bearbeitungszusammenfassung
RaWen (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
RaWen (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung Markierung: Manuelle Zurücksetzung |
||
| (7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
.infobox{ | .infobox{ | ||
background: #f8f8f8; | background: #f8f8f8; | ||
border-radius: 6px; | border-radius: 6px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
max-width: 330px; | max-width: 330px; | ||
| Zeile 19: | Zeile 19: | ||
grid-template-columns: repeat(25, 4%); /* 25-Spalten-Grid für minutiöse Kontrolle, jede Spalte 4 % der Infobox breit */ | grid-template-columns: repeat(25, 4%); /* 25-Spalten-Grid für minutiöse Kontrolle, jede Spalte 4 % der Infobox breit */ | ||
grid-template-rows: repeat(4, auto) 1fr; /* Automatische Höhe für Logo, Grid verbleibender Platz für Bild */ | grid-template-rows: repeat(4, auto) 1fr; /* Automatische Höhe für Logo, Grid verbleibender Platz für Bild */ | ||
width: 100%; | width: 100%; | ||
margin: 0 0 1.8em 0 | margin: 0 0 1.8em 0;} | ||
.logo img, .bild img { | .logo img, .bild img { | ||
| Zeile 30: | Zeile 30: | ||
grid-column: 1 / -1; /* Logo nimmt alle Spalten der Grid ein */ | grid-column: 1 / -1; /* Logo nimmt alle Spalten der Grid ein */ | ||
grid-row: 1 / 5; /* Logo erstreckt sich über 5 Zeilen der Grid */ | grid-row: 1 / 5; /* Logo erstreckt sich über 5 Zeilen der Grid */ | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
padding: 6px; | padding: 6px; | ||
background: #fff; | background: #fff; | ||
border-radius: 6px; | border-radius: 6px; | ||
box-shadow: 0px | box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18); | ||
max-width: 85%; | max-width: 85%; | ||
width: max-content; | width: max-content; | ||
height: max-content;} | height: max-content;} | ||
.logo:hover { | |||
transform: scale(1.05); | |||
transition: transform 0.5s ease-in; | |||
border-color: rgba(0,0,0,0.12); | |||
z-index: 2; /* Erhöhter z-index beim Hover */ | |||
} | |||
.logo img { | .logo img { | ||
| Zeile 51: | Zeile 58: | ||
grid-column: 2 / -1; /* Bild erstreckt sich über Spalte 2 bis Ende */ | grid-column: 2 / -1; /* Bild erstreckt sich über Spalte 2 bis Ende */ | ||
grid-row: 4 / -1; /* Bild beginnt in 4. Zeile, um sich mit dem Logo zu überschneiden */} | grid-row: 4 / -1; /* Bild beginnt in 4. Zeile, um sich mit dem Logo zu überschneiden */} | ||
.bild:hover { | |||
transform: scale(1.05); | |||
transition: transform 0.5s ease-in; | |||
border-color: rgba(0,0,0,0.12); | |||
z-index: 2; /* Erhöhter z-index beim Hover */ | |||
} | |||
.bild img { | .bild img { | ||
| Zeile 56: | Zeile 70: | ||
height: auto; | height: auto; | ||
margin-bottom: 1.2em; | margin-bottom: 1.2em; | ||
height: auto; | height: auto; | ||
border-radius: 6px; | border-radius: 6px; | ||
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatteneffekt */} | box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatteneffekt */} | ||
| Zeile 93: | Zeile 107: | ||
line-height: 1.3; | line-height: 1.3; | ||
background: #fff; | background: #fff; | ||
color: # | color: #1a1a1a; | ||
padding: 0.55em 0.8em 0.55em 0.8em; | padding: 0.55em 0.8em 0.55em 0.8em; | ||
font-size: 1.2em; | font-size: 1.2em; | ||
| Zeile 104: | Zeile 118: | ||
.title-no-logo { | .title-no-logo { | ||
color: #1a1a1a; | |||
grid-column: 1 / -1; /* Überschrift nimmt alle Spalten ein, wie das 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 */ | grid-row: 1 / 5; /* Überschrift erstreckt sich über dieselben Zeilen wie das Logo */ | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */ | z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */ | ||
background: #fff; | background: #fff; | ||
border-radius: 6px; | border-radius: 6px; | ||
box-shadow: 0px | box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18); | ||
padding: 6px; | padding: 6px; | ||
max-width: 85%; | max-width: 85%; | ||
| Zeile 141: | Zeile 156: | ||
font-weight: bold; | font-weight: bold; | ||
line-height: 1.6; | line-height: 1.6; | ||
color: # | color: #1a1a1a} | ||
.infobox .motto{ | .infobox .motto{ | ||
| Zeile 174: | Zeile 189: | ||
margin-bottom: 0.8em; | margin-bottom: 0.8em; | ||
display: block;} | display: block;} | ||
.strassenschild:hover { | |||
transform: scale(1.05); | |||
transition: transform 0.5s ease-in; | |||
border-color: rgba(0,0,0,0.12); | |||
z-index: 2; /* Erhöhter z-index beim Hover */ | |||
} | |||
.nocorner img{ | .nocorner img{ | ||
| Zeile 180: | Zeile 202: | ||
.infobox .strassenbild{ | .infobox .strassenbild{ | ||
margin: 1.2em 0 1.2em 0;} | margin: 1.2em 0 1.2em 0;} | ||
.strassenbild:hover { | |||
transform: scale(1.05); | |||
transition: transform 0.5s ease-in; | |||
border-color: rgba(0,0,0,0.12); | |||
z-index: 2; /* Erhöhter z-index beim Hover */ | |||
} | |||
.infobox .strassenbild img{ | .infobox .strassenbild img{ | ||