Skip to content

Commit 8b19f08

Browse files
ryanveryanve
authored
2bcontinued #1 tok
1 parent a2411e0 commit 8b19f08

File tree

4 files changed

+70
-81
lines changed

4 files changed

+70
-81
lines changed

‎index.html

+18-25
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,32 @@
22
<html lang="en-US">
33
<meta charset="utf-8">
44

5-
<title>o3 ≈ ozone</title>
5+
<title>hmusb mural</title>
66

77
<meta name=viewport content="width=device-width">
88
<meta name=color-scheme content="dark light">
99
<meta name=theme-color content="salmon">
10-
<meta name=description content="o3 mural of ozone layer uv abc">
10+
<meta name=description content="hmu:usb fusion mural">
1111

1212
<link rel="stylesheet" href="violet.css" media=(color)>
1313
<link rel="stylesheet" href="ultra.css" media="all">
1414
<link rel="license" href="UNLICENSE.txt">
1515
<link rel="icon" href="ooo.svg">
1616

17-
<base href="https://webmural.com">
17+
<link rel="prev" href="https://webmural.com/o3">
18+
<link rel="help" href="https://webmural.com/a11y">
19+
<link rel="next" href="https://webmural.com/ydy">
1820

19-
<link rel="prev" href="/aya">
20-
<link rel="next" href="/airwaves">
21-
<link rel="next" href="/octopus">
22-
<link rel="prev" href="/deev">
23-
24-
<figure aria-label="ozone flow">
25-
<ul>
26-
<li><a href="/lllllllllll">UV-a</a>
27-
<li><a href="/bruv">UV-b</a>
28-
<li><a href="/violetttear">UV-c</a>
29-
</ul>
30-
<a href="/opacity">
31-
<abbr title="ozone">O3</abbr>
32-
</a>
33-
<ul>
34-
<li><a href="/supra">UV-a</a>
35-
<li><a href="/broove"><small>UV-b</small></a>
36-
</ul>
37-
<figcaption>
38-
All UV-a and some UV-b perme<wbr>ate Ear<wbr>thz oz<wbr>one layer
39-
</figcaption>
40-
</figure>
21+
<main aria-label="ozone flow">
22+
<nav>
23+
<h1>
24+
<a href="https://webmural.com/0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000">
25+
<abbr>hmusb</abbr>
26+
</a>
27+
</h1>
28+
<a href="https://octopus.boo">hitme</a>
29+
<a href="https://webmural.com/mc">universess</a>
30+
<a href="https://webmural.com/swoon">ssherial</a>
31+
<a href="https://webmural.com/mpf">buss</a>
32+
</nav>
33+
</main>

‎ooo.svg

+2-2
Loading

‎ultra.css

+39-47
Original file line numberDiff line numberDiff line change
@@ -3,75 +3,67 @@
33
}
44

55
a {
6+
box-sizing: border-box;
67
border-radius: 100%;
78
display: inline-flex;
9+
margin: auto;
810
padding: 1ch;
9-
text-decoration: dotted line-through;
1011
}
1112

12-
html {
13-
font-family: sans-serif;
14-
font-size: max(3ch, 3vmax + 2vmin);
15-
line-height: 1.618;
16-
}
13+
a:nth-child(odd) { text-decoration: 1ch wavy underline }
14+
a:nth-child(even) { text-decoration: 1ch dotted overline }
1715

18-
body {
19-
margin: auto;
20-
overflow-wrap: anywhere;
21-
padding: 3ch;
16+
nav > a {
17+
flex-basis: 39%;
18+
display: list-item;
19+
list-style: circle inside;
20+
margin-bottom: 1ch;
21+
min-height: 38vmin;
2222
}
2323

24-
figure {
25-
align-items: space-between;
26-
contain: layout;
27-
display: flex;
28-
justify-content: center;
29-
flex-flow: column;
30-
min-height: 100vh;
31-
}
32-
33-
figcaption {
34-
flex-basis: calc(10em / 3);
35-
font-family: monospace;
36-
line-height: calc(4 / 3);
37-
margin: auto;
38-
text-transform: lowercase;
24+
nav > :focus {
25+
list-style: disc inside;
3926
}
4027

41-
ul {
42-
align-items: center;
43-
contain: layout;
44-
display: flex;
45-
justify-content: space-around;
46-
font-size: 1.236em;
28+
::marker {
29+
display: inline-flex;
30+
font-size: 1.618em;
4731
}
4832

49-
ul ~ ul {
50-
font-size: 1em;
33+
html {
34+
font-family: sans-serif;
35+
font-size: max(3ch, 2vmax + 3vmin);
36+
line-height: 1.618;
5137
}
5238

53-
li {
54-
display: inline-flex;
39+
body {
40+
margin: auto;
41+
overflow-wrap: anywhere;
42+
padding: 1rem;
5543
}
5644

57-
abbr {
58-
font-size: 1.618em;
59-
line-height: 1;
45+
h1 {
46+
font-size: 2.618em;
47+
flex-basis: 62%;
6048
margin: auto;
49+
margin-inline: auto 0;
50+
margin-block: 38vh;
6151
}
6252

63-
small {
64-
font-size: .8rem;
53+
abbr {
54+
display: inline-flex;
55+
transform: rotate(3deg);
6556
}
6657

67-
@media (orientation: portrait) {
68-
ul {
69-
flex-flow: column;
70-
}
58+
nav {
59+
align-items: space-between;
60+
display: flex;
61+
justify-content: center;
62+
flex-flow: column wrap;
7163
}
7264

7365
@media (orientation: landscape) {
74-
figcaption {
75-
writing-mode: sideways-lr;
66+
nav {
67+
flex-direction: row;
7668
}
77-
}
69+
}

‎violet.css

+11-7
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,31 @@
44
}
55

66
:any-link {
7-
background: hotpink;
8-
color: inherit;
7+
background: purple;
8+
color: #ec0;
99
transition: 333ms ease-out;
1010
}
1111

1212
:any-link:only-child {
13-
background: salmon;
13+
background: indigo;
1414
}
1515

1616
:focus {
17-
filter: hue-rotate(-36deg);
17+
filter: hue-rotate(-72deg);
1818
outline: .2ch double;
1919
}
2020

2121
:active {
22-
filter: hue-rotate(-72deg);
22+
filter: hue-rotate(-144deg);
23+
}
24+
25+
a:active {
26+
filter: hue-rotate(-108deg);
2327
}
2428

2529
html {
26-
background: mediumpurple;
30+
background: #ec0;
2731
background-image: linear-gradient(0turn, #1ed 0%, transparent 38%, transparent 62%, #cd2);
2832
color: #121113;
2933
transition: 333ms ease-in;
30-
}
34+
}

0 commit comments

Comments
 (0)