update
This commit is contained in:
root
parent
666943d4f1
commit
51208cad8d
27 changed files with 1003 additions and 678 deletions
|
|
@ -17,7 +17,6 @@
|
|||
.header-menu {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.header-menu a {
|
||||
|
|
@ -94,6 +93,11 @@
|
|||
height: 1.2em;
|
||||
}
|
||||
|
||||
.nav-item svg {
|
||||
width: .75em;
|
||||
height: .75em;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 3em;
|
||||
padding-left: .5em;
|
||||
|
|
@ -114,7 +118,7 @@
|
|||
.nav-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 0.85;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.nav-access {
|
||||
|
|
@ -194,6 +198,7 @@
|
|||
}
|
||||
|
||||
.card-content {
|
||||
/* width: 100%; */
|
||||
padding: 1.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -213,6 +218,11 @@
|
|||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.card-icon svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.6em;
|
||||
color: #B12008;
|
||||
|
|
@ -316,4 +326,3 @@
|
|||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
BIN
static/assets/img/favicon.png
Normal file
BIN
static/assets/img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -10,6 +10,11 @@ let navContent = document.getElementById('nav-content')
|
|||
let mosaic = document.getElementById('mosaic')
|
||||
let mosaicHeader = document.getElementById('mosaic-header')
|
||||
|
||||
organizations = organizations.map(org => {
|
||||
org.tag = tags.filter(t => t._id === org.tag)[0]
|
||||
return org
|
||||
})
|
||||
|
||||
navEnabler.onclick = async () => {
|
||||
if (!navOpened) {
|
||||
// open the menu
|
||||
|
|
@ -73,6 +78,14 @@ function renderNavItem(tag) {
|
|||
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')
|
||||
|
||||
|
|
@ -92,13 +105,19 @@ function renderCard(organization) {
|
|||
titleContainer.appendChild(title)
|
||||
|
||||
let icon = createEl('card-icon')
|
||||
let iconTag = createEl(organization.tag.icon, 'i')
|
||||
icon.appendChild(iconTag)
|
||||
icon.innerHTML = `<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 ${organization.tag.icon.width} ${organization.tag.icon.height}">
|
||||
<path fill="currentColor" d="${organization.tag.icon.path}"></path>
|
||||
</svg>`
|
||||
titleContainer.appendChild(icon)
|
||||
upperContent.appendChild(titleContainer)
|
||||
|
||||
let description = createEl('card-description')
|
||||
description.textContent = organization.descriptionShort
|
||||
description.textContent = organization.description
|
||||
upperContent.appendChild(description)
|
||||
|
||||
let link = createEl('card-link')
|
||||
|
|
@ -109,6 +128,10 @@ function renderCard(organization) {
|
|||
content.appendChild(upperContent)
|
||||
content.appendChild(link)
|
||||
card.appendChild(content)
|
||||
|
||||
card.onclick = () => {
|
||||
window.location = aTag.href
|
||||
}
|
||||
return card
|
||||
}
|
||||
|
||||
|
|
@ -129,7 +152,7 @@ function enableTag(node) {
|
|||
if (!all) {
|
||||
tagId = node.attributes['data-tag-id'].value
|
||||
}
|
||||
let data = organizations.filter(orga => orga.tag.id === tagId || all)
|
||||
let data = organizations.filter(orga => orga.tag._id === tagId || all)
|
||||
let cards = renderMosaic(data)
|
||||
if (currentCardContainer !== null) {
|
||||
mosaic.removeChild(currentCardContainer)
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ body {
|
|||
}
|
||||
|
||||
.container {
|
||||
width: 80%;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -23,8 +23,21 @@ a:hover {
|
|||
color: #2980b9;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.container {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
.container {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.container {
|
||||
width: 92%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,13 +23,19 @@
|
|||
color: #34495e;
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.return-icon {
|
||||
font-size: 1.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.return-icon svg {
|
||||
width: 1.3em;
|
||||
}
|
||||
|
||||
.return:hover {
|
||||
opacity: 0.88;
|
||||
text-decoration: underline;
|
||||
|
|
@ -140,7 +146,7 @@
|
|||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.media-main {
|
||||
.media-container:first-of-type {
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
|
||||
|
|
@ -207,10 +213,29 @@ section {
|
|||
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;
|
||||
}
|
||||
|
||||
/* *****************************************************************************
|
||||
|
||||
* SCHEDULE
|
||||
|
|
@ -237,7 +262,7 @@ section {
|
|||
|
||||
.schedule-category-collapse-icon {
|
||||
color: #B12008;
|
||||
font-size: 1.5em;
|
||||
width: 1.5em;
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
|
||||
|
|
@ -251,7 +276,6 @@ section {
|
|||
.schedule-category-days-container {
|
||||
border-radius: 4px;
|
||||
background-color: #ECF0F1;
|
||||
width: 40;
|
||||
|
||||
margin-left: 2em;
|
||||
margin-top: 1em;
|
||||
|
|
@ -283,14 +307,14 @@ section {
|
|||
|
||||
.pricing {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
max-width: 14em;
|
||||
height: 10em;
|
||||
width: 100%;
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 1.5em;
|
||||
padding: 1.5em 1em;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
|
|
@ -360,6 +384,10 @@ section {
|
|||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.contact-icon svg {
|
||||
width: .7em;
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -369,21 +397,45 @@ section {
|
|||
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;
|
||||
}
|
||||
|
||||
/* *****************************************************************************
|
||||
|
||||
* FOOTER
|
||||
|
|
@ -412,6 +464,13 @@ section {
|
|||
}
|
||||
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.schedule-category-days-container {
|
||||
margin-right: 25em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
||||
.cover-background {
|
||||
|
|
@ -446,23 +505,40 @@ section {
|
|||
grid-template-columns: .5fr .5fr;
|
||||
grid-template-rows: 1fr .5fr .5fr;
|
||||
}
|
||||
.media-main {
|
||||
|
||||
.media-container:first-of-type {
|
||||
grid-row: 1 / span 1;
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
||||
.schedule-category-header {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.schedule-category-days-container {
|
||||
margin-right: 5em;
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
margin-right: .5em;
|
||||
.pricing {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
margin-right: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.contact {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
|
|
@ -470,5 +546,21 @@ section {
|
|||
|
||||
.contact-content {
|
||||
word-break: break-all;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.facebook .contact-content, .twitter .contact-content, .website .contact-content, .instagram .contact-content {
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.schedule-category-days-container {
|
||||
margin-right: 1em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
.return-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue