Skip to content

Commit 80d88b0

Browse files
ryanveryanve
authored
Initial commit
0 parents  commit 80d88b0

File tree

8 files changed

+221
-0
lines changed

8 files changed

+221
-0
lines changed

‎.editorconfig

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
root = true
2+
3+
[*]
4+
end_of_line = lf
5+
insert_final_newline = true
6+
indent_style = space
7+
indent_size = 2

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.DS_Store

‎README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# [`li`*spy* mural](https://webmural.com/lispy)
2+
3+
* `float`
4+
* `flex`
5+
* `dotted`

‎UNLICENSE.txt

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
This is free and unencumbered software released into the public domain.
2+
3+
Anyone is free to copy, modify, publish, use, compile, sell, or
4+
distribute this software, either in source code form or as a compiled
5+
binary, for any purpose, commercial or non-commercial, and by any
6+
means.
7+
8+
In jurisdictions that recognize copyright laws, the author or authors
9+
of this software dedicate any and all copyright interest in the
10+
software to the public domain. We make this dedication for the benefit
11+
of the public at large and to the detriment of our heirs and
12+
successors. We intend this dedication to be an overt act of
13+
relinquishment in perpetuity of all present and future rights to this
14+
software under copyright law.
15+
16+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19+
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20+
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21+
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22+
OTHER DEALINGS IN THE SOFTWARE.
23+
24+
For more information, please refer to <http://unlicense.org/>

‎hue.css

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/* opensource color from the s9a.page/sea */
2+
:root { --sea-oil:seashell; --sea-ink:#000 }
3+
.sea-amber { --sea-oil: salmon }
4+
.sea-blush { --sea-oil: pink }
5+
.sea-breeze { --sea-oil: mistyrose }
6+
.sea-foam { --sea-oil: darkturquoise }
7+
.sea-fume { --sea-oil: hotpink }
8+
.sea-gel { --sea-oil: mediumslateblue }
9+
.sea-glow { --sea-oil: gold }
10+
.sea-gush { --sea-oil: violet }
11+
.sea-lava { --sea-oil: rosybrown }
12+
.sea-sand { --sea-oil: navajowhite }
13+
.sea-storm { --sea-oil: gainsboro }
14+
.sea-tide { --sea-oil: deepskyblue }
15+
@media (prefers-contrast: less) {
16+
:root { --sea-ink:#111 }
17+
.sea-blush { --sea-oil: lightpink }
18+
.sea-breeze { --sea-oil: bisque }
19+
.sea-fume { --sea-oil: mediumorchid }
20+
.sea-sand { --sea-oil: peachpuff }
21+
.sea-storm { --sea-oil: silver }
22+
.sea-tide { --sea-oil: dodgerblue }
23+
}
24+
@media (prefers-contrast: more) {
25+
.sea-amber { --sea-oil: coral }
26+
.sea-foam { --sea-oil: turquoise }
27+
.sea-gel { --sea-oil: mediumpurple }
28+
.sea-glow { --sea-oil: #ee1 }
29+
.sea-gush { --sea-oil: plum }
30+
.sea-lava { --sea-oil: tan }
31+
}
32+
.sea-wet :not(.sea-dry) {
33+
background-color: none;
34+
color: inherit;
35+
}
36+
.sea-wet ::selection {
37+
background-color: indigo;
38+
color: salmon;
39+
}
40+
.sea-blood.sea-blood {
41+
background-color: var(--sea-oil);
42+
color: var(--sea-ink);
43+
}
44+
.sea-bleed.sea-bleed {
45+
background-color: var(--sea-ink);
46+
color: var(--sea-oil);
47+
}
48+
@media (prefers-color-scheme:light) {
49+
.sea-bleed.sea-blood {
50+
background-color: var(--sea-oil);
51+
color: var(--sea-ink);
52+
}
53+
}

‎hum.css

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
:focus {
6+
outline: .236ch dotted;
7+
}
8+
9+
html {
10+
font-family: sans-serif;
11+
font-size: max(3ch, 2vw + 2vh);
12+
line-height: 1.618;
13+
}
14+
15+
body {
16+
margin: 0;
17+
overflow-wrap: anywhere;
18+
}
19+
20+
article {
21+
margin: 5ch;
22+
margin-left: 3ch;
23+
}
24+
25+
26+
header {
27+
float: left;
28+
display: flex;
29+
flex-flow: column;
30+
align-items: center;
31+
}
32+
33+
h1 {
34+
font-size: 2.618rem;
35+
margin: 0;
36+
padding: 1em;
37+
writing-mode: sideways-lr;
38+
}
39+
40+
ul {
41+
contain: layout;
42+
display: flex;
43+
flex-flow: row wrap;
44+
}
45+
46+
li:nth-child(odd) {
47+
transform: rotate(-18deg);
48+
}
49+
50+
li:nth-child(even) {
51+
transform: rotate(18deg);
52+
}
53+
54+
li {
55+
border-radius: 100%;
56+
box-shadow: 0 0 2em 1em var(--sea-oil);
57+
flex-basis: 33%;
58+
list-style-position: inside;
59+
margin: min(1em, 8%);
60+
min-height: 66vh;
61+
padding-block-start: 1em;
62+
text-align: center;
63+
writing-mode: sideways-lr;
64+
}
65+
66+
li a {
67+
padding: 1ch;
68+
}
69+
70+
ins {
71+
text-decoration: dotted overline .236ch;
72+
}
73+
74+
del {
75+
opacity: .236;
76+
}
77+
78+
a {
79+
border-radius: 100%;
80+
font-weight: 600;
81+
text-decoration: dotted underline .236ch;
82+
}
83+
84+
::marker {
85+
font-size: 1.618em;
86+
}
87+
88+
.disco { list-style-type: disc }
89+
.circus { list-style-type: circle }
90+
.squid { list-style-type: square }
91+
.tiedye { list-style-type: thai }

‎index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="sea-wet sea-blood sea-gush">
3+
<meta charset="utf-8">
4+
5+
<title>lispy mural</title>
6+
7+
<meta name="viewport" content="width=device-width">
8+
<meta name="color-scheme" content="dark light">
9+
<meta name="theme-color" content="violet">
10+
<meta name="description" content="list-style lispy medusa remix">
11+
<meta name="creator" content="*">
12+
13+
<link rel="stylesheet" href="hue.css" media=(color)>
14+
<link rel="stylesheet" href="hum.css" media="all">
15+
<link rel="home" href="https://webmural.com">
16+
<link rel="help" href="/creativesoul">
17+
<link rel="prev" href="/phantombra">
18+
<link rel="next" href="/ollie">
19+
20+
<article>
21+
<header>
22+
<h1><a href="/ali"><code>li</code></a><a href="/ph"><i>spy</i></a></h1>
23+
</header>
24+
<ul aria-label="swample">
25+
<li class="sea-blood sea-fume disco"><a href="/fwdkiss"><code>disc</code><ins>o</ins></a>
26+
<li class="sea-blood sea-blush circus"><a href="/nature">circ<ins>us</ins><del>le</del></a>
27+
<li class="sea-blood sea-amber squid"><a href="/dialon">squ<ins>id</ins><del>ar</del></a>
28+
<li class="sea-blood sea-tide tiedye"><a href="/quintile">tide</a>
29+
</ul>
30+
</article>

‎package.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"scripts": {
3+
"ff": "npm run firefox",
4+
"firefox": "open -a firefox index.html || start firefox index.html",
5+
"start": "npm run firefox",
6+
"test": "npm run firefox",
7+
"posttest": "echo 'validate online'"
8+
}
9+
}

0 commit comments

Comments
 (0)