Skip to content

Commit

Permalink
#89 snowflakes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryanve
ryanve authored Sep 5, 2024
1 parent 51a0c38 commit 01e48be
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 63 deletions.
31 changes: 11 additions & 20 deletions fresh.css
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,27 @@
::selection {
color: indigo;
color: #0e0e0e;
background: deepskyblue;
}

:any-link {
touch-action: manipulation;
}

.jump {
background: none;
}

:focus {
outline-color: currentColor;
outline-style: outset;
outline-offset: .1ex;
outline-width: .1rem;
outline-offset: .146ch;
outline-width: .146rem;
}

.fame {
font-family: sans-serif;
font-size: calc(1em + 1vw + 1vh);
line-height: 1.33333;
line-height: calc(4 / 3);
}

.hood {
contain: layout;
contain: style layout;
display: block;
margin: 0;
}
Expand All @@ -38,7 +34,8 @@

.pad {
padding: 1rem;
padding: calc(1rem + 1vh) calc(1rem + 1vw);
padding-block: calc(1rem + 1vh);
padding-inline: calc(1rem + 1vw);
}

.calm { font: inherit }
Expand All @@ -47,14 +44,8 @@
.lowkey { text-transform: lowercase }
.exhale { margin-bottom: 1rem }

/***********************************
github.com/s9a/s9a.github.io/pull/55
***********************************/
.surf { text-decoration: none }
.surf:focus {
text-decoration: underline;
text-decoration: underline dashed;
}
.surf:hover {
text-decoration: underline;
@supports (--rainbow:7) {
.surf { text-decoration:none wavy }
.surf:focus { text-decoration:underline dashed }
.surf:hover { text-decoration:underline solid }
}
6 changes: 3 additions & 3 deletions frozen.css
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
/*
be tape my friend
https://s9a.page/tape
https://github.com/s9a/tape/releases/v0.8.0
https://s9a.org/tape/releases/v0.8.0
*/
:root{--tape-filter:none;--tape-bluv:#11dff1;--tape-play:#fbbfff;--tape-loud:#eee833;--tape-luvu:#44f477;--tape-blaq:#0e0e0e;--tape-watt:#e0e0e0;--tape-hex:#e0e0e0;--tape-mix:transparent}.tape-watt{--tape-hex:var(--tape-watt)}.tape-luvu{--tape-hex:var(--tape-luvu)}.tape-loud{--tape-hex:var(--tape-loud)}.tape-play{--tape-hex:var(--tape-play)}.tape-bluv{--tape-hex:var(--tape-bluv)}.tape-flat{border-color:transparent}.tape-flap{border-color:currentColor}.tape-flow{--tape-remix:none}.tape-flow :not(.tape-skip){background-color:transparent;color:inherit}.tape-blaq,.tape-bluv,.tape-loud,.tape-luvu,.tape-play,.tape-watt{--tape-mix:var(--tape-hex);--tape-remix:none;color:var(--tape-blaq)!important;background-color:var(--tape-mix)!important;background-image:var(--tape-remix);filter:var(--tape-filter)}.tape-blaq{--tape-mix:var(--tape-blaq);color:var(--tape-hex)!important}.tape-erase,.tape-erase *{color:transparent!important}

/*
iffy◒ color typhoon
https:s9a.page/iffy
iffy color typhoon
https://s9a.page/iffy
*/
.iyff {filter:hue-rotate(-288deg)}
.ffiy {filter:hue-rotate(288deg)}
Expand Down
85 changes: 46 additions & 39 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang=en-US class="fame tape-flow tape-loud">
<html lang=en-US class="fouc fame tape-flow tape-loud">
<meta charset=utf-8>

<title>s9a aka synesthesia</title>
Expand All @@ -8,8 +8,12 @@
<meta name="viewport" content="width=device-width">
<meta name="description" content="next level web color made with imagination and web standards">

<link rel="stylesheet" href="fresh.css">
<style>
.fouc { background-color: #bae }
</style>

<link rel="stylesheet" href="frozen.css" media="(color)">
<link rel="stylesheet" href="fresh.css">

<base data-www href=.>
<script data-local>
Expand All @@ -27,73 +31,73 @@

<header class="hood pad tape-watt">
<h1 class="hood hella">
<a class="surf viola blueviolet" href="/">s9a</a>
<a class="surf iffy" href="/">s9a</a>
</h1>
<p class="nah lowkey">
<a href="dream" class="tape-bluv">dream</a>
<a href="dream" class="tape-bluv" style="--tape-hex:#bed">dream</a>
<a href="tape" class="tape-play">vivid</a>
<a href="https://webmural.com" class="tape-bluv">web</a>
<a href="https://webmural.com/rainbov" class="tape-play">color</a>
<a href="https://webmural.com" class="tape-loud">web</a>
<a href="https://webmural.com/rainbov" class="tape-loud ffiy">color</a>
<a href="license" class="tape-flow">code</a>
</p>
</header>

<figure class="hood pad viola violet" id="opener">
<figure class="hood pad tape-watt" style="--tape-hex:#bae4ea" id="opener">
<h2 class="hood exhale calm bold">
<a class="surf jump lowkey" href="natal">opener</a>
<a class="surf lowkey tape-loud" href="boost">opener</a>
</h2>
<ul class="nah exhale">
<li class="hella"><a class="surf tape-loud" href="1111">1111</a>
<li class="hella"><a class="surf tape-luvu yiff" href="nosh">nosh</a>
<li class="hella"><a class="surf tape-loud" style="--tape-hex:turquoise" href="1111">1111</a>
<li class="hella"><a class="surf tape-luvu" href="nosh">nosh</a>
<li class="hella"><a class="surf iffy" href="iffy">iffy</a>
<li class="hella"><a class="surf viola violet ouija" href="violet">violet</a>
<li class="hella"><a class="surf tape-loud" href="yr">yr<span class="tape-bluv"> w*</span></a>
<li class="hella"><a class="surf viola violet" href="violet">violet</a>
<li class="hella"><a class="surf tape-loud" href="volume">volume</a>
<li class="hella"><a class="surf tape-bluv" href="yr">yr</a>
<li class="hella"><a class="surf yffi yiff" href="reef"><span class="iffy">re</span>ef</a>
<li class="hella"><a class="surf tape-bluv" href="bluetang">blue<span class="tape-blaq">tang</span></a>
</ul>
</figure>

<figure class="hood pad tape-bluv" id="enjoy" style="--tape-hex:#bae">
<figure class="hood pad tape-bluv" id="enjoy">
<h2 class="hood exhale calm bold">
<a class="surf jump lowkey tape=green" href="j29">enjoy</a>
<a class="surf lowkey tape-watt" href="tagging">enjoy</a>
</h2>
<ul class="nah exhale">
<li class="hella"><a class="surf viola darkviolet" href="angel">angel</a>
<li class="hella"><a class="surf yffi" href="orb">orb</a>
<li class="hella"><a class="surf iffy" href="mochi">mochi</a>
<li class="hella"><a class="surf yffi" href="contrast">contrast</a>
<li class="hella"><a class="surf tape-loud ffiy" href="hue">hue</a>
<li class="hella"><a class="surf yffi" href="mochi">mochi</a>
<li class="hella"><a class="surf tape-loud ffiy" href="contrast">contrast</a>
<li class="hella"><a class="surf tape-bluv ffiy" href="snooze">snooze</a>
<li class="hella"><a class="surf tape-watt" href="angel">angel</a>
<li class="hella"><a class="surf yffi" href="orb">orb</a>
</ul>
</figure>

<figure class="hood pad tape-watt" id="explore">
<h2 class="hood exhale calm bold">
<a class="surf jump lowkey" href="hellotape">hellö</a>
<a class="surf lowkey tape-luvu" href="hellotape">hellö</a>
</h2>
<ul class="nah exhale">
<li class="hella"><a class="surf tape-watt" href="bae" style="--tape-hex:#bae">bae</a>
<li class="hella"><a class="surf yffi ffiy" href="cab">cab</a>
<li class="hella"><a class="surf tape-play" href="sea">sea</a>
<li class="hella"><a class="surf tape-bluv" href="presampler" rel="prev">rewind</a>
<li class="hella"><a class="surf tape-luvu" href="tape">tḁpe</a>
<li class="hella"><a class="surf yffi ffiy" href="cab">abc</a>
<li class="hella"><a class="surf tape-play" href="j29"><span class="tape-play" style="--tape-hex:deeppink">jjjjjjjjjjjjj</span>jjjjjjjj</a>
<li class="hella"><a class="surf tape-bluv" href="presampler" rel="prev">re<wbr>wind</a>
<li class="hella"><a class="surf tape-play" href="tape">tḁpe</a>
</ul>
</figure>

<figure class="hood pad tape-bluv" id="connect">
<h2 class="hood exhale calm bold">
<a class="surf jump lowkey" href="#connect">Connect</a>
<figure class="hood pad tape-loud ffiy" id="connect">
<h2 class="hood exhale calm bold iyff">
<a class="surf lowkey tape-bluv" href="yesp">Connect</a>
</h2>
<ul class="nah">
<ul class="nah iyff">
<li class="hella"><a class="surf tape-loud" style="--tape-hex:turquoise" href="https://porpoise.page">p2p</a>
<li class="hella"><a class="surf viola blueviolet" href="https://github.com/sponsors/s9a">github</a>
<li class="hella"><a class="surf tape-watt" href="https://opencollective.com/s9a">open<wbr>collective</a>
<li class="hella"><a class="surf tape-play" href="https://x.com/colorfulcode"><span class="pad">x</span></a>
<li class="hella"><a class="surf viola violet" href="https://x.com/colorfulcode"><span class="pad">x</span></a>
</ul>
</figure>

<figure class="hood pad tape-bluv" id="sampler" style="--tape-hex:blueviolet">
<h2 class="hood exhale calm bold">
<a class="surf jump lowkey tape-bluv" href="templates">sampler</a>
<a class="surf lowkey tape-bluv" href="templates">sampler</a>
</h2>
<ul class="nah" style="--tape-luvu:greenyellow">
<li class="hella"><a class="surf tape-play" href="http://numb.page">∞</a><a class="surf tape-loud" href="https://webmural.com/testing">/0</a>
Expand All @@ -109,17 +113,20 @@ <h2 class="hood exhale calm bold">

<figure class="hood pad tape-bluv tape-blaq" id="deep" style="--tape-blaq:#528">
<h2 class="hood exhale calm bold">
<a class="surf jump lowkey" href="selfie">deep cuts</a>
<a class="surf lowkey" href="selfie">deep cuts</a>
</h2>
<ul class="nah exhale">
<li class="hella"><a class="surf tape-play" href="firefly" style="--tape-hex:#fa8">fírefly</a>
<li class="hella"><a class="surf tape-loud" href="sea" style="--tape-hex:#ee1">sea</a>
<li class="hella"><a class="surf tape-luvu" href="cake">cake</a>
<li class="hella"><a class="surf tape-bluv" href="reef">reef</a>
<li class="hella"><a class="surf tape-play" href="firefly" style="--tape-hex:#fa8;--tape-filter:hue-rotate(-60deg)">fírefly</a>
<li class="hella"><a class="surf tape-bluv" href="sea">sea</a><a class="surf tape-watt" href="cake">cake</a>
<li class="hella"><a class="surf tape-loud ffiy" href="hue">hue</a>
<li class="hella"><a class="surf tape-loud" href="memia">memia</a>
<li class="hella"><a class="surf tape-luvu" href="nymph">nym<mark class="tape-bluv" style="--tape-hex:turquoise">pH</mark></a>
<li class="hella"><a class="surf tape-bluv" href="atmosphere">atmos<mark class="tape-luvu" style="--tape-hex:deepskyblue">pH</mark>ere</a>
<li class="hella"><a class="surf tape-bluv" style="--tape-hex:deepskyblue" href="oracle">oracle</a>
<li class="hella"><a class="surf tape-play" style="--tape-hex:magenta" href="cuerpo">cuerpo</a>
<li class="hella"><a class="surf tape-play" style="--tape-hex:deeppink" href="https://ryanve.com">speak</a>
<li class="hella"><a class="surf tape-play" style="--tape-hex:magenta" href="terms">smert</a>
<li class="hella"><a class="surf tape-loud" href="cuerpo" lang="es-CO"><b>c</b>uerpo</a>
<li class="hella"><a class="surf tape-play" style="--tape-hex:deeppink" href="https://ryanve.com"><b>s</b>peak</a>
<li class="hella"><a class="surf tape-play" style="--tape-hex:magenta" href="terms"><b>s</b>mert</a>
<li class="hella"><a class="surf tape-loud" href="puravida" lang="es-CR"><span class="tape-play">pura</span><span class="tape-bluv">vida</span></a>
<li class="hella"><a class="surf tape-loud" style="--tape-blaq:rebeccapurple" href="https://webmural.com">graF&deg;</a>
<li class="hella"><a class="surf tape-loud" href="E">E=</a>
</ul>
Expand Down
8 changes: 7 additions & 1 deletion sitemap.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ https://s9a.page/durazno
https://s9a.page/dm
https://s9a.page/E
https://s9a.page/e40
https://s9a.page/elftile
https://s9a.page/feels
https://s9a.page/firefly
https://s9a.page/flamingo
Expand Down Expand Up @@ -66,6 +67,7 @@ https://s9a.page/lotus
https://s9a.page/luna
https://s9a.page/magma
https://s9a.page/marker
https://s9a.page/memia
https://s9a.page/mindful
https://s9a.page/mochi
https://s9a.page/moon
Expand All @@ -86,8 +88,10 @@ https://s9a.page/peach
https://s9a.page/peels
https://s9a.page/pepper
https://s9a.page/porpoise
https://s9a.page/puravida
https://s9a.page/purple
https://s9a.page/presampler
https://s9a.page/qase
https://s9a.page/quintile
https://s9a.page/rebecca
https://s9a.page/reef
Expand All @@ -98,10 +102,11 @@ https://s9a.page/seashell
https://s9a.page/selfie
https://s9a.page/session
https://s9a.page/signals
https://s9a.page/snooze
https://s9a.page/sound
https://s9a.page/space
https://s9a.page/spice
https://s9a.page/sponge
https://s9a.page/sound
https://s9a.page/surge
https://s9a.page/synth
https://s9a.page/tagging
Expand All @@ -116,6 +121,7 @@ https://s9a.page/v11y
https://s9a.page/violet
https://s9a.page/volume
https://s9a.page/wave
https://s9a.page/yesp
https://s9a.page/yhma
https://s9a.page/ylma
https://s9a.page/yr
Expand Down

0 comments on commit 01e48be

Please sign in to comment.