Skip to content

Commit dabc66a

Browse files
jonasfroellerjonasfroeller
committed
docs & chore & typography update
1 parent c22f64f commit dabc66a

10 files changed

Lines changed: 1153 additions & 375 deletions

File tree

‎config.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
:root, html[data-theme="light"] {
2+
--primary-color: #000000;
3+
--secondary-color: grey;
4+
--contrast-color: #ffffff;
5+
--accent-color: rgb(255, 166, 0);
6+
--primary-background: #ffffff;
7+
--secondary-background: #c9c9c9;
8+
--green: rgba(81, 179, 0, 0.486);
9+
--red: rgba(177, 20, 20, 0.473);
10+
--yellow: rgb(226, 230, 29);
11+
--bright: rgb(245, 240, 240);
12+
--medium: rgb(124, 124, 124);
13+
--dark: rgb(30, 30, 30);
14+
--shadow: rgba(0, 0, 0, 0.1);
15+
--skeletonLoading-dark: hsl(200, 20%, 70%);
16+
--skeletonLoading-bright: hsl(200, 20%, 95%);
17+
--border-radius: 0.25rem;
18+
}
19+
20+
@media (prefers-color-scheme: dark) {
21+
:root, html[data-theme="dark"] {
22+
--primary-color: #ffffff;
23+
--secondary-color: grey;
24+
--contrast-color: #000000;
25+
--accent-color: rgb(255, 166, 0);
26+
--primary-background: #000000;
27+
--secondary-background: #424242;
28+
--green: rgba(81, 179, 0, 0.486);
29+
--red: rgba(177, 20, 20, 0.473);
30+
--yellow: rgb(226, 230, 29);
31+
--bright: rgb(245, 240, 240);
32+
--medium: rgb(124, 124, 124);
33+
--dark: rgb(30, 30, 30);
34+
--shadow: rgba(0, 0, 0, 0.1);
35+
--skeletonLoading-dark: hsl(200, 20%, 70%);
36+
--skeletonLoading-bright: hsl(200, 20%, 95%);
37+
--border-radius: 0.25rem;
38+
}
39+
}

‎data.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="icon"
8+
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💾</text></svg>">
9+
<link rel="stylesheet" href="main.css">
10+
<title>Data</title>
11+
</head>
12+
13+
<body>
14+
<header>
15+
<nav>
16+
<ul>
17+
<li><a href="./index.html">about</a></li>
18+
<li><a href="./typography.html">typography</a></li>
19+
<li><a href="./media.html">media</a></li>
20+
<li><a href="./interactive.html">interactive/input</a></li>
21+
<li><a href="#">data</a></li> <!-- # => active -->
22+
</ul>
23+
</nav>
24+
</header>
25+
26+
<main>
27+
<section class="bordered">
28+
<span class="indicator">Progress</span>
29+
<meter value="75" min="0" max="100">75%</meter>
30+
</section>
31+
32+
<section class="bordered">
33+
<span class="indicator">Document</span>
34+
<div class="object-box">
35+
<object data="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"></object>
36+
</div>
37+
38+
<div class="embed-box">
39+
<embed src="./jonecss.css" type="audio/mpeg" height="60" width="144">
40+
</div>
41+
</section>
42+
43+
<section class="bordered">
44+
<span class="indicator">Table</span>
45+
<table>
46+
<caption>Table Caption</caption>
47+
<colgroup>
48+
<col span="1" style="color: var(--contrast-color);">
49+
<col span="2" style="color: var(--secondary-color);">
50+
</colgroup>
51+
<thead>
52+
<tr>
53+
<th>Header 1</th>
54+
<th>Header 2</th>
55+
</tr>
56+
</thead>
57+
<tbody>
58+
<tr>
59+
<td>Cell 1</td>
60+
<td>Cell 2</td>
61+
</tr>
62+
<tr>
63+
<td>Cell 3</td>
64+
<td>Cell 4</td>
65+
</tr>
66+
</tbody>
67+
<tfoot>
68+
<tr>
69+
<td>Footer 1</td>
70+
<td>Footer 2</td>
71+
</tr>
72+
</tfoot>
73+
</table>
74+
</section>
75+
76+
<section class="bordered">
77+
<span class="indicator">Example</span>
78+
</section>
79+
</main>
80+
81+
<footer>
82+
<address>
83+
Email: <a href="j.froe@gmx.at">j.froe@gmx.at</a><br>
84+
</address>
85+
<time datetime="">
86+
<script> document.write(new Date); document.querySelector("time").setAttribute("datetime", new Date) </script>
87+
</time> <br>
88+
<a href="https://jonasfroeller.vercel.app">portfolio</a> <cite>by Jonas Fröller</cite>
89+
</footer>
90+
</body>
91+
92+
</html>

‎experimental.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/* ASIDE */
2+
/* SIDEBAR */
3+
/* Inspiration: https://every-layout.dev/layouts/sidebar/ */
4+
body[data-layout="sidebar"] {
5+
display: flex;
6+
flex-wrap: wrap;
7+
}
8+
9+
body[data-layout="sidebar"] aside {
10+
position: relative;
11+
/* ↓ The width when the sidebar _is_ a sidebar */
12+
flex-basis: 20rem;
13+
flex-grow: 1;
14+
}
15+
16+
body[data-layout="sidebar"] aside ul {
17+
z-index: 999;
18+
top: 0;
19+
padding: 1rem;
20+
position: sticky;
21+
background-color: var(--secondary-background);
22+
list-style-type: none;
23+
display: flex;
24+
flex-direction: column;
25+
flex-wrap: wrap;
26+
gap: 0.25rem;
27+
padding: 0.5rem;
28+
margin: 0rem;
29+
border-bottom-right-radius: var(--border-radius)
30+
}
31+
32+
body[data-layout="sidebar"] aside ul li {
33+
background-color: var(--primary-background);
34+
border-radius: var(--border-radius);
35+
padding: 0.25rem;
36+
list-style: none;
37+
}
38+
39+
body[data-layout="sidebar"] aside ul li input[type="radio"] {
40+
display: none;
41+
}
42+
43+
body[data-layout="sidebar"] aside ul li label, body[data-layout="sidebar"] aside ul li a {
44+
cursor: pointer;
45+
transition: 0.3s;
46+
}
47+
48+
body[data-layout="sidebar"] aside ul li label:hover, body[data-layout="sidebar"] aside ul li a:hover {
49+
padding-left: 1rem;
50+
}
51+
52+
body[data-layout="sidebar"] aside ul li input[type="radio"]:checked+label {
53+
padding-left: 0rem;
54+
color: var(--accent-color);
55+
text-decoration: underline;
56+
}
57+
58+
body[data-layout="sidebar"] aside ul li input[type="radio"]:checked+label::before {
59+
content: "";
60+
display: inline-block;
61+
width: 0.5rem;
62+
height: 0.5rem;
63+
background-color: var(--accent-color);
64+
margin-right: 0.5rem;
65+
}
66+
67+
body[data-layout="sidebar"] aside ul li input[type="radio"]+label {
68+
color: var(--primary-color);
69+
text-decoration: none;
70+
}
71+
72+
body[data-layout="sidebar"] main {
73+
/* ↓ Grow from nothing */
74+
flex-basis: 0;
75+
flex-grow: 999;
76+
/* ↓ Wrap when the elements are of equal width */
77+
min-inline-size: 50%;
78+
}

0 commit comments

Comments
 (0)