Skip to content

Commit

Permalink
howthegamego #1
Browse files Browse the repository at this point in the history
  • Loading branch information
ryanve authored Dec 8, 2023
1 parent 437755e commit 4e719a9
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 81 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
### [`bluv` mural](https://webmural.com/bluv)
### [poft mural](https://webmural.com/poft)

[`tape` sample](https://s9a.page/tape)
[tape](https://s9a.page/tape) [shadow mixture](poft.css)
71 changes: 55 additions & 16 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,71 @@
<html lang="en-US" class="tape-bluv tape-flow">
<meta charset="utf-8">

<title>bluv mural</title>
<title>poft mural shadow play</title>

<meta name=viewport content="width=device-width">
<meta name=color-scheme content="dark light">
<meta name=theme-color content="">
<meta name=description content="bee love tape">

<link rel="stylesheet" href="luv.css" media=(color)>
<link rel="stylesheet" href="lev.css" media="all">
<link rel="stylesheet" href="poft.css" media=(color)>
<link rel="stylesheet" href="loft.css" media="all">
<link rel="license" href="UNLICENSE.txt">
<link rel="prev" href="/o3">
<link rel="next" href="/ol">

<nav aria-label="ozone flow">
<h1 class="tape-bluv">
<a href="../avua">bluv</a>
<h1 class="tape-flow">
<a class="tape-flow poft bulb" href="https://webmural.com/#like">poft</a>
<a class="tape-flow poft pulp" href="https://octopus.boo">plenty<br>of f<span class="feet bulb">ee</span>t</a>
</h1>
<ul>
<li><a class="tape-loud" href="../bruv">bee</a>
<li><a class="tape-watt" href="../placebo">luv</a>
<li><a class="tape-play" href="../bruv">bruv</a>
<li><a class="tape-play" href="../violetttear">÷÷÷ear</a>
<li><a class="tape-bluv" href="https://s9a.page/tape">+⋇pe</a>
<li><a class="tape-loud" href="../deev">deev</a>
<li><a class="tape-play" href="../bat">+++++++++</a>
<li><a class="tape-luvu" href="https://s9a.page/E">E</a>
<li><a class="tape-luvu" href="../o3">ozone</a>
</ul>
<p>
<a class="tape-flow poft" href="../0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000">
⓪⓿
⓿⓪⓪
⓪⓪⓿⓿⓿
𑱐𑱐𑱐꧰꧰꧰𑓐𑓐
𑱐𑱐𑱐⓿꧰⓿𑓐𑓐
⓿⓿꧰꧰꧰
𑱐𑱐〇
〇⓪
𑓐
𑓐〇
〇𑓐𑓐
〇〇〇𑓐𑓐
𑱐𑱐𑱐𑓐𑓐ººº
𑱐𑱐𑱐〇〇〇〇〇
〇〇〇𑱐𑱐
𑱐〇〇
〇𑱐
𑱐
꧰꧐
꧐〇꧰
꧰꧰〇꧐꧐
〇〇꧐꧐𑱐ººº
</a>
</p>
</nav>

<footer hidden>
<a class="tape-loud" href="../bruv">%%%%</a>
<a class="tape-watt" href="../placebo">@@@@@@@</a>
<a class="tape-play" href="../swoon">$$$$$</a>
<a class="tape-play" href="../violetttear">÷÷÷</a>
<a class="tape-bluv" href="https://s9a.page/tape"></a>
<a class="tape-loud" href="../deev">****</a>
<a class="tape-play" href="../bat">+++++++++</a>
<a class="tape-luvu" href="https://s9a.page/E">E</a>
<a class="tape-luvu" href="../octopus">oo</a>
<a class="tape-bluv" href="../bluv">≈≈≈≈</a>
<a class="tape-play" href="../supra">#####</a>
<a class="tape-luvu" href="../magnet">+/-</a>
</footer>
55 changes: 0 additions & 55 deletions lev.css

This file was deleted.

37 changes: 37 additions & 0 deletions loft.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
* {
box-sizing: border-box;
}

a {
flex-basis: 20%;
display: inline-block;
padding: 1ch;
text-decoration: dotted overline;
}

h1 {
display: flex;
align-items: center;
flex-flow: column;
margin: auto;
padding-block: 3ex;
}

html {
font-family: sans-serif;
font-size: max(2em, 3vmax + 3vmin);
line-height: 1.618;
}

body {
border: 0rem solid;
margin: 0;
overflow-wrap: anywhere;
padding: 1ch;
}

p { margin: 5em -1em 1em }
.pulp { font-size: 2rem }
.bulb { font-size: 3rem }


46 changes: 38 additions & 8 deletions luv.css → poft.css
Original file line number Diff line number Diff line change
@@ -1,16 +1,46 @@
/* https://s9a.page/tape */
: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}

::selection {
background: deeppink;
color: #0e0e0e;
/* play */

:root {
--tape-play: #e2e;
--tape-luvu: aquamarine;
--tape-blaq: chocolate;
}

:focus-within {
--tape-filter: hue-rotate(9deg);
::selection {
background: darkviolet;
color: gold;
}

:focus {
--tape-filter: hue-rotate(-72deg);
outline: thick outset;
}
outline: .5rem dotted blueviolet;
}

.poft {
text-shadow:
0 1vh 0 blueviolet,
0 2vh 0 darkviolet,
-2rem -2rem 2pc magenta,
-1rem -1rem 1pc magenta,
3rem -3rem 3pc cyan,
5rem -5rem 5pc cyan;
}

.feet {
text-shadow:
0 1vh 0,
0 2vh 0,
0 3vh 0 blueviolet,
0 5vh 0 darkviolet,
0rem 3rem 1pc magenta,
0rem 2rem 2pc magenta,
0rem 1rem 1pc magenta,
0rem 2rem 2pc darkviolet,
0rem 3rem 3pc darkviolet,
0rem 5rem 3pc darkviolet,
0rem 8rem 3pc plum,
0rem 8rem 3pc salmon,
0rem 8rem 3pc blueviolet;
}

0 comments on commit 4e719a9

Please sign in to comment.