Add news section

homepage/html/index.html

@@ -10,19 +10,28 @@
 		<div class="content">
 			<div class="player_count">Players Online: {{player_count}}/{{max_players}}</div>
 			<div class="items">
-				<a class="row news" href="/news">
+				<div class="row">
+					<a class="item news" href="/news">
 						<div class="icon"></div>
 						<div class="text">News</div>
 					</a>
-				<a class="row map" href="https://play.geekify.de">
+					<div class="news details">
+						<textarea name="news" rows=20 readonly>{{news}}</textarea>
+					</div>
+				</div>
+				<div class="row">
+					<a class="item map" href="https://play.geekify.de">
 						<div class="icon"></div>
 						<div class="text">Map</div>
 					</a>
-				<a class="row whitelist" href="/request">
+				</div>
+				<div class="row">
+					<a class="item whitelist" href="/request">
 						<div class="icon"></div>
 						<div class="text">Request Invite</div>
 					</a>
 				</div>
 			</div>
+		</div>
 	</body>
 </html>

homepage/main.py

@@ -7,9 +7,18 @@ from random import random, choice
 # echo -n "["; ls | xargs -I{} echo -n \"{}\",; echo "]"
 BG_IMAGES = listdir("./static/img/background")
 
+news = """
+=== 2021-03-24 ===
+* TestABC
+* FooBar
+
+=== 2020-xx-xx ===
+* Map now available
+"""
+
 @route("/")
 def index():
-    return template("html/index.html", **{"player_count": int(random()*20), "max_players": 20})
+    return template("html/index.html", **{"player_count": int(random()*20), "max_players": 20, "news": news})
 
 @route("/request")
 def request_whitelist():

homepage/static/css/styles.css

@@ -47,10 +47,9 @@ body {
   content:url('/img/writable_book.png');
 }
 
-.row {
+.item {
   display: flex;
   background-color: gray;
-  margin-bottom: 10pt;
   padding: 2pt;
   color: #d7d7d7;
   border: 5px solid black;
@@ -61,7 +60,7 @@ body {
   box-shadow: 5px 5px 15px black;
 }
 
-.row:hover {
+.item:hover {
   background-color: red;
   cursor: pointer;
   background-image: url("/img/redstone_lamp_on.png");
@@ -70,24 +69,44 @@ body {
   text-decoration: underline;
 }
 
-.items :last-child {
+.row {
+  margin-bottom: 10pt;
+}
+
+.row :last-child {
   margin-bottom: 0pt;
 }
 
-.row .icon {
+.item .icon {
   width: 50pt;
   height: auto;
   image-rendering: crisp-edges;
   padding: 10pt;
 }
 
-.row .text {
+.item .text {
   display: flex;
   align-items: center;
   font-size: 25pt;
   font-weight: bold;
 }
 
+.details {
+  display: flex;
+  justify-content: center;
+}
+
+.row .details.news textarea {
+  resize: none;
+  width: 90%;
+  background: url("/img/stripped_birch_log.png");
+  background-size: 80px;
+  border: none;
+  padding: 10pt;
+  margin-top: 5pt;
+  box-shadow: 5px 5px 15px black;
+}
+
 @font-face {
   font-family: 'minecraft';
   src: URL('/fonts/Minecraft.ttf') format('truetype');