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. :)
This commit is contained in:
Vrifox
parent
764fcbd313
commit
458b994dce
GPG key ID:
D40098E5B60B2197
4 changed files with 167 additions and 108 deletions
BIN
favicon.png
Normal file
BIN
favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 B |
203
index.css
203
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;
|
box-sizing: border-box;
|
||||||
scrollbar-color: #ff8282 #3c3c5a;
|
scrollbar-color: var(--sun) var(--background-intro);
|
||||||
}
|
|
||||||
*::-webkit-scrollbar {
|
|
||||||
background: #3c3c5a;
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
*::-webkit-scrollbar-thumb {
|
|
||||||
background: #ff8282;
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
background: linear-gradient(rgb(15, 15, 20), rgb(65, 50, 80));
|
background: var(--background);
|
||||||
color: rgb(245, 245, 255);
|
color: var(--text);
|
||||||
font-family: 'Lucida Console', 'Courier New', monospace;
|
font-family: 'Lucida Console', 'Courier New', monospace;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
scroll-behaviour: smooth;
|
|
||||||
}
|
}
|
||||||
solarsystem {
|
header {
|
||||||
background: url(stars.png);
|
background: var(--background-intro);
|
||||||
display: block;
|
color: var(--text);
|
||||||
min-height: 100vh;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 40vh;
|
||||||
|
justify-content: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
planet {
|
header h1 {
|
||||||
background: linear-gradient(-60deg, rgb(30, 30, 40), rgb(27, 56, 70) 200%);
|
font-size: 3.5em;
|
||||||
|
margin: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
header p {
|
||||||
|
margin: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
header sun {
|
||||||
|
background: var(--sun);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
bottom: 50vh;
|
height: 10vh;
|
||||||
height: 60vh;
|
left: 30vw;
|
||||||
left: 70vw;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: translate(-50%,50%);
|
top: 3vh;
|
||||||
width: 60vh;
|
width: 10vh;
|
||||||
}
|
}
|
||||||
moon {
|
header hill {
|
||||||
background: linear-gradient(-60deg, rgb(20, 23, 28), rgb(108, 97, 97));
|
background: var(--hill);
|
||||||
border-radius: 100%;
|
border-radius: 40px;
|
||||||
height: 4vh;
|
|
||||||
position: absolute;
|
|
||||||
right: 16vh;
|
|
||||||
top: 20vh;
|
|
||||||
width: 4vh;
|
|
||||||
}
|
|
||||||
surface {
|
|
||||||
background: linear-gradient(rgb(68, 43, 43), rgb(0, 0, 0));
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 50vh;
|
height: 40vh;
|
||||||
left: 50%;
|
left: 50vw;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: translate(-50vw, 0);
|
transform: rotate(45deg) translate(50%, 50%);
|
||||||
width: 100vw;
|
width: 40vh;
|
||||||
}
|
}
|
||||||
sign {
|
header hillshade {
|
||||||
animation: 5s signsway 0s ease infinite;
|
background: var(--hillshade);
|
||||||
bottom: 50%;
|
border-radius: 80px;
|
||||||
left: 50%;
|
bottom: -5vh;
|
||||||
|
height: 40vh;
|
||||||
|
left: 30vw;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform-origin: bottom center;
|
transform: rotate(45deg) translate(50%, 50%);
|
||||||
transform: translate(-50%,0) rotate(8deg);
|
width: 40vh;
|
||||||
}
|
}
|
||||||
@keyframes signsway {
|
main {
|
||||||
from { transform: translate(-50%,0) rotate(10deg); }
|
display: grid;
|
||||||
50% { transform: translate(-50%,0) rotate(8deg); }
|
grid-template-columns: repeat(3, 1fr);
|
||||||
to { transform: translate(-50%,0) rotate(10deg); }
|
grid-gap: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 20px;
|
||||||
}
|
}
|
||||||
sign content {
|
main article {
|
||||||
background: rgb(98, 49, 37);
|
background: var(--background-intro);
|
||||||
border: 5px outset rgb(49, 17, 17);
|
border-radius: 10px;
|
||||||
color: rgb(193, 193, 193);
|
|
||||||
display: block;
|
|
||||||
height: 200px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 300px;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
sign pole {
|
main article a {
|
||||||
background: linear-gradient(rgb(32, 11, 11), rgb(47, 27, 27));
|
background: var(--background);
|
||||||
border-radius: 0 0 20px 5px;
|
border-bottom: 2px solid var(--text);
|
||||||
bottom: 0;
|
border-radius: 5px;
|
||||||
content: '';
|
color: var(--text);
|
||||||
display: block;
|
padding: 10px 14px;
|
||||||
height: 120px;
|
text-decoration: none;
|
||||||
left: 50%;
|
transition: border .15s ease, margin .15s ease;
|
||||||
position: relative;
|
margin: 0 auto;
|
||||||
transform: translate(-50%, -1px);
|
align-self: end;
|
||||||
width: 20px;
|
|
||||||
}
|
}
|
||||||
sun {
|
main article a:hover {
|
||||||
background: rgb(236, 176, 35);
|
border-bottom: 1px solid var(--text);
|
||||||
border-radius: 100%;
|
margin: 1px auto 0 auto;
|
||||||
box-shadow: 0 0 10px rgb(236, 176, 35);
|
|
||||||
height: 5vh;
|
|
||||||
left: 8vh;
|
|
||||||
position: absolute;
|
|
||||||
top: 18vh;
|
|
||||||
width: 5vh;
|
|
||||||
z-index: -10;
|
|
||||||
}
|
}
|
||||||
footer {
|
main article a:active {
|
||||||
bottom: 0;
|
border: 0;
|
||||||
color: rgb(68, 43, 43);
|
|
||||||
position: fixed;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
}
|
||||||
footer a {
|
main article h1 {
|
||||||
color: rgb(68, 43, 43);
|
font-size: 1.8em;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.version {
|
main article p {
|
||||||
float: right;
|
margin: auto;
|
||||||
padding: 5px 20px;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
72
index.html
72
index.html
|
|
@ -1,29 +1,63 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>cozy.town</title>
|
<title>Cozy Town – Cozy Services for Cozy Townies</title>
|
||||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="stylesheet" href="https://cozy.town/index.css" type="text/css" media="screen" />
|
<link rel="stylesheet" href="index.css" type="text/css" media="screen" />
|
||||||
<link rel="icon" type="image/png" href="/favicon.png">
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<solarsystem>
|
<header>
|
||||||
<planet>
|
<h1>Cozy Town</h1>
|
||||||
<moon></moon>
|
<p>Cozy Services for Cozy Townies</p>
|
||||||
</planet>
|
|
||||||
<surface>
|
|
||||||
<sign>
|
|
||||||
<content>It's not cozy here for now, this little universe has to form itself first.<br /><br />:)</content>
|
|
||||||
<pole></pole>
|
|
||||||
</sign>
|
|
||||||
</surface>
|
|
||||||
<sun></sun>
|
<sun></sun>
|
||||||
</solarsystem>
|
<hillshade></hillshade>
|
||||||
<footer>
|
<hill></hill>
|
||||||
<section class="version">
|
</header>
|
||||||
<a href="https://git.vrifox.cc/cozy.town/website">concept 2020-12-29</a>
|
<main>
|
||||||
</section>
|
<article class="matrix">
|
||||||
</footer>
|
<h1>Matrix</h1>
|
||||||
|
<p>Matrix is an open-source, decentralised and secure communication standard.</p>
|
||||||
|
<a href="https://chat.cozy.town">Chat</a>
|
||||||
|
<a href="https://chat.cozy.town/register">Register</a>
|
||||||
|
</article>
|
||||||
|
<article class="xmpp">
|
||||||
|
<h1>XMPP/Jabber</h1>
|
||||||
|
<p>XMPP/Jabber is an open-source, decentralised and secure communication standard.</p>
|
||||||
|
<a href="https://xmpp.cozy.town">Chat</a>
|
||||||
|
<a href="https://xmpp.cozy.town/register">Register</a>
|
||||||
|
</article>
|
||||||
|
<!--<article class="ttrss">
|
||||||
|
<h1>TTRSS</h1>
|
||||||
|
<p>XMPP/Jabber is an open-source, decentralised and secure communication standard.</p>
|
||||||
|
<a href="https://feed.cozy.town">Read</a>
|
||||||
|
</article>-->
|
||||||
|
<article class="gitea">
|
||||||
|
<h1>Gitea</h1>
|
||||||
|
<p>Gitea is an open-source (source code) version control software.</p>
|
||||||
|
<a href="https://code.cozy.town">Code</a>
|
||||||
|
</article>
|
||||||
|
<!--<article class="nextcloud">
|
||||||
|
<h1>Nextcloud</h1>
|
||||||
|
<p>XMPP/Jabber is an open-source, decentralised and secure communication standard.</p>
|
||||||
|
<a href="https://cloud.cozy.town"></a>
|
||||||
|
</article>-->
|
||||||
|
<!--<article class="pleroma">
|
||||||
|
<h1>Pleroma</h1>
|
||||||
|
<p>Pleroma is an open-source and decentralised social network based on the fediverse.</p>
|
||||||
|
<a href="https://fedi.cozy.town">Socialize</a>
|
||||||
|
</article>-->
|
||||||
|
<!--<article class="etherpad">
|
||||||
|
<h1>Etherpad</h1>
|
||||||
|
<p>Etherpad is an open-source real time editor.</p>
|
||||||
|
<a href="https://text.cozy.town">Write</a>
|
||||||
|
</article>-->
|
||||||
|
<article class="mumble">
|
||||||
|
<h1>Mumble</h1>
|
||||||
|
<p>Mumble is an open-source, decentralised and secure voice chat.</p>
|
||||||
|
<a href="https://mumble.cozy.town">Talk</a>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
BIN
stars.png
BIN
stars.png
Binary file not shown.
|
Before Width: | Height: | Size: 336 B |
Loading…
Reference in a new issue