gamerdonkey/tilde-town-website
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Rendering the stars in a way browsers seem to hate less.

Browse Source
This commit is contained in:
gamerdonkey 2021-02-19 23:37:54 +00:00
parent 888627e917
commit 4732b5f60b
2 changed files with 76 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
vaporwave/index.html
View File

@ -9,7 +9,68 @@
<div class="landscape">
<div class="sun"></div>
<div class="stars"></div>
<div class="stars">
<span class="star large" style="left: 13%; top: 5px"></span>
<span class="star large" style="left: 14%; top: 300px"></span>
<span class="star large" style="left: 17%; top: 185px"></span>
<span class="star large" style="left: 17%; top: 253px"></span>
<span class="star large" style="left: 22%; top: 121px"></span>
<span class="star large" style="left: 40%; top: 12px"></span>
<span class="star large" style="left: 50%; top: 52px"></span>
<span class="star large" style="left: 55%; top: 117px"></span>
<span class="star large" style="left: 65%; top: 108px"></span>
<span class="star large" style="left: 67%; top: 66px"></span>
<span class="star large" style="left: 71%; top: 110px"></span>
<span class="star large" style="left: 71%; top: 20px"></span>
<span class="star large" style="left: 80%; top: 121px"></span>
<span class="star large" style="left: 91%; top: 265px"></span>
<span class="star large" style="left: 91%; top: 83px"></span>
<span class="star" style="left: 11%; top: 231px"></span>
<span class="star" style="left: 11%; top: 46px"></span>
<span class="star" style="left: 12%; top: 315px"></span>
<span class="star" style="left: 12%; top: 44px"></span>
<span class="star" style="left: 14%; top: 15px"></span>
<span class="star" style="left: 14%; top: 189px"></span>
<span class="star" style="left: 15%; top: 139px"></span>
<span class="star" style="left: 15%; top: 25px"></span>
<span class="star" style="left: 19%; top: 244px"></span>
<span class="star" style="left: 20%; top: 65px"></span>
<span class="star" style="left: 29%; top: 184px"></span>
<span class="star" style="left: 30%; top: 40px"></span>
<span class="star" style="left: 32%; top: 133px"></span>
<span class="star" style="left: 33%; top: 188px"></span>
<span class="star" style="left: 35%; top: 56px"></span>
<span class="star" style="left: 3%; top: 210px"></span>
<span class="star" style="left: 3%; top: 29px"></span>
<span class="star" style="left: 44%; top: 125px"></span>
<span class="star" style="left: 46%; top: 125px"></span>
<span class="star" style="left: 4%; top: 361px"></span>
<span class="star" style="left: 52%; top: 18px"></span>
<span class="star" style="left: 52%; top: 7px"></span>
<span class="star" style="left: 55%; top: 88px"></span>
<span class="star" style="left: 5%; top: 32px"></span>
<span class="star" style="left: 66%; top: 103px"></span>
<span class="star" style="left: 6%; top: 252px"></span>
<span class="star" style="left: 70%; top: 46px"></span>
<span class="star" style="left: 71%; top: 98px"></span>
<span class="star" style="left: 74%; top: 62px"></span>
<span class="star" style="left: 77%; top: 82px"></span>
<span class="star" style="left: 78%; top: 235px"></span>
<span class="star" style="left: 78%; top: 266px"></span>
<span class="star" style="left: 80%; top: 123px"></span>
<span class="star" style="left: 81%; top: 274px"></span>
<span class="star" style="left: 82%; top: 253px"></span>
<span class="star" style="left: 86%; top: 194px"></span>
<span class="star" style="left: 86%; top: 81px"></span>
<span class="star" style="left: 88%; top: 264px"></span>
<span class="star" style="left: 88%; top: 26px"></span>
<span class="star" style="left: 90%; top: 109px"></span>
<span class="star" style="left: 92%; top: 130px"></span>
<span class="star" style="left: 93%; top: 288px"></span>
<span class="star" style="left: 95%; top: 197px"></span>
<span class="star" style="left: 95%; top: 331px"></span>
<span class="star" style="left: 97%; top: 336px"></span>
</div><!-- stars -->
<div class="mountain-container background">
<div class="mountain size200"></div>
@ -18,6 +79,7 @@
<div class="mountain"></div>
<div class="mountain size100"></div>
</div>
<div class="mountain-container background flipped">
<div class="mountain size200"></div>
<div class="mountain size200"></div>
@ -51,7 +113,6 @@
<div class="lines glow"></div>
<div class="lines"></div>
</div>
<div class="scanlines"></div>
</div><!-- landscape -->

75
vaporwave/landscape.css
View File

