new dark theme and other fancy css things :3

This commit is contained in:
ari melody 2024-04-06 22:47:53 +01:00
parent 40079b00e1
commit 83ae258545
Signed by: ari
GPG key ID: CF99829C92678188
8 changed files with 211 additions and 36 deletions

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
**/.DS_Store
docker-compose.yml

BIN
public/img/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

35
public/img/icon-dark.svg Normal file
View file

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-1200,-1200)">
<g id="bliss-town-logo--favicon-" serif:id="bliss town logo (favicon)" transform="matrix(1.95312,0,0,1.95312,1200,1200)">
<rect x="0" y="0" width="512" height="512" style="fill:none;"/>
<g id="dark-tent" serif:id="dark tent" transform="matrix(1.18542,0,0,1.18542,-37.5683,-13.3362)">
<g transform="matrix(-0.512,0,0,0.512,496.93,0)">
<path d="M680.488,403.19C687.352,403.19 693.531,407.347 696.117,413.705C717.314,465.82 811.533,697.461 847.668,786.3C850.842,794.103 849.925,802.973 845.223,809.962C840.52,816.951 832.649,821.142 824.225,821.142L450.351,821.142C443.488,821.142 437.309,816.985 434.723,810.628C416.587,766.039 344.999,590.036 302.068,484.489C294.663,466.283 296.801,445.585 307.773,429.277C318.745,412.969 337.112,403.19 356.767,403.19C463.491,403.19 635.036,403.19 680.488,403.19Z" style="fill:rgb(56,34,102);"/>
</g>
<g transform="matrix(-0.512,0,0,0.512,496.93,0)">
<path d="M668.83,503.824L797.897,821.142L492.566,821.142L668.83,503.824Z" style="fill:url(#_Linear1);"/>
</g>
<g transform="matrix(0.512,0,0,0.512,-4.19671,0)">
<path d="M646.434,403.19C673.887,403.19 698.604,419.82 708.947,445.25C744.396,532.401 824.857,730.218 852.392,797.914C854.508,803.116 853.897,809.03 850.762,813.689C847.627,818.348 842.379,821.142 836.763,821.142L484.406,821.142C456.953,821.142 432.236,804.513 421.892,779.083C386.735,692.646 307.3,497.352 279.136,428.11C276.866,422.529 277.522,416.185 280.885,411.186C284.248,406.188 289.878,403.19 295.903,403.19L646.434,403.19Z" style="fill:rgb(129,95,226);"/>
</g>
<g transform="matrix(0.190522,0,0,0.190522,177.573,186.558)">
<path d="M569.819,403.19C643.594,403.19 710.017,447.88 737.814,516.219C769.514,594.156 810.465,694.836 836.45,758.72C842.136,772.699 840.493,788.591 832.069,801.112C823.645,813.634 809.542,821.142 794.451,821.142C731.798,821.142 636.975,821.142 561.021,821.142C487.246,821.142 420.822,776.452 393.026,708.113C361.325,630.176 320.375,529.497 294.39,465.613C288.704,451.633 290.346,435.741 298.771,423.22C307.195,410.699 321.297,403.19 336.389,403.19C399.042,403.19 493.865,403.19 569.819,403.19Z" style="fill:rgb(253,220,120);"/>
</g>
<g transform="matrix(0.362039,0.362039,-0.362039,0.362039,278.932,-108.178)">
<path d="M518,551L518,580C518,583.863 514.863,587 511,587C507.137,587 504,583.863 504,580L504,551C504,547.137 507.137,544 511,544C514.863,544 518,547.137 518,551ZM549.968,547.039L549.968,576.039C549.968,579.903 546.832,583.039 542.968,583.039C539.105,583.039 535.968,579.903 535.968,576.039L535.968,547.039C535.968,543.176 539.105,540.039 542.968,540.039C546.832,540.039 549.968,543.176 549.968,547.039Z" style="fill:rgb(133,108,55);"/>
</g>
</g>
<g transform="matrix(0.336714,-0.1285,0.1285,0.336714,-56.0946,-40.8209)">
<path d="M521.094,757.571C479.419,798.251 422.449,823.332 359.668,823.332C232.084,823.332 128.502,719.75 128.502,592.166C128.502,464.582 232.084,361 359.668,361C401.161,361 440.115,371.956 473.794,391.13C376.69,396.808 299.585,477.459 299.585,575.976C299.585,678.172 382.555,761.142 484.751,761.142C497.188,761.142 509.341,759.914 521.094,757.571Z" style="fill:rgb(225,222,227);"/>
</g>
<g transform="matrix(0.373608,0,0,0.373608,-57.9461,-34.9014)">
<path d="M815.5,213L835.082,265.918L888,285.5L835.082,305.082L815.5,358L795.918,305.082L743,285.5L795.918,265.918L815.5,213ZM1311.4,268.114L1327.07,310.448L1369.4,326.114L1327.07,341.779L1311.4,384.114L1295.74,341.779L1253.4,326.114L1295.74,310.448L1311.4,268.114ZM1053.3,358L1076.8,421.502L1140.3,445L1076.8,468.498L1053.3,532L1029.8,468.498L966.3,445L1029.8,421.502L1053.3,358Z" style="fill:rgb(225,222,227);"/>
</g>
</g>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-259.563,112.523,-116.94,-269.753,752.129,708.619)"><stop offset="0" style="stop-color:rgb(37,22,66);stop-opacity:1"/><stop offset="0.44" style="stop-color:rgb(102,81,82);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(253,220,120);stop-opacity:1"/></linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.8 KiB

