/* layout.css nur für Screen! */ /* ************************** Z-Index ************************** */ @media only screen { #Seitenhintergrund { z-index:0; } /* .bauprojekt bei Animation z-index zwischen 0 und 2 */ a.auf, .skip-link:focus { z-index:10; } /* nötig für FOSS Browser */ nav.sprungziel ul:target { z-index:4; } .angebot main > section { z-index:5; } aside.links > * { z-index: 6; /* Bildbeschriftung Diashow Referenzen hat z-index:10; */ } aside.links nav.sprungziel { z-index:11; } } /* ************************** Layout ********************************* */ /* Danke an: https://flexbox.ninja/demos/holy-grail-layout/ */ /** * Make body at least 100% height * You can also use a combination * of height: 100% in and * min-height: 100% in . */ /* print und screen */ html, body { position:relative; height:100%; border:0; padding:0;margin:0; } body { min-height:100%; } /* kann nach testen bzw. nach einiger Zeit gelöscht werden body { width:100%; max-width:100%; overflow-x:hidden; } */ .mittig { padding:0 var(--padding-mittlere-spalte-rechts-rem) 0 var(--padding-mittlere-spalte-links-rem); padding:0 2%; width:100%; } @media only screen { #aSeitenhintergrund { position:fixed; width:100%; height:100%; width:100vh; height:100vh; top:0; left:0; } #aSeiteninhalt { position:absolute; width:100%; top:0; left:0; z-index:1; } } .hauptanzeigebereich aside { clear:both; } /* body.user-logged-in .hauptanzeigebereich .mittig { background:red; } */ /* schmaler Bildschirm - einspaltiges Layout */ @media only screen { /* = #Seiteninhalt */ .holy-grail { position:absolute; width:100%; top:0; left:0; z-index:1; min-height: 100vh; display: flex; flex: 1 1 auto; flex-direction: column; } .holy-grail-spalten { display: flex; flex: 1 1 auto; flex-direction: column; } .holy-grail-links { flex: 1 1 auto; } .holy-grail-mittig { flex: 1 1 auto; } .holy-grail-rechts { flex: 1 1 auto; } } /* breiter Bildschirm - mehrspaltiges Layout */ @media only screen and (min-width:40rem) { /* nur im Hauptanzeigebereich muss Reichenfolge umgedreht werden */ .hauptanzeigebereich .holy-grail-links { order: -1; } .holy-grail-spalten { flex-direction: row; } .holy-grail-links { flex: 0 0 var(--breite-linke-spalte-rem); } /* weder eingeloggte Benutzer noch Gäste sehen rechte Spalte */ :not(.startseite) .holy-grail-rechts { display:none; width:0; } } @media only screen and (min-width:60rem) { .holy-grail-links { flex: 0 0 var(--breite-linke-spalte-rem); } } @media only screen and (min-width:90rem) { /* nur eingeloggte Benuzter sehen rechte spalte */ :not(.startseite).user-logged-in .holy-grail-rechts { display:block; flex: 0 0 var(--breite-rechte-spalte-rem); width:auto; } } /* ***************************** Kästen, Logo und linke Seitenleiste ********************************* */ .block { clear:both; position:static; } @media only screen and (min-width:40rem) { body { } .mittig { width: var(--breite-mittlere-spalte-rem); } .links { width: var(--breite-linke-spalte-rem); margin-left:var(--margin-ganz-links-rem); margin-right:var(--margin-links-zur-mittleren-spalte-hin-rem); } .block { margin-bottom:var(--margin-bottom-block-rem); } .links > .block { /* war: 107% */ width:calc(var(--blockversatz-rem) + var(--breite-linke-spalte-rem)); position:relative; top:var(--blockversatz-rem); left:0; display:block; max-width:none; /* wegen img + figure */ } .links > .block > ul, .links > .block > form, .links > .block > figure, .links > .block > img, .links > .block > object, .links > .block > section, .links > .block > div { width:100%; position: relative; top:calc(-1 * var(--blockversatz-rem)); /* war: left:6.2%; */ /* left:calc(1 * var(--breitenzuschlag-block-links-einfach-oE) * var(--breite-linke-spalte-rem)); */ left:var(--blockversatz-rem); display:block; } } @media only screen and (min-width: 60rem) { .links > .block { /* war: 114% */ width:calc(var(--breite-linke-spalte-rem) + 2 * var(--blockversatz-rem)); /* war 6.2% */ margin-left:calc(-1 * var(--blockversatz-rem)); } } @media only screen and (min-width:90rem) { body:not(.startseite).user-logged-in .hauptanzeigebereich .rechts .block { /* war 0.5rem */ /* padding: 0 var(--padding-adminblock-rechts-rem) 0 var(--padding-adminblock-links-rem); */ } }