From 2f50efb5d43d24f4921b9710bdb83a5a37173aa6 Mon Sep 17 00:00:00 2001
From: Midgard <midgard@zeus.ugent.be>
Date: Wed, 22 Jul 2020 14:06:16 +0200
Subject: [PATCH] Layout be less bad

---
 templates/base.html          | 74 ++++++++++++++++++------------------
 users/templates/profile.html | 49 +++++++-----------------
 2 files changed, 50 insertions(+), 73 deletions(-)
diff --git a/templates/base.html b/templates/base.html
index 09dadd7..a818a26 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -6,6 +6,12 @@
 	<title>{% block title %}Zeus WPI Kelderregistratiesysteem™{% endblock %}</title>
 	{% block styles %}{% endblock %}
 	<style>
+		body {
+			background: #141313;
+			color: #999;
+			margin: 0;
+		}
+
 		nav {
 			width: 100vw;
 			background-color: #ff8000;
@@ -14,91 +20,83 @@
 			padding-bottom: 1em;
 		}
 
-
-		body {
-			margin: 0;
-		}
-
 		nav ul {
 			margin: 0;
 			padding: 0;
-
-			/*this option by default dispose the elements in a row (flex-direction: row)*/
-			display: flex;
 		}
 
-
 		nav li {
 			list-style-type: none;
+			display: inline-block;
 			margin: 0 2vw;
-			/* our font-size will be 3% of the height of the viewport */
+			/* 3% of the height of the viewport */
 			font-size: 3vh;
 		}
 
 		nav a {
 			text-decoration: none;
 
-			/*below I changed the color*/
 			color: black;
-			/*I added some padding*/
 			padding: 2vw;
-			/*also changed the font family but that's totally irrelevant*/
 			font-family: monospace;
 		}
 
-		nav a:hover {
-			background-color: rgba(255, 128, 0, 0.53);
+		nav a:hover, nav a:focus, nav button:hover, nav buttton:focus {
+			background-color: rgba(255, 255, 255, 0.5);
+		}
+
+		button {
+			display: none;
 		}
 
 		/*change the layout of the navigation bar for all the screens
 	that have a width less or equal than 500px*/
 
 		@media only screen and (max-width: 750px) {
-			/*shows elements in a column*/
-			ul {
-				flex-direction: column;
-			}
-
-			/* deletes margin on top or bottom of the a tag*/
-			li {
+			nav li {
+				display: block;
 				margin: 0;
 			}
 
-			/* makes sure that the a tag will take the entire screen*/
-			a {
+			nav a {
 				display: block;
 			}
 
 			button {
-				/*makes the button visible*/
 				display: block;
 
-				/*since we are here, we can style it a little bit!*/
 				padding: 2vw;
 				font-size: 3vh;
-				background-color: #AFE0FF;
+				background-color: #ff8000;
 				border: none;
 
-				/*outline none removes the default blue border that appears anytime you click on the button*/
-				outline: none;
-
 				cursor: pointer;
-
-				/*this put the button on the left*/
-				align-self: flex-start;
 			}
 		}
 
-		button {
-			display: none;
+		main {
+			margin: auto;
+			width: 50%;
+			padding: 10px;
+		}
+
+		input {
+			width: 100%;
+		}
+
+		input[type=text] {
+			width: 100%;
+			padding: 12px 20px;
+			margin: 8px 0;
+			box-sizing: border-box;
 		}
 	</style>
 </head>
 <body>
 
 <nav>
+	<button id="nav-button">✖</button>
 	<ul>
-		<button id="nav-button">🞬</button>
 		<li>
 			<a href="{% url 'events:index' %}">
 				Home</a>
@@ -111,8 +109,9 @@
 	</ul>
 </nav>
 <h1>Zeus WPI Kelderregistratiesysteem™</h1>
+<main>
 {% block content %}{% endblock %}
-</body>
+</main>
 <script>
 	document.addEventListener("DOMContentLoaded", function () {
 		let button = document.getElementById('nav-button')
@@ -125,4 +124,5 @@
 		})
 	});
 </script>
+</body>
 </html>
diff --git a/users/templates/profile.html b/users/templates/profile.html
index d2ba0cb..b83aed3 100644
--- a/users/templates/profile.html
+++ b/users/templates/profile.html
@@ -2,42 +2,19 @@
 
 {% block title %}KeRS - Profile{% endblock %}
 
-{% block styles %}
-	<style>
-		.container {
-			margin: auto;
-			width: 50%;
-			padding: 10px;
-		}
-
-		input {
-			width: 100%;
-		}
-
-		input[type=text] {
-			width: 100%;
-			padding: 12px 20px;
-			margin: 8px 0;
-			box-sizing: border-box;
-		}
-	</style>
-{% endblock %}
-
 {% block content %}
-	<div class="container">
-		<h1>Profile</h1>
-		{% if user.is_authenticated %}
-			<p>Username: {{ username }}</p>
-			<label>Student number</label>
-			<input type="text" value="{{ user.student_number }}"/>
-			<label>Real name</label>
-			<input type="text" value="{{ user.real_name }}">
-			<input type="submit" value="Save"/>
-			<a href="/user/logout">Logout</a>
-		{% else %}
-			<p>Not logged in</p>
-			<a href="/login/zeus/register">Login</a>
-		{% endif %}
-	</div>
+	<h1>Profile</h1>
+	{% if user.is_authenticated %}
+		<p>Username: {{ username }}</p>
+		<label>Student number</label>
+		<input type="text" value="{{ user.student_number }}"/>
+		<label>Real name</label>
+		<input type="text" value="{{ user.real_name }}">
+		<input type="submit" value="Save"/>
+		<a href="/user/logout">Logout</a>
+	{% else %}
+		<p>Not logged in</p>
+		<a href="/login/zeus/register">Login</a>
+	{% endif %}
 {% endblock %}
 
