From 975ed6ee5df2a00e408b4be1e317de40b783f61a Mon Sep 17 00:00:00 2001 From: Matthieu Bessat Date: Sat, 5 Sep 2020 23:14:47 +0200 Subject: [PATCH] feat(Home): add sort by name or random button fix(Header): fix href div box for home link --- assets/development/scripts/home.js | 120 ++++++++++++++++------ assets/development/styles/home.css | 49 ++++++++- assets/production/scripts/home.js | 2 +- assets/production/styles/home.css | 2 +- assets/production/styles/organization.css | 2 +- views/base.twig | 2 +- views/home.twig | 18 +++- 7 files changed, 159 insertions(+), 36 deletions(-) diff --git a/assets/development/scripts/home.js b/assets/development/scripts/home.js index 01422b5..a224815 100644 --- a/assets/development/scripts/home.js +++ b/assets/development/scripts/home.js @@ -1,3 +1,14 @@ +/** + * Utils + */ +function createEl(className = false, elName = "div") { + let el = document.createElement(elName); + if (className != false) { + el.className = className; + } + return el; +} + /** * Nav management */ @@ -9,9 +20,10 @@ 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 navAll = document.getElementById('nav-all') let mosaic = document.getElementById('mosaic'); -let mosaicHeader = document.getElementById('mosaic-header'); +let mosaicCount = document.getElementById('mosaic-count'); let tags = [] let navEnablerExists = false @@ -36,17 +48,65 @@ navEnabler.onclick = async () => { navOpened = !navOpened } -function createEl(className = false, elName = "div") { - let el = document.createElement(elName); - if (className != false) { - el.className = className; + +/** + * Content rendering + */ + +/** + * Shuffle organization + */ +function shuffle(array) { + var currentIndex = array.length, temporaryValue, randomIndex + while (0 !== currentIndex) { + randomIndex = Math.floor(Math.random() * currentIndex) + currentIndex -= 1 + + temporaryValue = array[currentIndex] + array[currentIndex] = array[randomIndex] + array[randomIndex] = temporaryValue } - return el; + + return array } /** - * Render + * Filter & Sort actions */ +const randomBtn = document.getElementById('random-btn') +const sortBtn = document.getElementById('sort-btn') + +// by default we render the cards with the random behaviour +let sort = false +organizations = shuffle(organizations) + +// the user want to sort randomly +randomBtn.onclick = () => { + if (sort) { + organizations = shuffle(organizations) + enableTag(currentTag) + sort = false + randomBtn.classList.add('enabled') + sortBtn.classList.remove('enabled') + } +} + +// the user want to sort by name +sortBtn.onclick = () => { + if (!sort) { + // sort by name + organizations = organizations.sort((a, b) => { + var textA = a.name.toUpperCase() + var textB = b.name.toUpperCase() + return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; + }) + enableTag(currentTag) + sort = true + sortBtn.classList.add('enabled') + randomBtn.classList.remove('enabled') + } +} + function renderNavItem(tag) { /*
@@ -160,42 +220,44 @@ function renderCard(organization) { let currentTag = null let currentCardContainer = null -function enableTag(node) { +function enableTag(node, sortOperation = false) { let all = node.id === 'nav-all' - let tagId = "" + 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) - .sort((a, b) => { - var textA = a.name.toUpperCase() - var textB = b.name.toUpperCase() - return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; - }) + renderMosaic(data) + 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 association listée" - } else if (data.length === 1) { - mosaicHeader.textContent = "Une association listée" - } else { - mosaicHeader.textContent = data.length + " associations listées" - } - // close the menu if on mobile - if (navEnablerExists) { - navOpened = !navOpened - closeMenu() - document.getElementsByClassName('content')[0].scrollIntoView(true) - } else { - if (window.scrollY() > 300) { + if (!sortOperation) { + + if (data === undefined || data === null || data.length <= 0) { + mosaicCount.textContent = "Aucune association listée" + } else if (data.length === 1) { + mosaicCount.textContent = "Une association listée" + } else { + mosaicCount.textContent = data.length + " associations listées" + } + + // close the menu if on mobile + if (navEnablerExists) { + navOpened = !navOpened + closeMenu() document.getElementsByClassName('content')[0].scrollIntoView(true) + } else { + if (window.scrollY() > 300) { + document.getElementsByClassName('content')[0].scrollIntoView(true) + } } } } @@ -306,5 +368,5 @@ window.addEventListener('DOMContentLoaded', () => { iconHTML: node.querySelector('.nav-icon').innerHTML }) }) - enableTag(document.getElementById('nav-all')) + enableTag(navAll) }) diff --git a/assets/development/styles/home.css b/assets/development/styles/home.css index 2348034..8cb01e8 100644 --- a/assets/development/styles/home.css +++ b/assets/development/styles/home.css @@ -40,6 +40,11 @@ width: 7em; } +.header-home-link { + display: flex; + justify-content: center; +} + .header-content { display: flex; flex-direction: column; @@ -174,11 +179,48 @@ Nav .mosaic-header { width: 100%; - opacity: 0.8; - text-align: right; + display: flex; + justify-content: space-between; + align-items: center; margin-bottom: 1.5em; } +.mosaic-actions { + display: flex; +} + +.mosaic-action { + cursor: pointer; + border: 0; + background-color: transparent; + padding: .75em .75em; + color: #2c3e50; + display: flex; + justify-content: center; + align-items: center; + border-radius: 2px; + margin-right: .5em; + border: 1px solid #7f8c8d; + transition: all .2s; +} + +.mosaic-action:hover { + opacity: 0.8; +} + +.mosaic-action .btn-icon { + width: 1em; +} + +.mosaic-action.enabled { + background-color: #ecf0f1; + color:#d35400; +} + +.mosaic-count { + opacity: 0.8; +} + .card-container { margin: 0 auto; width: 85%; @@ -316,6 +358,9 @@ Nav .header-content { padding: 0; } + .header-home-link { + margin-bottom: .25em; + } .header-image { margin: 0; text-align: center; diff --git a/assets/production/scripts/home.js b/assets/production/scripts/home.js index 23836b3..4e2143a 100644 --- a/assets/production/scripts/home.js +++ b/assets/production/scripts/home.js @@ -1 +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"),tags=[],navEnablerExists=!1;function closeMenu(){navEnablerText.textContent=oldNavText,navEnablerIcon.style.transform="rotate(0deg)",navContent.style.maxHeight=null}function createEl(e=!1,n="div"){let t=document.createElement(n);return 0!=e&&(t.className=e),t}function renderNavItem(e){let n=createEl("nav-item"),t=createEl("nav-icon"),a=createEl(e.icon,"i");t.appendChild(a),n.appendChild(t);let r=createEl("nav-item-content"),l=createEl("nav-title");l.textContent=e.name,r.appendChild(l);let o=createEl("nav-access"),i=createEl("fas fa-chevron-right","i");return o.appendChild(i),r.appendChild(l),r.appendChild(o),n.appendChild(r),n}function setAttributes(e,n){for(var t in n)attr=document.createAttribute(t),attr.value=n[t],e.attributes.setNamedItem(attr)}function renderCard(e){let n=createEl("card","a"),t=createEl("card-image-container"),a=createEl("card-image");a.style=`background-image: url('${mediaBaseUrl+"/"+e.thumbnail}')`,t.appendChild(a),n.appendChild(t);let r=createEl("card-content"),l=createEl(),o=createEl("card-title-container"),i=createEl("card-title","h2");i.textContent=e.name,o.appendChild(i);let c=createEl("card-icon");if(Array.isArray(e.tags)&&e.tags.length>0){let n=tags.filter(n=>e.tags[0]===n._id)[0];c.innerHTML=n.iconHTML}o.appendChild(c),l.appendChild(o);let d=createEl("card-description");d.textContent=e.description;let s="/association/"+e.slug;return isProposed&&(s+="?version=proposed"),l.appendChild(d),r.appendChild(l),n.appendChild(r),n.href=s,n}navEnabler.onclick=async()=>{navEnablerExists=!0,navOpened?closeMenu():(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 n="nav-all"===e.id,t="";n||(t=e.attributes["data-tag-id"].value);let a=organizations.filter(e=>e.tags.filter(e=>e===t).length>0||n).sort((e,n)=>{var t=e.name.toUpperCase(),a=n.name.toUpperCase();return ta?1:0});renderMosaic(a),e.className+=" enabled",null!==currentTag&&(currentTag.className=currentTag.className.replace("enabled","")),currentTag=e,null==a||a.length<=0?mosaicHeader.textContent="Aucune association listée":1===a.length?mosaicHeader.textContent="Une association listée":mosaicHeader.textContent=a.length+" associations listées",navEnablerExists?(navOpened=!navOpened,closeMenu(),document.getElementsByClassName("content")[0].scrollIntoView(!0)):document.getElementsByClassName("up-footer")[0].scrollIntoView(!0)}function posY(e){for(var n=e,t=0;n&&"body"!==n.tagName.toLowerCase();)t+=n.offsetTop,n=n.offsetParent;return t}function viewPortHeight(){var e=document.documentElement;return window.innerWidth?window.innerHeight:e&&!isNaN(e.clientHeight)?e.clientHeight:0}function scrollY(){return window.pageYOffset?window.pageYOffset:Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function isVisible(e){var n=viewPortHeight(),t=scrollY();return!(posY(e)>n+t)}let rendering=!0,page=0,elementsPerPage=5,focusPoint=null,focusElementPos=2,cardContainer=null,currentOrganizations=[],pageCount=0;function renderPage(){rendering=!0;let e=currentOrganizations.slice(page*elementsPerPage,(page+1)*elementsPerPage);e.forEach((n,t)=>{let a=renderCard(n);cardContainer.appendChild(a),t===e.length-focusElementPos&&(focusPoint=a)}),rendering=!1}function renderMosaic(e){cardContainer=createEl("card-container"),currentOrganizations=e,page=0,pageCount=Math.floor(e.length/elementsPerPage),renderPage(),null!==currentCardContainer&&mosaic.removeChild(currentCardContainer),currentCardContainer=cardContainer,mosaic.appendChild(cardContainer)}window.onscroll=()=>{null!=focusPoint&&isVisible(focusPoint)&&!rendering&&page+1{document.querySelectorAll("#nav-content .nav-item").forEach(e=>{e.onclick=()=>enableTag(e),"nav-all"!==e.id&&tags.push({_id:e.attributes["data-tag-id"].value,iconHTML:e.querySelector(".nav-icon").innerHTML})}),enableTag(document.getElementById("nav-all"))}); \ No newline at end of file +function createEl(e=!1,n="div"){let t=document.createElement(n);return 0!=e&&(t.className=e),t}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"),navAll=document.getElementById("nav-all"),mosaic=document.getElementById("mosaic"),mosaicCount=document.getElementById("mosaic-count"),tags=[],navEnablerExists=!1;function closeMenu(){navEnablerText.textContent=oldNavText,navEnablerIcon.style.transform="rotate(0deg)",navContent.style.maxHeight=null}function shuffle(e){for(var n,t,a=e.length;0!==a;)t=Math.floor(Math.random()*a),n=e[a-=1],e[a]=e[t],e[t]=n;return e}navEnabler.onclick=async()=>{navEnablerExists=!0,navOpened?closeMenu():(oldNavText=navEnablerText.textContent,navEnablerText.textContent="Minimiser le menu",navEnablerIcon.style.transform="rotate(90eg)",navContent.style.maxHeight=navContent.scrollHeight+"px"),navOpened=!navOpened};const randomBtn=document.getElementById("random-btn"),sortBtn=document.getElementById("sort-btn");let sort=!1;function renderNavItem(e){let n=createEl("nav-item"),t=createEl("nav-icon"),a=createEl(e.icon,"i");t.appendChild(a),n.appendChild(t);let r=createEl("nav-item-content"),o=createEl("nav-title");o.textContent=e.name,r.appendChild(o);let l=createEl("nav-access"),i=createEl("fas fa-chevron-right","i");return l.appendChild(i),r.appendChild(o),r.appendChild(l),n.appendChild(r),n}function setAttributes(e,n){for(var t in n)attr=document.createAttribute(t),attr.value=n[t],e.attributes.setNamedItem(attr)}function renderCard(e){let n=createEl("card","a"),t=createEl("card-image-container"),a=createEl("card-image");a.style=`background-image: url('${mediaBaseUrl+"/"+e.thumbnail}')`,t.appendChild(a),n.appendChild(t);let r=createEl("card-content"),o=createEl(),l=createEl("card-title-container"),i=createEl("card-title","h2");i.textContent=e.name,l.appendChild(i);let c=createEl("card-icon");if(Array.isArray(e.tags)&&e.tags.length>0){let n=tags.filter(n=>e.tags[0]===n._id)[0];c.innerHTML=n.iconHTML}l.appendChild(c),o.appendChild(l);let s=createEl("card-description");s.textContent=e.description;let d="/association/"+e.slug;return isProposed&&(d+="?version=proposed"),o.appendChild(s),r.appendChild(o),n.appendChild(r),n.href=d,n}organizations=shuffle(organizations),randomBtn.onclick=()=>{sort&&(organizations=shuffle(organizations),enableTag(currentTag),sort=!1,randomBtn.classList.add("enabled"),sortBtn.classList.remove("enabled"))},sortBtn.onclick=()=>{sort||(organizations=organizations.sort((e,n)=>{var t=e.name.toUpperCase(),a=n.name.toUpperCase();return ta?1:0}),enableTag(currentTag),sort=!0,sortBtn.classList.add("enabled"),randomBtn.classList.remove("enabled"))};let currentTag=null,currentCardContainer=null;function enableTag(e,n=!1){let t="nav-all"===e.id,a="";t||(a=e.attributes["data-tag-id"].value);let r=organizations.filter(e=>e.tags.filter(e=>e===a).length>0||t);renderMosaic(r),e.className+=" enabled",null!==currentTag&&(currentTag.className=currentTag.className.replace("enabled","")),currentTag=e,n||(null==r||r.length<=0?mosaicCount.textContent="Aucune association listée":1===r.length?mosaicCount.textContent="Une association listée":mosaicCount.textContent=r.length+" associations listées",navEnablerExists?(navOpened=!navOpened,closeMenu(),document.getElementsByClassName("content")[0].scrollIntoView(!0)):window.scrollY()>300&&document.getElementsByClassName("content")[0].scrollIntoView(!0))}function posY(e){for(var n=e,t=0;n&&"body"!==n.tagName.toLowerCase();)t+=n.offsetTop,n=n.offsetParent;return t}function viewPortHeight(){var e=document.documentElement;return window.innerWidth?window.innerHeight:e&&!isNaN(e.clientHeight)?e.clientHeight:0}function scrollY(){return window.pageYOffset?window.pageYOffset:Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function isVisible(e){var n=viewPortHeight(),t=scrollY();return!(posY(e)>n+t)}let rendering=!0,page=0,elementsPerPage=5,focusPoint=null,focusElementPos=2,cardContainer=null,currentOrganizations=[],pageCount=0;function renderPage(){rendering=!0;let e=currentOrganizations.slice(page*elementsPerPage,(page+1)*elementsPerPage);e.forEach((n,t)=>{let a=renderCard(n);cardContainer.appendChild(a),t===e.length-focusElementPos&&(focusPoint=a)}),rendering=!1}function renderMosaic(e){cardContainer=createEl("card-container"),currentOrganizations=e,page=0,pageCount=Math.floor(e.length/elementsPerPage),renderPage(),null!==currentCardContainer&&mosaic.removeChild(currentCardContainer),currentCardContainer=cardContainer,mosaic.appendChild(cardContainer)}window.onscroll=()=>{null!=focusPoint&&isVisible(focusPoint)&&!rendering&&page+1{document.querySelectorAll("#nav-content .nav-item").forEach(e=>{e.onclick=()=>enableTag(e),"nav-all"!==e.id&&tags.push({_id:e.attributes["data-tag-id"].value,iconHTML:e.querySelector(".nav-icon").innerHTML})}),enableTag(navAll)}); \ No newline at end of file diff --git a/assets/production/styles/home.css b/assets/production/styles/home.css index 4b50af7..0d35e13 100644 --- a/assets/production/styles/home.css +++ b/assets/production/styles/home.css @@ -1 +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{padding-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:1em;display:flex;justify-content:center;align-items:center;color:#c28200;font-size:1.5em;margin-left:.25em;opacity:.7}.nav-item-content{margin-left:1em;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}#nav-content{position:sticky;top:10px}.mosaic{background:#fff;width:100%;padding-bottom:.25em;flex-grow:1}.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;padding-right:1em}.card-description{color:#34495e;margin:0;line-height:1.6em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-word;word-break:break-word}.card-description::first-letter{text-transform:capitalize}@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;padding-top:1em}.nav{margin-right:0;user-select:none}#nav-enabler{display:flex}#nav-enabler-icon{transform:rotate(-90deg)}#nav-content{overflow:hidden;max-height:0;transition:max-height .1s ease-out}.nav-item{width:auto}.nav-item:hover{transform:scale(1)}.nav-mobile-enabler #nav-enabler-icon{transition:all .1s ease}.mosaic{position:relative;border-top:1px solid #c4c4c4;padding-top:1em;margin-top:.3em}.mosaic-header{text-align:center;margin-bottom:1em}.card{display:block}.card-image-container{padding:0;margin:0;border-right:0;border-bottom:1px solid #c4c4c4;overflow:hidden}.card-content{width:auto}} \ No newline at end of file +.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-home-link{display:flex;justify-content:center}.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{padding-top:1.5em;display:flex;padding-bottom:1em}.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:1em;display:flex;justify-content:center;align-items:center;color:#c28200;font-size:1.5em;margin-left:.25em;opacity:.7}.nav-item-content{margin-left:1em;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}#nav-content{position:sticky;top:10px}.mosaic{background:#fff;width:100%;padding-bottom:.25em;flex-grow:1}.mosaic-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5em}.mosaic-actions{display:flex}.mosaic-action{cursor:pointer;border:0;background-color:transparent;padding:.75em .75em;color:#2c3e50;display:flex;justify-content:center;align-items:center;border-radius:2px;margin-right:.5em;border:1px solid #7f8c8d;transition:all .2s}.mosaic-action:hover{opacity:.8}.mosaic-action .btn-icon{width:1em}.mosaic-action.enabled{background-color:#ecf0f1;color:#d35400}.mosaic-count{opacity:.8}.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;padding-right:1em}.card-description{color:#34495e;margin:0;line-height:1.6em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-word;word-break:break-word}.card-description::first-letter{text-transform:capitalize}@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-home-link{margin-bottom:.25em}.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;padding-top:1em}.nav{margin-right:0;user-select:none}#nav-enabler{display:flex}#nav-enabler-icon{transform:rotate(-90deg)}#nav-content{overflow:hidden;max-height:0;transition:max-height .1s ease-out}.nav-item{width:auto}.nav-item:hover{transform:scale(1)}.nav-mobile-enabler #nav-enabler-icon{transition:all .1s ease}.mosaic{position:relative;border-top:1px solid #c4c4c4;padding-top:1em;margin-top:.3em}.mosaic-header{text-align:center;margin-bottom:1em}.card{display:block}.card-image-container{padding:0;margin:0;border-right:0;border-bottom:1px solid #c4c4c4;overflow:hidden}.card-content{width:auto}} \ No newline at end of file diff --git a/assets/production/styles/organization.css b/assets/production/styles/organization.css index 5da27ff..856944e 100644 --- a/assets/production/styles/organization.css +++ b/assets/production/styles/organization.css @@ -1 +1 @@ -.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:.75em}.return-icon svg{width:1.3em}.return:hover{opacity:.88;text-decoration:underline}.cover-container{position:relative}.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,.75);background-size:cover;color:#fff;padding-top:1.5em;padding-bottom:1.5em}.cover-content .container{display:flex;align-items:center}.cover-image{background:#fff;border-radius:50%;border:3px solid #fd6e0b;background-size:cover;background-position:center;width:10em;height:10em;min-width:10em;min-height:10em;margin-right:3em}.cover-title{font-family:'Roboto Slab',serif;font-size:3em;font-weight:400;margin:0}.cover-sub-title{font-size:1.5em;font-weight:400;margin:0}.media-mosaic-container{position:relative}.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,.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 .2s}.media-overlay svg:hover{transform:scale(1.2)}.mosaic-1{display:flex;justify-content:center}.mosaic-1 .media-container{width:70%}.mosaic-2{width:80%;margin-left:auto;margin-right:auto;grid-template-columns:1fr 1fr;grid-template-rows:1fr}.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-4{width:70%;margin-left:auto;margin-right:auto;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.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{cursor:zoom-in;height:100%;border-radius:4px;background-size:cover;background-position:center}.media-modal-container{position:fixed;width:100%;height:100vh;z-index:99;top:0;left:0;background-color:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;visibility:hidden;opacity:0;transition:visibility .1s linear,opacity .1s linear}.media-modal{position:relative;width:50%}.media-modal .media-modal-content{border-radius:4px;width:100%;max-height:80vh;overflow:hidden;display:flex;align-items:center;justify-content:center}.media-modal img,.media-modal video{width:100%}.media-close{filter:drop-shadow(2px 4px 6px #000);position:absolute;width:1.5em;height:1.5em;right:-.75em;top:-.75em;color:#fff;cursor:pointer;opacity:.9;transition:all .2s}.media-close:hover{transform:scale(1.2);opacity:1}.media-nav{position:absolute;width:.5em;color:#fff;opacity:.8;cursor:pointer;font-size:1.25em;transition:.2s all;z-index:9999;width:5em}.media-nav.disabled{opacity:.25!important;cursor:auto}.media-nav-btn svg{height:2em;filter:drop-shadow(2px 4px 6px #000)}.media-nav-btn{padding:2em;display:flex;justify-content:center;align-items:center}.media-nav:hover{opacity:1;transition:.2s all}.media-nav-left{left:2em!important}.media-nav-right{right:2em!important}.media-gallery-extra-count{position:absolute;width:100%;margin-top:.25em;font-size:.8em;display:flex;justify-content:flex-end}.media-gallery-extra-count a{cursor:pointer;padding:.25em}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:400;font-family:'Roboto Slab',serif;font-size:1.8em}.section-divider{background-color:rgba(194,129,0,.5);width:100%;height:3px;border-radius:1px}.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:.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 .1s ease-out;text-align:justify}.description-actions-container{display:flex;justify-content:center;align-items:center;margin-top:1em}.description-actions-container.closed{box-shadow:0 -16px 16px -3px #fff;background:rgba(255,255,255,.8);position:relative;top:-62px;height:62px;margin-bottom:-62px}.description-btn-container{display:flex;justify-content:center}.description-btn{width:13em;display:flex;justify-content:space-between;align-items:center}#description-btn-icon{width:1em;height:1em;overflow:hidden}#description-btn-text{margin-left:.5em}#description-btn-icon{transition:all .1s ease-out;transform:none}.schedule.dense{display:grid;grid-template-columns:repeat(2,1fr);width:100%;column-gap:1em}.schedule.dense .schedule-category-days-container{margin-right:7em}.schedule-category{margin-bottom:1em}.schedule-category-header{background-color:rgba(189,195,199,.97);border-radius:4px;display:grid;grid-template-columns:1fr 1.5em;column-gap:.5em;justify-content:space-between;align-items:center;padding:1em 2em 1em 2em;cursor:pointer}.schedule-category-collapse-icon-container{display:flex;justify-content:flex-end;align-items:center}.schedule-category-header .separator,.schedule-category-header .subtitle{opacity:.75}.schedule-category-name::first-letter{text-transform:capitalize}.schedule-category-collapse-icon{transform:rotate(180deg);color:#b12008;width:1.5em;transition:all .1s ease-out}.schedule-category-table{max-height:0;overflow:hidden;transition:max-height .1s ease-out}.schedule-category-days-container{border-radius:4px;background-color:#ecf0f1;margin-left:2em;margin-top:1em;margin-bottom:1em;margin-right:15em;padding:1em 2em 1em 2em}.schedule-category-day-container{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:1em}.schedule-category-day-container .separator{opacity:.5}.schedule-category-table div:last-child{margin-bottom:0}.schedule-category-hours{color:#2c3e50;text-align:right}.schedule-category-hours .spearator{color:#bdc3c7}.pricing{display:flex;justify-content:center;margin-bottom:-1em;margin-left:-.75em;margin-right:-.75em}.pricing.supra-dense{flex-wrap:wrap}.pricing-card{min-width:10em;max-width:14em;min-height:10em;width:100%;padding:1.5em 1em;text-align:center;border-radius:4px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background-color:rgba(253,110,11,.78);margin-right:.75em;margin-left:.75em;margin-bottom:1em}.pricing .pricing-card:nth-child(1){background-color:rgba(177,88,8,.8)}.pricing .pricing-card:nth-child(2){background-color:rgba(253,110,11,.78)}.pricing .pricing-card:nth-child(3){background-color:rgba(177,32,8,.8)}.pricing-label{font-size:1.5em}.pricing-label::first-letter{text-transform:capitalize}.pricing-name{font-size:1.8em}.pricing-name::first-letter{text-transform:capitalize}.pricing-description{opacity:.9}.pricing-description::first-letter{text-transform:capitalize}.org-container{margin:0 auto;width:70%}.contact-item{justify-content:space-between;align-items:center;display:grid;grid-template-columns:2.5em 1fr;column-gap:.75em;padding-top:.75em;padding-bottom:.75em;padding-left:2em;padding-right:2em;background-color:#ecf0f1;border-radius:4px;margin-bottom:1em}.contact-item.address .contact-content div{margin-bottom:.25em}.contact-item.address .contact-content div:last-child{margin-bottom:0}.contact-item .long{display:inline}.contact-item .short{display:none}.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:700}.external-link{width:.8em}.email .contact-icon svg{width:.9em}.website .contact-icon svg{width:.9em}.facebook .contact-icon{background-color:#3b5999;color:#fff}.facebook .contact-icon svg{width:.5em}.instagram .contact-icon{background:linear-gradient(45deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);color:#fff}.instagram .contact-icon svg{width:.75em}.twitter .contact-icon{background-color:#1da1f2;color:#fff}.twitter .contact-icon svg{width:.75em}.peoples{width:100%;display:flex;justify-content:center;margin-bottom:1em}.people-card{width:100%;max-width:50%;margin-right:1em;border-radius:3px;padding:1.2em 1.5em;border:1px solid gray}.people-card:last-of-type{margin-right:0}.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-role{opacity:.8}.people-role::first-letter{text-transform:capitalize}.people-contact-icon{width:1em;height:1em;margin-right:1em;color:#b15808}.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)}@media (max-width:1200px){.schedule-category-days-container{margin-right:5em}.media-modal{width:70%}.pricing{flex-wrap:wrap}}@media (max-width:900px){.contact-item .long{display:none}.contact-item .short{display:inline}.cover-content .container{flex-direction:column;justify-content:center;text-align:center}.cover-image{margin-right:0;margin-bottom:3em}.cover-title{font-size:2.5em;margin-bottom:.25em}.media-mosaic{width:100%!important;height:33em}.media-nav{bottom:0}.media-nav-btn{padding-top:1em;padding-bottom:1em}.mosaic-1 .media-container{width:100%}.mosaic-2{grid-template-rows:1fr 1fr}.mosaic-2,.mosaic-3{grid-template-columns:1fr}.mosaic-3{grid-template-rows:1fr 1fr 1fr}.mosaic-3 .media-container:first-of-type{grid-row:1/span 1}.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-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.dense{grid-template-columns:1fr}.schedule-category-header{padding-left:1em;padding-right:1em}.schedule-category-days-container{margin-right:5em}.pricing{flex-direction:column;align-items:center}.pricing.dense{flex-direction:row}.pricing.dense .pricing-card{min-height:6em;margin-right:.5em;margin-left:.5em;padding:1em}.pricing.dense .pricing-name{font-size:1.2em}.pricing-card{margin-left:0;margin-right:0}.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,.instagram .contact-content,.twitter .contact-content,.website .contact-content{font-size:.9em}.peoples{display:flex;flex-direction:column}.people-card{max-width:100%;width:auto;text-align:center;margin-bottom:1em;margin-right:0}.people-contacts{display:flex;flex-direction:column;align-items:center;font-size:.9em}.people-card:last-of-type{margin-bottom:0}}@media (max-width:600px){.schedule-category-days-container{margin-right:0!important;margin-left:0;padding-left:1em;padding-right:1em;font-size:.9em}.return-title{display:none}.media-modal{width:90%}.description{width:95%}} \ No newline at end of file +.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:.75em}.return-icon svg{width:1.3em}.return:hover{opacity:.88;text-decoration:underline}.cover-container{position:relative}.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,.75);background-size:cover;color:#fff;padding-top:1.5em;padding-bottom:1.5em}.cover-content .container{display:flex;align-items:center}.cover-image{background:#fff;border-radius:50%;border:3px solid #fd6e0b;background-size:cover;background-position:center;width:10em;height:10em;min-width:10em;min-height:10em;margin-right:3em}.cover-title{font-family:'Roboto Slab',serif;font-size:3em;font-weight:400;margin:0}.cover-sub-title{font-size:1.5em;font-weight:400;margin:0}.media-mosaic-container{position:relative}.media-mosaic{margin-top:.75em;width:100%;height:25em;display:grid;grid-column-gap:.75em;grid-row-gap:.75em}.media-overlay{background:#b12008;background:linear-gradient(45deg,#e67e22 0,#c0392b 100%);color:#fff;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 .2s}.media-overlay svg:hover{transform:scale(1.2)}.mosaic-1{display:flex;justify-content:center}.mosaic-1 .media-container{width:70%}.mosaic-2{width:80%;margin-left:auto;margin-right:auto;grid-template-columns:1fr 1fr;grid-template-rows:1fr}.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-4{width:70%;margin-left:auto;margin-right:auto;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.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{cursor:zoom-in;height:100%;border-radius:4px;background-size:cover;background-position:center}.media-modal-container{position:fixed;width:100%;height:100vh;z-index:99;top:0;left:0;background-color:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;visibility:hidden;opacity:0;transition:visibility .1s linear,opacity .1s linear}.media-modal{position:relative;width:50%}.media-modal .media-modal-content{border-radius:4px;width:100%;max-height:80vh;overflow:hidden;display:flex;align-items:center;justify-content:center}.media-modal img,.media-modal video{width:100%}.media-close{filter:drop-shadow(2px 4px 6px #000);position:absolute;width:1.5em;height:1.5em;right:-.75em;top:-.75em;color:#fff;cursor:pointer;opacity:.9;transition:all .2s}.media-close:hover{transform:scale(1.2);opacity:1}.media-nav{position:absolute;width:.5em;color:#fff;opacity:.8;cursor:pointer;font-size:1.25em;transition:.2s all;z-index:9999;width:5em}.media-nav.disabled{opacity:.25!important;cursor:auto}.media-nav-btn svg{height:2em;filter:drop-shadow(2px 4px 6px #000)}.media-nav-btn{padding:2em;display:flex;justify-content:center;align-items:center}.media-nav:hover{opacity:1;transition:.2s all}.media-nav-left{left:2em!important}.media-nav-right{right:2em!important}.media-gallery-extra-count{position:absolute;width:100%;margin-top:.25em;font-size:.8em;display:flex;justify-content:flex-end}.media-gallery-extra-count a{cursor:pointer;padding:.25em}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:400;font-family:'Roboto Slab',serif;font-size:1.8em}.section-divider{background-color:rgba(194,129,0,.5);width:100%;height:3px;border-radius:1px}.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:.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 .1s ease-out;text-align:justify}.description-actions-container{display:flex;justify-content:center;align-items:center;margin-top:1em}.description-actions-container.closed{box-shadow:0 -16px 16px -3px #fff;background:rgba(255,255,255,.8);position:relative;top:-62px;height:62px;margin-bottom:-62px}.description-btn-container{display:flex;justify-content:center}.description-btn{width:13em;display:flex;justify-content:space-between;align-items:center}#description-btn-icon{width:1em;height:1em;overflow:hidden}#description-btn-text{margin-left:.5em}#description-btn-icon{transition:all .1s ease-out;transform:none}.schedule.dense{display:grid;grid-template-columns:repeat(2,1fr);width:100%;column-gap:1em}.schedule.dense .schedule-category-days-container{margin-right:7em}.schedule-category{margin-bottom:1em}.schedule-category-header{background-color:rgba(189,195,199,.97);border-radius:4px;display:grid;grid-template-columns:1fr 1.5em;column-gap:.5em;justify-content:space-between;align-items:center;padding:1em 2em 1em 2em;cursor:pointer}.schedule-category-collapse-icon-container{display:flex;justify-content:flex-end;align-items:center;font:inherit;border:0;background:0;padding:initial;cursor:pointer}.schedule-category-collapse-icon-container:focus{border:0;outline:1px dashed #000;cursor:pointer}.schedule-category-header .separator,.schedule-category-header .subtitle{opacity:.75}.schedule-category-name::first-letter{text-transform:capitalize}.schedule-category-collapse-icon{transform:rotate(180deg);color:#b12008;width:1.5em;transition:all .1s ease-out}.schedule-category-table{max-height:0;overflow:hidden;transition:max-height .1s ease-out}.schedule-category-days-container{border-radius:4px;background-color:#ecf0f1;margin-left:2em;margin-top:1em;margin-bottom:1em;margin-right:15em;padding:1em 2em 1em 2em}.schedule-category-day-container{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:1em}.schedule-category-day-container .separator{opacity:.5}.schedule-category-table div:last-child{margin-bottom:0}.schedule-category-hours{color:#2c3e50;text-align:right}.schedule-category-hours .spearator{color:#bdc3c7}.pricing{display:flex;justify-content:center;margin-bottom:-1em;margin-left:-.75em;margin-right:-.75em}.pricing.supra-dense{flex-wrap:wrap}.pricing-card{min-width:10em;max-width:14em;min-height:10em;width:100%;padding:1.5em 1em;text-align:center;border-radius:4px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background-color:rgba(253,110,11,.78);margin-right:.75em;margin-left:.75em;margin-bottom:1em}.pricing .pricing-card:nth-child(1){background-color:rgba(177,88,8,.8)}.pricing .pricing-card:nth-child(2){background-color:rgba(253,110,11,.78)}.pricing .pricing-card:nth-child(3){background-color:rgba(177,32,8,.8)}.pricing-label{font-size:1.5em}.pricing-label::first-letter{text-transform:capitalize}.pricing-name{font-size:1.8em}.pricing-name::first-letter{text-transform:capitalize}.pricing-description{opacity:.9}.pricing-description::first-letter{text-transform:capitalize}.org-container{margin:0 auto;width:70%}.contact-item{justify-content:space-between;align-items:center;display:grid;grid-template-columns:2.5em 1fr;column-gap:.75em;padding-top:.75em;padding-bottom:.75em;padding-left:2em;padding-right:2em;background-color:#ecf0f1;border-radius:4px;margin-bottom:1em}.contact-item.address .contact-content div{margin-bottom:.25em}.contact-item.address .contact-content div:last-child{margin-bottom:0}.contact-item .long{display:inline}.contact-item .short{display:none}.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:700}.external-link{width:.8em}.email .contact-icon svg{width:.9em}.website .contact-icon svg{width:.9em}.facebook .contact-icon{background-color:#3b5999;color:#fff}.facebook .contact-icon svg{width:.5em}.instagram .contact-icon{background:linear-gradient(45deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);color:#fff}.instagram .contact-icon svg{width:.75em}.twitter .contact-icon{background-color:#1da1f2;color:#fff}.twitter .contact-icon svg{width:.75em}.peoples{width:100%;display:flex;justify-content:center;margin-bottom:1em}.people-card{width:100%;max-width:50%;margin-right:1em;border-radius:3px;padding:1.2em 1.5em;border:1px solid gray}.people-card:last-of-type{margin-right:0}.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-role{opacity:.8}.people-role::first-letter{text-transform:capitalize}.people-contact-icon{width:1em;height:1em;margin-right:1em;color:#b15808}.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)}@media (max-width:1200px){.schedule-category-days-container{margin-right:5em}.media-modal{width:70%}.pricing{flex-wrap:wrap}}@media (max-width:900px){.contact-item .long{display:none}.contact-item .short{display:inline}.cover-content .container{flex-direction:column;justify-content:center;text-align:center}.cover-image{margin-right:0;margin-bottom:3em}.cover-title{font-size:2.5em;margin-bottom:.25em}.media-mosaic{width:100%!important;height:33em}.media-nav{bottom:0}.media-nav-btn{padding-top:1em;padding-bottom:1em}.mosaic-1 .media-container{width:100%}.mosaic-2{grid-template-rows:1fr 1fr}.mosaic-2,.mosaic-3{grid-template-columns:1fr}.mosaic-3{grid-template-rows:1fr 1fr 1fr}.mosaic-3 .media-container:first-of-type{grid-row:1/span 1}.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-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.dense{grid-template-columns:1fr}.schedule-category-header{padding-left:1em;padding-right:1em}.schedule-category-days-container{margin-right:5em}.pricing{flex-direction:column;align-items:center}.pricing.dense{flex-direction:row}.pricing.dense .pricing-card{min-height:6em;margin-right:.5em;margin-left:.5em;padding:1em}.pricing.dense .pricing-name{font-size:1.2em}.pricing-card{margin-left:0;margin-right:0}.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,.instagram .contact-content,.twitter .contact-content,.website .contact-content{font-size:.9em}.peoples{display:flex;flex-direction:column}.people-card{max-width:100%;width:auto;text-align:center;margin-bottom:1em;margin-right:0}.people-contacts{display:flex;flex-direction:column;align-items:center;font-size:.9em}.people-card:last-of-type{margin-bottom:0}}@media (max-width:600px){.schedule-category-days-container{margin-right:0!important;margin-left:0;padding-left:1em;padding-right:1em;font-size:.9em}.return-title{display:none}.media-modal{width:90%}.description{width:95%}} \ No newline at end of file diff --git a/views/base.twig b/views/base.twig index ed60a68..494208e 100644 --- a/views/base.twig +++ b/views/base.twig @@ -29,7 +29,7 @@ Github: https://github.com/lefuturiste
- + Logo de l'Espace Condorcet Centre Social
diff --git a/views/home.twig b/views/home.twig index fa16c01..9e10b41 100644 --- a/views/home.twig +++ b/views/home.twig @@ -73,7 +73,23 @@
-
+
+
+ + +
+
+
{% endblock %}