Improve the look of the changelog

static/changelog.css

@@ -0,0 +1,276 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+body, html {
+	height: 100%;
+	width: 100%;
+}
+
+body {
+	display: flex;
+	justify-content: center;
+	text-align: center;
+	flex-direction: column;
+	font-family: sans-serif;
+	background-color: #100d1e;
+}
+
+body {
+	overflow-x: hidden;
+    overflow: scroll;
+}
+
+@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:400,200,700");
+
+.game {
+	font-size: 100px;
+}
+
+.box {
+	margin: 5vw;
+	flex-wrap: center;
+}
+
+.heading {
+	font-size: 100px;
+	color: #7991cd;
+}
+
+.body {
+	font-size: 40px;
+	color: #7991cd;
+}
+
+.footer {
+	position: sticky;
+	top: 95%;
+	color: #58678e;
+}
+
+a {
+	font-size: 40px;
+	color: #b6acd8;
+	text-decoration: none;
+}
+
+a:hover {
+	color: #726899;
+}
+
+.flex-container {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	flex-wrap: wrap;
+	position: fixed;
+    top: 5%;
+    left: 50%;
+    transform: translate(-50%, 0%);
+	margin-bottom: auto;
+    max-height: 60%;
+    width: 100vw;
+    z-index: 1;
+}
+
+.flex-container:hover .game-button-small {
+	opacity: 0.25;
+}
+
+.flex-container:hover .game-button-small:hover {
+	opacity: 1;
+}
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+.game-button-small {
+	user-select: none;
+	position: relative;
+	transition: 0.2s;
+	transform: scale(1, 1);
+}
+
+@media (max-aspect-ratio: 1/1) {
+	.game-button-small .game-logo {
+		width: 20vw;
+	}
+}
+
+@media (min-aspect-ratio: 1/1) {
+	.game-button-small .game-logo {
+		width: 20vh;
+	}
+}
+
+.game-logo {
+	transition: 0.3s;
+	opacity: 0.5;
+}
+
+.game-button:hover {
+	transition: 0.2s;
+	transform: scale(1.25, 1.25);
+}
+
+.game-button:hover > .game-logo {
+	opacity: 1;
+}
+
+.title {
+	color: gray;
+	position: fixed;
+	left: 50%;
+	top: 10%;
+	transform: translate(-50%, 0);
+	font-family: 'Source Code Pro', monospace;
+}
+
+@media (max-aspect-ratio: 1/1) {
+	.title {
+		font-size: 10vh;
+		top: 5%;
+	}
+}
+
+@media (min-aspect-ratio: 1/1) {
+	.title {
+		font-size: 10vh;
+		top: 10%;
+	}
+}
+
+.switcher {
+	text-align: center;
+	background-color: pink;
+	min-width: 300px;
+	min-height: 100px;
+	position: fixed;
+	right: -100px;
+	top: 0px;
+	transform: rotate(45deg);
+}
+
+.switcher-text {
+	position: relative;
+	color: black;
+	font-size: 24px;
+	top: 25px;
+}
+
+.changelog-banner {
+	text-align: center;
+	background-color: pink;
+	min-width: 300px;
+	min-height: 100px;
+	position: fixed;
+	left: -100px;
+	top: 0px;
+	transform: rotate(-45deg);
+}
+
+.changelog-text {
+	position: relative;
+	color: black;
+	font-size: 24px;
+	top: 45px;
+}
+
+
+.back-text {
+	position: relative;
+	color: black;
+	font-size: 36px;
+	top: 25px;
+}
+
+
+.changelogs {
+	max-width: 70vw;
+    margin: auto;
+    margin-top: 25vh;
+	font-family: 'Source Code Pro', monospace;
+    display: none;
+    vertical-align: text-top;
+    min-height: 75vh;
+}
+
+.changelogs:target {
+	display: inline;
+    width: 100%;
+    text-align: left;
+}
+
+.changelog {
+    margin: 20px;
+}
+
+.version {
+	font-size: 36px;
+	color: gray;
+	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
+}
+.changelog,
+.changelog > p,
+.changelog > ul,
+.changelog > ul > li {
+	list-style: square;
+	color: white;
+	font-size: 20px;
+	text-align: left;
+}
+
+.changelog > ul > li {
+	margin: 5px;
+}
+
+.changelog-fade {
+    position: fixed;
+    top: 0%;
+    width: 100vw;
+    height: 25vh;
+    background: rgb(16,13,30);
+    background: linear-gradient(180deg, rgba(16,13,30,1) 0%, rgba(16,13,30,1) 66%, rgba(16,13,30,0) 100%);
+}

templates/changelog.html

@@ -3,17 +3,15 @@
 
 <head>
     <title>crux.sexy</title>
-    <link rel="stylesheet" type="text/css" href="sexy.css">
+    <link rel="stylesheet" type="text/css" href="changelog.css">
+    <script>
+        window.addEventListener("hashchange", function scroll() {
+            window.scrollTo(0, -500);
+        });
+    </script>
 </head>
 
 <body>
-    <a class="changelog" href="/{{"nightly" if not nightly else ""}}">
-        <div class="changelog-text">
-            {{"stable" if nightly else "nightly"}}
-            <br>
-            builds
-        </div>
-    </a>
     <a class="changelog-banner" href="/">
         <div class="changelog-text">
             back
@@ -32,6 +30,9 @@
         <a href="#satiate" class="game-button-small" id="game-button-satiate">
             <img class="game-logo" src="/images/satiate-transparent.png">
         </a>
+    </div>
+    <div class="changelog-fade">
+
     </div>
     {% for game in games %}
     <div class="changelogs" id="{{game.name}}">