gulp and a lot of others updates

assets/development/scripts/home.js

@@ -0,0 +1,186 @@
+let navOpened = false;
+let oldNavText = "";
+let oldNavIcon = "";
+
+let navEnabler = document.getElementById('nav-enabler');
+let navEnablerText = document.getElementById('nav-enabler-text');
+let navEnablerIcon = document.getElementById('nav-enabler-icon');
+let navContent = document.getElementById('nav-content');
+
+let mosaic = document.getElementById('mosaic');
+let mosaicHeader = document.getElementById('mosaic-header');
+
+navEnabler.onclick = async () => {
+  if (!navOpened) {
+    // open the menu
+    oldNavText = navEnablerText.textContent;
+    navEnablerText.textContent = "Minimiser le menu";
+    navEnablerIcon.style.transform = "rotate(90eg)";
+    navContent.style.maxHeight = navContent.scrollHeight + "px";
+  } else {
+    // close the menu
+    navEnablerText.textContent = oldNavText;
+    navEnablerIcon.style.transform = "rotate(0deg)";
+    navContent.style.maxHeight = null;
+  }
+  navOpened = !navOpened;
+}
+
+function createEl(className = false, elName = "div") {
+  let el = document.createElement(elName);
+  if (className != false) {
+    el.className = className;
+  }
+  return el;
+}
+
+function renderNavItem(tag) {
+  /*
+  <div class="nav-item">
+    <div class="nav-icon">
+      <i class="fas fa-music"></i>
+    </div>
+    <div class="nav-item-content">
+      <div class="nav-title">
+        Danse et musique
+      </div>
+      <div class="nav-access">
+        <i class="fas fa-chevron-right"></i>
+      </div>
+    </div>
+  </div>
+  */
+
+  let navItem = createEl('nav-item');
+  let navIcon = createEl('nav-icon');
+  let icon = createEl(tag.icon, 'i');
+
+  navIcon.appendChild(icon);
+  navItem.appendChild(navIcon);
+
+  let navItemContent = createEl('nav-item-content');
+  let navTitle = createEl('nav-title');
+  navTitle.textContent = tag.name;
+  navItemContent.appendChild(navTitle);
+  
+  let navAccess = createEl('nav-access');
+  let chevronIcon = createEl('fas fa-chevron-right', 'i');
+  navAccess.appendChild(chevronIcon);
+  navItemContent.appendChild(navTitle);
+  navItemContent.appendChild(navAccess);
+  navItem.appendChild(navItemContent);
+
+  return navItem;
+}
+
+function setAttributes(node, attrs) {
+  for (var key in attrs) {
+    attr = document.createAttribute(key)
+    attr.value = attrs[key]
+    node.attributes.setNamedItem(attr) 
+  }
+}
+
+function renderCard(organization) {
+  let card = createEl('card', 'a')
+
+  // image
+  let image = createEl('card-image-container')
+  let imageTag = createEl('card-image')
+  imageTag.style = `background-image: url('${organization.thumbnail}')`
+  image.appendChild(imageTag)
+  card.appendChild(image)
+  
+  let content = createEl('card-content')
+  let upperContent = createEl()
+  
+  let titleContainer = createEl('card-title-container')
+  let title = createEl('card-title', 'h2')
+  title.textContent = organization.name
+  titleContainer.appendChild(title)
+
+  let icon = createEl('card-icon')
+  if (Array.isArray(organization.tags) && organization.tags.length > 0) {
+    let tag = tags.filter(tag => organization.tags[0] === tag._id)[0]
+    icon.innerHTML = `<svg
+      aria-hidden="true"
+      focusable="false"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 ${tag.icon.width} ${tag.icon.height}">
+      <path fill="currentColor" d="${tag.icon.path}"></path>
+    </svg>`
+  }
+  titleContainer.appendChild(icon)
+  upperContent.appendChild(titleContainer)
+
+  let description = createEl('card-description')
+  description.textContent = organization.description
+
+  let goTo = "/association/" + organization.slugs[organization.slugs.length - 1]
+  if (organization.isProposed) {
+    goTo += "?version=proposed"
+  }
+  // let link = createEl('card-link')
+  // let aTag = createEl('card-link', 'a')
+  // aTag.href = 
+  // aTag.textContent = "En savoir plus"
+  // description.appendChild(aTag)
+
+  upperContent.appendChild(description)
+  //link.appendChild(aTag)
+  content.appendChild(upperContent)
+  //content.appendChild(link)
+  card.appendChild(content)
+
+  card.href = goTo
+
+  // card.onclick = () => {
+  //   window.location = goTo
+  // }
+  return card
+}
+
+function renderMosaic(data) {
+  let cardContainer = createEl('card-container')
+  data.forEach(orga => {
+    cardContainer.appendChild(renderCard(orga))
+  })
+  return cardContainer
+}
+
+let currentTag = null
+let currentCardContainer = null
+
+function enableTag(node) {
+  let all = node.id === 'nav-all'
+  let tagId = ""
+  if (!all) {
+    tagId = node.attributes['data-tag-id'].value
+  }
+  let data = organizations.filter(orga => orga.tags.filter(id => id === tagId).length > 0 || all)
+  let cards = renderMosaic(data)
+  if (currentCardContainer !== null) {
+    mosaic.removeChild(currentCardContainer)
+  }
+  currentCardContainer = cards
+  mosaic.appendChild(cards)
+  node.className += ' enabled'
+  if (currentTag !== null) {
+    currentTag.className = currentTag.className.replace('enabled', '')
+  }
+  currentTag = node
+  if (data === undefined || data === null || data.length <= 0) {
+    mosaicHeader.textContent = "Aucune associations listées"
+  } else if (data.length === 1) {
+    mosaicHeader.textContent = "Une association listée"
+  } else {
+    mosaicHeader.textContent = data.length + " associations listées"
+  }
+} 
+
+navContent.childNodes.forEach(node => {
+  node.onclick = () => enableTag(node)
+})
+
+enableTag(document.getElementById('nav-all'))

