add countdown and some bug fixes like csv

assets/development/scripts/countdown.js

@@ -0,0 +1,47 @@
+const countdown = document.getElementById('countdown')
+const counter = document.getElementById('counter')
+
+const daysContainer = document.getElementById('days')
+const hoursContainer = document.getElementById('hours')
+const minutesContainer = document.getElementById('minutes')
+const secondsContainer = document.getElementById('seconds')
+
+let target = new Date("2020-09-04 15:00:00")
+
+let shown = false
+
+function render() {
+  let current = new Date()
+  let difference = target - current
+
+  var _second = 1000,
+    _minute = _second * 60,
+    _hour = _minute * 60,
+    _day = _hour * 24;
+
+  var days = Math.floor(difference / _day),
+    hours = Math.floor((difference % _day) / _hour),
+    minutes = Math.floor((difference % _hour) / _minute),
+    seconds = Math.floor((difference % _minute) / _second);
+
+    days = (String(days).length >= 2) ? days : '0' + days;
+    hours = (String(hours).length >= 2) ? hours : '0' + hours;
+    minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
+    seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;
+  
+  daysContainer.textContent = days
+  hoursContainer.textContent = hours
+  minutesContainer.textContent = minutes
+  secondsContainer.textContent = seconds
+  
+  if (!shown) {
+    setTimeout(() => {
+      countdown.style.opacity = 1
+      shown = true
+    }, 300)
+  }
+}
+
+
+render()
+setInterval(render, 1000)

assets/development/styles/countdown.css

@@ -0,0 +1,72 @@
+.countdown {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-direction: column;
+
+  opacity: 0;
+  transition: 0.2s all ease-in-out;
+}
+
+.counter {
+  display: flex;
+  align-items: center;
+}
+
+.counter-component {
+  border: 2px solid #e74c3c;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 6em;
+  height: 6em;
+  margin-right: 1em;
+  margin-left: 1em;
+}
+
+.counter-component:first-of-type {
+  margin-left: 0;
+}
+
+.counter-component:last-of-type {
+  margin-right: 0;
+}
+
+.counter-component span {
+  font-size: 1.5em;
+}
+
+.label {
+  font-size: .75em;
+  color: #34495e;
+  font-weight: lighter;
+  margin-top: .5em;
+}
+
+@media (max-width: 600px) {
+  .counter {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-column-gap: 1em;
+    grid-row-gap: 1em;
+    margin-bottom: 2em;
+  }
+
+  .counter-component {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .counter-component:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .separator {
+    display: none;
+  }
+}

assets/development/styles/main.css

@@ -43,7 +43,7 @@ body {
   position: fixed;
   z-index: 9999999;
   left: 1em;
-  bottom: 2em;
+  bottom: 1em;
   padding: 1em;
   font-weight: bold;
   border-radius: 3px;

assets/development/styles/organization.css

@@ -29,7 +29,7 @@
 .return-icon {
   display: flex;
   align-items: center;
-  margin-right: .5em;
+  margin-right: .75em;
 }
 
 .return-icon svg {
@@ -47,25 +47,34 @@
 
 ********************************************************************************/
 
-.cover-background {
-  background-position: center;
-  background-size: cover;
-  height: 13em;
-  width: 100%;
+.cover-container {
+  position: relative;
 }
 
-.cover {
-  height: 13em;
-  margin-top: -13em;
-  background-color: rgba(230, 126, 34, 0.4);
+.cover-background {
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  background-position: center;
   background-size: cover;
+  width: 100%;
+  height: 100%;
 }
 
 .cover-content {
+  background-color: rgba(230, 126, 34, 0.75);
+  background-size: cover;
+  
   color: white;
+  padding-top: 1.5em;
+  padding-bottom: 1.5em;
+}
+
+.cover-content .container {
   display: flex;
   align-items: center;
-  height: 13em;
 }
 
 .cover-image {
@@ -76,16 +85,14 @@
   background-position: center;
   width: 10em;
   height: 10em;
+  min-width: 10em;
+  min-height: 10em;
   margin-right: 3em;
 }
 
-.cover-title-container {
-
-}
-
 .cover-title {
   font-family: 'Roboto Slab', serif;
-  font-size: 3.5em;
+  font-size: 3em;
   font-weight: normal;
   margin: 0;
 }
@@ -497,6 +504,14 @@ section {
   margin-bottom: 1em;
 }
 
+.contact-item.address .contact-content div {
+  margin-bottom: .25em;
+}
+
+.contact-item.address .contact-content div:last-child {
+  margin-bottom: 0;
+}
+
 .contact-icon {
   color: #B15808;
   background-color: #C4C4C4;
@@ -573,6 +588,7 @@ People cards
 
 .people-card {
   width: 100%;
+  max-width: 50%;
   margin-right: 1em;
   border-radius: 3px;
   padding: 1.2em 1.5em;
@@ -674,20 +690,8 @@ RESPONSIVE
 
 
 @media (max-width: 900px) {
-
-  .cover-background {
-    height: 23em;
-    width: 100%;
-  }
   
-  .cover {
-    height: 23em;
-    margin-top: -23em;
-  }
-  
-  .cover-content {
-    height: 23em;
-
+  .cover-content .container {
     flex-direction: column;
     justify-content: center;
     text-align: center;
@@ -699,6 +703,7 @@ RESPONSIVE
   }
 
   .cover-title {
+    font-size: 2.5em;
     margin-bottom: .25em;
   }
 
@@ -804,6 +809,7 @@ RESPONSIVE
   }
 
   .people-card {
+    max-width: 100%;
     width: auto;
     text-align: center;
     margin-bottom: 1em;