diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f4be4d0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +**/.DS_Store +docker-compose.yml diff --git a/public/img/favicon.png b/public/img/favicon.png new file mode 100644 index 0000000..37c8ba4 Binary files /dev/null and b/public/img/favicon.png differ diff --git a/public/img/icon-dark.svg b/public/img/icon-dark.svg new file mode 100644 index 0000000..723d7c9 --- /dev/null +++ b/public/img/icon-dark.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icon-light.svg b/public/img/icon-light.svg new file mode 100644 index 0000000..aca52a3 --- /dev/null +++ b/public/img/icon-light.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/index.html b/public/index.html index 18d72c5..d4296c5 100644 --- a/public/index.html +++ b/public/index.html @@ -3,10 +3,11 @@ - 🏕️ bliss.town + bliss town + - - + + @@ -18,12 +19,20 @@
-


welcome to bliss.town!

+
+ + +
+

welcome to bliss.town!

we're not hosting much at this domain just yet. @@ -32,10 +41,9 @@

diff --git a/public/links.html b/public/links.html index 9a5823b..ccb38eb 100644 --- a/public/links.html +++ b/public/links.html @@ -3,10 +3,11 @@ - 🔗 bliss.town shortlinks + shortlinks - bliss town + - - + + @@ -18,12 +19,16 @@
-


bliss.town shortlinks

+


bliss.town shortlinks

we run an invite-only shortlink service, link.bliss.town, @@ -32,10 +37,9 @@

diff --git a/public/paste.html b/public/paste.html index 02272df..47f0478 100644 --- a/public/paste.html +++ b/public/paste.html @@ -3,10 +3,11 @@ - 📝 bliss.town pastebin + pastebin - bliss town + - - + + @@ -18,12 +19,16 @@
-


bliss.town pastebin

+


bliss.town pastebin

we run a public pastebin instance, paste.bliss.town, @@ -32,10 +37,9 @@

diff --git a/public/style/main.css b/public/style/main.css index 1249657..fb8cc7b 100644 --- a/public/style/main.css +++ b/public/style/main.css @@ -1,16 +1,18 @@ @import url("/font/lora/lora-font.css"); :root { - --foreground: #28261f; + --foreground: #322e1f; --background: #f9f1db; - --primary: #92a40a; + --primary-fg: #92a40a; + --primary-bg: #c4ce7e; } @media screen and (prefers-color-scheme: dark) { :root { - --foreground: #f9f1db; - --background: #28261f; - --primary: #d9e679; + --foreground: #e2dfe3; + --background: #1b141e; + --primary-fg: #cda1ec; + --primary-bg: #513d60; } } @@ -24,9 +26,9 @@ header nav { font-size: .8em; } -header nav a:not(:first-child)::before { - content: '-'; - margin: 0 .8em 0 .5em; +header nav span { + margin: 0 .8em; + color: var(--primary-fg); } body { @@ -48,6 +50,8 @@ body { color: var(--foreground); background-color: var(--background); + + transition: color .2s linear, background-color .2s linear; } main { @@ -55,6 +59,31 @@ main { 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 { margin: 2rem 0; border-width: 1px 0 0 0; @@ -62,24 +91,88 @@ hr { hr::after { content: "✦"; position: absolute; - transform: translate(-50%, -50%); - background: var(--background); - color: var(--foreground); + transform: translate(-50%, -54.5%); padding: 5px; + color: var(--foreground); + background: var(--background); + transition: color .2s linear, background-color .2s linear; } a { - color: var(--primary); + color: var(--primary-fg); text-decoration: none; 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 { width: min(900px, calc(100vw - 4rem)); margin: 0 auto; text-align: center; + opacity: .5; + transition: opacity .1s ease-out; +} + +footer:hover { + opacity: 1; } #footer-links { 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); +}