@ -59,66 +59,17 @@ div.stars {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 80% 233px, #705d79 1px, transparent 2px),
radial-gradient(circle at 97% 77px, #705d79 1px, transparent 2px),
radial-gradient(circle at 85% 5px, #705d79 1px, transparent 1px),
radial-gradient(circle at 84% 104px, #705d79 1px, transparent 1px),
radial-gradient(circle at 14% 83px, #705d79 1px, transparent 1px),
radial-gradient(circle at 88% 20px, #705d79 1px, transparent 2px),
radial-gradient(circle at 51% 17px, #705d79 1px, transparent 1px),
radial-gradient(circle at 21% 178px, #705d79 1px, transparent 2px),
radial-gradient(circle at 72% 212px, #705d79 1px, transparent 1px),
radial-gradient(circle at 19% 94px, #705d79 1px, transparent 2px),
radial-gradient(circle at 22% 112px, #705d79 1px, transparent 2px),
radial-gradient(circle at 21% 203px, #705d79 1px, transparent 2px),
radial-gradient(circle at 9% 37px, #705d79 1px, transparent 1px),
radial-gradient(circle at 88% 95px, #705d79 1px, transparent 2px),
radial-gradient(circle at 8% 235px, #705d79 1px, transparent 1px),
radial-gradient(circle at 18% 78px, #705d79 1px, transparent 1px),
radial-gradient(circle at 5% 83px, #705d79 1px, transparent 1px),
radial-gradient(circle at 34% 162px, #705d79 1px, transparent 2px),
radial-gradient(circle at 82% 19px, #705d79 1px, transparent 2px),
radial-gradient(circle at 18% 237px, #705d79 1px, transparent 1px),
radial-gradient(circle at 74% 23px, #705d79 1px, transparent 2px),
radial-gradient(circle at 33% 159px, #705d79 1px, transparent 1px),
radial-gradient(circle at 46% 120px, #705d79 1px, transparent 2px),
radial-gradient(circle at 25% 254px, #705d79 1px, transparent 1px),
radial-gradient(circle at 76% 256px, #705d79 1px, transparent 1px),
radial-gradient(circle at 90% 183px, #705d79 1px, transparent 1px),
radial-gradient(circle at 20% 268px, #705d79 1px, transparent 1px),
radial-gradient(circle at 47% 126px, #705d79 1px, transparent 2px),
radial-gradient(circle at 76% 19px, #705d79 1px, transparent 1px),
radial-gradient(circle at 86% 125px, #705d79 1px, transparent 2px),
radial-gradient(circle at 40% 142px, #705d79 1px, transparent 2px),
radial-gradient(circle at 92% 236px, #705d79 1px, transparent 2px),
radial-gradient(circle at 7% 320px, #705d79 1px, transparent 1px),
radial-gradient(circle at 23% 44px, #705d79 1px, transparent 1px),
radial-gradient(circle at 97% 355px, #705d79 1px, transparent 1px),
radial-gradient(circle at 17% 26px, #705d79 1px, transparent 1px),
radial-gradient(circle at 51% 51px, #705d79 1px, transparent 2px),
radial-gradient(circle at 86% 274px, #705d79 1px, transparent 1px),
radial-gradient(circle at 37% 66px, #705d79 1px, transparent 1px),
radial-gradient(circle at 5% 245px, #705d79 1px, transparent 1px),
radial-gradient(circle at 44% 121px, #705d79 1px, transparent 2px),
radial-gradient(circle at 22% 156px, #705d79 1px, transparent 1px),
radial-gradient(circle at 43% 22px, #705d79 1px, transparent 2px),
radial-gradient(circle at 95% 83px, #705d79 1px, transparent 1px),
radial-gradient(circle at 90% 104px, #705d79 1px, transparent 2px),
radial-gradient(circle at 33% 97px, #705d79 1px, transparent 1px),
radial-gradient(circle at 12% 208px, #705d79 1px, transparent 1px),
radial-gradient(circle at 10% 90px, #705d79 1px, transparent 1px),
radial-gradient(circle at 15% 229px, #705d79 1px, transparent 1px),
radial-gradient(circle at 70% 117px, #705d79 1px, transparent 1px),
radial-gradient(circle at 52% 121px, #705d79 1px, transparent 1px),
radial-gradient(circle at 69% 102px, #705d79 1px, transparent 2px),
radial-gradient(circle at 59% 66px, #705d79 1px, transparent 2px),
radial-gradient(circle at 29% 74px, #705d79 1px, transparent 2px),
radial-gradient(circle at 26% 65px, #705d79 1px, transparent 1px),
radial-gradient(circle at 69% 204px, #705d79 1px, transparent 2px),
radial-gradient(circle at 80% 195px, #705d79 1px, transparent 2px),
radial-gradient(circle at 32% 151px, #705d79 1px, transparent 2px),
radial-gradient(circle at 96% 275px, #705d79 1px, transparent 1px),
radial-gradient(circle at 7% 160px, #705d79 1px, transparent 1px);
}
span.star {
position: absolute;
height: 4px;
width: 4px;
background: radial-gradient(circle, #705d79 1px, transparent 1px);
}
span.star.large {
background: radial-gradient(circle, #705d79 1px, transparent 2px);
}
div.mountain-container {
@ -186,13 +137,13 @@ div.grid > .lines {
width: 100%;
height: 100%;
background: linear-gradient(#e765dc 1px, transparent 1px 39px, #e765dc 39px),
linear-gradient(to right, #e765dc 1px, transparent 1px 39px, #e765dc 39px);
linear-gradient(to right, #e765dc 1px, transparent 1px 39px, #e765dc 39px);
background-size: 100% 40px, 40px 100%;
}
div.grid > .lines.glow {
background: linear-gradient(#da22ca 1px, transparent 1px 39px, #da22ca 39px),
linear-gradient(to right, #da22ca 1px, transparent 1px 39px, #da22ca 39px);
linear-gradient(to right, #da22ca 1px, transparent 1px 39px, #da22ca 39px);
background-size: 100% 40px, 40px 100%;
filter: blur(4px);
}