Skip to content

Commit

Permalink
Use semantic class names in the timeline consistent with Bulma
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@hedyhli
hedyhli committed Mar 21, 2024
1 parent 2765003 commit 41f9fe4
Show file tree
Hide file tree
Showing 3 changed files with 489 additions and 608 deletions.
64 changes: 32 additions & 32 deletions pydis_site/static/css/home/timeline.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;

Expand All @@ -125,20 +125,20 @@
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);
}
}

@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);
}
}
Expand All @@ -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 */
Expand All @@ -168,15 +168,15 @@
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));
}
}

/* Icon */
.cd-timeline__img {
.timeline-icon {
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -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.
Expand All @@ -217,21 +217,21 @@
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;
}
}

@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
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
}
}
Expand Down
68 changes: 34 additions & 34 deletions pydis_site/static/js/timeline/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
};
Expand All @@ -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);
}
Expand All @@ -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);
}
Expand All @@ -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 ) {
Expand All @@ -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");
}
}

Expand Down

0 comments on commit 41f9fe4

Please sign in to comment.