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)
 }
 
-/* Consistent background and text color */
+/* Element styling */
 html {
     background-color: #212121;
     color: #ffffff;
     font-family: Overpass;
 }
 
-/* Keep the paddings consistent */
-body {
-    padding: 5px;
+footer {
+    width: 100%;
 }
 
 h1, h2, h3 {
@@ -29,38 +29,55 @@ a {
     color: white;
 }
 
-/* General fixes */
+.page-title {
+    color: #9b59b6;
+}
+
+ul {
+    margin-top: 2px;
+}
+
+/* Layouting */
 * {
     /* To fix sizing issues */
     box-sizing: border-box;
 }
 
-/* Horizontal flow using flexbox */
-.horizontal {
+.container {
     display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.horizontal {
     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;
 }
 
-/* Vertically center using flexbox */
-.vertical-center {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+.subbar-link {
+    padding: 5px;
+}
 
-    height: 100%;
+.title-sub {
+    margin-top: 0px;
+    margin-bottom: 10px;
+
+    color: white;
+}
+
+.title-sub-subbar {
+    margin-top: -20px;
 }
 
 /* Text styling */
@@ -69,7 +86,6 @@ a {
     padding: 4px;
 }
 
-/* Show a white border at the left side to indicate a quote */
 .quote {
     border-left: 2px;
     border-left-style: solid;
@@ -77,7 +93,6 @@ a {
     padding-left: 4px;
 }
 
-/* Useful for warning the user of something */
 .warning {
     border-left: 2px;
     border-left-style: solid;
@@ -86,63 +101,3 @@ a {
 
     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;
-    }
-}