smol update

src/css/fonts/Montserrat.css

@@ -0,0 +1,40 @@
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./montserrat1.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./montserrat2.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./montserrat3.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./montserrat4.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./montserrat5.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/css/style.css

@@ -1,4 +1,5 @@
-@import url('https://fonts.googleapis.com/css?family=Montserrat');
+@import url(./fonts/Montserrat.css);
+/* This font is from https://fonts.googleapis.com/css?family=Montserrat */
 
 :root {
     --color-background0: #0e0e0e;
@@ -13,8 +14,11 @@
 body {
     text-align: center;
     height: 100000px;
+    color: var(--color-text);
+    font-size: 1.4em;
 }
 
+
 html {
     font-family: Montserrat, sans-serif;
     min-height: 100%;
@@ -25,36 +29,32 @@ html {
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#136a77", endColorstr="#06121c", GradientType=1);
 }
 
-p {
-    color: var(--color-text);
+
+
+h1{
+    font-size: xxx-large;
 }
 
-h1, h2 {
-    color: var(--color-text)
-}
-
-a {
-    color: var(--color-text);
-}
-a:visited{
+a, a:visited{
     color: var(--color-text);
 }
 
 
 /* Timeline stuff */
 /* Source: https://www.w3schools.com/howto/howto_css_timeline.asp */
-/* Modified by Pierre TELLIER */
+/* Modified by Pierre Tellier */
 .comment{
     color: dimgrey;
-    font-size: small;
+    font-size: 1em;
 }
 * {
     box-sizing: border-box;
 }
+
 /* The actual timeline (the vertical ruler) */
 .timeline {
     position: relative;
-    /* max-width: 1200px; */
+    width: 100%;
     margin: 0 auto;
 }
 
@@ -63,11 +63,12 @@ a:visited{
     content: '';
     position: absolute;
     width: 6px;
-    background-color: white;
+    background-color: var(--color-border0);
     top: 0;
     bottom: 0;
     left: 50%;
     margin-left: -3px;
+
 }
 
 /* Container around content */
@@ -147,8 +148,8 @@ a:visited{
     border: solid white;
 }
 
-/* Media queries - Responsive timeline on screens less than 600px wide */
-@media screen and (max-width: 600px) {
+/* Media queries - Responsive timeline on screens less than 700px wide */
+@media screen and (max-width: 1000px) {
     /*
         Place the timelime to the left
         the timeline left position is hardcoded to 31px
@@ -156,12 +157,15 @@ a:visited{
     .timeline::after {
         left: 31px;
     }
+    .timeline{
+        left:23px; /*TODO: find why it's moving on mobile version*/
+        width: 90%;
+    }
 
     /* Full-width containers */
     .container {
         width: 100%;
         padding-left: 70px;
-        padding-right: 25px;
     }
 
     /* Make sure that all arrows are pointing leftwards */
@@ -177,11 +181,16 @@ a:visited{
         the left position is hardcoded at 15px
     */
     .left::after, .right::after {
-        left: 15px;
+        left: 0;
     }
 
     /* Make all right containers behave like the left ones */
     .right {
         left: 0;
+        transform-origin: top left;
+    }
+    .left {
+        left: 0;
+        transform-origin: top left;
     }
 }