diff options
| author | Tyler Murphy <tylerm@tylerm.dev> | 2023-07-08 23:30:33 -0400 |
|---|---|---|
| committer | Tyler Murphy <tylerm@tylerm.dev> | 2023-07-08 23:30:33 -0400 |
| commit | ccf6bef34ceaae6e28dacdb18b6eebdf67ad5094 (patch) | |
| tree | 106ea2345204a70bf6457e9ba8e1e33a1442cb5e /public | |
| download | bucket-ccf6bef34ceaae6e28dacdb18b6eebdf67ad5094.tar.gz bucket-ccf6bef34ceaae6e28dacdb18b6eebdf67ad5094.tar.bz2 bucket-ccf6bef34ceaae6e28dacdb18b6eebdf67ad5094.zip | |
bucket
Diffstat (limited to 'public')
| -rw-r--r-- | public/static/main.css | 117 | ||||
| -rw-r--r-- | public/static/merriweather.ttf | bin | 0 -> 149120 bytes | |||
| -rw-r--r-- | public/static/white.css | 11 | ||||
| -rw-r--r-- | public/templates/embed.html | 19 |
4 files changed, 147 insertions, 0 deletions
diff --git a/public/static/main.css b/public/static/main.css new file mode 100644 index 0000000..b51a997 --- /dev/null +++ b/public/static/main.css @@ -0,0 +1,117 @@ +@font-face { + font-family: merriweather; + src: url("/static/merriweather.ttf"); +} + +:root { + --red: #ffcaca; + --orange: #ffedc1; + --yellow: #feffb8; + --green: #c4ffcb; + --blue: #add8ff; + --purple: #ccafe9; + + --darkgreen: #3E885B; + --darkblue: #7fb4f5; + + + --background: #454545; + + + --rainbowright: linear-gradient(to right, var(--red) 0%, var(--orange) 20%, var(--yellow) 40%, var(--green) 60%, var(--blue) 80%, var(--purple) 100%); +} + +* { + font-family: merriweather, Georgia, serif; + color: var(--purple); +} + +html { + background-color: var(--background); +} + +html, body { + height: 100%; + margin: 0; + box-sizing: border-box; +} + + +body { + display: flex; + + padding: 0.5em; + + flex-wrap: wrap; + justify-content: space-evenly; + align-content: center; +} + +a { + display: inline-block; + color: inherit; + position: relative; + text-decoration: none; + transition: linear 0.2s; + color: var(--purple); +} + +a:before { + background: var(--rainbowright); + content: ''; + height: 2px; + position: absolute; + bottom: -1.5px; + width: 100%; + left: 50%; + transform: translateX(-50%); + transition: width 0.2s ease-in-out; +} + +a:hover{ + color: var(--white); +} + +a:hover:before{ + width: 0; +} + +#left { text-align: left; } +#mid { text-align: center; } +#right { text-align: right; } + +#left, #right { + flex-grow: 1; + flex-basis: 0; +} + +#header span { + animation-delay: var(--n); + animation: wave 1.5s linear var(--n) infinite forwards running, rainbow 3s linear var(--n) infinite forwards running; + position: relative; + display: inline-block; +} + +@media screen and (prefers-reduced-motion: reduce) { + #header span { + animation: none; + } +} + +@keyframes wave { + 0% {top: 0px;} + 25% {top: -1px;} + 50% {top: 0px;} + 75% {top: 1px;} + 100% {top: 0px;} +} + +@keyframes rainbow { + 0% {color: var(--red);} + 17% {color: var(--orange);} + 33% {color: var(--yellow);} + 50% {color: var(--green);} + 67% {color: var(--blue);} + 83% {color: var(--purple);} + 100% {color: var(--red);} +} diff --git a/public/static/merriweather.ttf b/public/static/merriweather.ttf Binary files differnew file mode 100644 index 0000000..3fecc77 --- /dev/null +++ b/public/static/merriweather.ttf diff --git a/public/static/white.css b/public/static/white.css new file mode 100644 index 0000000..c4ba208 --- /dev/null +++ b/public/static/white.css @@ -0,0 +1,11 @@ +:root { + --red: #B80000 !important; + --orange: #B88400 !important; + --yellow: #B5B800 !important; + --green: #00B815 !important; + --blue: #0069CC !important; + --purple: #7030B0 !important; + --background: #fefefa !important; + --rainbowright: linear-gradient(to right, var(--red) 0%, var(--orange) 20%, var(--yellow) 40%, var(--green) 60%, var(--blue) 80%, var(--purple) 100%) !important; + --hrainbow: linear-gradient(to right, #FFFFFF00 0%, var(--lessred) 14%, var(--orange) 28%, var(--yellow) 42%, var(--green) 56%, var(--blue) 70%, var(--lesspurple) 84%, #FFFFFF00 100%) !important; +} diff --git a/public/templates/embed.html b/public/templates/embed.html new file mode 100644 index 0000000..d1fbf4a --- /dev/null +++ b/public/templates/embed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr"> + <head> + <meta charset="utf-8"> + <base target="_parent"> + <link rel="stylesheet" href="/static/main.css"> + {% if theme == "white" %} + <link rel="stylesheet" href="/static/white.css"> + {% endif %} + </head> + <body> + <span id="left">⥼ <a href="{{ prev }}" id="prev">prev</a></span> + <span id="mid"> 🏳️🌈 <a href="https://webring.bucketfish.me" id="header"> + <span style="--n: -10000ms">b</span><span style="--n: -9900ms">u</span><span style="--n: -9800ms">c</span><span style="--n: -9700ms">k</span><span style="--n: -9600ms">e</span><span style="--n: -9500ms">t</span><span style="--n: -9400ms"></span> + <span style="--n: -9300ms">w</span><span style="--n: -9200ms">e</span><span style="--n: -9100ms">b</span><span style="--n: -9000ms">r</span><span style="--n: -8900ms">i</span><span style="--n: -8800ms">n</span><span style="--n: -8700ms">g</span> + </a> 🏳️🌈 </span> + <span id="right"><a href="{{ next }}" id="next">next</a> ⥽</span> + </body> +</html> |