assets/development/scripts/organization.js

@@ -0,0 +1,124 @@
+/**
+ * Schedule collapsable section animation
+ */
+document.querySelectorAll('.schedule-category').forEach(node => {
+  let opened = false
+  let icon = node.querySelector('.schedule-category-collapse-icon')
+  let content = node.querySelector('.schedule-category-table')
+  let header = node.querySelector('.schedule-category-header')
+  header.onclick = () => {
+    if (!opened) {
+      // open the table
+      icon.style.transform = "rotate(0deg)"
+      content.style.maxHeight = content.scrollHeight + "px"
+    } else {
+      // close the table
+      icon.style.transform = "rotate(180deg)"
+      content.style.maxHeight = null
+    }
+    opened = !opened
+  }
+})
+
+/**
+ * Description
+ */
+let description = document.querySelector('.description-cutted')
+let descriptionActions = document.querySelector('.description-actions-container')
+let descriptionOpened = false
+let defaultMaxHeight = ""
+if (description !== null) {
+  let btn = document.querySelector('.description-btn')
+  btn.onclick = () => {
+    if (!descriptionOpened) {
+      // open the full description
+      descriptionActions.className = descriptionActions.className.replace(' closed', '')
+      defaultMaxHeight = description.style.maxHeight
+      description.style.maxHeight = description.scrollHeight + "px"
+      btn.textContent = "Fermer la description"
+    } else {
+      // initial max Height
+      descriptionActions.className += ' closed'
+      description.style.maxHeight = defaultMaxHeight
+      btn.textContent = "Ouvrir la description"
+    }
+    descriptionOpened = !descriptionOpened
+  }
+}
+
+/**
+ * Gallery modal to view media in large
+ */
+let mediaModal = document.querySelector('#media-modal')
+let mediaModalContent = document.querySelector('#media-modal-content')
+// let mediaModalImage = document.querySelector('#media-modal img')
+// let mediaModalVideo = document.querySelector('#media-modal video')
+// let mediaModalSource = document.querySelector('#media-modal video source')
+
+// function disableScroll() { 
+//     // Get the current page scroll position 
+//     scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
+//     scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, 
+  
+//         // if any scroll is attempted, set this to the previous value 
+//         window.onscroll = function() { 
+//             window.scrollTo(scrollLeft, scrollTop); 
+//         }; 
+// } 
+  
+// function enableScroll() { 
+//     window.onscroll = function() {}; 
+// }
+
+
+let openModal = (url, isVideo) =>  {
+  mediaModal.style.visibility = 'visible'
+  mediaModal.style.opacity = 1
+  mediaModalContent.innerHTML = ""
+
+  let attr = document.createAttribute('src')
+  attr.value = url
+  let el = null
+  if (isVideo) {
+    el = document.createElement('video')
+    el.setAttribute('controls', '')
+    el.setAttribute('autoplay', '')
+    el.setAttribute('name', 'media')
+    let source = document.createElement('source')
+    source.setAttribute('src', url)
+    source.setAttribute('type', 'video/mp4')
+    el.appendChild(source)
+  } else {
+    el = document.createElement('img')
+    el.attributes.setNamedItem(attr)
+  }
+  mediaModalContent.appendChild(el)
+  //document.body.style.height = '100vh'
+  document.body.style.overflow = 'hidden'
+  document.body.style.touchAction = 'none'
+
+  setTimeout(() => {
+
+    const outsideClickListener = event => {
+      if (!mediaModalContent.contains(event.target) && isVisible(mediaModalContent)) {
+        closeModal()
+        document.removeEventListener('click', outsideClickListener)
+      }
+    }
+    document.addEventListener('click', outsideClickListener)
+  
+  }, 100)
+}
+
+const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length )
+
+let closeModal = () =>  {
+  mediaModal.style.visibility = 'hidden'
+  mediaModal.style.opacity = 0
+  document.body.style.overflow = 'initial'
+  document.body.style.height = 'initial'
+  let video = document.querySelector('#media-modal video')
+  if (video !== null) {
+    video.pause()
+  }
+}

assets/development/styles/error.css

@@ -0,0 +1,35 @@
+.error-container {
+  width: 100%;
+  margin-top: 4em;
+}
+
+.error {
+  width: 60%;
+  margin: 0 auto;
+  text-align: center;
+  color: #2c3e50;
+}
+
+.error-title {
+  font-family: 'Roboto Slab', serif;
+}
+
+.error-icons {
+  font-size: 5em;
+  margin-bottom: .25em;
+}
+
+.expert {
+  text-align: left;
+  padding: 1em;
+  background-color: black;
+  color: rgba(0, 255, 0);
+  border: 2px solid gray;
+  border-radius: 3px;
+}
+
+@media (max-width: 1350px) {
+  .error {
+    width: 100%;
+  }
+}

assets/development/styles/home.css

