feat: Move more from the website into here

assets/css/main.css

@@ -3,21 +3,21 @@
     font-family: roboto;
     src: url(/fonts/Roboto-Regular.ttf)
 }
-
 @font-face {
     font-family: overpass;
     src: url(/fonts/Overpass-Regular.ttf)
 }
 
-/* Element styling */
+/* Consistent background and text color */
 html {
     background-color: #212121;
     color: #ffffff;
     font-family: Overpass;
 }
 
-footer {
-    width: 100%;
+/* Keep the paddings consistent */
+body {
+    padding: 5px;
 }
 
 h1, h2, h3 {
@@ -29,55 +29,38 @@ a {
     color: white;
 }
 
-.page-title {
-    color: #9b59b6;
-}
-
-ul {
-    margin-top: 2px;
-}
-
-/* Layouting */
+/* General fixes */
 * {
     /* To fix sizing issues */
     box-sizing: border-box;
 }
 
-.container {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-}
-
+/* Horizontal flow using flexbox */
 .horizontal {
+    display: flex;
     flex-direction: row;
 }
 
+/* Horizontally centered using flexbox */
 .horizontal-center {
     display: flex;
     justify-content: center;
-    width: 100%;
 }
 
+/* Vertical flow using flexbox */
 .vertical {
     display: flex;
     flex-direction: column;
-    width: 100% !important;
+    /*width: 100% !important;*/
 }
 
-.subbar-link {
-    padding: 5px;
-}
+/* Vertically center using flexbox */
+.vertical-center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 
-.title-sub {
-    margin-top: 0px;
-    margin-bottom: 10px;
-
-    color: white;
-}
-
-.title-sub-subbar {
-    margin-top: -20px;
+    height: 100%;
 }
 
 /* Text styling */
@@ -86,6 +69,7 @@ ul {
     padding: 4px;
 }
 
+/* Show a white border at the left side to indicate a quote */
 .quote {
     border-left: 2px;
     border-left-style: solid;
@@ -93,6 +77,7 @@ ul {
     padding-left: 4px;
 }
 
+/* Useful for warning the user of something */
 .warning {
     border-left: 2px;
     border-left-style: solid;
@@ -101,3 +86,63 @@ ul {
 
     color: #f1c40f;
 }
+
+/* Useful for the footer shown at the bottom of the page */
+.footer {
+    width: 100%;
+    margin-top: 30px;
+}
+
+/* Used a big <img /> showing my avatar */
+.avatar {
+    width: 200px;
+    height: 200px;
+    border-radius: 10px;
+    margin-right: 30px;
+}
+
+/* Keep entire site at a reasonable width on wide displays
+ * but let it stretch all the way on small displays (See media query).
+ */
+.header {
+    width: 42%;
+}
+
+/* Display the links below the header in a row instead of below each other. */
+#header-links ul {
+    list-style: none;
+    padding-left: 0px;
+    margin-bottom: 0px;
+    margin-top: 0px;
+}
+#header-links li {
+    display: inline;
+
+    font-size: large;
+    margin-left: 20px;
+}
+#header-links li:first-child {
+    margin-left: 0px;
+}
+
+/* Title font for the page */
+.name-title {
+    font-size: xxx-large;
+}
+
+/* Small screen adjustments */
+@media screen and (max-width: 720px) {
+    .header {
+	width: 100%;
+    }
+
+    .name-title {
+	font-size: x-large;
+    }
+
+    .avatar {
+	width: 100px;
+	height: 100px;
+	margin-right: 10px;
+    }
+}