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 zcmV<80UiE{P)mN5P)y@GK0ZXqo)v?7-qkKKeYch1PIUw6uJfrVyN*-*CdxTNpqJwx4kC0@4HLZ z?sfJ3aXdrAfzWuUfYt?=l8gPk_oVCAn@)xRDzI-{P9dfiXzHA)Wtf`5UF)P0ft=uT ztZBG`r|t&i3ZE($=a{yrw{02QDDZ|GKb*_Q;O&5t5>mon;^Fo#-+jPt^h^2L)dfG4@ci`|e+G=ZVAo&6yS`r% z-q#7_LvX$6$bcatO2E4$kOka7^|QCglJGVOm{NwKbBAf z{7?dxfUl|Yq(d+V{LN#1@RI^sg1-{b8vH*2EyDi^XcZm+09%I7@`nf~_~Zh(!2$^`h5!Hn07*qoM6N<$f<`md*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!ia0vp^3xIe62OE&=-q!^2X+?^QKos)S9WOI4CIEGZr zd3*Pu;2{M8)(a(SvVl#mOBB2oG~BT)^kA?0_^jtx50}dO&<*Mm(|+#0%;KP|+8X^@ zis6BER$t!Mz%{39GGm#6#xghwO1$v(RNT6b5hMf!5|bV-a=7o3{qX*^RIx}F zhN@*#84oid?qRP8X5$z$h4k2=X6K_r1!zXB?}Tko&kdc)~c-4 z9t=NN!+ADzPhHQDlTs_jaC~7mQ}vqDYg%EdfV9D$S&O$Qte@$`z%a-2Y~Tlp1=*(V z>qCGt3m6}NhbVk-$BS!aDX-1sX0~mGQ4AaI%37!f$hWpXRRPI+y85}Sb4q9e06Ot+ AoB#j-