Beispiel:Layout-3-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout 3 - Step 4</title>
<style>
:root {
color-scheme: light dark;
/* Grundton – Lila */
--lila2: oklch(0.80 0.15 300);
--lila1: oklch(0.60 0.15 300);
--lila: oklch(0.44 0.16 300);
--lila-darker: oklch(0.29 0.16 300);
--lila-darkest: oklch(0.20 0.16 300);
/* Akzent 1 – Gold */
--gold2: oklch(0.95 0.17 50);
--gold1: oklch(0.80 0.16 50);
--gold: oklch(0.65 0.17 50);
--gold-darker: oklch(0.50 0.15 50);
/* Akzent 2 – Mint */
--mint2: oklch(0.98 0.14 170);
--mint1: oklch(0.90 0.14 170);
--mint: oklch(0.80 0.13 170);
--mint-darker: oklch(0.60 0.14 170);
--mint-darkest: oklch(0.40 0.14 170);
/* Neutral / Grau */
--whitesmoke: oklch(0.97 0 0);
--grey1: oklch(0.80 0 0);
--grey: oklch(0.65 0 0);
--grey-darker: oklch(0.50 0 0);
--charcoal: oklch(0.30 0 0);
--textColor: light-dark(var(--charcoal), var(--whitesmoke));
--navColor: var(--whitesmoke);
--navWidth: 12em;
--mainWidth: min(48em, calc(100% - var(--navWidth)));
--headerLineHeight: 3em;
}
body {
width: calc(100% - 0em);
min-height: calc(100vh - 0em);
margin: 0;
padding: 0;
font-family: Avenir, Arial, sans-serif;
display: grid;
color: var(--textColor);
background-color: light-dark(var(--whitesmoke), var(--charcoal)) ;
}
header {
grid-area: head;
padding: 2em;
display: grid;
grid-template-columns: 4em 1fr;
gap: 0.5em;
img {width:2.5em; padding-top:1.25em;}
}
nav {
grid-area: nav;
background: linear-gradient(90deg, var(--lila1), var(--lila));
ul {
list-style: none;
margin: 0.5em;
padding: 0;
}
li a {
display: inline-block;
text-decoration: none;
color: var(--navColor);
font-size: 1.5em; /* mobil größer */
font-weight: bold;
padding: 0.2em 1em;
}
li a:hover,
li a:focus{
color: var(--mint2);
background: var(--lila1)
}
}
@media (width > 30em) {
body {
grid-template: ". nav head ." min-content
". nav rule ." var(--headerLineHeight)
". nav main ." auto
". nav foot ." min-content /
1fr var(--navWidth) var(--mainWidth) 1fr;
}
body::before {
content: '';
grid-row: rule;
grid-column: 1 / 1;
background: linear-gradient(to right, var(--lila), var(--lila1));
}
body::after {
content: '';
grid-row: rule;
grid-column: rule-start / -1;
background-image: linear-gradient(to right, var(--lila), var(--lila-darker));
}
nav {
padding-top: 10em;
li a {
font-size: 1rem; /* jetzt wieder auf Standardschriftgröße */
}
}
main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
:not(aside) {
grid-column: 1 / -1;
}
aside {
grid-column: 1 span 1;
}
}
}
main {
grid-area: main;
padding: 1em;
}
footer {
grid-area: foot;
padding: 1em;
}
aside {
background: var(--mint);
padding: 1em;
h2,h3 {
color: var(--lila);
}
}
.warning {
background: var(--gold2);
border-color: var(--gold-darkest);
}
@media (prefers-color-scheme: dark) {
a {
color: skyblue;
}
h1,h2,h3 {
color: var(--lila2);
}
aside {
color: var(--charcoal);
a {
color: var(--lila);
}
}
}
.css,.html {
background: var(--lila);
color: white;
border-radius: 0 0.2em 0.2em;
font-size: 1.5rem;
font-weight: bold;
padding: 0.1em 0.25em;
}
.html {
background: var(--gold);
}
</style>
</head>
<body>
<header>
<img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="logo">
<h1>CSS - vom Entwurf zum Layout - 4</h1>
</header>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="#link_1.html">Wer wir sind</a></li>
<li><a href="#link_2.html">Was wir tun</a></li>
<li><a href="#link_3.html">Wie du helfen kannst</a></li>
<li><a href="#link_4.html">Kontakt</a></li>
</ul>
</nav>
<main>
<h2>Inhalt</h2>
<h3>HTML</h3>
<p>Der Seiteninhalt besteht aus Header, Navigation, Inhaltsbereich (<code>main</code>) und dem Footer.</p>
<p>Was vielen nicht bewusst ist: <span class="html">HTML</span> an sich ist
<a href="https://wiki.selfhtml.org/wiki/Responsiv(es_Webdesign)">responsiv</a> -
Elemente wie Überschriften und Absätze nehmen die gesamte Breite des Viewports ein und brechen überstehenden Text um, so dass er nach unten in einer neuen Zeile dargestellt wird. Erst eine starre Mehrspaltigkeit verhindert die passende Darstellung auf mobilen Geräten.
<h3>Formatierung mit <span class="css">CSS</span></h3>
<p>In einem ersten Schritt hatten wir Farben und Abstände definiert.</p>
<p>Die Seitenelemente werden …<br>auf schmalen Bildschirmen <b>unter-</b>, <br>auf größeren Bildschirmen <b>nebeneinander</b> dargestellt.</p>
<p>Dieses Grid Layout wird mit nur wenigen Zeilen CSS erreicht.</p>
<h2>aktuelle Infos und Termine (h2)</h2>
<aside class="infobox">
<h3>Tipp:</h3>
<p>Untersuche HTML und CSS der Seite mit den <a href="https://wiki.selfhtml.org/wiki/Arbeiten_mit_dem_Seiteninspektor">Entwickler-Tools</a>.</p>
</aside>
<aside class="infobox warning">
<h3>Less is more!</h3>
<p style="font-size:3em;">Einfacher ist besser!</p>
</aside>
<aside class="infobox" >
<h3>Infobox in Grün!</h3>
<p>Die (geteilten) Komplementärfarben zu lila sind orange und grün. Diese können als Farbakzente verwendet werden.</p>
</aside>
<aside class="infobox">
<h3>Form follows function</h3>
<time datetime="2022-12-24 19:00">24.12.2022</time>
<ul>
<li>10:00 Uhr Berlin</li>
<li>14:00 Uhr Bonn</li>
<li>18:00 Uhr Bethlehem</li>
</ul>
</aside>
</main>
<footer>
<h2>Footer</h2>
<a href="#kontakt.html">Kontakt</a>
<p>© 2022 SELFHTML</p>
</footer>
</body>
</html>