@@ -0,0 +1,356 @@
+.header {
+  /* border-bottom: 2px solid #C28100; */
+  padding-bottom: 1.5em;
+  padding-top: 1.5em;
+  background-color: #d35400;
+}
+
+.header-container {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+}
+
+.header-left {
+  display: flex;
+}
+
+.header-menu {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: flex-end;
+}
+
+.header-menu a {
+  color: white;
+  margin-right: 1em;
+}
+
+.header-menu a:last-of-type {
+  margin-right: 0;
+}
+
+.header-image {
+  margin-right: 3em;
+}
+
+.header-image img {
+  width: 7em;
+}
+
+.header-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+.header-title {
+  font-family: 'Roboto Slab', serif;
+  margin: 0;
+  color: white;
+  font-weight: 500;
+  font-size: 2.5em;
+}
+
+.header-sub-title {
+  margin: 0;
+  text-decoration: underline;
+  font-weight: 100;
+  color: #ecf0f1;
+  transition: opacity 0.2s;
+}
+
+.header-sub-title:hover {
+  opacity: 0.9;
+  color: #ecf0f1;
+}
+
+.header-description {
+  color: #ecf0f1;
+}
+
+.content {
+  margin-top: 1.5em;
+  display: flex;
+}
+
+
+
+
+.nav {
+  margin-right: 2em;
+}
+
+.nav-item {
+  width: 15em;
+  padding: 1em;
+  border-radius: 4px;
+  margin-bottom: 0.7em;
+  border: 3px solid rgba(255, 111, 10, 0.7);
+  display: flex;
+  cursor: pointer;
+  transition: ease-in-out 0.1s;
+  height: 1.2em;
+}
+
+.nav-item svg {
+  width: .75em;
+  height: .75em;
+}
+
+.nav-icon {
+  width: 3em;
+  padding-left: .5em;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  color: #C28200;
+  font-size: 1.5em;
+  opacity: 0.7;
+}
+
+.nav-item-content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.nav-title {
+  display: flex;
+  align-items: center;
+  opacity: 0.7;
+}
+
+.nav-access {
+  display: flex;
+  align-items: center;
+  color: #FF6F0A;
+  opacity: 0.7;
+}
+
+.nav-item.enabled {
+  border-color: rgba(255, 111, 10, 1);
+}
+
+.nav-item.enabled .nav-access {
+  opacity: 1;
+}
+
+.nav-item.enabled .nav-icon {
+  opacity: 1;
+}
+
+.nav-item.enabled .nav-title {
+  opacity: 1;
+}
+
+.nav-item:hover {
+  transform: scale(1.05); 
+}
+
+#nav-enabler {
+  display: none;
+}
+
+.mosaic {
+  background: white;
+  width: 100%;
+}
+
+.mosaic-header {
+  width: 100%;
+  opacity: 0.8;
+  text-align: right;
+  margin-bottom: 1.5em;
+}
+
+.card-container {
+  margin: 0 auto;
+  width: 85%;
+}
+
+.card {
+  cursor: pointer;
+  display: flex;
+  border: 1px solid #bdc3c7;
+  border-radius: 4px;
+  margin-bottom: 1em;
+  box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
+  overflow: hidden;
+  text-decoration: none;
+  transition: transform 0.2s ease-in-out;
+}
+
+.card:hover {
+  text-decoration: none;
+}
+
+.card-image-container {
+  border-right: 1px solid #C4C4C4;
+  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 1em;
+}
+
+.card-image {
+  height: 12em;
+  width: 12em;
+
+  background-position: center;
+  background-size: cover;
+  transition: all 0.2s ease-in-out;
+  border: 0;
+  outline: 0;
+  box-shadow: 0;
+}
+
+.card-image:hover {
+  transform: scale(1.1);
+}
+
+
+.card-content {
+  width: 100%;
+  padding: 1.5em;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.card-title-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.card-icon {
+  color: #C28200;
+  opacity: 0.85;
+  margin-top: -.5em;
+  margin-right: -.5em;
+  font-size: 1.4em;
+}
+
+.card-icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+.card-title {
+  color: #B12008;
+  margin: 0;
+  margin-bottom: 0.5em;
+}
+
+.card-description {
+  color: #34495E;
+  margin: 0;
+  line-height: 1.6em;
+  position: relative;
+}
+
+.card-link {
+  position: absolute;
+  right: .5em;
+  bottom: 0;
+  margin-bottom: -.5em;
+}
+
+@media (max-width: 1350px) {
+  .card-container {
+    width: 100%;
+  }
+  .header-left {
+    padding-bottom: 1em;
+  }
+}
+
+@media (max-width: 1000px) {
+  .header {
+    padding-top: 1em;
+    padding-bottom: 1em;
+  }
+  .header-container {
+    display: block;
+  }
+  .header-left {
+    display: block;
+  }
+  .header-menu {
+    justify-content: center;
+    position: relative;
+    margin-top: 0;
+  }
+  .header-content {
+    padding: 0;
+  }
+  .header-image {
+    margin: 0;
+    text-align: center;
+  }
+  .header-image img {
+    width: 6em;
+  }
+  .header-sub-title {
+    margin-top: 1em;
+    text-align: center;
+  }
+  .header-title {
+    text-align: center;
+    margin-bottom: .25em;
+  }
+  .header-description {
+    text-align: center;
+  }
+
+  .content {
+    display: block;
+  }
+  .nav {
+    margin-right: 0;
+    user-select: none;
+  }
+  #nav-enabler {
+    display: flex;
+  }
+  #nav-enabler-icon {
+    transform: rotate(-90deg)
+  }
+  #nav-content {
+    max-height: 0;
+    transition: max-height 0.1s ease-out;
+  }
+  .nav-item {
+    width: auto;
+  }
+  .nav-mobile-enabler #nav-enabler-icon {
+    transition: all 0.1s ease;
+  }
+
+  .mosaic {
+    position: relative;
+    border-top: 1px solid #C4C4C4;
+    padding-top: 1em;
+  }
+  .mosaic-header {
+    text-align: center;
+  }
+  .card {
+    display: block;
+  }
+  .card-image-container {
+    padding: 0;
+    margin: 0;
+    border-right: 0;
+    border-bottom: 1px solid #C4C4C4;
+  }
+  .card-content {
+    width: auto;
+  }
+}

assets/development/styles/main.css

