first commit; pretty much a raw concept

This commit is contained in:
Vrifox 2020-12-25 20:51:40 +01:00
commit 2cb70b0fe7
Signed by: vrifox
GPG key ID: D40098E5B60B2197
3 changed files with 129 additions and 0 deletions

0
README.md Normal file
View file

104
index.css Normal file
View file

@ -0,0 +1,104 @@
* {
box-sizing: border-box;
scrollbar-color: #ff8282 #3c3c5a;
}
*::-webkit-scrollbar {
background: #3c3c5a;
width: 6px;
}
*::-webkit-scrollbar-thumb {
background: #ff8282;
}
html {
overflow: hidden;
}
body {
background: #28283c;
color: #f5f5ff;
font-family: 'Lucida Console', 'Courier New', monospace;
line-height: 1.8;
margin: 0;
scroll-behaviour: smooth;
}
solarsystem {
background: linear-gradient(rgb(5, 5, 50), rgb(200, 65, 65));
display: block;
min-height: 100vh;
overflow: hidden;
position: relative;
}
solarsystem > h1 {
text-align: center;
}
planet {
background: rgb(240, 120, 120);
border-radius: 100%;
bottom: 0;
height: 1000vh;
left: 50%;
position: absolute;
transform: translate(-50%,97%);
width: 1000vh;
}
surface {
height: 30vh;
left: 50%;
position: absolute;
top: 0;
transform: translate(-50%, 0);
width: 100vw;
}
sign {
animation: 5s signsway 0s ease infinite;
bottom: 50%;
left: 50%;
position: absolute;
transform-origin: bottom center;
transform: translate(-50%,0) rotate(8deg);
}
@keyframes signsway {
from { transform: translate(-50%,0) rotate(10deg); }
50% { transform: translate(-50%,0) rotate(8deg); }
to { transform: translate(-50%,0) rotate(10deg); }
}
sign content {
background: #d5664c;
border: 5px outset #dd4949;
color: #ffe9e9;
display: block;
height: 200px;
overflow: hidden;
padding: 20px;
width: 300px;
}
sign pole {
background: linear-gradient(#4d0000, rgb(135, 35, 35));
border-radius: 0 0 20px 5px;
bottom: 0;
content: '';
display: block;
height: 120px;
left: 50%;
position: relative;
transform: translate(-50%, -1px);
width: 20px;
}
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;
}
moon {
background: rgb(129, 141, 142);
border-radius: 100%;
height: 4vh;
position: absolute;
right: 16vh;
top: 30vh;
width: 4vh;
}

25
index.html Normal file
View file

@ -0,0 +1,25 @@
<!doctype html>
<html lang="en">
<head>
<title>cozy.town</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">
</head>
<body>
<solarsystem>
<h1>cozy.town</h1>
<planet>
<surface>
<sign>
<content>It's not cozy here for now, this little universe has to form itself first. :)</content>
<pole></pole>
</sign>
</surface>
</planet>
<sun></sun>
<moon></moon>
</solarsystem>
</body>
</html>