diff --git a/.eleventy.js b/.eleventy.js index a8feb32..8db5c6e 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -59,6 +59,20 @@ module.exports = function (eleventyConfig) { return filtered; }); + eleventyConfig.addCollection("sdgRelatedToProjects", function (collectionApi) { + const projectsCollection = collectionApi.getFilteredByTag("proyecto"); + const sdgRelatedToProjects = new Set(); + projectsCollection.forEach((el) => { + el.data.ods.forEach((sdg) => { + sdgRelatedToProjects.add(sdg); + }); + }); + + const orderedSdgRelatedToProjects = Array.from(sdgRelatedToProjects) + .sort((a, b) => a - b); + return orderedSdgRelatedToProjects; + }); + let options = { html: true, breaks: true, diff --git a/src/assets/img/featured-icon-1.svg b/src/assets/img/featured-icon-1.svg new file mode 100644 index 0000000..71a5093 --- /dev/null +++ b/src/assets/img/featured-icon-1.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/img/featured-icon-2.svg b/src/assets/img/featured-icon-2.svg new file mode 100644 index 0000000..afa9ca3 --- /dev/null +++ b/src/assets/img/featured-icon-2.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/img/featured-icon-3.svg b/src/assets/img/featured-icon-3.svg new file mode 100644 index 0000000..2e65998 --- /dev/null +++ b/src/assets/img/featured-icon-3.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/img/sdg-banner.png b/src/assets/img/sdg-banner.png new file mode 100644 index 0000000..8168843 Binary files /dev/null and b/src/assets/img/sdg-banner.png differ diff --git a/src/assets/img/sdg-squares.png b/src/assets/img/sdg-squares.png new file mode 100644 index 0000000..4d5f765 Binary files /dev/null and b/src/assets/img/sdg-squares.png differ diff --git a/src/assets/img/sdg-wheel-transparent.png b/src/assets/img/sdg-wheel-transparent.png new file mode 100644 index 0000000..d160406 Binary files /dev/null and b/src/assets/img/sdg-wheel-transparent.png differ diff --git a/src/css/base.css b/src/css/base.css index 236fb2a..eb1a6e7 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -28,6 +28,7 @@ label { --accent: #ff0000; --white: #fbfbfb; --black: #212121; + --blue: #19486a; /* Font variables */ --display-font: "Montserrat Alternates", sans-serif; --title-font: "Montserrat", sans-serif; @@ -56,6 +57,7 @@ label { --font-heading-notice: 700 1.5rem / 2rem var(--title-font); --font-heading-xs: 700 1rem / normal var(--title-font); --font-heading-md-regular: 400 1.75rem / normal var(--title-font); + --font-text-targets-table: 900 1.5rem / normal var(--body-font); } /* Breakpoints */ @@ -90,6 +92,7 @@ label { --font-heading-lg: 700 1.5rem / normal var(--display-font); --font-heading-md: 700 1.25rem / normal var(--title-font); --font-heading-md-regular: 400 1.5rem / normal var(--title-font); + --font-table: 900 1.25rem / 1.75rem var(--body-font); } } /* Mobile */ diff --git a/src/css/bundle.html b/src/css/bundle.html index f505013..3a13502 100644 --- a/src/css/bundle.html +++ b/src/css/bundle.html @@ -19,6 +19,7 @@ {% include "css/servicios/transparencia.css" %} {% include "css/servicios/sostenibilidad.css" %} {% include "css/kit-digital.css" %} + {% include "css/ods.css" %} {% endcapture %} {{ css | cssmin }} \ No newline at end of file diff --git a/src/css/ods.css b/src/css/ods.css new file mode 100644 index 0000000..3a437f0 --- /dev/null +++ b/src/css/ods.css @@ -0,0 +1,330 @@ +:root { + --ods-description-squares-width: 31.5rem; + --ods-description-squares-height: 2.5rem; + + --ods-sdg-banner-height: 16.5rem; + --ods-sdg-banner-img-width: 48.1745rem; +} +@media screen and (max-width: 1023px) { + :root { + --ods-sdg-banner-height: 12.5rem; + --ods-sdg-banner-img-width: 31.00475rem; + } +} +@media screen and (max-width: 640px) { + :root { + --ods-description-squares-width: 14.755rem; + --ods-description-squares-height: auto; + + --ods-sdg-banner-height: 9.625rem; + --ods-sdg-banner-img-width: 20rem; + } +} + +.ods section { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: var(--section-padding); + width: 100%; + max-width: 1920px; +} +/* hero */ +.ods section.hero { + display: flex; + align-items: flex-start; + padding-top: var(--layout-padding-top); + padding-bottom: 0; + height: 38.75rem; + text-align: left; +} +.ods section.hero p { + font-family: var(--display-font); + margin-bottom: 1.25rem; + font-size: 1.5rem; + font-style: normal; + font-weight: 400; + line-height: 124.1%; /* 1.8615rem */ + } +.ods section.hero h2 { + font-family: var(--display-font); + font-weight: 900; + font-size: 2.5rem; + line-height: 124.1%; /* 3.1025rem */ + max-width: 52.229rem; + width: 100%; +} +.ods section.hero h2 strong { + color: var(--primary); +} +.ods section.hero .img-wrapper { + display: flex; + margin-top: -3.75rem; + margin-bottom: -6rem; + justify-content: flex-end; + align-self: stretch; + object-fit: contain; +} +.ods section.hero img { + width: 27.01rem; + height: auto; + z-index: -1; +} +@media screen and (max-width: 1023px) { + .ods section.hero { + flex-direction: column; + justify-content: space-between; + height: 61.93rem; + padding-top: 7.5rem; + } + .ods section.hero .img-wrapper { + margin-top: 0; + } +} +@media screen and (max-width: 640px) { + .ods section.hero { + height: 44.62rem; + padding-top: 5rem; + padding-bottom: 2.5rem; + } + .ods section.hero p { + font-size: 1.25rem; + line-height: 124.1%; /* 2.01663rem */ + } + .ods section.hero h2 { + font-size: 1.625rem; + line-height: 124.1%; /* 2.01663rem */ + } + .ods section.hero .img-wrapper { + margin-bottom: 0; + } + .ods section.hero img { + width: 14.89rem; + } +} +/* featured- */ +.ods section.featured { + display: flex; + flex-direction: column; + padding: 3.75rem var(--layout-padding-x); + background-color: var(--primary); + color: var(--white); + z-index: 999; + gap: 2.5rem; +} +.ods section.featured h2 { + font: var(--font-heading-xl); +} +.ods section.featured .cards { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-around; + width: 75%; + gap: 5rem; +} +.ods section.featured .cards .card { + padding: 2rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + font: var(--font-text-md); + font-size: 1.25rem; + height: 100%; + max-width: 17.8rem; + gap: 1.5rem; + text-align: center; +} +@media screen and (max-width: 1023px) { + .ods section.featured .cards { + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + gap: 2rem; + } + .ods section.featured .cards .card { + padding: 1.5rem 3.75rem; + max-width: 100%; + } +} +@media screen and (max-width: 640px) { + .ods section.featured .cards .card { + padding: 1.5rem 0; + line-height: 1.5rem; + } +} +/* description */ +.ods section.description { + padding: 5rem var(--layout-padding-x); + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + gap: 5.5rem; +} +.ods section.description .img-wrapper { + width: var(--ods-description-squares-width); + height: var(--ods-description-squares-height); +} +.ods section.description .img-wrapper img { + width: 100%; + object-fit: cover; + transform: rotate(90deg); +} +.ods section.description .description-text { + font: var(--font-text-md); +} +@media screen and (max-width: 640px) { + .ods section.description { + flex-direction: column; + gap: 1rem; + } + .ods section.description .img-wrapper img { + transform: none; + } +} +/* shared style interactive table */ +.ods section.sdg-table { + display: flex; + flex-direction: column; + padding: var(--section-padding); + gap: 3.75rem; +} +.ods section.sdg-table .intro-text { + padding: 0 var(--layout-padding-x); + display: flex; + flex-direction: column; + align-items: center; + gap: 1.25rem; + width: 88%; +} +.ods section.sdg-table .intro-text h3 { + font: var(--font-heading-xl); +} +.ods section.sdg-table .intro-text p { + font: var(--font-text-xl); +} +.ods section.sdg-table .interactive-table { + display: flex; + flex-direction: column; + gap: 3.75rem; + padding: var(--section-padding); + border-radius: 1rem; + background: #FFF; + box-shadow: 0px 4px 23px 0px rgba(0, 0, 0, 0.15); + width: 100%; +} + +.ods .sdg-table .interactive-table .sdg-grid { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + gap: 2.5rem; +} +.ods .sdg-table .interactive-table .sdg-grid .sdg-img { + border: none; + background: none; + width: 5rem; + height: 5rem; + cursor: pointer; +} +.ods .sdg-table .interactive-table .sdg-grid .sdg-img.active { + width: calc(5rem + 12px); + height: calc(5rem + 12px); + border: 6px solid var(--primary); +} +.ods .sdg-table .interactive-table .sdg-grid img { + width: 100%; + height: 100%; + box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.25); +} + +@media screen and (max-width: 1023px) { + .ods section.sdg-table { + gap: 2.5rem; + } + .ods section.sdg-table .intro-text { + width: 100%; + padding: 0; + } +} +/* main goals and targets table */ +.ods .main-goals-targets #main-sdg-targets-table .targets-list { + display: none; +} +.ods .main-goals-targets #main-sdg-targets-table .targets-list.active { + display: flex; + flex-direction: column; + gap: 2.5rem; +} +.ods .main-goals-targets #main-sdg-targets-table .targets-list .sdg-title { + display: inline-flex; + flex-direction: column; + align-items: center; + gap: 1.25rem; +} +.ods .main-goals-targets #main-sdg-targets-table .targets-list .sdg-title h4 { + font: var(--font-heading-lg); + font-weight: 900; +} +.ods .main-goals-targets #main-sdg-targets-table .targets-list .sdg-title p { + font: var(--font-text-xl); +} +.ods .main-goals-targets #main-sdg-targets-table .targets-list .sdg-targets { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.ods .main-goals-targets #main-sdg-targets-table .targets-list .sdg-targets h4 { + font: 600 1.5rem / normal var(--body-font); + margin-bottom: 1rem; +} +.ods .main-goals-targets #main-sdg-targets-table .targets-list .sdg-targets .target { + display: flex; + padding: 1.5rem 0rem; + align-items: flex-start; + align-self: stretch; + border-top: 1px solid #19486A; + text-align: left; +} +.ods .main-goals-targets #main-sdg-targets-table .targets-list .sdg-targets .target h5 { + flex-shrink: 0; + width: 6.62rem; + font: 900 1.5rem / normal var(--body-font); + color: var(--blue); +} +.ods .main-goals-targets #main-sdg-targets-table .targets-list .sdg-targets .target p { + font: var(--font-text-md); +} +/* impact goals and targets table */ + +/* UN banner */ +.ods section.sdg-banner { + padding: 0; +} +.ods section.sdg-banner .sdg-wrapper { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.5rem; + height: var(--ods-sdg-banner-height); +} +.ods section.sdg-banner img { + width: var(--ods-sdg-banner-img-width); + height: auto +} +.ods section.sdg-banner a { + text-decoration: none !important; + color: var(--black); + align-self: flex-end; + font: var(--font-heading-xs); +} +.ods section.sdg-banner a img { + width: 0.7rem; + height: auto; +} \ No newline at end of file diff --git a/src/js/base.js b/src/js/base.js index 9bc6aca..f4af475 100644 --- a/src/js/base.js +++ b/src/js/base.js @@ -5,6 +5,7 @@ import { mobileMenuHandler, scrollUp, scrollDown, + initSdgInteractiveTables } from "./functions.js"; import { getPathName } from "./utils.js"; @@ -17,6 +18,9 @@ const commonScripts = () => { if (getPathName() === "/proyectos/") { initProjectSearch(); } + if (getPathName() === "/ods/") { + initSdgInteractiveTables() + } }; document.addEventListener("DOMContentLoaded", () => { diff --git a/src/js/functions.js b/src/js/functions.js index f6ee4d7..75aae10 100644 --- a/src/js/functions.js +++ b/src/js/functions.js @@ -408,3 +408,26 @@ function _requestIndex() { xhr.send(); }); } + +export function initSdgInteractiveTables() { + _mainTargetsTableHandler() +} + +function _mainTargetsTableHandler() { + const sdgMainTable = document.getElementById("main-sdg-targets-table"); + let sdgGrid = sdgMainTable.querySelector(".sdg-grid"); + let sdgButtons = sdgGrid.getElementsByTagName("button"); + for (const button of sdgButtons) { + button.addEventListener("click", () => { + // reset all buttons + Array.from(sdgButtons).forEach((item) => { item.classList.remove("active")}); + // hide all targets list + sdgMainTable.querySelectorAll(".targets-list").forEach((list) => { + list.classList.remove("active"); + }); + // show the selected target list and mark the selected button as active + document.getElementById("main-" + button.value).classList.add("active"); + button.classList.add("active"); + }); + }; +} \ No newline at end of file diff --git a/src/layouts/base.html b/src/layouts/base.html index 38504ef..4e252d2 100644 --- a/src/layouts/base.html +++ b/src/layouts/base.html @@ -226,12 +226,14 @@

Contacta

Echa un vistazo a nuestros

- + + +
diff --git a/src/ods.html b/src/ods.html new file mode 100644 index 0000000..c606287 --- /dev/null +++ b/src/ods.html @@ -0,0 +1,431 @@ +--- +layout: base.html +title: ODS +css: ["/css/ods.css"] +--- +
+
+
+

Portal ODS

+

+ Enreda está comprometida con la Agenda 2030 y trabaja activamente por + la consecución de los Objetivos de desarrollo sostenible +

+
+
+ SDG wheel +
+
+
+

Alineados con la Agenda 2030

+
+
+ +

+ Enreda S.C.A muestra con todo este trabajo y dedicación desde hace + años su compromiso expreso con la Agenda 2030 y el cumplimiento de + los Objetivos de Desarrollo Sostenible +

+
+
+ +

+ Trabajamos y cuidamos el impacto externo en nuestros proyectos como + el impacto positivo de la gestión interna de la cooperativa +

+
+
+ +

+ Para todo ello la Asamblea de la Cooperativa será el órgano que + analice y gestione nuestra aportación a los ODS +

+
+
+
+
+
+ +
+
+

+ En los últimos años hemos dedicado muchos esfuerzos y tiempo en + la formación, análisis y planificación de servicios relacionados + con la Agenda 2030. +

+
+

+ Desde el año 2018 empezamos a ser conscientes del potencial de + los Objetivos de Desarrollo Sostenible para implementar muchas + de nuestras líneas estratégicas, aplicando nuestro propósito, + tecnología para la transformación social; relacionándolo con + muchos de nuestros productos y servicios. +

+
+

+ Los Objetivos de Desarrollo se alinean completamente con muchas + de las líneas que venimos trabajando desde hace más de 10 años, + como son: gobierno abierto, transparencia, participación digital, + participación ciudadana, vigilancia ciudadana, incidencia política, etc… +

+
+

+ La relación entre muchos de nuestros proyectos y la Agenda 2030 es + una realidad. Por ello decidimos formarnos específicamente y realizar + un proceso de análisis completo, que nos llevó a crear junto con + la Cooperativa Working Smarter (http://workingsmarter.es/) una empresa + dedicada específicamente a la Aceleración de la Agenda 2030 mediante + el desarrollo de servicios y productos tecnológicos; OpenODS (openods.es) +

+
+

+ Desde esta marca hemos seguido trabajando durante estos años generando + multitud de proyectos y servicios a todo tipo de entidades para facilitar + la aplicación de la Agenda 2030. +

+
+
+
+
+

ODS y metas prioritarios

+

+ Identificamos como ODS y Metas prioritarios y sobre los que actuamos + activamente en nuestro funcionamiento como empresa, los siguientes: +

+
+
+
+ + + + + + +
+
+
+

Objetivo 5

+

+ Lograr la igualdad entre los géneros y empoderar a todas + las mujeres y las niñas +

+
+
+

Metas

+
+
5.1
+

+ Poner fin a todas las formas de discriminación contra todas + las mujeres y las niñas en todo el mundo +

+
+
+
5.5
+

+ Asegurar la participación plena y efectiva de las mujeres y la + igualdad de oportunidades de liderazgo a todos los niveles + decisorios en la vida política, económica y pública +

+
+
+
5.b
+

+ Mejorar el uso de la tecnología instrumental, en particular la + tecnología de la información y las comunicaciones, para promover + el empoderamiento de las mujeres +

+
+
+
+
+
+

Objetivo 8

+

+ Promover el crecimiento económico inclusivo y sostenible, + el empleo y el trabajo decente para todos +

+
+
+

Metas

+
+
8.2
+

+ Lograr niveles más elevados de productividad económica + mediante la diversificación, la modernización tecnológica y la + innovación, entre otras cosas centrándose en los sectores + con gran valor añadido y un uso intensivo de la mano de obra +

+
+
+
8.3
+

+ Promover políticas orientadas al desarrollo que apoyen las + actividades productivas, la creación de puestos de trabajo + decentes, el emprendimiento, la creatividad y la innovación, + y fomentar la formalización y el crecimiento de las + microempresas y las pequeñas y medianas empresas, incluso + mediante el acceso a servicios financieros +

+
+
+
8.5
+

+ De aquí a 2030, lograr el empleo pleno y productivo y el + trabajo decente para todas las mujeres y los hombres, + incluidos los jóvenes y las personas con discapacidad, + así como la igualdad de remuneración por trabajo de igual valor +

+
+
+
8.8
+

+ Proteger los derechos laborales y promover un entorno de + trabajo seguro y sin riesgos para todos los trabajadores, + incluidos los trabajadores migrantes, en particular las + mujeres migrantes y las personas con empleos precarios +

+
+
+
+
+
+

Objetivo 9

+

+ Construir infraestructuras resilientes, promover la + industrialización sostenible y fomentar la innovación +

+
+
+

Metas

+
+
9.1
+

+ Desarrollar infraestructuras fiables, sostenibles, + resilientes y de calidad, incluidas infraestructuras + regionales y transfronterizas, para apoyar el desarrollo + económico y el bienestar humano, haciendo especial + hincapié en el acceso asequible y equitativo para todos +

+
+
+
9.2
+

+ Promover una industrialización inclusiva y sostenible y, + de aquí a 2030, aumentar significativamente la contribución + de la industria al empleo y al producto interno bruto, + de acuerdo con las circunstancias nacionales, y duplicar + esa contribución en los países menos adelantados +

+
+
+
9.5
+

+ Aumentar la investigación científica y mejorar la capacidad + tecnológica de los sectores industriales de todos los países, + en particular los países en desarrollo, entre otras cosas + fomentando la innovación y aumentando considerablemente, + de aquí a 2030, el número de personas que trabajan en + investigación y desarrollo por millón de habitantes y + los gastos de los sectores público y privado en investigación + y desarrollo +

+
+
+
9.c
+

+ Aumentar significativamente el acceso a la tecnología de + la información y las comunicaciones y esforzarse por + proporcionar acceso universal y asequible a Internet en + los países menos adelantados de aquí a 2020 +

+
+
+
+
+
+

Objetivo 11

+

+ Lograr que las ciudades sean más inclusivas, seguras, + resilientes y sostenibles +

+
+
+

Metas

+
+
11.6
+

+ De aquí a 2030, reducir el impacto ambiental negativo per capita + de las ciudades, incluso prestando especial atención a la calidad + del aire y la gestión de los desechos municipales y de otro tipo +

+
+
+
11.a
+

+ 11.a Apoyar los vínculos económicos, sociales y ambientales + positivos entre las zonas urbanas, periurbanas y rurales + fortaleciendo la planificación del desarrollo nacional y regional +

+
+
+
11.b
+

+ De aquí a 2020, aumentar considerablemente el número de ciudades + y asentamientos humanos que adoptan e implementan políticas y + planes integrados para promover la inclusión, el uso eficiente + de los recursos, la mitigación del cambio climático y la + adaptación a él y la resiliencia ante los desastres, y desarrollar + y poner en práctica, en consonancia con el Marco de Sendai para + la Reducción del Riesgo de Desastres 2015-2030, la gestión integral + de los riesgos de desastre a todos los niveles +

+
+
+
+
+
+

Objetivo 16

+

Promover sociedades justas, pacíficas e inclusivas

+
+
+

Metas

+
+
16.3
+

+ Promover el estado de derecho en los planos nacional e + internacional y garantizar la igualdad de acceso a la + justicia para todos +

+
+
+
16.6
+

+ Crear a todos los niveles instituciones eficaces y + transparentes que rindan cuentas +

+
+
+
16.7
+

+ Garantizar la adopción en todos los niveles de decisiones + inclusivas, participativas y representativas que + respondan a las necesidades +

+
+
+
16.8
+

+ Ampliar y fortalecer la participación de los países en + desarrollo en las instituciones de gobernanza mundial +

+
+
+
16.b
+

+ Promover y aplicar leyes y políticas no discriminatorias + en favor del desarrollo sostenible +

+
+
+
+
+
+

Objetivo 17

+

Revitalizar la alianza mundial para el desarrollo sostenible

+
+
+

Metas

+
+
17.6
+

+ Mejorar la cooperación regional e internacional Norte-Sur, Sur-Sur + y triangular en materia de ciencia, tecnología e innovación y el + acceso a estas, y aumentar el intercambio de conocimientos en + condiciones mutuamente convenidas, incluso mejorando la coordinación + entre los mecanismos existentes, en particular a nivel de las + Naciones Unidas, y mediante un mecanismo mundial de facilitación + de la tecnología +

+
+
+
17.16
+

+ Mejorar la Alianza Mundial para el Desarrollo Sostenible, + complementada por alianzas entre múltiples interesados que + movilicen e intercambien conocimientos, especialización, + tecnología y recursos financieros, a fin de apoyar el logro + de los Objetivos de Desarrollo Sostenible en todos los países, + particularmente los países en desarrollo +

+
+
17.17
+

+ Fomentar y promover la constitución de alianzas eficaces en las esferas + pública, público-privada y de la sociedad civil, aprovechando la + experiencia y las estrategias de obtención de recursos de las alianzas +

+
+
+
+
+
+
+
+

Matriz de Impacto

+

+ Relación entre nuestros proyectos y las Metas sobre las que impactamos +

+
+
+
+ {% for sdgNumber in collections.sdgRelatedToProjects %} + + {% endfor %} +
+
+
+
+
+
+ SDG banner + + Web Naciones Unidas + + +
+
+
\ No newline at end of file