@@ -0,0 +1,86 @@
+html {
+  overflow-y: scroll;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+}
+
+.container {
+  width: 60%;
+  margin: 0 auto;
+}
+
+a {
+  color: #3498db;
+}
+
+a:hover {
+  text-decoration: underline;
+  /*opacity: 0.8;*/
+  transition: color 0.2s;
+  color: #2980b9;
+}
+
+/* sticky footer */
+html, body {
+  height: 100%;
+}
+body {
+  display: flex;
+  flex-direction: column;
+}
+.up-footer {
+  flex: 1 0 auto;
+}
+.sticky-footer {
+  flex-shrink: 0;
+}
+
+/* Porposed alert */
+.proposed-alert {
+  position: fixed;
+  z-index: 9999999;
+  left: 1em;
+  bottom: 2em;
+  padding: 1em;
+  font-weight: bold;
+  border-radius: 3px;
+  text-transform: uppercase;
+  border: 1px solid #c0392b;
+  background-color: #e74c3c;
+  color: white;
+}
+
+.btn {
+  padding: .5em 1em;
+  color: white;
+  border-radius: 7px;
+  background: #2c3e50;
+  border: 0;
+  cursor: pointer;
+}
+
+.btn:focus {
+  outline: 0;
+  opacity: 0.8;
+}
+
+@media (max-width: 1600px) {
+  .container {
+    width: 70%; 
+  }
+}
+
+@media (max-width: 1500px) {
+  .container {
+    width: 80%; 
+  }
+}
+
+@media (max-width: 900px) {
+  .container {
+    width: 92%; 
+  }
+}

assets/development/styles/organization.css

