Use semantic class names in the timeline consistent with Bulma

Also turns out I was using the Bulma .content class wrong this whole
time. We just need to slap that class onto a div and anything inside can
be the output of, say a markdown -> HTML converter!

Fix messy spacing and extraneous whitespace in the HTML as well.

Special thanks to Vim macros.

2 files changed, 66 insertions, 66 deletions

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 04cc98bc..3e284768 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -58,19 +58,19 @@
 }
 
 /* Containers */
-.cd-timeline {
+.timeline {
     overflow: hidden;
     padding: 3rem 0;
     background-color: var(--background-color);
 }
 
-.cd-timeline__container {
+.timeline .container {
     position: relative;
     padding: 1rem var(--side-spacing);
 }
 
 /* The line that goes through all the icons */
-.cd-timeline__container::before {
+.timeline .container::before {
     content: '';
     position: absolute;
 
@@ -81,40 +81,40 @@
 }
 
 @media (min-width: 1023px) {
-    .cd-timeline__container::before {
+    .timeline .container::before {
         left: calc(50% - var(--timeline-line-half-width));
     }
 }
 
 @media (max-width: 1023px) {
-    .cd-timeline__container::before {
+    .timeline .container::before {
         margin-left: calc(var(--icon-half-width) - var(--timeline-line-half-width));
     }
 }
 
 /* Each timeline item */
-.cd-timeline__block {
+.timeline-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 2.5rem;
 }
 
 /* Visual container of the timeline item */
-.cd-timeline__content.box {
+.timeline-content.box {
     box-shadow: var(--accent) 0px 3px 0px 0px;
     background-color: var(--content-background-color);
     flex-grow: 1;
 }
 
 @media (min-width: 1023px) {
-    .cd-timeline__block:nth-child(odd) {
+    .timeline-item:nth-child(odd) {
         flex-direction: row-reverse;
     }
     /* On desktop, the content boxes are anchored with respect to the vertical
      * center of the screen, set using `left`/`right` properties depending on
-     * even and odd children of cd-timeline__block items.
+     * even and odd children of timeline items.
      * */
-    .cd-timeline__content.box  {
+    .timeline-content.box  {
         width: 45%;
         flex-grow: 0;
 
@@ -125,7 +125,7 @@
         left: var(--content-position);
         margin-left: var(--icon-side-spacing);
     }
-    .cd-timeline__block:nth-child(odd) .cd-timeline__content.box {
+    .timeline-item:nth-child(odd) .timeline-content.box {
         left: unset;
         right: var(--content-position);
         margin-right: var(--icon-side-spacing);
@@ -133,12 +133,12 @@
 }
 
 @media (max-width: 1023px) {
-    .cd-timeline__content.box {
+    .timeline-content.box {
         margin-left: var(--icon-side-spacing);
     }
 }
 @media (max-width: 600px) {
-    .cd-timeline__content.box {
+    .timeline-content.box {
         margin-left: var(--icon-side-spacing);
     }
 }
@@ -149,14 +149,14 @@
  * the icon, and reverse their ordering for alternate timeline items on
  * desktop.
  * */
-.icon-date {
+.timeline-icon-date {
     z-index: 4;
     display: flex;
     align-items: baseline;
 }
 
 @media (min-width: 1023px) {
-    .icon-date {
+    .timeline-icon-date {
         order: 1;
 
         /* Arbitrary container width to prevent wrapping of the date text */
@@ -168,7 +168,7 @@
         left: calc(50% - var(--icon-half-width));
     }
 
-    .cd-timeline__block:nth-child(even) .icon-date {
+    .timeline-item:nth-child(even) .timeline-icon-date {
         flex-direction: row-reverse;
         left: unset;
         right: calc(50% - var(--icon-half-width));
@@ -176,7 +176,7 @@
 }
 
 /* Icon */
-.cd-timeline__img {
+.timeline-icon {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -200,13 +200,13 @@
 }
 
 /* Icons that use a custom image */
-.cd-timeline__img img {
+.timeline-icon img {
     width: var(--icon-image-width);
     height: var(--icon-image-width);
 }
 
 /* Icons that use the pydis logo */
-.cd-timeline__img img.pydis {
+.timeline-icon img.pydis {
     /* Visually centering the pydis logo requires a margin adjustment here
      * due to the right and bottom box shadow on the logo which is not very
      * visible on the page.
@@ -217,13 +217,13 @@
     margin-left: 1px;
 }
 
-.cd-timeline__date {
+.timeline-date {
     font-size: .9rem;
     color: var(--date-color);
 }
 
 @media (min-width: 1023px) {
-    .cd-timeline__block:nth-child(even) .cd-timeline__date {
+    .timeline-item:nth-child(even) .timeline-date {
         left: auto;
         right: 50%;
         text-align: right;
@@ -231,7 +231,7 @@
 }
 
 @media (max-width: 1023px) {
-    .cd-timeline__date {
+    .timeline-date {
         position: absolute;
         /* On mobile, place the date at the top of the text box left-aligned
          * with the other text in the box. When margin-left is zero, the date
@@ -247,7 +247,7 @@
         margin-top: .75rem;
     }
 
-    .cd-timeline__content.box .title {
+    .timeline-content.content h3 {
         /* Make space for the date text */
         margin-top: 1.25rem;
     }
@@ -307,25 +307,25 @@ img, video, svg {
 
 /* Bounce-in and bounce-out animations, desktop-only */
 @media (min-width: 1023px) {
-    .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--hidden {
+    .timeline-icon--hidden, .timeline-content--hidden, .timeline-date--hidden {
         visibility: hidden;
     }
-    .cd-timeline__img--bounce-in {
+    .timeline-icon--bounce-in {
         animation: icon-bounce 0.6s;
     }
-    .cd-timeline__content--bounce-in,
-    .cd-timeline__date--bounce-in {
+    .timeline-content--bounce-in,
+    .timeline-date--bounce-in {
         animation: item-bounce-left 0.6s;
     }
-    .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in,
-    .cd-timeline__block:nth-child(even) .cd-timeline__date--bounce-in {
+    .timeline-item:nth-child(even) .timeline-content--bounce-in,
+    .timeline-item:nth-child(even) .timeline-date--bounce-in {
         animation-name: item-bounce-right;
     }
-    .cd-timeline__img--bounce-out {
+    .timeline-icon--bounce-out {
         animation: icon-bounce-out 0.6s;
     }
-    .cd-timeline__content--bounce-out,
-    .cd-timeline__date--bounce-out {
+    .timeline-content--bounce-out,
+    .timeline-date--bounce-out {
         animation: item-bounce-out 0.6s;
     }
 }
diff --git a/pydis_site/static/js/timeline/main.js b/pydis_site/static/js/timeline/main.js
index 67a50d43..df0ef585 100644
--- a/pydis_site/static/js/timeline/main.js
+++ b/pydis_site/static/js/timeline/main.js
@@ -2,10 +2,10 @@
   // Vertical Timeline - by CodyHouse.co (modified)
 	function VerticalTimeline( element ) {
 		this.element = element;
-		this.blocks = this.element.getElementsByClassName("cd-timeline__block");
-		this.images = this.element.getElementsByClassName("cd-timeline__img");
-		this.contents = this.element.getElementsByClassName("cd-timeline__content");
-		this.dates = this.element.getElementsByClassName("cd-timeline__date");
+		this.blocks = this.element.getElementsByClassName("timeline-item");
+		this.images = this.element.getElementsByClassName("timeline-icon");
+		this.contents = this.element.getElementsByClassName("timeline-content");
+		this.dates = this.element.getElementsByClassName("timeline-date");
 		this.offset = 0.8;
 		this.hideBlocks();
 	};
@@ -19,9 +19,9 @@
 		for( var i = 0; i < this.blocks.length; i++) {
 			(function(i){
 				if( self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
-					self.images[i].classList.add("cd-timeline__img--hidden");
-					self.contents[i].classList.add("cd-timeline__content--hidden");
-					self.dates[i].classList.add("cd-timeline__date--hidden");
+					self.images[i].classList.add("timeline-icon--hidden");
+					self.contents[i].classList.add("timeline-content--hidden");
+					self.dates[i].classList.add("timeline-date--hidden");
 				}
 			})(i);
 		}
@@ -34,17 +34,17 @@
 		var self = this;
 		for( var i = 0; i < this.blocks.length; i++) {
 			(function(i){
-				if((self.contents[i].classList.contains("cd-timeline__content--hidden") || self.contents[i].classList.contains("cd-timeline__content--bounce-out")) && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) {
+				if((self.contents[i].classList.contains("timeline-content--hidden") || self.contents[i].classList.contains("timeline-content--bounce-out")) && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) {
 					// add bounce-in animation
-					self.images[i].classList.add("cd-timeline__img--bounce-in");
-					self.contents[i].classList.add("cd-timeline__content--bounce-in");
-					self.dates[i].classList.add("cd-timeline__date--bounce-in");
-					self.images[i].classList.remove("cd-timeline__img--hidden");
-					self.contents[i].classList.remove("cd-timeline__content--hidden");
-					self.dates[i].classList.remove("cd-timeline__date--hidden");
-					self.images[i].classList.remove("cd-timeline__img--bounce-out");
-					self.contents[i].classList.remove("cd-timeline__content--bounce-out");
-					self.dates[i].classList.remove("cd-timeline__date--bounce-out");
+					self.images[i].classList.add("timeline-icon--bounce-in");
+					self.contents[i].classList.add("timeline-content--bounce-in");
+					self.dates[i].classList.add("timeline-date--bounce-in");
+					self.images[i].classList.remove("timeline-icon--hidden");
+					self.contents[i].classList.remove("timeline-content--hidden");
+					self.dates[i].classList.remove("timeline-date--hidden");
+					self.images[i].classList.remove("timeline-icon--bounce-out");
+					self.contents[i].classList.remove("timeline-content--bounce-out");
+					self.dates[i].classList.remove("timeline-date--bounce-out");
 				}
 			})(i);
 		}
@@ -57,19 +57,19 @@
 		var self = this;
 		for( var i = 0; i < this.blocks.length; i++) {
 			(function(i){
-				if(self.contents[i].classList.contains("cd-timeline__content--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
-					self.images[i].classList.remove("cd-timeline__img--bounce-in");
-					self.contents[i].classList.remove("cd-timeline__content--bounce-in");
-					self.dates[i].classList.remove("cd-timeline__date--bounce-in");
-					self.images[i].classList.add("cd-timeline__img--bounce-out");
-					self.contents[i].classList.add("cd-timeline__content--bounce-out");
-					self.dates[i].classList.add("cd-timeline__date--bounce-out");
+				if(self.contents[i].classList.contains("timeline-content--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
+					self.images[i].classList.remove("timeline-icon--bounce-in");
+					self.contents[i].classList.remove("timeline-content--bounce-in");
+					self.dates[i].classList.remove("timeline-date--bounce-in");
+					self.images[i].classList.add("timeline-icon--bounce-out");
+					self.contents[i].classList.add("timeline-content--bounce-out");
+					self.dates[i].classList.add("timeline-date--bounce-out");
 				}
 			})(i);
 		}
 	}
 
-	var verticalTimelines = document.getElementsByClassName("js-cd-timeline"),
+	var verticalTimelines = document.getElementsByClassName("timeline"),
 		verticalTimelinesArray = [],
 		scrolling = false;
 	if( verticalTimelines.length > 0 ) {
@@ -88,15 +88,15 @@
 		});
 
 		function animationEnd(event) {
-			if (event.target.classList.contains("cd-timeline__img--bounce-out")) {
-				event.target.classList.add("cd-timeline__img--hidden");
-				event.target.classList.remove("cd-timeline__img--bounce-out");
-			} else if (event.target.classList.contains("cd-timeline__content--bounce-out")) {
-				event.target.classList.add("cd-timeline__content--hidden");
-				event.target.classList.remove("cd-timeline__content--bounce-out");
-			} else if (event.target.classList.contains("cd-timeline__date--bounce-out")) {
-				event.target.classList.add("cd-timeline__date--hidden");
-				event.target.classList.remove("cd-timeline__date--bounce-out");
+			if (event.target.classList.contains("timeline-icon--bounce-out")) {
+				event.target.classList.add("timeline-icon--hidden");
+				event.target.classList.remove("timeline-icon--bounce-out");
+			} else if (event.target.classList.contains("timeline-content--bounce-out")) {
+				event.target.classList.add("timeline-content--hidden");
+				event.target.classList.remove("timeline-content--bounce-out");
+			} else if (event.target.classList.contains("timeline-date--bounce-out")) {
+				event.target.classList.add("timeline-date--hidden");
+				event.target.classList.remove("timeline-date--bounce-out");
 			}
 		}