Beispiel:CSS-grid-layout-4-benannte-Linien-2a.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">  
	<title>CSS - vom Entwurf zum Layout -2</title>
	<style>
:root {
	--accent1: #70369b;
	--accentmedium1: #7f4ba5;
	--accentlighter1: #df84de;	
	--accent2: #ea740b;
	--accentlighter2: orange;
	--accent3: lime;
	--backgroundColor: linen;
	--textColor: #333;
	--navColor: #fff;
	--navWidth: 12em;
	--mainWidth: min(48em, calc(100% - var(--navWidth)));
	--headerLineHeight: 3em;
}

body {
	width: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background: var(--backgroundColor);
	color: var(--textColor);
	font-size: 1em;
	font-family: Avenir, Arial, sans-serif; 
}

h1,h2,h3 {
	color: var(--accent1);
	font-family: 'Gloria Hallelujah', cursive;
	text-align:center;
}

h1,h2{
	font-size: 3rem;	
}

header {
	grid-area: head;	
	padding: 2em;
}

nav {
    grid-area: nav;		    
    background: linear-gradient(90deg, var(--accentlighter1), var(--accentmedium1)) ;
    color: var(--navColor);
    padding: 1em;
}

nav h3 {
  color: white;
}

@media (min-width: 30em) {
  body { 
    display: grid;  
    grid-template:	". nav head ." min-content
			". nav rule ." var(--headerLineHeight)
                    ". nav main ." 1fr
                    ". nav foot ." 10em /
					1fr var(--navWidth) var(--mainWidth) 1fr;
    } 
    body::before {
        content: '';
        grid-row: rule;
	grid-column: 1 / 1;
        background: linear-gradient(to right, var(--accent1), var(--accentlighter1));
    }
    body::after {
        content: '';
        grid-row: rule;
	grid-column: rule-start / -1;
        background-image: linear-gradient(to right, var(--accentmedium1), var(--accent1));
    }
}

header, nav, main, article, section, aside, footer {
	border-radius: 0 0.5em 0.5em;
	border: thin solid;
	padding: 10px;
}

header {
	border-color: #d5d5d5;
}

@media (min-width: 30em) {
	nav {
		padding-top: 10em;
	}
}

nav ul {
    list-style: none;
    margin: 0.5em;
    padding: 0;
}

nav li a {
    display: inline-block;
    text-decoration:none;
    color: inherit;
    font-size: 1.5em;  /* mobil größer */
	font-weight: bold;
    padding: 0.2em 1em;
}
@media (min-width: 30em) {
    nav li a {
        font-size: 1rem;  /* jetzt wieder auf Standardschriftgröße */
    }
}
nav li a:hover,
nav li a:focus{
    color:gold;
	background: var(--accent1) /* mediumvioletred */;
}
main {
	grid-area: main;		
	border-color: #df6c20;
}

footer {
	grid-area: foot;		
	border-color: #8a9da8;
}

@media (prefers-color-scheme: dark) {
  /* dunkles Farbschema für die Nacht */
  body, main, footer {
    --textColor: white;
    --backgroundColor: black;
  }

  a {
    color: skyblue;
  }
  h1,h2,h3 {
    color: var(--accentlighter1);
  } 
}

	</style>
</head>

<body>
	<header>
		<img src="/images/a/ad/Selfhtml-beispiel_150.svg" alt="logo">
		<h1>Vom Entwurf zum Layout</h1>
	</header>

	<nav>
    	<h3>Navigation</h3>
		<ul>
			<li><a href="#link_1.html">Startseite</a></li>
			<li><a href="#link_2.html">Unterseite 1</a></li>
			<li><a href="#link_3.html">Unterseite 2</a></li>    
			<li><a href="#link_4.html">Kontakt</a></li>
		</ul>
	</nav>

	<main>
		<h2>Inhalt</h2>
		<p>Header und Footer erhalten nun eine feste Höhe (in <code>em</code>), damit sie nicht überproportional groß scheint, wenn eine (Unter)-Seite wenig Inhalt hat.</p>
		<p>Wenn ein Nutzer im Betriebssystem oder Browser einstellt, dass er einen <em>Dark Mode</em> bevorzugt, erhält die Seite einen dunklen Hintergrund.</p>
		<p>Überschriften werden in einer anderen Schriftart dargestellt!<br>Vergleichen Sie die Schriftgröße der <code>h1</code> und <code>h2</code> mit der <code>h3</code> des Footers.</p>


  </main>
    
	<footer>
  	<h3>Footer</h3>
		<a href="#kontakt.html">Kontakt</a>
		<p>© 2022 SELFHTML</p>
	</footer>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-grid-layout-4-benannte-Linien-2a.html&oldid=90983“