29
public/img/icon-light.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-1200,0)">
<g id="bliss-town-logo--favicon-" serif:id="bliss town logo (favicon)" transform="matrix(1.95312,0,0,1.95312,1200,0)">
<rect x="0" y="0" width="512" height="512" style="fill:none;"/>
<g id="light-tent" serif:id="light tent" transform="matrix(1.18542,0,0,1.18542,-37.5683,-13.3362)">
<g transform="matrix(-0.512,0,0,0.512,496.93,0)">
<path d="M680.488,403.19C687.352,403.19 693.531,407.347 696.117,413.705C717.314,465.82 811.533,697.461 847.668,786.3C850.842,794.103 849.925,802.973 845.223,809.962C840.52,816.951 832.649,821.142 824.225,821.142L450.351,821.142C443.488,821.142 437.309,816.985 434.723,810.628C416.587,766.039 344.999,590.036 302.068,484.489C294.663,466.283 296.801,445.585 307.773,429.277C318.745,412.969 337.112,403.19 356.767,403.19C463.491,403.19 635.036,403.19 680.488,403.19Z" style="fill:rgb(96,105,44);"/>
</g>
<g transform="matrix(-0.512,0,0,0.512,496.93,0)">
<path d="M668.83,503.824L797.897,821.142L492.566,821.142L668.83,503.824Z" style="fill:rgb(66,72,29);"/>
</g>
<g transform="matrix(0.512,0,0,0.512,-4.19671,0)">
<path d="M646.434,403.19C673.887,403.19 698.604,419.82 708.947,445.25C744.396,532.401 824.857,730.218 852.392,797.914C854.508,803.116 853.897,809.03 850.762,813.689C847.627,818.348 842.379,821.142 836.763,821.142L484.406,821.142C456.953,821.142 432.236,804.513 421.892,779.083C387.175,693.727 309.281,502.222 280.217,430.768C277.705,424.592 278.431,417.571 282.152,412.039C285.874,406.507 292.105,403.19 298.772,403.19L646.434,403.19Z" style="fill:rgb(143,154,75);"/>
</g>
<g transform="matrix(0.190522,0,0,0.190522,177.573,186.558)">
<path d="M569.819,403.19C643.594,403.19 710.017,447.88 737.814,516.219C769.514,594.156 810.465,694.836 836.45,758.72C842.136,772.699 840.493,788.591 832.069,801.112C823.645,813.634 809.542,821.142 794.451,821.142C731.798,821.142 636.975,821.142 561.021,821.142C487.246,821.142 420.822,776.452 393.026,708.113C361.325,630.176 320.375,529.497 294.39,465.613C288.704,451.633 290.346,435.741 298.771,423.22C307.195,410.699 321.297,403.19 336.389,403.19C399.042,403.19 493.865,403.19 569.819,403.19Z" style="fill:rgb(244,255,174);"/>
</g>
<g transform="matrix(0.362039,0.362039,-0.362039,0.362039,278.932,-108.178)">
<path d="M518,551L518,580C518,583.863 514.863,587 511,587C507.137,587 504,583.863 504,580L504,551C504,547.137 507.137,544 511,544C514.863,544 518,547.137 518,551ZM549.968,547.039L549.968,576.039C549.968,579.903 546.832,583.039 542.968,583.039C539.105,583.039 535.968,579.903 535.968,576.039L535.968,547.039C535.968,543.176 539.105,540.039 542.968,540.039C546.832,540.039 549.968,543.176 549.968,547.039Z" style="fill:rgb(158,170,85);"/>
</g>
</g>
<g transform="matrix(0.520285,-0.520285,0.520285,0.520285,-132.858,246.484)">
<path d="M407.051,178.103C407.051,133.978 442.875,98.154 487,98.154C531.125,98.154 566.949,133.978 566.949,178.103C611.073,178.103 646.897,213.927 646.897,258.051C646.897,302.176 611.073,338 566.949,338L407.051,338L407.051,178.103Z" style="fill:rgb(50,46,31);"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.8 KiB

