From 27207a61751c7dbb7a26fa05b2d5180b3c9afd51 Mon Sep 17 00:00:00 2001
From: Dylan Hicks <dylanh333@ucc.asn.au>
Date: Sat, 16 Feb 2019 15:29:03 +0800
Subject: [PATCH] Removed superfluous outer container from body in base.html,
 and replaced the <div>s used for the header, content and footer with their
 HTML5 semantic counterparts: <header>, <main>, and <footer>.

Gave the top navigation bar a _massive_ overhaul, making extensive use of CSS3's flex properties.

Modified the behaviour of the body and its top level header, main and footer to behave responsively, and tested this on various sized viewports.

Revamped the easter egg ;)

Admin page is royally broken, so this will be the next thing for me to fix.
---
 src/static/admin_custom.css |  17 +-
 src/static/shared.css       | 608 +++++++++++++++++++++---------------
 src/templates/base.html     |  91 +++---
 3 files changed, 396 insertions(+), 320 deletions(-)

diff --git a/src/static/admin_custom.css b/src/static/admin_custom.css
index 629d6c0..5d0d0d5 100644
--- a/src/static/admin_custom.css
+++ b/src/static/admin_custom.css
@@ -2,16 +2,6 @@
     display: inline-block;
 }
 
-.logo span {
-    transform: rotate(45deg);
-}
-
-.logo span:hover {
-    animation: spin 0.5s linear infinite;
-}
-
-@keyframes spin { 100% { transform: rotate(360deg); } }
-
 #branding h1 {
     float: left;
 }
@@ -21,16 +11,11 @@
     margin-right: -440px;
 }
 
-#header {
-    padding: 0;
-    height: auto;
-}
-
 #admin-header {
     padding: 0px 40px;
 }
 
-#admin-header, #container {
+#admin-header, body {
     overflow: auto;
 }
 
diff --git a/src/static/shared.css b/src/static/shared.css
index 7ded656..16e7797 100644
--- a/src/static/shared.css
+++ b/src/static/shared.css
@@ -1,70 +1,272 @@
-/* memberdb: css used by both main site & admin pages
- * some of this is just copied from the admin css */
+/* Apply foating card style */
+nav, .form-container {
+	background: #303030;
+	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5);
+}
+
+* {
+	box-sizing: border-box;
+}
 
-/* BEGIN MEMBERDB.CSS */
+a {
+    color: inherit;
+}
 
 html {
- height: 100%;
+	height: 100%;
+}
+
+body {
+	position: relative;
+	min-height: 100%;
+    padding-bottom: 80px; /* allows room for footer */
+    padding-top: 80px; /* allows room for header */
+
+	background-color: #181818;
+	color: #fff;
+
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-weight: normal;
+
+	margin: 0;
 }
 
-#content {
- width: 80%;
- margin: 0 10%;
+@media (max-width: 1280px) {
+    main, nav, footer {
+        width: 100%;
+    	margin: 0px;
+    }
+
+    nav {
+        width: 100%;
+        top: 0px;
+    }
+
+    nav, .form-container {
+        border-radius: 0px;
+    }
 }
 
