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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
72
index.html
72
index.html
|
|
@ -1,29 +1,63 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<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 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="icon" type="image/png" href="/favicon.png">
|
||||
<link rel="stylesheet" href="index.css" type="text/css" media="screen" />
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<solarsystem>
|
||||
<planet>
|
||||
<moon></moon>
|
||||
</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>
|
||||
<header>
|
||||
<h1>Cozy Town</h1>
|
||||
<p>Cozy Services for Cozy Townies</p>
|
||||
<sun></sun>
|
||||
</solarsystem>
|
||||
<footer>
|
||||
<section class="version">
|
||||
<a href="https://git.vrifox.cc/cozy.town/website">concept 2020-12-29</a>
|
||||
</section>
|
||||
</footer>
|
||||
<hillshade></hillshade>
|
||||
<hill></hill>
|
||||
</header>
|
||||
<main>
|
||||
<article class="matrix">
|
||||
<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>
|
||||
</html>
|
||||
|
|
|
|||
BIN
stars.png
BIN
stars.png
Binary file not shown.
|
Before Width: | Height: | Size: 336 B |
Loading…
Reference in a new issue