View file

@ -3,10 +3,11 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" value="width=device-width, initial-scale=1"> <meta name="viewport" value="width=device-width, initial-scale=1">
<title>🏕️ bliss.town</title> <title>bliss town</title>
<link rel="icon" type="image/x-icon" href="/img/favicon.png">
<meta property="og:site_name" content="🏕️ bliss.town" /> <meta property="og:site_name" content="🏕️ bliss town" />
<meta property="og:title" content="welcome to bliss.town!" /> <meta property="og:title" content="welcome to bliss town!" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content="https://bliss.town" /> <meta property="og:url" content="https://bliss.town" />
@ -18,12 +19,20 @@
<header> <header>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>
<span aria-hidden="true">-</span>
<a href="/links">links</a> <a href="/links">links</a>
<span aria-hidden="true">-</span>
<a href="/paste">paste</a> <a href="/paste">paste</a>
<span aria-hidden="true">-</span>
<a href="https://git.arimelody.me/ari/bliss.town" target="_blank">source</a>
</nav> </nav>
</header> </header>
<main> <main>
<h1><span aria-hidden="true">🏕️</span><br>welcome to bliss.town!</h1> <div class="title-icon">
<img src="/img/icon-light.svg" class="icon-light" width=64 height=64 />
<img src="/img/icon-dark.svg" class="icon-dark" width=64 height=64 />
</div>
<h1>welcome to bliss<span class="col-primary-bg">.</span>town!</h1>
<hr> <hr>
<p> <p>
we're not hosting much at this domain just yet. we're not hosting much at this domain just yet.
@ -32,10 +41,9 @@
</p> </p>
</main> </main>
<footer> <footer>
<p>made with <span role="img" aria-label="love">♥ by <a href="https://arimelody.me">ari</a>, 2024</p> <p>
<div id="footer-links"> made with <span role="img" aria-label="love"></span> by <a href="https://arimelody.me">ari</a>, 2024.
<a href="https://git.arimelody.me/ari/bliss.town">source</a> </p>
</div>
</footer> </footer>
</body> </body>
</html> </html>