@@ -0,0 +1,840 @@
+/* *****************************************************************************
+
+*                              ORGANIZATION HEADER                              
+
+********************************************************************************/
+
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  font-size: 1.2em;
+}
+
+.header-title {
+  text-align: right;
+}
+
+.return {
+  display: flex;
+  align-items: center;
+  color: #34495e;
+  cursor: pointer;
+  transition: all .2s;
+  text-decoration: none;
+}
+
+.return-icon {
+  display: flex;
+  align-items: center;
+  margin-right: .5em;
+}
+
+.return-icon svg {
+  width: 1.3em;
+}
+
+.return:hover {
+  opacity: 0.88;
+  text-decoration: underline;
+}
+
+/* *****************************************************************************
+
+*                                     COVER                                     
+
+********************************************************************************/
+
+.cover-background {
+  background-position: center;
+  background-size: cover;
+  height: 13em;
+  width: 100%;
+}
+
+.cover {
+  height: 13em;
+  margin-top: -13em;
+  background-color: rgba(230, 126, 34, 0.4);
+  background-size: cover;
+}
+
+.cover-content {
+  color: white;
+  display: flex;
+  align-items: center;
+  height: 13em;
+}
+
+.cover-image {
+  background: white;
+  border-radius: 50%;
+  border: 3px solid #FD6E0B;
+  background-size: cover;
+  background-position: center;
+  width: 10em;
+  height: 10em;
+  margin-right: 3em;
+}
+
+.cover-title-container {
+
+}
+
+.cover-title {
+  font-family: 'Roboto Slab', serif;
+  font-size: 3.5em;
+  font-weight: normal;
+  margin: 0;
+}
+
+.cover-sub-title {
+  font-size: 1.5em;
+  font-weight: normal;
+  margin: 0;
+}
+
+/* *****************************************************************************
+
+*                                    MOSAIC                                     
+
+********************************************************************************/
+
+.media-mosaic {
+  margin-top: .75em;
+  width: 100%;
+  height: 25em;
+  display: grid;
+
+  grid-column-gap: .75em;
+  grid-row-gap: .75em;
+}
+
+.media-overlay {
+  background-color: rgba(196, 196, 196, 0.7);
+  color: #B12008;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.media-container {
+  position: relative;
+}
+
+.media-overlay svg {
+  width: 3.5em;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.media-overlay svg:hover {
+  transform: scale(1.2);
+}
+
+/**
+* MOSAIC CASES
+**/
+/* Mosaic level 1 */
+.mosaic-1 {
+  display: flex;
+  justify-content: center;
+}
+.mosaic-1 .media-container {
+  width: 70%;
+}
+
+/* Mosaic level 2 */
+.mosaic-2 {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+}
+
+/* Mosaic level 3 */
+.mosaic-3 {
+  grid-template-columns: 1fr .5fr;
+  grid-template-rows: 1fr 1fr;
+}
+.mosaic-3 .media-container:first-of-type {
+  grid-row: 1 / span 2;
+}
+
+/* Mosaic level 4 */
+.mosaic-4 {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+
+/* With five medias */
+.mosaic-5 {
+  grid-template-columns: 1fr .5fr .5fr;
+  grid-template-rows: 1fr 1fr;
+}
+.mosaic-5 .media-container:first-of-type {
+  grid-row: 1 / span 2;
+}
+
+/* .media-sec {
+  display: grid;
+  grid-template-rows: 50% 50%;
+}
+
+.media-sec-row {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: 100%;
+} */
+
+.media {
+  cursor: zoom-in;
+  height: 100%;
+  border-radius: 4px;
+  background-size: cover;
+  background-position: center;
+}
+
+/**
+* Media modal
+*/
+.media-modal-container {
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  z-index: 99;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .80);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0.1s linear,opacity 0.1s linear;
+}
+
+.media-modal {
+  position: relative;
+  width: 50%;
+}
+
+.media-modal .media-modal-content {
+  border-radius: 4px;
+  width: 100%;
+}
+
+.media-modal img, .media-modal video {
+  width: 100%;
+}
+
+.media-close {
+  position: absolute;
+  width: 1.5em;
+  height: 1.5em;
+  right: -.75em;
+  top: -.75em;
+  color: white;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: all 0.2s;
+}
+
+.media-close:hover {
+  transform: scale(1.2);
+  opacity: 1;
+}
+
+/* *****************************************************************************
+
+*                                    SECTION                                    
+
+********************************************************************************/
+
+section {
+  margin-top: 1.2em;
+  margin-bottom: 0;
+}
+
+.section-title {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.section-title h1, .section-title h2, .section-title h3 {
+  margin: 0;
+  font-weight: normal;
+  font-family: 'Roboto Slab', serif; 
+  font-size: 1.8em;
+}
+
+.section-divider {
+  background-color: rgba(194, 129, 0, 0.5);
+  width: 100%;
+  height: 3px;
+  border-radius: 1px;
+}
+
+/* *****************************************************************************
+
+*                                  DESCRIPTION                                  
+
+********************************************************************************/
+
+.description {
+  line-height: 1.5em;
+  text-align: justify;
+  margin: 0 auto;
+  width: 80%;
+  margin-top: 1em;
+  margin-bottom: .5em;
+}
+
+.description p {
+  margin-top: .75em;
+}
+.description p:last-child {
+  margin-bottom: 0;
+}
+
+.description h3 {
+  font-size: 1.4em;
+  margin-top: 1em;
+  margin-bottom: 0;
+}
+
+.description h4 {
+  font-size: 1.2em;
+  margin-top: 1em;
+  margin-bottom: 0;
+}
+
+.description h3, .description h4 {
+  opacity: 0.8;
+}
+
+.description blockquote {
+  border-left: 3px solid #95a5a6;
+  border-radius: 3px;
+}
+
+.description blockquote p {
+  padding-top: 1em;
+  padding-bottom: 1em;
+  padding-left: 1em;
+}
+
+.description-cutted {
+  max-height: 13em;
+
+  overflow: hidden;
+  transition: max-height 0.1s ease-out;
+  
+}
+
+.description-actions-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1em;
+}
+
+.description-actions-container.closed {
+  box-shadow: 0px -16px 16px -3px rgb(255, 255, 255);
+  background: rgba(255,255,255,0.8);
+  position: relative;
+  top: -62px;
+  
+  height: 62px;
+  margin-bottom: -62px;
+}
+
+/* *****************************************************************************
+
+*                                   SCHEDULE                                    
+
+********************************************************************************/
+
+.schedule-category {
+  margin-bottom: 1em;
+}
+
+.schedule-category-header {
+  background-color: rgba(189,195,199,.97);
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1em 2em 1em 2em;
+  cursor: pointer;
+}
+
+.schedule-category-collapse-icon {
+  transform: rotate(180deg);
+  color: #B12008;
+  width: 1.5em;
+  transition: all 0.1s ease-out;
+}
+
+.schedule-category-table {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.1s ease-out;
+}
+
+.schedule-category-days-container {
+  border-radius: 4px;
+  background-color: #ECF0F1;
+
+  margin-left: 2em;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-right: 20em;
+  
+  padding: 1em 2em 1em 2em;
+}
+
+.schedule-category-day-container {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1em;
+}
+
+.schedule-category-day-container .separator {
+  opacity: 0.5;
+}
+
+.schedule-category-table div:last-child {
+  margin-bottom: 0;
+}
+
+.schedule-category-hours {
+  color: #2c3e50;
+}
+
+.schedule-category-hours .spearator {
+  color: #bdc3c7;
+}
+
+/* *****************************************************************************
+
+*                                    PRICING                                    
+
+********************************************************************************/
+
+.pricing {
+  display: flex;
+  justify-content: center;
+}
+
+.pricing-card {
+  max-width: 14em;
+  height: 10em;
+  width: 100%;
+  padding: 1.5em 1em;
+  text-align: center;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-right: 1.5em;
+  color: white;
+}
+
+.pricing .pricing-card:nth-child(1) {
+  background-color: rgba(177, 88, 8, .80);
+}
+
+.pricing .pricing-card:nth-child(2) {
+  background-color: rgba(253, 110, 11, .780);
+}
+
+.pricing .pricing-card:nth-child(3) {
+  background-color: rgba(177, 32, 8, .80);
+}
+
+.pricing .pricing-card:last-child {
+  margin-right: 0;
+}
+
+.pricing-label {
+  font-size: 1.5em;
+}
+
+.pricing-name {
+  font-size: 1.8em;
+}
+
+/* *****************************************************************************
+
+*                                    CONTACT                                    
+
+********************************************************************************/
+
+.org-container {
+  margin: 0 auto;
+  width: 70%;
+}
+
+.contact-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: .75em;
+  padding-bottom: .75em;
+  padding-left: 2em;
+  padding-right: 2em;
+  background-color: #ECF0F1;
+  border-radius: 4px;
+  margin-bottom: 1em;
+}
+
+.contact-icon {
+  color: #B15808;
+  background-color: #C4C4C4;
+  border-radius: 50%;
+  width: 2em;
+  height: 2em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5em;
+}
+
+.contact-icon svg {
+  width: .7em;
+}
+
+.contact-content {
+  text-align: right;
+}
+
+.external-link {
+  margin-left: .25em;
+  font-weight: bold;
+}
+
+.external-link {
+  width: .8em;
+}
+
+.email .contact-icon svg {
+  width: .9em;
+}
+
+.website .contact-icon svg {
+  width: .9em;
+}
+
+.facebook .contact-icon {
+  background-color: #3B5999;
+  color: white;
+}
+
+.facebook .contact-icon svg {
+  width: .5em;
+}
+
+.instagram .contact-icon {
+  background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
+  color: white;
+}
+
+.instagram .contact-icon svg {
+  width: .75em;
+}
+
+.twitter .contact-icon {
+  background-color: #1DA1F2;
+  color: white;
+}
+
+.twitter .contact-icon svg {
+  width: .75em;
+}
+
+/**
+People cards
+***/
+.peoples {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1em;
+}
+
+.people-card {
+  width: 100%;
+  margin-right: 1em;
+  border-radius: 3px;
+  padding: 1.2em 1.5em;
+  border: 1px solid gray;
+}
+
+.people-card:last-of-type {
+  margin-right: 0;
+}
+
+.people-header {
+  
+}
+
+.people-name {
+  font-size: 1.4em;
+  margin-bottom: .5em;
+}
+
+.people-contacts {
+  margin-top: .5em;
+}
+
+.people-contact {
+  padding-top: .5em;
+  padding-bottom: .5em;
+  display: flex;
+  align-items: center;
+}
+
+.people-name {
+  
+}
+
+.people-role {
+  opacity: .8;
+}
+
+.people-contact-icon {
+  width: 1em;
+  height: 1em;
+  margin-right: 1em;
+  color: #B15808;
+}
+/* *****************************************************************************
+
+*                                    FOOTER                                     
+
+********************************************************************************/
+
+.mentions {
+  display: flex;
+  justify-content: center;
+  padding-left: 1em;
+  padding-right: 1em;
+  flex-direction: column;
+  text-align: center;
+  color: #d35400;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.mentions div {
+  margin-bottom: .5em;
+}
+
+.footer {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 50% 25% 25%;
+  grid-template-rows: 1fr;
+  height: 1em;
+}
+
+.footer div:nth-child(1) {
+  background-color: rgb(177, 32, 8, .83);
+}
+
+.footer div:nth-child(2) {
+  background-color: rgb(177, 88, 8, .83);
+}
+
+.footer div:nth-child(3) {
+  background-color: rgb(253, 110, 11, .83);
+}
+
+/**
+RESPONSIVE
+**/
+
+@media (max-width: 1200px) {
+  .schedule-category-days-container {
+    margin-right: 25em;
+  }
+  .media-modal {
+    width: 70%;
+  }
+}
+
+
+@media (max-width: 900px) {
+
+  .cover-background {
+    height: 23em;
+    width: 100%;
+  }
+  
+  .cover {
+    height: 23em;
+    margin-top: -23em;
+  }
+  
+  .cover-content {
+    height: 23em;
+
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .cover-image {
+    margin-right: 0;
+    margin-bottom: 3em;
+  }
+
+  .cover-title {
+    margin-bottom: .25em;
+  }
+
+  .media-mosaic {
+    height: 33em;
+  }
+
+  /**
+  * MOSAIC CASES
+  */
+  /* Mosaic level 1 */
+  .mosaic-1 .media-container {
+    width: 100%;
+  }
+
+  /* Mosaic level 2 */
+  .mosaic-2 {
+    grid-template-rows: 1fr 1fr;
+  }
+
+  .mosaic-2, .mosaic-3 {
+    grid-template-columns: 1fr;
+  }
+
+  /* Mosaic level 3 */
+  .mosaic-3 {
+    grid-template-rows: 1fr 1fr 1fr;
+  }
+  .mosaic-3 .media-container:first-of-type {
+    grid-row: 1 / span 1;
+  }
+  
+  /* Mosaic level 4 */
+  .mosaic-4 {
+    grid-template-rows: 1fr 1fr 1fr;
+  }
+  .mosaic-4 .media-container:first-of-type, .mosaic-4 .media-container:nth-of-type(2) {
+    grid-column: 1 / span 2;
+  }
+  .mosaic-4 .media-container:first-of-type {
+    grid-row: 1 / span 1;
+  }
+
+  /* Mosaic level 5 */
+  .mosaic-5 {
+    grid-template-columns: .5fr .5fr;
+    grid-template-rows: 1fr .5fr .5fr;
+  }
+  .mosaic-5 .media-container:first-of-type {
+    grid-row: 1 / span 1;
+    grid-column: 1 / span 2;
+  }
+
+  .media-modal {
+    width: 80%;
+  }
+
+  .schedule-category-header {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  .schedule-category-days-container {
+    margin-right: 5em;
+  }
+
+  .pricing {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .pricing-card {
+    margin-right: 0;
+    margin-bottom: 1em;
+  } 
+
+  .org-container {
+    width: 100%;
+  }
+
+  .contact-icon {
+    width: 1.5em;
+    height: 1.5em;
+  }
+
+  .contact-item {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  .contact-content {
+    word-break: break-all;
+    font-size: .9em;
+  }
+
+  .facebook .contact-content, .twitter .contact-content, .website .contact-content, .instagram .contact-content {
+    font-size: .8em;
+  }
+
+  .peoples {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .people-card {
+    width: auto;
+    text-align: center;
+    margin-bottom: 1em;
+    margin-right: 0;
+  }
+
+  .people-contacts {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .people-card:last-of-type {
+    margin-bottom: 0;
+  }
+
+}
+
+@media (max-width: 600px) {
+  .schedule-category-days-container {
+    margin-right: 1em;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+  .return-title {
+    display: none;
+  }
+  .media-modal {
+    width: 90%;
+  }
+  .description {
+    width: 95%;
+  }
+}

assets/production/scripts/home.js

@@ -0,0 +1 @@
+let navOpened=!1,oldNavText="",oldNavIcon="",navEnabler=document.getElementById("nav-enabler"),navEnablerText=document.getElementById("nav-enabler-text"),navEnablerIcon=document.getElementById("nav-enabler-icon"),navContent=document.getElementById("nav-content"),mosaic=document.getElementById("mosaic"),mosaicHeader=document.getElementById("mosaic-header");function createEl(e=!1,t="div"){let n=document.createElement(t);return 0!=e&&(n.className=e),n}function renderNavItem(e){let t=createEl("nav-item"),n=createEl("nav-icon"),a=createEl(e.icon,"i");n.appendChild(a),t.appendChild(n);let r=createEl("nav-item-content"),l=createEl("nav-title");l.textContent=e.name,r.appendChild(l);let i=createEl("nav-access"),c=createEl("fas fa-chevron-right","i");return i.appendChild(c),r.appendChild(l),r.appendChild(i),t.appendChild(r),t}function setAttributes(e,t){for(var n in t)attr=document.createAttribute(n),attr.value=t[n],e.attributes.setNamedItem(attr)}function renderCard(e){let t=createEl("card","a"),n=createEl("card-image-container"),a=createEl("card-image");a.style=`background-image: url('${e.thumbnail}')`,n.appendChild(a),t.appendChild(n);let r=createEl("card-content"),l=createEl(),i=createEl("card-title-container"),c=createEl("card-title","h2");c.textContent=e.name,i.appendChild(c);let d=createEl("card-icon");if(Array.isArray(e.tags)&&e.tags.length>0){let t=tags.filter(t=>e.tags[0]===t._id)[0];d.innerHTML=`<svg\n      aria-hidden="true"\n      focusable="false"\n      role="img"\n      xmlns="http://www.w3.org/2000/svg"\n      viewBox="0 0 ${t.icon.width} ${t.icon.height}">\n      <path fill="currentColor" d="${t.icon.path}"></path>\n    </svg>`}i.appendChild(d),l.appendChild(i);let o=createEl("card-description");o.textContent=e.description;let s="/association/"+e.slugs[e.slugs.length-1];return e.isProposed&&(s+="?version=proposed"),l.appendChild(o),r.appendChild(l),t.appendChild(r),t.href=s,t}function renderMosaic(e){let t=createEl("card-container");return e.forEach(e=>{t.appendChild(renderCard(e))}),t}navEnabler.onclick=async()=>{navOpened?(navEnablerText.textContent=oldNavText,navEnablerIcon.style.transform="rotate(0deg)",navContent.style.maxHeight=null):(oldNavText=navEnablerText.textContent,navEnablerText.textContent="Minimiser le menu",navEnablerIcon.style.transform="rotate(90eg)",navContent.style.maxHeight=navContent.scrollHeight+"px"),navOpened=!navOpened};let currentTag=null,currentCardContainer=null;function enableTag(e){let t="nav-all"===e.id,n="";t||(n=e.attributes["data-tag-id"].value);let a=organizations.filter(e=>e.tags.filter(e=>e===n).length>0||t),r=renderMosaic(a);null!==currentCardContainer&&mosaic.removeChild(currentCardContainer),currentCardContainer=r,mosaic.appendChild(r),e.className+=" enabled",null!==currentTag&&(currentTag.className=currentTag.className.replace("enabled","")),currentTag=e,null==a||a.length<=0?mosaicHeader.textContent="Aucune associations listées":1===a.length?mosaicHeader.textContent="Une association listée":mosaicHeader.textContent=a.length+" associations listées"}navContent.childNodes.forEach(e=>{e.onclick=()=>enableTag(e)}),enableTag(document.getElementById("nav-all"));

assets/production/scripts/organization.js

@@ -0,0 +1,124 @@
+/**
+ * Schedule collapsable section animation
+ */
+document.querySelectorAll('.schedule-category').forEach(node => {
+  let opened = false
+  let icon = node.querySelector('.schedule-category-collapse-icon')
+  let content = node.querySelector('.schedule-category-table')
+  let header = node.querySelector('.schedule-category-header')
+  header.onclick = () => {
+    if (!opened) {
+      // open the table
+      icon.style.transform = "rotate(0deg)"
+      content.style.maxHeight = content.scrollHeight + "px"
+    } else {
+      // close the table
+      icon.style.transform = "rotate(180deg)"
+      content.style.maxHeight = null
+    }
+    opened = !opened
+  }
+})
+
+/**
+ * Description
+ */
+let description = document.querySelector('.description-cutted')
+let descriptionActions = document.querySelector('.description-actions-container')
+let descriptionOpened = false
+let defaultMaxHeight = ""
+if (description !== null) {
+  let btn = document.querySelector('.description-btn')
+  btn.onclick = () => {
+    if (!descriptionOpened) {
+      // open the full description
+      descriptionActions.className = descriptionActions.className.replace(' closed', '')
+      defaultMaxHeight = description.style.maxHeight
+      description.style.maxHeight = description.scrollHeight + "px"
+      btn.textContent = "Fermer la description"
+    } else {
+      // initial max Height
+      descriptionActions.className += ' closed'
+      description.style.maxHeight = defaultMaxHeight
+      btn.textContent = "Ouvrir la description"
+    }
+    descriptionOpened = !descriptionOpened
+  }
+}
+
+/**
+ * Gallery modal to view media in large
+ */
+let mediaModal = document.querySelector('#media-modal')
+let mediaModalContent = document.querySelector('#media-modal-content')
+// let mediaModalImage = document.querySelector('#media-modal img')
+// let mediaModalVideo = document.querySelector('#media-modal video')
+// let mediaModalSource = document.querySelector('#media-modal video source')
+
+// function disableScroll() { 
+//     // Get the current page scroll position 
+//     scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
+//     scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, 
+  
+//         // if any scroll is attempted, set this to the previous value 
+//         window.onscroll = function() { 
+//             window.scrollTo(scrollLeft, scrollTop); 
+//         }; 
+// } 
+  
+// function enableScroll() { 
+//     window.onscroll = function() {}; 
+// }
+
+
+let openModal = (url, isVideo) =>  {
+  mediaModal.style.visibility = 'visible'
+  mediaModal.style.opacity = 1
+  mediaModalContent.innerHTML = ""
+
+  let attr = document.createAttribute('src')
+  attr.value = url
+  let el = null
+  if (isVideo) {
+    el = document.createElement('video')
+    el.setAttribute('controls', '')
+    el.setAttribute('autoplay', '')
+    el.setAttribute('name', 'media')
+    let source = document.createElement('source')
+    source.setAttribute('src', url)
+    source.setAttribute('type', 'video/mp4')
+    el.appendChild(source)
+  } else {
+    el = document.createElement('img')
+    el.attributes.setNamedItem(attr)
+  }
+  mediaModalContent.appendChild(el)
+  //document.body.style.height = '100vh'
+  document.body.style.overflow = 'hidden'
+  document.body.style.touchAction = 'none'
+
+  setTimeout(() => {
+
+    const outsideClickListener = event => {
+      if (!mediaModalContent.contains(event.target) && isVisible(mediaModalContent)) {
+        closeModal()
+        document.removeEventListener('click', outsideClickListener)
+      }
+    }
+    document.addEventListener('click', outsideClickListener)
+  
+  }, 100)
+}
+
+const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length )
+
+let closeModal = () =>  {
+  mediaModal.style.visibility = 'hidden'
+  mediaModal.style.opacity = 0
+  document.body.style.overflow = 'initial'
+  document.body.style.height = 'initial'
+  let video = document.querySelector('#media-modal video')
+  if (video !== null) {
+    video.pause()
+  }
+}

assets/production/styles/error.css

@@ -0,0 +1 @@
+.error-container{width:100%;margin-top:4em}.error{width:60%;margin:0 auto;text-align:center;color:#2c3e50}.error-title{font-family:'Roboto Slab',serif}.error-icons{font-size:5em;margin-bottom:.25em}.expert{text-align:left;padding:1em;background-color:#000;color:rgba(0,255,0);border:2px solid gray;border-radius:3px}@media (max-width:1350px){.error{width:100%}}

assets/production/styles/home.css

@@ -0,0 +1 @@
+.header{padding-bottom:1.5em;padding-top:1.5em;background-color:#d35400}.header-container{position:relative;display:flex;justify-content:space-between}.header-left{display:flex}.header-menu{position:absolute;right:0;bottom:0;display:flex;align-items:flex-end}.header-menu a{color:#fff;margin-right:1em}.header-menu a:last-of-type{margin-right:0}.header-image{margin-right:3em}.header-image img{width:7em}.header-content{display:flex;flex-direction:column;justify-content:space-between;padding-top:1em;padding-bottom:1em}.header-title{font-family:'Roboto Slab',serif;margin:0;color:#fff;font-weight:500;font-size:2.5em}.header-sub-title{margin:0;text-decoration:underline;font-weight:100;color:#ecf0f1;transition:opacity .2s}.header-sub-title:hover{opacity:.9;color:#ecf0f1}.header-description{color:#ecf0f1}.content{margin-top:1.5em;display:flex}.nav{margin-right:2em}.nav-item{width:15em;padding:1em;border-radius:4px;margin-bottom:.7em;border:3px solid rgba(255,111,10,.7);display:flex;cursor:pointer;transition:ease-in-out .1s;height:1.2em}.nav-item svg{width:.75em;height:.75em}.nav-icon{width:3em;padding-left:.5em;display:flex;justify-content:start;align-items:center;color:#c28200;font-size:1.5em;opacity:.7}.nav-item-content{display:flex;justify-content:space-between;width:100%}.nav-title{display:flex;align-items:center;opacity:.7}.nav-access{display:flex;align-items:center;color:#ff6f0a;opacity:.7}.nav-item.enabled{border-color:#ff6f0a}.nav-item.enabled .nav-access{opacity:1}.nav-item.enabled .nav-icon{opacity:1}.nav-item.enabled .nav-title{opacity:1}.nav-item:hover{transform:scale(1.05)}#nav-enabler{display:none}.mosaic{background:#fff;width:100%}.mosaic-header{width:100%;opacity:.8;text-align:right;margin-bottom:1.5em}.card-container{margin:0 auto;width:85%}.card{cursor:pointer;display:flex;border:1px solid #bdc3c7;border-radius:4px;margin-bottom:1em;box-shadow:0 0 8px 0 rgba(0,0,0,.1);overflow:hidden;text-decoration:none;transition:transform .2s ease-in-out}.card:hover{text-decoration:none}.card-image-container{border-right:1px solid #c4c4c4;display:flex;justify-content:center;align-items:center;padding:1em}.card-image{height:12em;width:12em;background-position:center;background-size:cover;transition:all .2s ease-in-out;border:0;outline:0;box-shadow:0}.card-image:hover{transform:scale(1.1)}.card-content{width:100%;padding:1.5em;display:flex;flex-direction:column;justify-content:space-between}.card-title-container{display:flex;justify-content:space-between}.card-icon{color:#c28200;opacity:.85;margin-top:-.5em;margin-right:-.5em;font-size:1.4em}.card-icon svg{width:1em;height:1em}.card-title{color:#b12008;margin:0;margin-bottom:.5em}.card-description{color:#34495e;margin:0;line-height:1.6em;position:relative}.card-link{position:absolute;right:.5em;bottom:0;margin-bottom:-.5em}@media (max-width:1350px){.card-container{width:100%}.header-left{padding-bottom:1em}}@media (max-width:1000px){.header{padding-top:1em;padding-bottom:1em}.header-container{display:block}.header-left{display:block}.header-menu{justify-content:center;position:relative;margin-top:0}.header-content{padding:0}.header-image{margin:0;text-align:center}.header-image img{width:6em}.header-sub-title{margin-top:1em;text-align:center}.header-title{text-align:center;margin-bottom:.25em}.header-description{text-align:center}.content{display:block}.nav{margin-right:0;user-select:none}#nav-enabler{display:flex}#nav-enabler-icon{transform:rotate(-90deg)}#nav-content{max-height:0;transition:max-height .1s ease-out}.nav-item{width:auto}.nav-mobile-enabler #nav-enabler-icon{transition:all .1s ease}.mosaic{position:relative;border-top:1px solid #c4c4c4;padding-top:1em}.mosaic-header{text-align:center}.card{display:block}.card-image-container{padding:0;margin:0;border-right:0;border-bottom:1px solid #c4c4c4}.card-content{width:auto}}

assets/production/styles/main.css

@@ -0,0 +1 @@
+html{overflow-y:scroll}body{font-family:Roboto,sans-serif;margin:0}.container{width:60%;margin:0 auto}a{color:#3498db}a:hover{text-decoration:underline;transition:color .2s;color:#2980b9}body,html{height:100%}body{display:flex;flex-direction:column}.up-footer{flex:1 0 auto}.sticky-footer{flex-shrink:0}.proposed-alert{position:fixed;z-index:9999999;left:1em;bottom:2em;padding:1em;font-weight:700;border-radius:3px;text-transform:uppercase;border:1px solid #c0392b;background-color:#e74c3c;color:#fff}.btn{padding:.5em 1em;color:#fff;border-radius:7px;background:#2c3e50;border:0;cursor:pointer}.btn:focus{outline:0;opacity:.8}@media (max-width:1600px){.container{width:70%}}@media (max-width:1500px){.container{width:80%}}@media (max-width:900px){.container{width:92%}}