Add styles and libsass building

Highscore-Server/Dockerfile

@@ -2,8 +2,7 @@
 FROM python:3.10-alpine
 
 EXPOSE 8080
-# RUN apk add --no-cache gcc musl-dev linux-headers
-RUN apk add --no-cache postgresql-client
+RUN apk add --no-cache postgresql-client build-base
 WORKDIR /data
 
 COPY requirements.txt requirements.txt

Highscore-Server/requirements.txt

@@ -1,7 +1,11 @@
+Gunicorn
 Flask
 Flask-SQLAlchemy
 psycopg2-binary
 Flask-Migrate
 Flask-Caching
 Flask-wtf
-Gunicorn
+Flask-Assets
+libsass
+jsmin
+cssmin

Highscore-Server/server/extensions.py

@@ -1,7 +1,9 @@
 from flask_sqlalchemy import SQLAlchemy
 from flask_migrate import Migrate
+from flask_assets import Environment
 from flask_caching import Cache
 
 db = SQLAlchemy()
 migrate = Migrate()
+assets = Environment()
 cache = Cache(config={'CACHE_TYPE': 'simple'})

Highscore-Server/server/server.py

@@ -1,6 +1,6 @@
-import os
 from flask import Flask
-from extensions import db, migrate, cache
+from flask_assets import Bundle
+from extensions import db, migrate, cache, assets
 from config import MIGRATION_DIR, INSTANCE_DIR
 from views import blueprint
 
@@ -9,9 +9,13 @@ app.config.from_pyfile('config.py')
 
 db.init_app(app)
 migrate.init_app(app, db, directory=MIGRATION_DIR)
-cache.init_app(app)
 
 with app.app_context():
     db.create_all()
 
+assets.init_app(app)
+styles = Bundle("style.sass", filters="libsass, cssmin", output="gen/styles.css", depends="style.sass")
+assets.register("styles", styles)
+
+cache.init_app(app)
 app.register_blueprint(blueprint)

Highscore-Server/server/static/style.sass

@@ -0,0 +1,111 @@
+$black: var(--black)
+$white: var(--white)
+$primary: var(--primary)
+$secondary: var(--secondary)
+$gold: var(--gold)
+$silver: var(--silver)
+$bronze: var(--bronze)
+
+@import url('https://fonts.cdnfonts.com/css/cmu-serif')
+
+\:root
+	--black: 21, 21, 21
+	--white: 232, 227, 227
+	--primary: 213, 214, 130
+	--secondary: 185, 77, 77
+	--gold: 255, 222, 70
+	--silver: 229, 220, 206
+	--bronze: 193, 145, 69
+
+*
+	box-sizing: border-box
+	font-family: 'CMU Serif', serif
+
+html
+	margin: 0
+	padding: 0
+
+body
+	margin: 0
+	padding: 0
+	display: flex
+	flex-direction: row
+	background-color: RGB($black)
+	color: RGB($white)
+
+.background
+	width: 100%
+	height: 100vh
+	height: 100dvh
+
+	object-fit: cover
+	position: absolute
+	z-index: 1
+
+.app
+	margin: 0 auto
+	padding: 2rem
+	width: 800px
+	min-height: 100vh
+	background-color: RGBA($black, 0.9)
+	backdrop-filter: blur(0.5rem)
+	position: relative
+	z-index: 2
+
+	> table
+		width: 100%
+
+.title
+	width: 100%
+	height: auto
+	text-align: center
+
+.subtitle
+	margin-bottom: 1rem
+	padding: 0
+
+	text-align: center
+	font-weight: bolder
+	font-size: 1.2em
+
+	color: RGB($secondary)
+
+	> span
+		padding: 0 0.1rem
+
+		color: transparent
+		background: RGB($secondary)
+
+nav
+	margin: 0
+	padding: 0
+
+	height: 3rem
+
+	display: flex
+	flex-direction: row
+	justify-content: center
+
+	> hr
+		margin: auto 0.25rem
+
+		height: 1.75rem
+		width: 3px
+
+		background-color: RGB($primary)
+		border: none
+
+	> a
+		margin: auto 0.25rem
+		padding: 0.5rem 1rem
+
+		text-decoration: none
+
+		background-color: transparent
+		color: RGB($primary)
+		border-radius: 2px
+
+		transition: background-color 0.2s ease-in-out
+	
+	> a:hover
+		background-color: RGBA($primary, 0.3)