first commit

src/css/style.css

@@ -0,0 +1,187 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+:root {
+    --color-background0: #0e0e0e;
+    --color-background1: #070631;
+    --color-background2: dimgray;
+    --color-border0: #FFFFFF;
+    --color-border1: grey;
+    --color-text: #FFFFFF;
+    --color-transparent: rgba(0, 0, 0, 0);
+}
+
+body {
+    text-align: center;
+    height: 100000px;
+}
+
+html {
+    font-family: Montserrat, sans-serif;
+    min-height: 100%;
+    background: var(--color-background0);
+    background: -moz-linear-gradient(217deg, var(--color-background0) 0%, var(--color-background1) 100%);
+    background: -webkit-linear-gradient(217deg, var(--color-background0) 0%, var(--color-background1) 100%);
+    background: linear-gradient(217deg, var(--color-background0) 0%, var(--color-background1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#136a77", endColorstr="#06121c", GradientType=1);
+}
+
+p {
+    color: var(--color-text);
+}
+
+h1, h2 {
+    color: var(--color-text)
+}
+
+a {
+    color: var(--color-text);
+}
+a:visited{
+    color: var(--color-text);
+}
+
+
+/* Timeline stuff */
+/* Source: https://www.w3schools.com/howto/howto_css_timeline.asp */
+/* Modified by Pierre TELLIER */
+.comment{
+    color: dimgrey;
+    font-size: small;
+}
+* {
+    box-sizing: border-box;
+}
+/* The actual timeline (the vertical ruler) */
+.timeline {
+    position: relative;
+    /* max-width: 1200px; */
+    margin: 0 auto;
+}
+
+
+.timeline::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    background-color: white;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -3px;
+}
+
+/* Container around content */
+.container {
+    padding: 10px 40px;
+    position: relative;
+    background-color: inherit;
+    width: 50%;
+
+}
+
+/* The circles on the timeline */
+.container::after {
+    content: '';
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    right: -17px;
+    background-color: white;
+    border: 4px solid #FF9F55;
+    top: 15px;
+    border-radius: 50%;
+    z-index: 1;
+}
+
+/* Place the container to the left */
+.left {
+    transform-origin: top right;
+    left: 0;
+}
+
+/* Place the container to the right */
+.right {
+    transform-origin: top left;
+    left: 50%;
+}
+
+/* Add arrows to the left container (pointing right) */
+.left::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    right: 30px;
+    border: medium solid white;
+    border-width: 10px 0 10px 10px;
+    border-color: transparent transparent transparent white;
+}
+
+/* Add arrows to the right container (pointing left) */
+.right::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    left: 30px;
+    border: medium solid white;
+    border-width: 10px 10px 10px 0;
+    border-color: transparent white transparent transparent;
+}
+
+/* Fix the circle for containers on the right side */
+.right::after {
+    left: -16px;
+}
+
+/* The actual content */
+.content {
+    padding: 20px 30px;
+    background-color: black;
+    position: relative;
+    border-radius: 6px;
+    border: solid white;
+}
+
+/* Media queries - Responsive timeline on screens less than 600px wide */
+@media screen and (max-width: 600px) {
+    /*
+        Place the timelime to the left
+        the timeline left position is hardcoded to 31px
+    */
+    .timeline::after {
+        left: 31px;
+    }
+
+    /* Full-width containers */
+    .container {
+        width: 100%;
+        padding-left: 70px;
+        padding-right: 25px;
+    }
+
+    /* Make sure that all arrows are pointing leftwards */
+    .container::before {
+        left: 60px;
+        border: medium solid white;
+        border-width: 10px 10px 10px 0;
+        border-color: transparent white transparent transparent;
+    }
+
+    /*
+        Make sure all circles are at the same spot
+        the left position is hardcoded at 15px
+    */
+    .left::after, .right::after {
+        left: 15px;
+    }
+
+    /* Make all right containers behave like the left ones */
+    .right {
+        left: 0;
+    }
+}