-.centered {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
+@media (min-width: 1280px) {
+    main, nav, footer {
+        width: 1280px;
+    	margin: 0px auto;
+        left: 0px; right: 0px;
+    }
+
+    nav {
+        top: 10px;
+    }
+
+    nav, .form-container {
+        border-radius: 8px;
+    }
 }
 
+nav {
+	display: flex;
+	position: fixed;
+    line-height: 60px;
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    z-index: 100;
+}
+    nav, nav ul, nav li, nav li > * {
+        height: 60px;
+    }
+
+    nav ul, nav li, nav li > * {
+        position: relative;
+    }
+
+    nav ul {
+        display: flex;
+        margin: 0px;
+        padding: 0px;
+        list-style: none;
+        flex-shrink: 1;
+    }
+        nav > ul.-left, nav > ul.-right {
+            width: 100%; /* this will automatically collapse as appropriate with flex-shrink applied */
+            flex-grow: 0;
+        }
+
+        nav > ul.-centre {
+            flex-grow: 1;
+            justify-content: center;
+        }
+
+        nav > ul.-right {
+            flex-grow: 0;
+            justify-content: flex-end;
+        }
+
+    nav li {
+        display: block;
+        flex-shrink: 0;
+        position: relative;
+        margin: 0px 1px;
+    }
+        nav li > * {
+            display: block;
+            position: relative;
+            padding: 0px 20px;
+
+            font-size: 20px;
+            font-variant-caps: all-petite-caps;
+            text-decoration: none;
+
+            transition-property: background, color;
+            transition-duration: 100ms;
+        }
+
+        nav li > :first-child {
+            margin-left: 0px;
+        }
+
+        nav li > :last-child {
+            margin-right: 0px;
+        }
+
+        nav li > a:hover, nav li > a:focus {
+            color: #fff;
+            background-color: rgba(255,255,255,0.1);
+            outline: none;
+        }
+
+        nav li > a.-selected {
+            color: #fff;
+            box-shadow: 0px -2px 0px 0px #fff inset;
+        }
+
+        nav li > a.logo {
+            display: block;
+            width: 60px;
+            padding: 0px;
+        }
+
+    nav li+li::before,
+    nav > ul.-left > li:last-child::after,
+    nav > ul.-centre > li:first-child::before,
+    nav > ul.-centre > li:last-child::after,
+    nav > ul.-right > li:first-child::before {
+        display: block;
+        position: absolute;
+        top: 0px; bottom: 0px; left: -2px;
+        content: "";
+
+        border-left: 1px solid rgba(0,0,0,0.5);
+        border-right: 1px solid rgba(255,255,255,0.1);
+    }
+        nav > ul.-left > li:last-child::after,
+        nav > ul.-centre > li:last-child::after {
+            left: auto;
+            right: -2px;
+        }
+
+nav li > a.logo::before {
+    display: block;
+    position: absolute;
+    width: 42px; height: 42px;
+    top: 0px; right: 0px; bottom: 0px; left: 0px;
+    margin: auto;
+    content: "";
+
+    background-image: url("ucc-logo-white.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+    @keyframes logo-rotate {
+        0% {transform: rotate(0deg);}
+        25% {transform: rotate(90deg);}
+        50% {transform: rotate(180deg);}
+        75% {transform: rotate(270deg);}
+        100% {transform: rotate(360deg);}
+    }
+
+    nav li > a.logo:hover::before {
+        animation-name: logo-rotate;
+        animation-delay: 5s;
+        animation-duration: 500ms;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+    }
+
+footer {
+	display: block;
+	position: absolute;
+    bottom: 0px;
+	overflow: hidden;
+	text-align: center;
+
+    color: #707070;
+}
+
+	footer > p {
+		padding: 0;
+		margin: 12px 0 6px 0;
+	}
+
+	footer > ul {
+        margin-left: 0px;
+        margin-right: 0px;
+        padding: 0px;
+		list-style: none;
+	}
+
+	footer > ul > li {
+		display: inline;
+		margin: 0px;
+	}
+
+	footer > ul > li+li::before {
+		content: "\2022  ";
+	}
+
 .form-container {
- position: relative;
+	position: relative;
 	margin: 20px auto;
 	padding: 10px;
-
-	border-radius: 8px;
-	background: #303030;
-	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5);
 }
 
 .text-center, .form-header {
- text-align: center;
+	text-align: center;
 }
 
 .form-header .tips {
- color: #333;
- font-weight: 400;
- border-radius: 10px;
- background-color: #feb;
- padding: 10px 10px 7px 10px;
- margin: 10px 10px 20px 10px;
- display: inline-block;
- text-align: center;
- line-height: 23px;
+	color: #333;
+	font-weight: 400;
+	border-radius: 10px;
+	background-color: #feb;
+	padding: 10px 10px 7px 10px;
+	margin: 10px 10px 20px 10px;
+	display: inline-block;
+	text-align: center;
+	line-height: 23px;
 }
 
 .form-header .tips.error {
- color: #000;
- background-color: rgb(255, 145, 0);
+	color: #000;
+	background-color: rgb(255, 145, 0);
 }
 
 fieldset {
- border: none;
+	border: none;
 }
 
 .form-row, .submit-row {
- margin: 10px 0px;
+	margin: 10px 0px;
 }
 
 .submit-row {
-    display: flex;
-    margin-bottom: 0px;
+	   display: flex;
+	   margin-bottom: 0px;
 }
 
 .submit-row *+* {
- margin-left: 10px;
+	margin-left: 10px;
 }
 
 .form-row label {}
@@ -74,335 +276,231 @@ fieldset {
 .form-row input[type="email"],
 .form-row input[type="password"],
 .form-row textarea {
- width: 100%;
+	width: 100%;
 }
 
 .form-row input[type=checkbox],
 .form-row.readonly .text {
- display: inline;
- line-height: 20px;
+	display: inline;
+	line-height: 20px;
 }
 
 .form-row.readonly .text {
- padding-left: 10px;
- color: #444;
+	padding-left: 10px;
+	color: #444;
 }
 
 .help {
- margin: 8px 8px 0 8px;
+	margin: 8px 8px 0 8px;
 }
 
 .help a {
- color: #777;
+	color: #777;
 }
 
 ul.errorlist {
- list-style: none;
- background-color: #a33;
- color: white;
- padding: 10px 30px;
- margin: 30px 0 10px 0;
- font-weight: bold;
+	list-style: none;
+	background-color: #a33;
+	color: white;
+	padding: 10px 30px;
+	margin: 30px 0 10px 0;
+	font-weight: bold;
 }
 
-nav {
- background-color: #333;
- overflow: auto; /* make navbar expand in case the tab buttons flow to a second row */
-}
-
-.navtab {
- float: left;
- text-decoration: none;
- color: white;
- text-align: center;
- font-size: 22px;
- font-variant-caps: all-petite-caps;
- font-weight: 400;
- line-height: 26px;
- padding: 17px 20px; /* line-height and padding adds up to minimum 60px element height */
- border-style: solid;
- border-color: #555;
- border-width: 0 1px 0 1px;
- margin-right: -1px;
- background-color: #3c3c3c;
-}
-
-.navtab:hover, .navtab.active {
- color: #eee;
- background-color: black;
-}
-
-.navtab:last-child {
- border-right: 1.5px solid #555;
-}
 
 .member-details, .membership-details {
- width: 100%;
- text-align: left;
-}
-
-/* END MEMBERDB.CSS */
-
-
-
-
-
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    position: relative;
-    min-height: 100%;
-
-    background-color: #181818;
-    color: #fff;
-
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: normal;
-
-    margin: 0;
-}
-
-.logo {
-    float: left;
-    margin: 5px 30px 5px 20px;
-    height: 50px;
-    width: 50px;
-    overflow: hidden; /* hide the overflow when it is rotated on the admin site */
-}
-
-.logo span {
-    height: 100%;
-    width: 100%;
-    display: block;
-    background-image: url("ucc-logo-white.png");
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-}
-
-#container {
-    padding-bottom: 60px;
-    position: static;
-}
-
-#footer {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    clear: both;
-    background-color: #ccc;
-    color: #777;
-    text-align: center;
-    overflow: hidden;
-}
-
-#footer p {
-    padding: 0;
-    margin: 12px 0 6px 0;
-}
-
-.linkslist a {
-    display: inline-block;
-    padding: 0;
-    margin: 6px 10px 12px 10px;
-    color: #555;
-}
-
-.linkslist a:visited {
-    color: #333;
+	width: 100%;
+	text-align: left;
 }
 
 /* make div expand to contain float children */
 .float-container {
-    overflow: auto;
-    display: inline-block;
+	overflow: auto;
+	display: inline-block;
 }
 
 
 
 /* MESSAGES & ERRORS */
 ul.messagelist {
-    padding: 0;
-    margin: 0;
+	padding: 0;
+	margin: 0;
 }
 
 ul.messagelist li {
-    display: block;
-    font-weight: 400;
-    padding: 10px 10px 10px 65px;
-    margin: 0 0 10px 0;
-    background: #dfd url(../img/icon-yes.svg) 40px 12px no-repeat;
-    background-size: 16px auto;
-    color: #333;
+	display: block;
+	font-weight: 400;
+	padding: 10px 10px 10px 65px;
+	margin: 0 0 10px 0;
+	background: #dfd url(../img/icon-yes.svg) 40px 12px no-repeat;
+	background-size: 16px auto;
+	color: #333;
 }
 
 ul.messagelist li.warning {
-    background: #ffc url(../img/icon-alert.svg) 40px 14px no-repeat;
-    background-size: 14px auto;
+	background: #ffc url(../img/icon-alert.svg) 40px 14px no-repeat;
+	background-size: 14px auto;
 }
 
 ul.messagelist li.error {
-    background: #ffefef url(../img/icon-no.svg) 40px 12px no-repeat;
-    background-size: 16px auto;
+	background: #ffefef url(../img/icon-no.svg) 40px 12px no-repeat;
+	background-size: 16px auto;
 }
 
 .errornote {
-    font-weight: 700;
-    display: block;
-    padding: 10px 12px;
-    margin: 0 0 10px 0;
-    color: #ba2121;
-    border: 1px solid #ba2121;
-    border-radius: 4px;
-    background-color: #fff;
-    background-position: 5px 12px;
+	font-weight: 700;
+	display: block;
+	padding: 10px 12px;
+	margin: 0 0 10px 0;
+	color: #ba2121;
+	border: 1px solid #ba2121;
+	border-radius: 4px;
+	background-color: #fff;
+	background-position: 5px 12px;
 }
 
 /* FORM BUTTONS */
 .button, input[type=submit], input[type=button] {
-    display: inline-block;
-    height: 36px;
-    transform: translateY(0px);
-    padding: 0 16px;
-
-    border: 1px solid rgba(0,0,0,0.4);
-    border-radius: 4px;
-    box-shadow:
-        0px -2px 0px 0px rgba(0,0,0,0.4) inset,
-        0px 1px 3px 0px rgba(0,0,0,0.2),
-        0px 1px 0px 0px rgba(0,0,0,0.1)
-    ;
-    background: #484848;
-    color: white;
-    cursor: pointer;
-    text-decoration: none;
-    font-size: inherit;
-
-    transition-duration: 50ms;
-    transition-property: height, margin, transform, box-shadow, filter;
+	display: inline-block;
+	height: 36px;
+	transform: translateY(0px);
+	padding: 0 16px;
+
+	border: 1px solid rgba(0,0,0,0.4);
+	border-radius: 4px;
+	box-shadow:
+		0px -2px 0px 0px rgba(0,0,0,0.4) inset,
+		0px 1px 3px 0px rgba(0,0,0,0.2),
+		0px 1px 0px 0px rgba(0,0,0,0.1)
+	;
+	background: #484848;
+	color: white;
+	cursor: pointer;
+	text-decoration: none;
+	font-size: inherit;
+    white-space: nowrap;
+
+	transition-duration: 50ms;
+	transition-property: height, margin, transform, box-shadow, filter;
 }
 
 /* Hack to get text vertically centred in a.button */
 .button::before {
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
-    content: "";
+	display: inline-block;
+	height: 100%;
+	vertical-align: middle;
+	content: "";
 }
 
 .button:focus, input[type=submit]:focus, input[type=button]:focus,
 .button:hover, input[type=submit]:hover, input[type=button]:hover,
 .button:active, input[type=submit]:active, input[type=button]:active {
-    filter: brightness(1.35);
-    outline: none;
+	filter: brightness(1.35);
+	outline: none;
 }
 
 .button.-disabled, input[type=submit]:disabled, input[type=button]:disabled {
-    filter: none;
-    text-shadow: 0px 1px 0px rgba(255,255,255,0.5);
-    color: rgba(0, 0, 0, 0.5);
-    opacity: 0.5;
-    cursor: default;
+	filter: none;
+	text-shadow: 0px 1px 0px rgba(255,255,255,0.5);
+	color: rgba(0, 0, 0, 0.5);
+	opacity: 0.5;
+	cursor: default;
 }
 
 .button:active, input[type=submit]:active, input[type=button]:active {
-    height: 33px;
-    margin-bottom: 3px;
-    transform: translateY(3px);
+	height: 33px;
+	margin-bottom: 3px;
+	transform: translateY(3px);
 
-    box-shadow: none;
-    filter: brightness(0.5);
-    outline: none;
+	box-shadow: none;
+	filter: brightness(0.5);
+	outline: none;
 }
 
 .button.-default, input[type=submit].-default {
-    margin-left: auto;
-    font-weight: 400;
-    background: #609ab6;
+	margin-left: auto;
+	font-weight: 400;
+	background: #609ab6;
 }
 
 .help, p.help, form p.help, div.help, form div.help, div.help li {
-    color: #999;
+	color: #999;
 }
 
 /* TEXT BOXES */
 input[type="text"], input[type="email"], input[type="password"], textarea {
-    display: block;
-    position: relative;
-    height: 36px;
-    padding: 4px;
+	display: block;
+	position: relative;
+	height: 36px;
+	padding: 4px;
 
-    border: 1px solid rgba(0,0,0,0.4);
-    border-radius: 4px;
-    box-shadow: 0px 2px 1px rgba(0,0,0,0.2) inset;
-    background-color: #484848;
-    color: white;
+	border: 1px solid rgba(0,0,0,0.4);
+	border-radius: 4px;
+	box-shadow: 0px 2px 1px rgba(0,0,0,0.2) inset;
+	background-color: #484848;
+	color: white;
 
-    transition-property: background-color;
-    transition-duration: 100ms;
+	transition-property: background-color;
+	transition-duration: 100ms;
 }
 
 input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="password"]:focus,
 textarea:active {
-    background-color: #686868;
-    outline: none;
+	background-color: #686868;
+	outline: none;
 }
 
 /* TABLES */
 
 table {
-    border-collapse: collapse;
-    border-color: #ccc;
+	border-collapse: collapse;
+	border-color: #ccc;
 }
 
 td, th {
-    font-size: 13px;
-    line-height: 16px;
-    border-bottom: 1px solid #eee;
-    vertical-align: top;
-    padding: 8px;
-    /*font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;*/
+	font-size: 13px;
+	line-height: 16px;
+	border-bottom: 1px solid #eee;
+	vertical-align: top;
+	padding: 8px;
+	/*font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;*/
 }
 
 th {
-    font-weight: 600;
-    text-align: left;
+	font-weight: 600;
+	text-align: left;
 }
 
 thead th,
 tfoot td {
-    color: #666;
-    padding: 5px 10px;
-    font-size: 11px;
-    background: #fff;
-    border: none;
-    border-top: 1px solid #eee;
-    border-bottom: 1px solid #eee;
+	color: #666;
+	padding: 5px 10px;
+	font-size: 11px;
+	background: #fff;
+	border: none;
+	border-top: 1px solid #eee;
+	border-bottom: 1px solid #eee;
 }
 
 tfoot td {
-    border-bottom: none;
-    border-top: 1px solid #eee;
+	border-bottom: none;
+	border-top: 1px solid #eee;
 }
 
 thead th.required {
-    color: #000;
+	color: #000;
 }
 
 tr.alt {
-    background: #f6f6f6;
+	background: #f6f6f6;
 }
 
 .row1 {
-    background: rgba(255, 255, 255, 0.7);
+	background: rgba(255, 255, 255, 0.7);
 }
 
 .row2 {
-    background: rgba(230, 230, 230, 0.7);
+	background: rgba(230, 230, 230, 0.7);
 }
