From 458b994dcefc8151984b1794d9a52066def1f330 Mon Sep 17 00:00:00 2001 From: Vrifox Date: Tue, 8 Jun 2021 20:54:00 +0200 Subject: [PATCH] It's still more like a concept, but I want to release something. Maybe there's one day a nice website evolving out of it. :) --- favicon.png | Bin 0 -> 482 bytes index.css | 203 +++++++++++++++++++++++++++++----------------------- index.html | 72 ++++++++++++++----- stars.png | Bin 336 -> 0 bytes 4 files changed, 167 insertions(+), 108 deletions(-) create mode 100644 favicon.png delete mode 100644 stars.png diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..4ee4a463526e1052c5a9541fbf85156979690605 GIT binary patch literal 482 zcmeAS@N?(olHy`uVBq!ia0y~yU~m9o4mJh`hELUD;ln`&Y0BwchC1FudmJaYh%#bkRRixxJ)eL)tr^7GiDu(eZ54ean6I{ zHJLjam%n3s!Zlw@{0X1Ex%w0adv)_EO!Bjpy_)(@iY`6a{%nnZv(Re!N!DJi%Z*-$ zO^B)G>Mm>G61exzPVFs&=mMrE@9V{9mo;z&Flsrlt^kRI98mSzHz&Yq*^MpC7HYLO z@*i%vuQu~^0rUJ{HC2_}^NLfe12-*O?v%APRw*Z4x@dLPs_aOP4n{87=7qY!#(Q$t zbh9oEu`A=_*<1L4!G6x^;}708OcDw@6#wYqH@*9{2lBpn|GagT)qcu{KVK#5*?M*- zT#rAzdtbcJz3ZG$oD258Jkg-2OY<^?KsHH@P{cabk)SC=Qp=8FfcH9y85}Sb4q9e07f&_*Z=?k literal 0 HcmV?d00001 diff --git a/index.css b/index.css index 62bb62d..65ec01d 100644 --- a/index.css +++ b/index.css @@ -1,117 +1,142 @@ +:root { + --background: rgb(255, 255, 230); + --background-intro: rgb(250, 220, 120); + --text: rgb(50, 50, 50); + --sun: rgb(245, 180, 100); + --hill: rgb(50, 235, 150); + --hillshade: rgb(40, 160, 100); +} +@media (prefers-color-scheme: dark) { + :root { + --background: rgb(0, 45, 60); + --background-intro: rgb(0, 70, 100); + --text: rgb(255, 255, 255); + --sun: rgb(105, 210, 255); + --hill: rgb(0, 95, 135); + --hillshade: rgb(0, 45, 60); + } +} * { box-sizing: border-box; - scrollbar-color: #ff8282 #3c3c5a; -} -*::-webkit-scrollbar { - background: #3c3c5a; - width: 6px; -} -*::-webkit-scrollbar-thumb { - background: #ff8282; -} -html { - overflow: hidden; + scrollbar-color: var(--sun) var(--background-intro); } body { - background: linear-gradient(rgb(15, 15, 20), rgb(65, 50, 80)); - color: rgb(245, 245, 255); + background: var(--background); + color: var(--text); font-family: 'Lucida Console', 'Courier New', monospace; line-height: 1.8; margin: 0; - scroll-behaviour: smooth; } -solarsystem { - background: url(stars.png); - display: block; - min-height: 100vh; +header { + background: var(--background-intro); + color: var(--text); + display: flex; + flex-direction: column; + height: 40vh; + justify-content: center; overflow: hidden; position: relative; + text-align: center; } -planet { - background: linear-gradient(-60deg, rgb(30, 30, 40), rgb(27, 56, 70) 200%); +header h1 { + font-size: 3.5em; + margin: 0; + z-index: 10; +} +header p { + margin: 0; + z-index: 10; +} +header sun { + background: var(--sun); border-radius: 100%; - bottom: 50vh; - height: 60vh; - left: 70vw; + height: 10vh; + left: 30vw; position: absolute; - transform: translate(-50%,50%); - width: 60vh; + top: 3vh; + width: 10vh; } -moon { - background: linear-gradient(-60deg, rgb(20, 23, 28), rgb(108, 97, 97)); - border-radius: 100%; - height: 4vh; - position: absolute; - right: 16vh; - top: 20vh; - width: 4vh; -} -surface { - background: linear-gradient(rgb(68, 43, 43), rgb(0, 0, 0)); +header hill { + background: var(--hill); + border-radius: 40px; bottom: 0; - height: 50vh; - left: 50%; + height: 40vh; + left: 50vw; position: absolute; - transform: translate(-50vw, 0); - width: 100vw; + transform: rotate(45deg) translate(50%, 50%); + width: 40vh; } -sign { - animation: 5s signsway 0s ease infinite; - bottom: 50%; - left: 50%; +header hillshade { + background: var(--hillshade); + border-radius: 80px; + bottom: -5vh; + height: 40vh; + left: 30vw; position: absolute; - transform-origin: bottom center; - transform: translate(-50%,0) rotate(8deg); + transform: rotate(45deg) translate(50%, 50%); + width: 40vh; } -@keyframes signsway { - from { transform: translate(-50%,0) rotate(10deg); } - 50% { transform: translate(-50%,0) rotate(8deg); } - to { transform: translate(-50%,0) rotate(10deg); } +main { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; + margin: 0 auto; + max-width: 1200px; + padding: 20px; } -sign content { - background: rgb(98, 49, 37); - border: 5px outset rgb(49, 17, 17); - color: rgb(193, 193, 193); - display: block; - height: 200px; - overflow: hidden; +main article { + background: var(--background-intro); + border-radius: 10px; padding: 20px; text-align: center; - width: 300px; + display: flex; + flex-wrap: wrap; } -sign pole { - background: linear-gradient(rgb(32, 11, 11), rgb(47, 27, 27)); - border-radius: 0 0 20px 5px; - bottom: 0; - content: ''; - display: block; - height: 120px; - left: 50%; - position: relative; - transform: translate(-50%, -1px); - width: 20px; +main article a { + background: var(--background); + border-bottom: 2px solid var(--text); + border-radius: 5px; + color: var(--text); + padding: 10px 14px; + text-decoration: none; + transition: border .15s ease, margin .15s ease; + margin: 0 auto; + align-self: end; } -sun { - background: rgb(236, 176, 35); - border-radius: 100%; - box-shadow: 0 0 10px rgb(236, 176, 35); - height: 5vh; - left: 8vh; - position: absolute; - top: 18vh; - width: 5vh; - z-index: -10; +main article a:hover { + border-bottom: 1px solid var(--text); + margin: 1px auto 0 auto; } -footer { - bottom: 0; - color: rgb(68, 43, 43); - position: fixed; - width: 100vw; +main article a:active { + border: 0; } -footer a { - color: rgb(68, 43, 43); +main article h1 { + font-size: 1.8em; + margin: 0 auto; } -.version { - float: right; - padding: 5px 20px; +main article p { + margin: auto; + padding: 10px 0; +} +@media (max-width: 1000px) { + header hill { + transform: rotate(45deg) translate(40%, 70%); + } + header hillshade { + transform: rotate(45deg) translate(20%, 80%); + } + main { + grid-template-columns: repeat(2, 1fr); + } +} +@media (max-width: 600px) { + main { + grid-template-columns: repeat(1, 1fr); + } +} +@media (prefers-color-scheme: dark) { + header sun { + left: unset; + right: 30vw; + } } diff --git a/index.html b/index.html index 8834729..d341995 100644 --- a/index.html +++ b/index.html @@ -1,29 +1,63 @@ - cozy.town + Cozy Town – Cozy Services for Cozy Townies - - + + - - - - - - - It's not cozy here for now, this little universe has to form itself first.

:) - - - +
+

Cozy Town

+

Cozy Services for Cozy Townies

- - + + +
+
+
+

Matrix

+

Matrix is an open-source, decentralised and secure communication standard.

+ Chat + Register +
+
+

XMPP/Jabber

+

XMPP/Jabber is an open-source, decentralised and secure communication standard.

+ Chat + Register +
+ +
+

Gitea

+

Gitea is an open-source (source code) version control software.

+ Code +
+ + + +
+

Mumble

+

Mumble is an open-source, decentralised and secure voice chat.

+ Talk +
+
diff --git a/stars.png b/stars.png deleted file mode 100644 index 86b42b8f4b3c8325be936d2395bac7351f3ce6a9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 336 zcmeAS@N?(olHy`uVBq!ia0y~yU|7Jwz%YS>je&uoe``Vm0|NtNage(c!@6@aFBupZ zxjbDQLn`LHy?apbkb(f~g%UN{z$Vuv3SJ8u?pPLjuvdM2)^n_fOXYp&26c&PKX+ed zaZpxmjeae~@W48&FK=t$n$tCzvCIq%3=9s&rpL2iOEJ9g^;F!tju9jT#S)VqE^@f< zlKt@hwN$Z47KW;2QyC9D$m;u+%fL|c;Kb>tUR?j2AQ~D3ugJ8XJLhyr0HpW9!X*n5 zL7o9|7!FvgvQ~RA{9p~|+0Z?8Jwr}Ptr)}ch22cmYfi6e1uKCN276{L-lDL6rV|6h z9M7|XA0!rJo4T(L0R;x*