View file

@ -3,10 +3,11 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" value="width=device-width, initial-scale=1"> <meta name="viewport" value="width=device-width, initial-scale=1">
<title>🔗 bliss.town shortlinks</title> <title>shortlinks - bliss town</title>
<link rel="icon" type="image/x-icon" href="/img/favicon.png">
<meta property="og:site_name" content="🏕️ bliss.town" /> <meta property="og:site_name" content="bliss town" />
<meta property="og:title" content="bliss.town shortlinks" /> <meta property="og:title" content="bliss town shortlinks" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content="https://bliss.town/links" /> <meta property="og:url" content="https://bliss.town/links" />
@ -18,12 +19,16 @@
<header> <header>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>
<span aria-hidden="true">-</span>
<a href="/links">links</a> <a href="/links">links</a>
<span aria-hidden="true">-</span>
<a href="/paste">paste</a> <a href="/paste">paste</a>
<span aria-hidden="true">-</span>
<a href="https://git.arimelody.me/ari/bliss.town" target="_blank">source</a>
</nav> </nav>
</header> </header>
<main> <main>
<h1><span aria-hidden="true">🔗</span><br>bliss.town shortlinks</h1> <h1><span aria-hidden="true">🔗</span><br>bliss<span class="col-primary-bg">.</span>town shortlinks</h1>
<hr> <hr>
<p> <p>
we run an invite-only shortlink service, <code>link.bliss.town</code>, we run an invite-only shortlink service, <code>link.bliss.town</code>,
@ -32,10 +37,9 @@
</p> </p>
</main> </main>
<footer> <footer>
<p>made with <span role="img" aria-label="love">♥ by <a href="https://arimelody.me">ari</a>, 2024</p> <p>
<div id="footer-links"> made with <span role="img" aria-label="love"></span> by <a href="https://arimelody.me">ari</a>, 2024.
<a href="https://git.arimelody.me/ari/bliss.town">source</a> </p>
</div>
</footer> </footer>
</body> </body>
</html> </html>

View file

@ -3,10 +3,11 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" value="width=device-width, initial-scale=1"> <meta name="viewport" value="width=device-width, initial-scale=1">
<title>📝 bliss.town pastebin</title> <title>pastebin - bliss town</title>
<link rel="icon" type="image/x-icon" href="/img/favicon.png">
<meta property="og:site_name" content="🏕️ bliss.town" /> <meta property="og:site_name" content="bliss town" />
<meta property="og:title" content="bliss.town pastebin" /> <meta property="og:title" content="bliss town pastebin" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content="https://bliss.town/paste" /> <meta property="og:url" content="https://bliss.town/paste" />
@ -18,12 +19,16 @@
<header> <header>
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>
<span aria-hidden="true">-</span>
<a href="/links">links</a> <a href="/links">links</a>
<span aria-hidden="true">-</span>
<a href="/paste">paste</a> <a href="/paste">paste</a>
<span aria-hidden="true">-</span>
<a href="https://git.arimelody.me/ari/bliss.town" target="_blank">source</a>
</nav> </nav>
</header> </header>
<main> <main>
<h1><span aria-hidden="true">📝</span><br>bliss.town pastebin</h1> <h1><span aria-hidden="true">📝</span><br>bliss<span class="col-primary-bg">.</span>town pastebin</h1>
<hr> <hr>
<p> <p>
we run a public pastebin instance, <a href="https://paste.bliss.town"><code>paste.bliss.town</code></a>, we run a public pastebin instance, <a href="https://paste.bliss.town"><code>paste.bliss.town</code></a>,
@ -32,10 +37,9 @@
</p> </p>
</main> </main>
<footer> <footer>
<p>made with <span role="img" aria-label="love">♥ by <a href="https://arimelody.me">ari</a>, 2024</p> <p>
<div id="footer-links"> made with <span role="img" aria-label="love"></span> by <a href="https://arimelody.me">ari</a>, 2024.
<a href="https://git.arimelody.me/ari/bliss.town">source</a> </p>
</div>
</footer> </footer>
</body> </body>
</html> </html>