diff --git a/src/templates/base.html b/src/templates/base.html
index 60c4565..81264f3 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -7,55 +7,51 @@
     <link rel="shortcut icon" type="image/png" href="{% static 'ucc-logo.png' %}"/>
     {% block prestyle %}{% endblock %}
     <link rel="stylesheet" type="text/css" href="{% static "shared.css" %}">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {% block extrahead %}{% endblock %}
     {% block extrastyle %}{% endblock %}
     {% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %}
 </head>
 
 <body {% block bodyattrs %}{% endblock %}>
-
-<!-- Container -->
-<div id="container">
-
     {% block header_div %}<!-- Header -->
-    <div id="header">
-        {% block navbar %}
+    <header>
+        {% block navbar %}{% with url_name=request.resolver_match.url_name %}
         <nav>
-            {% block branding %}
-            <a class="logo" title="UCCPortal homepage">
-                <span></span>
-            </a>
-            {% endblock %}
-
-            {# fancy automatic navbar thing from https://stackoverflow.com/questions/39639264 #}
-            {% with url_name=request.resolver_match.url_name %}
-            {% if request.member %}
-            <a class="navtab {% if url_name == 'home' %}active{% endif %}" href="{% url "memberdb:home" %}">Member home</a>
-            {% endif %}
-            <a class="navtab {% if url_name == 'register' %}active{% endif %}" href="{% url "memberdb:register" %}">Register</a>
+            <ul class="-left">
+                {% block branding %}
+                    <li><a class="logo" title="UCCPortal homepage"></a></li>
+                {% endblock %}
+            </ul>
+            <ul class="-centre">
+                {# fancy automatic navbar thing from https://stackoverflow.com/questions/39639264 #}
 
-            {% if not request.user.is_authenticated %}
-            <a class="navtab {% if url_name == 'login' %}active{% endif %}" href="{% url "memberdb:login" %}">Login</a>
-            {% else %}
-            <a class="navtab {% if url_name == 'renew' %}active{% endif %}" href="{% url "memberdb:renew" %}">Renew membership</a>
+                {% if request.member %}
+                    <li><a class="{% if url_name == 'home' %}-selected{% endif %}" href="{% url "memberdb:home" %}">Member home</a></li>
+                {% endif %}
 
-            {% if request.user.is_staff %}
-            <a class="navtab {% block adminactive %}{% endblock %}" href="{% url "admin:index" %}">Admin site</a>
-            {% endif %}
+                <li><a class="{% if url_name == 'register' %}-selected{% endif %}" href="{% url "memberdb:register" %}">Register</a></li>
 
-            {% endif %}
-
-            {% if request.user.is_authenticated or request.member %}
-            <a class="navtab {% if url_name == 'logout' %}active{% endif %}" href="{% url "memberdb:logout" %}">Logout</a>
-            {% endif %}
-            {% endwith %}
+                {% if not request.user.is_authenticated %}
+                    <li><a class="{% if url_name == 'login' %}-selected{% endif %}" href="{% url "memberdb:login" %}">Login</a></li>
+                {% else %}
+                    <li><a class="{% if url_name == 'renew' %}-selected{% endif %}" href="{% url "memberdb:renew" %}">Renew membership</a></li>
+                    {% if request.user.is_staff %}
+                        <li><a class="{% block adminactive %}{% endblock %}" href="{% url "admin:index" %}">Admin site</a></li>
+                        {% endif %}
+                {% endif %}
+            </ul>
+            <ul class="-right">
+                {% if request.user.is_authenticated or request.member %}
+                    <li><a class="{% if url_name == 'logout' %}-selected{% endif %}" href="{% url "memberdb:logout" %}">Logout</a></li>
+                {% endif %}
+            </ul>
         </nav>
-        {% endblock %}
-
+        {% endwith %}{% endblock %}
         {% block header %}{% endblock %}
-
-    </div>
+    </header>
     {% endblock %}<!-- END Header -->
+
     {% block breadcrumbs %}{% endblock %}
     {% block messages %}{% if messages %}
     <ul class="messagelist">{% for message in messages %}
@@ -64,7 +60,7 @@
     {% endif %}{% endblock messages %}
 
     <!-- Content -->
-    <div id="content">
+    <main>
         {% block pretitle %}{% endblock %}
         {% block content_title %}<h1></h1>{% endblock %}
         {% block content %}
@@ -72,27 +68,24 @@
         <!-- sidebar -->
         {% block sidebar %}{% endblock %}
         <br class="clear">
-    </div>
+    </main>
     <!-- END Content -->
 
     <!-- Footer -->
     {% block footer %}
-    <div id="footer">
+    <footer>
         <p>
-            The University Computer Club Inc.
+            The University Computer Club Inc.<br/>
             ABN: 98 843 368 069
         </p>
-        <div class="linkslist">
-            <a href="https://www.ucc.asn.au">main website</a>&#8226;
-            <a href="https://wiki.ucc.asn.au">UCC wiki</a>&#8226;
-            <a href="https://www.ucc.asn.au/aboutucc/contact.ucc">contact us</a>&#8226;
-            <a href="https://gitlab.ucc.asn.au/frekk/uccportal">source code</a>
-        </div>
-    </div>
+        <ul>
+            <li><a href="https://www.ucc.asn.au">main website</a></li>
+            <li><a href="https://wiki.ucc.asn.au">UCC wiki</a></li>
+            <li><a href="https://www.ucc.asn.au/aboutucc/contact.ucc">contact us</a></li>
+            <li><a href="https://gitlab.ucc.asn.au/frekk/uccportal">source code</a></li>
+        </ul>
+    </footer>
     {% endblock %}
     <!-- END Footer -->
-</div>
-<!-- END Container -->
-
 </body>
 </html>
-- 
GitLab