KKeine Bearbeitungszusammenfassung |
KKeine Bearbeitungszusammenfassung |
||
Zeile 120: | Zeile 120: | ||
/*** Mit Menü 2-Spaltig ***/ | /*** Mit Menü 2-Spaltig ***/ | ||
.collapsed-menu > * > .grid-box { | |||
display:grid; | |||
grid-template-columns: 33% 33% 33%; | |||
} | |||
.grid-box { | .grid-box { | ||
Zeile 159: | Zeile 164: | ||
/*** Ohne Menü 3-Spaltig ***/ | /*** Ohne Menü 3-Spaltig ***/ | ||
.logo-made { | .logo-made { |
Version vom 6. Dezember 2019, 15:32 Uhr
/*** Allgemeine Formatierungen ***/ .logo-made { width: 150px; float: right; margin-left: 50px; } .magnify { display: none; } .thumbinner { border: 0px solid white; padding: 0px; background-color: white; font-size: 94%; text-align: center; overflow: hidden; } .thumbimage { background-color: #fff; border: 0px solid white; } .tright { margin: 0px; } .tile { /* Äußerer Kasten */ border: 2px solid #ef8b80; border-radius: 2px; /*width: 95%;*/ margin: 5px; display: inline-flex; flex-flow: row wrap; align-content: space-between; } .tile-icon { /* Linke Spalte mit Icon */ padding: 10px; color: #e74c3c; display: inline-block; vertical-align: top; } .box-top { width: 100%; display: inline-flex; } .tile-right-col { /* word-break: break; */ text-align: left; } .tile-footer { /* Fußzeile */ border-top: 2px solid #ef8b80; background: #f5f5f5; display: block; padding: 5px; color: #E74C3C; text-align: right; width:100%; } /*** Formatierungen für Monitore min 1105px (3-Spaltig) ***/ @media (min-width: 1105px) { .grid-box { display:grid; grid-template-columns: 33% 33% 33%; } .tile-icon { /* Linke Spalte mit Icon */ width: 70px; font-size: 350%; } .tile-right-col { /* Rechte Spalte */ padding: 5px; display: inline-block; width: calc(100% - 70px); } .tile-right-header { /* Rechte Spalte Header */ color: #e74c3c !important; font-weight: bold; font-size: 120%; } .tile-list { /* Rechte Spalte Liste */ color:#585858; font-size: 90%; margin-left: 20px; } } /* Ende Formatierungen für min 1105px */ /*** Formatierungen für max 1104px ***/ @media (max-width: 1104px) { /*** Mit Menü 2-Spaltig ***/ .collapsed-menu > * > .grid-box { display:grid; grid-template-columns: 33% 33% 33%; } .grid-box { display:grid; grid-template-columns: 50% 50%; } .logo-made { width: 50%; } .tile-icon { /* Linke Spalte mit Icon */ width: 60px; font-size: 250%; } .tile-right-col { /* Rechte Spalte */ padding: 5px; display: inline-block; width: calc(100% - 60px); } .tile-right-header { /* Rechte Spalte Header */ color: #e74c3c !important; font-weight: bold; font-size: 120%; } .tile-list { /* Rechte Spalte Liste */ color:#585858; font-size: 90%; margin-left: 20px; } /*** Ohne Menü 3-Spaltig ***/ .logo-made { width: 150px; float: right; margin-left: 50px; } .tile-icon { /* Linke Spalte mit Icon */ width: 70px; font-size: 350%; } .tile-right-col { /* Rechte Spalte */ padding: 5px; display: inline-block; width: calc(100% - 70px); } .tile-right-header { /* Rechte Spalte Header */ color: #e74c3c !important; font-weight: bold; font-size: 120%; } .tile-list { /* Rechte Spalte Liste */ color:#585858; font-size: 90%; margin-left: 20px; } } /* Ende Formatierungen max 1104px */ /*** Formatierungen für Mobil-Geräte (1-Spaltig) ***/ @media (max-width: 575px) { .grid-box { display:grid; grid-template-columns: 98%; } .logo-made { width: 50%; } .tile-icon { /* Linke Spalte mit Icon */ width: 60px; font-size: 250%; } .tile-right-col { /* Rechte Spalte */ padding: 5px; display: inline-block; width: calc( 100% - 60px); } .tile-right-header { /* Rechte Spalte Header */ color: #e74c3c !important; font-weight: bold; font-size: 120%; } .tile-list { /* Rechte Spalte Liste */ color:#585858; font-size: 90%; margin-left: 20px; } } /* Ende Formatierungen für Mobil-Geräte bis 575px*/