View file

@ -1,16 +1,18 @@
@import url("/font/lora/lora-font.css"); @import url("/font/lora/lora-font.css");
:root { :root {
--foreground: #28261f; --foreground: #322e1f;
--background: #f9f1db; --background: #f9f1db;
--primary: #92a40a; --primary-fg: #92a40a;
--primary-bg: #c4ce7e;
} }
@media screen and (prefers-color-scheme: dark) { @media screen and (prefers-color-scheme: dark) {
:root { :root {
--foreground: #f9f1db; --foreground: #e2dfe3;
--background: #28261f; --background: #1b141e;
--primary: #d9e679; --primary-fg: #cda1ec;
--primary-bg: #513d60;
} }
} }
@ -24,9 +26,9 @@ header nav {
font-size: .8em; font-size: .8em;
} }
header nav a:not(:first-child)::before { header nav span {
content: '-'; margin: 0 .8em;
margin: 0 .8em 0 .5em; color: var(--primary-fg);
} }
body { body {
@ -48,6 +50,8 @@ body {
color: var(--foreground); color: var(--foreground);
background-color: var(--background); background-color: var(--background);
transition: color .2s linear, background-color .2s linear;
} }
main { main {
@ -55,6 +59,31 @@ main {
text-align: center; text-align: center;
} }
.title-icon {
width: 64px;
margin: 1em auto -1em auto;
display: flex;
}
.title-icon img {
transition: opacity .2s linear;
}
.title-icon img.icon-dark {
position: relative;
left: -64px;
opacity: 0;
}
@media screen and (prefers-color-scheme: dark) {
.title-icon img.icon-light {
opacity: 0;
}
.title-icon img.icon-dark {
opacity: 1;
}
}
hr { hr {
margin: 2rem 0; margin: 2rem 0;
border-width: 1px 0 0 0; border-width: 1px 0 0 0;
@ -62,24 +91,88 @@ hr {
hr::after { hr::after {
content: "✦"; content: "✦";
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -54.5%);
background: var(--background);
color: var(--foreground);
padding: 5px; padding: 5px;
color: var(--foreground);
background: var(--background);
transition: color .2s linear, background-color .2s linear;
} }
a { a {
color: var(--primary); color: var(--primary-fg);
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
transition: color .2s linear;
}
a:hover {
text-decoration: underline;
}
button {
padding: .5em 1.2em;
font-size: .8em;
font-family: inherit;
font-weight: bold;
color: var(--foreground);
background-color: var(--primary-bg);
border: none;
border-radius: 2em;
cursor: pointer;
transition: color .2s linear, background-color .2s linear, transform .1s ease-out;
}
button:hover {
transform: scale(1.05);
}
button:active {
transform: scale(0.95);
} }
footer { footer {
width: min(900px, calc(100vw - 4rem)); width: min(900px, calc(100vw - 4rem));
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
opacity: .5;
transition: opacity .1s ease-out;
}
footer:hover {
opacity: 1;
} }
#footer-links { #footer-links {
font-size: .8em; font-size: .8em;
} }
[class^="col-"] {
transition: color .2s linear;
}
[class^="bg-"] {
transition: background-color .2s linear;
}
.col-fg {
color: var(--foreground);
}
.bg-fg {
background-color: var(--foreground);
}
.col-bg {
color: var(--background);
}
.bg-bg {
background-color: var(--background);
}
.col-primary-fg {
color: var(--primary-fg);
}
.bg-primary-fg {
background-color: var(--primary-fg);
}
.col-primary-bg {
color: var(--primary-bg);
}
.bg-primary-bg {
background-color: var(--primary-bg);
}