-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
82 lines (71 loc) · 6.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html class="no-js" lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>s1410238047 - features of editorial design in modern frontend web development</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<div class="nav">
<h1>Editorial CSS Playground</h1>
<hr>
<nav class="nav__toggles">
<ul>
<li><a class="type" href="#">styled typeface</a></li>
<li><a class="basefontsize" href="#">base font size</a></li>
<li><a class="maxwidth" href="#">section max width</a></li>
<li><a class="lineheight" href="#">line height</a></li>
<li><a class="headlinestyles" href="#">headline styling</a></li>
<li><a class="paragraph--indent" href="#">paragraph indent</a></li>
<li><a class="paragraph--spacing" href="#">paragraph-spacing</a></li>
<li><a class="hyphenation" href="#">auto hyphenation</a></li>
<li><a class="initial" href="#">drop initial</a></li>
<li><a class="justify" href="#">justify text</a></li>
<li><a class="smallcaps" href="#">headline small caps</a></li>
<li><a class="ligatures" href="#">ligatures</a></li>
<li><a class="oldstyle" href="#">oldstyle numbers</a></li>
<li><a class="linkstyles" href="#">hyperlink styling</a></li>
<li><a class="dividers" href="#">styled dividers</a></li>
<li><a class="intro" href="#">intro formatting</a></li>
</ul>
</nav>
<hr>
<p>Toggle CSS features above. Some of the features might only work after the serif typeface has been selected.</p><p>This is a snapshot, please check the latest build on <a href="https://github.com/mnlmaier/editorial-playground">Github</a>.
</div>
<main class="main">
<div class="main__features"><span class="main__features--list">Manuel Maier / S1410238047 / University of Applied Sciences, Upper Austria</span></div>
<div class="main__wrapper">
<section id="01">
<h1>Hier steht eine H1.</h1>
<p class="intro">Editorial Design 1/2 1st gehört seit jeher zum Repertoire eines jeden guten Gestalters. Dabei ist diese Form der Informationsvermittlung beinahe so alt wie Schrift selbst—wo frühe literarische Werke aufwändig von Hand gestaltet…</p>
<hr>
<p>Editorial Design 1/2 1st gehört seit jeher zum Repertoire eines jeden guten Gestalters. Dabei ist diese Form der Informationsvermittlung beinahe so alt wie Schrift selbst—wo frühe literarische Werke aufwändig von Hand gestaltet, verziert und ausgeschmückt wurden, hat die Erfindung des Buchdrucks im 15. Jahrhundert den Grundstein für die massentaugliche Verwendung von <a href="#">Raster, Schriftsatz, Mikro- und Makrotypografie</a>, und für alle im heutigen Printdesign relevanten Gestaltungsmittel gelegt. Der große Vorteil dabei: Printgestaltung muss auf genau ein Medium optimiert werden, die Regeln dazu haben über Jahrhunderte bestand.</p>
<h2>Eine H2-Headline…</h2>
<p>Dagegen wird mit dem heutigen Fortschritt der digitalen Informationsverbreitung zunehmend die Frage nach hochwertiger Aufbereitung von Inhalten auf verschiedensten, crossmedialen Plattformen laut. Konnten sich Gestalter bisher auf ein jahrhundertelang bewährtes Medium konzentrieren, so wird Editorial Design zunehmend anders, vor allen Dingen individueller und für den Gestalter unberechenbarer wahrgenommen. Abhängig vom Endgerät, auf dem der Konsument den Content abruft, müssen verschiedenste Faktoren berücksichtig werden, ohne die ein optimaler Informationsfluss—auch über Devicegrenzen hinaus—nicht gewährleistet werden kann.</p>
<p>Dagegen wird mit dem heutigen Fortschritt der digitalen Informationsverbreitung zunehmend die Frage nach hochwertiger Aufbereitung von Inhalten auf verschiedensten, crossmedialen Plattformen laut. Konnten sich Gestalter bisher auf ein jahrhundertelang bewährtes Medium konzentrieren, so wird Editorial Design zunehmend anders, vor allen Dingen individueller und für den Gestalter unberechenbarer wahrgenommen. Abhängig vom Endgerät, auf dem der Konsument den Content abruft, müssen verschiedenste Faktoren berücksichtig werden, ohne die ein optimaler Informationsfluss—auch über Devicegrenzen hinaus—nicht gewährleistet werden kann.</p>
<h3>Und hier eine h3.</h3>
<p>Ziel dieser Arbeit ist nun, die optimalen Herangehensweisen an das Editorial Design im Responsive Web herauszuarbeiten und allgemeine Lösungsansätze für die häufigsten Problemstellungen zu formulieren.</p>
</section>
<section id="two">
<span class="hint">Verwendet wird die <em>Georgia</em> in <em>16px</em>. Absätze werden je nach Kontext automatisch eingerückt.</span>
<p>Editorial Design gehört seit jeher zum Repertoire eines jeden guten Gestalters. Dabei ist diese Form der Informationsvermittlung beinahe so alt wie Schrift selbst—wo frühe literarische Werke aufwändig von Hand gestaltet, verziert und ausgeschmückt wurden, hat die Erfindung des Buchdrucks im 15. Jahrhundert den Grundstein für die massentaugliche Verwendung von Raster, Schriftsatz, Mikro- und Makrotypografie, und für alle im heutigen Printdesign relevanten Gestaltungsmittel gelegt. Der große Vorteil dabei: Printgestaltung muss auf genau ein Medium optimiert werden, die Regeln dazu haben über Jahrhunderte bestand.</p>
<p>Dagegen wird mit dem heutigen Fortschritt der digitalen Informationsverbreitung zunehmend die Frage nach hochwertiger Aufbereitung von Inhalten auf verschiedensten, crossmedialen Plattformen laut. Konnten sich Gestalter bisher auf ein jahrhundertelang bewährtes Medium konzentrieren, so wird Editorial Design zunehmend anders, vor allen Dingen individueller und für den Gestalter unberechenbarer wahrgenommen. Abhängig vom Endgerät, auf dem der Konsument den Content abruft, müssen verschiedenste Faktoren berücksichtig werden, ohne die ein optimaler Informationsfluss—auch über Devicegrenzen hinaus—nicht gewährleistet werden kann. Ziel dieser Arbeit ist nun, die optimalen Herangehensweisen an das Editorial Design im Responsive Web herauszuarbeiten und allgemeine Lösungsansätze für die häufigsten Problemstellungen zu formulieren.</p>
</section>
</div>
</main>
<script src="https://use.typekit.net/nya6zim.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<script src="js/features.js"></script>
</body>
</html>