-
Notifications
You must be signed in to change notification settings - Fork 0
/
layout.html
141 lines (134 loc) · 5.23 KB
/
layout.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Stylament</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/img/logo.svg" rel="shortcut icon">
<link rel="stylesheet" href="/css/index.scss">
<link rel="stylesheet" href="/css/fonts.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.scss">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.css">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.css">
</head>
<body class="scp-homepage lay-page-center">
<header class="clr-alternate +alt">
<hgroup>
<p>
<svg width="128" height="128" version="1.1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<path d="m64 24-40 12.5 40 6.5 40-6.5z" style="fill: var(--color-primary-500); fill-opacity: .3;" />
<path d="m64 0v24l40 12.5v-16.5z" style="fill: var(--color-primary-500);" />
<path d="m64 0-40 20v16.5l40-12.5z" style="fill: var(--color-primary-700);" />
<path d="m24 91.5 40 12.5 40-12.5-40-6.5z" style="fill: var(--color-secondary-500); fill-opacity: .3;" />
<path d="m64 104v24l40-20v-16.5z" style="fill: var(--color-secondary-500);" />
<path d="m24 91.5 40 12.5v24l-40-20z" style="fill: var(--color-secondary-700);" />
<path d="m67.712 52.567-7.127 22.953 39.631 8.336 4.879-15.713z" style="fill: var(--color-tertiary-500);" />
<path d="m27.801 44.16 39.911 8.4063-7.1272 22.953-37.653-15.678z" style="fill: var(--color-tertiary-700);" />
</svg>
</p>
<h1>Sample Layout</h1>
<p>Centered page. With cover, menu, feature, and several sections in columns.</p>
</hgroup>
</header>
<nav class="var-menu +levelable +foldable +sticky +end">
<input type="checkbox" id="-toggle-state-0">
<label for="-toggle-state-0"></label>
<menu>
<li><a href="#section-one">Section One</a></li>
<li><a href="#section-two">Section Two</a></li>
<li><a href="#section-three">Section Three</a></li>
<li><a href="#section-four">Section Four</a></li>
<li><a href="#section-five">Section Five</a></li>
</menu>
</nav>
<main>
<figure class="~breakout var-feature">
<blockquote>
<p>Always build on solid ground!</p>
</blockquote>
<figcaption><cite>Old wisdom</cite></figcaption>
</figure>
<article class="dev-lorem-ipsum lay-wrap-flex @measure-md">
<section id="section-one">
<h2>Section One</h2>
<p></p>
<p></p>
</section>
<section id="section-two">
<h2>Section Two</h2>
<p></p>
<p></p>
</section>
<section id="section-three">
<h2>Section Three</h2>
<p></p>
<p></p>
</section>
<section id="section-four">
<h2>Section Four</h2>
<p></p>
<p></p>
</section>
<section id="section-five" class="lay-wrap-reset lay-wrap-flex @measure-sm">
<h2 class="lay-wrap-reset">Section Five</h2>
<section id="subsection-five-one">
<h3>Subsection</h3>
<ul>
<li>Listitem ipsum dolor</li>
<li>Listitem cumque perferendis</li>
<li>Listitem sed,</li>
<li>Listitem sequi sunt</li>
<li>Listitem cum animi</li>
</ul>
</section>
<section id="subsection-five-two">
<h3>Subsection</h3>
<ul>
<li>Listitem ipsum dolor</li>
<li>Listitem adipisicing elit</li>
<li>Listitem cumque similique</li>
<li>Listitem dolore,</li>
<li>Listitem quibusdam,</li>
<li>Listitem laudantium,</li>
</ul>
</section>
<section id="subsection-five-three">
<h3>Subsection</h3>
<ul>
<li>Listitem sunt nulla</li>
<li>Listitem voluptatum.</li>
<li>Listitem consectetur adipisicing</li>
<li>Listitem perferendis,</li>
<li>Listitem laudantium,</li>
</ul>
</section>
<section id="subsection-five-four">
<h3>Subsection Four</h3>
<ul class="var-neutral-list lay-wrap-cluster @measure-inf">
<li>Listitem, tempora</li>
<li>Listitem dolorem</li>
<li>Listitem. Voluptas</li>
<li>Listitem dolor sit</li>
<li>Listitem cum animi</li>
<li>Listitem sequi sunt</li>
</ul>
</section>
</section>
</article>
</main>
<footer class="clr-alternate">
<section>
<p class="footer-copyright">© 2023 Simon Schrape</p>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/example/layout.html">Layout example</a></li>
<li><a href="/example/body-copy.html">Body copy example</a></li>
<li><a href="/example/color.html">Color table</a></li>
<li><a href="/example/elements-showcase.html">All elements showcase</a></li>
<li><a href="https://stylament.sim.ilitu.de/sassdoc/index.html">Documentation</a></li>
</ul>
</section>
</footer>
</body>
</html>