kit-eco.social/landing
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

amend some issues and change texts

Browse Source
This commit is contained in:
María
2025-09-02 08:59:38 +02:00
committed by María
parent e5d470103f
commit 31fa587ea7
19 changed files with 116 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
assets/css/main.css
View File

@@ -57,7 +57,7 @@
--spacing-21.8: 21.875rem; /* 350px */
--spacing-22.3: 22.313rem; /* 393px */
--spacing-25.6: 25.688rem; /* 411px */
--spacing-29: 29rem; /* 464px */
--spacing-29: 29rem; /* 464px */
--spacing-124.2: 31.063rem; /* 497px */
--spacing-44.8: 44.813rem; /* 717px */
@@ -72,7 +72,7 @@
/* Super desktop */
@media screen and (min-width: 1023px) {
:root {
--default-font-size: var(--font-size-lg); /* 18px */
--default-font-size: var(--font-size-base, 16px); /* 16px */
--layout-padding-x: 2rem; /* 32px */
--font-size-Hero: 48px;
@@ -92,7 +92,7 @@
/* Tablet */
@media screen and (max-width: 1023px) {
:root {
--default-font-size: var(--font-size-lg); /* 16px */
--default-font-size: var(--font-size-base); /* 16px */
--layout-padding-x: 1rem; /* 16px */
--font-size-Hero: 40px;
@@ -112,7 +112,7 @@
/* Mobile */
@media screen and (max-width: 640px) {
:root {
--default-font-size: var(--font-size-lg); /* 16px */
--default-font-size: var(--font-size-base); /* 16px */
--layout-padding-x: 0.5rem; /* 8px */
--font-size-Hero: 32px;
@@ -179,6 +179,12 @@ body {
background-color: var(--color-background-extra-light);
}
header {
position: sticky;
top: 0;
z-index: 20;
}
body footer {
position: sticky;
top: 100dvh;
@@ -208,7 +214,7 @@ h5 {
font-size: var(--font-size-H5);
}
.text-2xl {
.text-2xl-custom {
font-size: var(--font-size-2xl);
}
.text-lg {
@@ -220,7 +226,7 @@ h5 {
.text-sm {
font-size: var(--font-size-sm);
}
.text-xs {
.text-xs-custom {
font-size: var(--font-size-xs);
}
@@ -286,8 +292,32 @@ h5 {
}
.bg-gradient-conic-green {
background: conic-gradient(from 107deg at -2.61% 53.75%, var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 53.653846979141235deg, var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.10)) 155.76923489570618deg, var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.10)) 233.65383625030518deg, rgba(57, 182, 137, 0.10) 304.61538791656494deg),
background: conic-gradient(from 107deg at -2.61% 53.75%,
var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 53.653846979141235deg,
var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.10)) 155.76923489570618deg,
var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.10)) 233.65383625030518deg, rgba(57, 182, 137, 0.10) 304.61538791656494deg),
var(--Background--bg-light, #F9F4F2);
background-repeat: no-repeat;
background-size: cover;
}
.bg-gradient-conic-base {
background: conic-gradient(
from 77deg at -1.96% 72.58%,
var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 36.933538019657135deg,
var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.10)) 86.02115750312805deg,
var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.10)) 233.65383625030518deg, rgba(57, 182, 137, 0.10) 304.61538791656494deg),
var(--Background--bg-light, #F9F4F2);
background-repeat: no-repeat;
background-size: cover;
}
.bg-gradient-conic-base-gray {
background: conic-gradient(from 21deg at 104.89% 65.03%,
var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 53.653846979141235deg,
var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.10)) 155.76923489570618deg,
var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.10)) 233.65383625030518deg, rgba(57, 182, 137, 0.10) 304.61538791656494deg),
var(--Background--bg-light, #F9F4F2);
background-repeat: no-repeat;
background-size: cover;
}

6
components/ButtonCTA.vue
View File

@@ -18,15 +18,15 @@ export default {
},
size: {
type: String,
default: "lg",
default: "md",
}
},
computed: {
buttonClasses() {
return {
"px-3.5 py-2 gap-x-2 text-sm": this.size === "sm",
"px-4 py-2.5 gap-x-2 text-sm": this.size === "md",
"px-6 py-4 gap-x-1 text-md": this.size === "lg",
"px-5 py-2.5 gap-x-2 text-sm": this.size === "md",
"px-6 py-4 gap-x-1 text-base": this.size === "lg",
"bg-button hover:bg-button-hover text-white rounded-xl shadow-button":
this.color === "button" && !this.disabled,

28
components/CardTool.vue
View File

@@ -4,17 +4,17 @@
:class="{
'border-4 border-white min-h-64 md:min-h-full max-w-80 sm:max-w-full': color === 'number',
'border-4 border-white min-h-20.9 md:min-h-full max-h-full max-w-80 sm:max-w-full': color === 'transparent',
'shadow-tool-card hover:border-4 border-white transition-all duration-300 ease-in-out min-h-21.8 min-w-80 max-w-80': color !== 'transparent' && color !== 'number',
'bg-consumo-base hover:bg-linear-to-t hover:from-consumo-base hover:to-consumo-extra-light': color === 'consumo',
'bg-iguales-base hover:bg-linear-to-t hover:from-iguales-base hover:to-iguales-extra-light': color === 'iguales',
'bg-aula-base hover:bg-linear-to-t hover:from-aula-base hover:to-aula-extra-light': color === 'aula',
'bg-certifica-base hover:bg-linear-to-t hover:from-certifica-base hover:to-certifica-extra-light': color === 'certifica',
'bg-foro-base hover:bg-linear-to-t hover:from-foro-base hover:to-foro-extra-light': color === 'foro',
'bg-ods-base hover:bg-linear-to-t hover:from-ods-base hover:to-ods-extra-light': color === 'ods',
'shadow-tool-card hover:border-4 border-white transition-all duration-300 ease-in-out min-h-22.3 sm:min-h-21.8 min-w-full lg:min-w-80 max-w-fit sm:max-w-80 w-fit': color !== 'transparent' && color !== 'number',
'bg-linear-to-t from-consumo-base to-consumo-light hover:to-consumo-extra-light': color === 'consumo',
'bg-linear-to-t from-iguales-base to-iguales-light hover:to-iguales-extra-light': color === 'iguales',
'bg-linear-to-t from-aula-base to-aula-light hover:to-aula-extra-light': color === 'aula',
'bg-linear-to-t from-certifica-base to-certifica-light hover:to-certifica-extra-light': color === 'certifica',
'bg-linear-to-t from-foro-base to-foro-light hover:to-foro-extra-light': color === 'foro',
'bg-linear-to-t from-ods-base to-ods-light hover:to-ods-extra-light': color === 'ods',
}"
>
<NuxtLink v-if="link" :to="`/${langcode}/${link}`" class="p-8">
<div class="h-10.2 w-full">
<NuxtLink v-if="link" :to="`/${langcode}/${link}`" class="p-8 flex flex-col gap-4 items-center">
<div class="min-h-10.2 w-full">
<img
v-if="image"
:src="`/img/${image.src}`"
@@ -24,9 +24,9 @@
<!-- <img v-else src="" alt="imagen-error"> -->
<!-- TODO: Add a fallback image -->
</div>
<div class="flex flex-col gap-4 items-center">
<p class="text-5.5 font-semibold uppercase">{{ title }}</p>
<p class="text-center text-base" v-html="description"></p>
<div class="flex flex-col gap-2 items-center">
<h4 class="text-5.5 font-semibold uppercase">{{ title }}</h4>
<p class="text-center text-base max-w-xl" v-html="description"></p>
</div>
</NuxtLink>
<div v-if="!link" class="flex flex-col gap-4 p-8 items-center">
@@ -43,8 +43,8 @@
<h3 class="w-full h-full rounded-full border font-bold flex items-center justify-center">
{{ number }}</h3>
</div>
<div class="flex flex-col gap-4 items-center text-center">
<p class="text-5.5 font-semibold uppercase">{{ title }}</p>
<div class="flex flex-col gap-2 items-center text-center">
<h4 class="text-5.5 font-semibold uppercase">{{ title }}</h4>
<p class="text-center text-base" v-html="description"></p>
</div>
</div>

20
components/Footer.vue
View File

@@ -1,5 +1,5 @@
<template>
<footer class="bg-background-dark text-white py-12 px-4 md:px-8 flex flex-col gap-8 rounded-t-3xl">
<footer class=" bg-gradient-to-t from-background-dark-2 to-button text-white py-12 px-4 md:px-8 flex flex-col gap-8 rounded-t-3xl">
<div class="flex flex-col lg:flex-row gap-16 md:gap-12 lg:gap-16">
<div class="flex flex-col gap-6 items-center md:items-start w-full md:w-1/3 lg:w-1/6">
@@ -8,9 +8,9 @@
</div>
<p class="mb-4 text-center md:text-start">Síguenos y entérate de los próximos eventos, novedades y recursos.</p>
<ul class="flex space-x-4">
<li class="h-12 lg:h-8 w-12 lg:w-8 rounded-full border border-white">
<li class="h-12 lg:h-8 w-12 lg:w-8 rounded-full border border-white hover:bg-white hover:text-background-dark">
<NuxtLink to="#" class="flex items-center justify-center h-full w-full">
<img src="/assets/svg/instagram.svg" alt="Instagram" class="w-4 h-4">
<img src="/assets/svg/instagram.svg" alt="Instagram" class="w-4 h-4" />
</NuxtLink>
</li>
<li class="h-12 lg:h-8 w-12 lg:w-8 rounded-full border border-white">
@@ -40,9 +40,9 @@
<li><NuxtLink :to="`/${langcode}/consumo-cuidado`" class="hover:font-semibold">Consumo Cuidado</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/aula-virtual`" class="hover:font-semibold">Aula Virtual</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/iguales`" class="hover:font-semibold">Iguales</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/ods`" class="hover:font-semibold">ODS</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/objetivo2030`" class="hover:font-semibold">Objetivo 2030</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/certifica-t`" class="hover:font-semibold">Certifica-T</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/foro`" class="hover:font-semibold">Foro</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/enlazados`" class="hover:font-semibold">Enlazados</NuxtLink></li>
</ul>
</div>
@@ -68,7 +68,7 @@
</div>
</div>
<div class="border-t border-extra-light mt-8 pt-4 text-center text-xs">
<div class="border-t border-extra-light mt-8 pt-4 text-center text-xs-custom">
<p><span>{{ year }}</span> © kit-ECO.SOCIAL | Diseñado y desarrollado por Enreda Coop</p>
</div>
</footer>
@@ -86,4 +86,10 @@ export default {
},
},
};
</script>
</script>
<style>
.text-12 {
font-size: 12px;
}
</style>

26
components/HeroHome.vue
View File

@@ -14,9 +14,9 @@
alt="hero background shape right"
class="absolute right-0 top-0 h-60 md:h-25.6" >
<div class=" flex flex-col items-center z-10 gap-6">
<h1 class="text-32 md:text-40 lg:text-5xl font-bold max-w-4xl">{{ title }}</h1>
<p class="text-lg md:text-xl lg:text-2xl max-w-3xl">{{ subtitle }}</p>
<div class=" flex flex-col items-center z-10 gap-6 px-4 max-w-3xl">
<h1 class="text-32 md:text-40 lg:text-5xl font-bold">{{ title }}</h1>
<p class="text-24 max-w-2xl">{{ subtitle }}</p>
<NuxtLink v-if="button" :to="button.link">
<ButtonCTA :color="button.color" class="uppercase mt-6">
{{ button.label }}
@@ -59,4 +59,22 @@ export default {
},
};
</script>
</script>
<style>
p {
font-size: 24px;
}
text-24 {
@media screen and (min-width: 1023px) {
font-size: 24px;
}
@media screen and (max-width: 1023px) {
font-size: 20px;
}
@media screen and (max-width: 640px) {
font-size: 18px;
}
}
</style>

2
components/HeroPages.vue
View File

@@ -1,7 +1,7 @@
<template>
<section
:id="id"
class="relative flex flex-col p-8 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center overflow-hidden rounded-3xl"
class="relative flex flex-col p-8 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center overflow-hidden rounded-3xl min-h-21.8 346"
:class="{
'bg-gradient-conic-hero': bgColor === 'gradient',
'bg-consumo-base bg-linear-to-t from-consumo-base to-consumo-extra-light': bgColor === 'consumo',

10
components/NavBar.vue
View File

@@ -1,5 +1,5 @@
<template>
<nav class="relative">
<nav class="relative bg-white">
<div class="mx-auto flex justify-between items-center h-20">
<!-- Logo -->
<NuxtLink :to="`/${langcode}/`">
@@ -38,9 +38,9 @@
<li><NuxtLink :to="`/${langcode}/consumo-cuidado`" class="block hover:bg-button hover:text-white px-2 py-1 rounded-t-2xl">CONSUMO CUIDADO</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/aula-virtual`" class="block hover:bg-button hover:text-white px-2 py-1">AULA VIRTUAL</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/iguales`" class="block hover:bg-button hover:text-white px-2 py-1">IGUALES</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/ods`" class="block hover:bg-button hover:text-white px-2 py-1">ODS</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/objetivo2030`" class="block hover:bg-button hover:text-white px-2 py-1">OBJETIVO 2030</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/certifica-t`" class="block hover:bg-button hover:text-white px-2 py-1">CERTIFICA-T</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/foro`" class="block hover:bg-button hover:text-white px-2 py-1 rounded-b-2xl">FORO</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/enlazados`" class="block hover:bg-button hover:text-white px-2 py-1 rounded-b-2xl">ENLAZADOS</NuxtLink></li>
</ul>
</transition>
</li>
@@ -81,9 +81,9 @@
<li class="p-2"><NuxtLink :to="`/${langcode}/consumo-cuidado`">CONSUMO CUIDADO</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/aula-virtual`">AULA VIRTUAL</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/iguales`">IGUALES</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/ods`">ODS</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/objetivo2030`">OBJETIVO 2030</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/certifica-t`">CERTIFICA-T</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/foro`">FORO</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/enlazados`">ENLAZADOS</NuxtLink></li>
</ul>
</div>
</transition>

10
components/SectionWithCards.vue
View File

@@ -1,7 +1,7 @@
<template>
<section
:id="id"
class="flex flex-col gap-8 rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24"
class="flex flex-col gap-8 justify-center items-center rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24"
:class="{
'bg-gradient-conic-cards': bgColor === 'gradient-conic',
'bg-gradient-conic-green': bgColor === 'gradient-conic-green',
@@ -13,18 +13,18 @@
'bg-linear-to-t from-ods-extra-light to-background-light': bgColor === 'ods',
}">
<div
class="mx-auto max-w-2xl text-center"
class="mx-auto text-center"
:class="{
'flex flex-col justify-center items-center w-full': titlePosition === 'center',
'flex flex-col items-start w-full': titlePosition === 'left',
}">
<h2 class="font-bold mb-6">{{ title }}</h2>
<p v-if="description" class="text-lg " v-html="description"></p>
<p v-if="description" class="text-lg max-w-4xl" v-html="description"></p>
</div>
<ul class="grid grid-cols-12 gap-8 mx-auto w-full">
<ul class="grid grid-cols-12 gap-8 max-w-5xl">
<li
v-for="(item, index) in cards" :key="`cards-${id}-${index}`"
v-for="(item, index) in cards" :key="`cards-${id}-${index}`" class=""
:class="{
'col-span-12 lg:col-span-6': display === 'col-2',
'col-span-12 md:col-span-6 lg:col-span-4': display === 'col-3',

2
components/TextWithIconAndButtons.vue
View File

@@ -20,7 +20,7 @@
<div class=" flex flex-col items-center z-10 gap-6">
<img v-if="icon" :src="`/svg/${icon}`" :alt="`icon-${icon}`" class="w-15 h-15" />
<h2 class="font-bold max-w-4xl">{{ title }}</h2>
<p class="text-2xl max-w-3xl" v-html="subtitle"></p>
<p class="text-2xl max-w-4xl" v-html="subtitle"></p>
<div class="flex flex-col md:flex-row items-center justify-center gap-4">
<NuxtLink v-if="button" :to="button.link">
<ButtonCTA :color="button.color" class="uppercase mt-6">

2
components/TextWithImage.vue
View File

@@ -3,6 +3,8 @@
class="rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16"
:class="{
'bg-gradient-conic-2': bgColor === 'conic-2',
'bg-gradient-conic-base': bgColor === 'conic-base',
'bg-gradient-conic-base-gray': bgColor === 'conic-base-gray',
'bg-background-light': bgColor === 'light'
}">
<div

4
data/es/certifica-t.json
View File

@@ -71,7 +71,7 @@
"component": "Quote",
"props": {
"id": "quote-certifica-t",
"content": "La igualdad no se presume, se demuestra.</br>Y para demostrarla, hace falta evaluarla.",
"content": "Demuestra el compromiso de tu proyecto con la sostenibilidad y la gestión ambiental.",
"textColor": "certifica-t",
"shapes": {
"shape_1": "formas-quote-certifica-t.png",
@@ -109,7 +109,7 @@
"props": {
"id": "quieres-empezar-certifica-t",
"title": "¿Quieres empezar o saber más sobre certificaciones ambientales?",
"subtitle": "Diagnostica tu entidad y accede a propuestas ajustadas para avanzar hacia la igualdad.",
"subtitle": "Da el primer paso hacia la certificación ambiental con apoyo y herramientas adaptadas a tu organización. Desde <strong>kit-ECO.SOCIAL</strong> te acompañamos en cada paso.",
"bgColor": "certifica",
"bgImage": {
"src": "hero-certifica-t-formas.png",

2
data/es/foro.json → data/es/enlazados.json
View File

@@ -3,7 +3,7 @@
"component": "HeroPages",
"props": {
"id": "hero-pages-foro",
"title": "Foro",
"title": "Enlazados",
"subtitle": "<span class='font-semibold'>Espacio de intercooperación</span></br>Compartiendo buenas prácticas desde la economía social.",
"bgColor": "foro",
"bgImage": {

8
data/es/index.json
View File

@@ -21,7 +21,7 @@
"props": {
"id": "home-what-is",
"title": "¿Qué es kit-ECO.social?",
"description": "<strong>kit-ECO.social</strong> es una plataforma con herramientas para impulsar la <strong>sostenibilidad</strong>, la <strong>igualdad</strong> y la <strong>mejora continua</strong> en entidades de economía social, desde la cooperación y el compromiso colectivo.",
"description": "<strong>kit-ECO.social</strong> es una plataforma con herramientas para impulsar la sostenibilidad, la igualdad y la mejora continua en entidades de economía social, desde la cooperación y el compromiso colectivo.",
"image": {
"src": "research.png",
"alt": "Formas de fondo negativo"
@@ -36,7 +36,7 @@
"icon": "chart-column.svg"
},
{
"content": "<strong>Certifica-T</strong> te acompaña en el camino hacia la <strong>certificación en sostenibilidad</strong>.",
"content": "<strong>Certifica-T</strong> te acompaña en el camino hacia la certificación en sostenibilidad.",
"icon": "award.svg"
},
{
@@ -97,7 +97,7 @@
},
{
"color": "ods",
"title": "ODS",
"title": "Objetivo2030",
"description": "Evalúa tu contribución a los ODS con OpenODS.",
"image": {
"src": "ods.png",
@@ -117,7 +117,7 @@
},
{
"color": "foro",
"title": "Foro",
"title": "Enlazados",
"description": "Espacio de participación e intercambio entre entidades.",
"image": {
"src": "foro.png",

4
data/es/nosotras.json
View File

@@ -46,7 +46,7 @@
"finalParagraph": "En un momento en el que la economía social es clave para el futuro sostenible de nuestros territorios, kit-ECO.social nace como un recurso colectivo para crecer con consciencia, desde la colaboración y el cuidado.",
"hasBullets": true,
"position": "right",
"bgColor": "light",
"bgColor": "conic-base",
"image": {
"src": "papeles-comerciales.png",
"alt": "Papeles comerciales sobre mesa",
@@ -124,7 +124,7 @@
"finalParagraph": "Además, cerraremos el ciclo de encuentros con un gran evento estatal online, abierto a todas las entidades interesadas en conocer el kit y sumarse a la comunidad.",
"hasBullets": true,
"position": "right",
"bgColor": "light",
"bgColor": "conic-base-gray",
"image": {
"src": "spain-map.png",
"alt": "Mapa de España",

2
data/es/ods.json → data/es/objetivo2030.json
View File

@@ -3,7 +3,7 @@
"component": "HeroPages",
"props": {
"id": "hero-pages-ods",
"title": "ODS",
"title": "Objetivo 2030",
"subtitle": "<span class='font-semibold'>Índice de Compromiso Social con la Agenda 2030</span></br>Una herramienta para medir, visibilizar y acelerar los ODS desde la economía social.",
"bgColor": "ods",
"bgImage": {

2
layouts/default.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<header class="mx-8">
<header class="mx-4 sm:mx-8">
<NavBar />
</header>

2
pages/[langcode]/foro.vue → pages/[langcode]/enlazados.vue
View File

@@ -27,7 +27,7 @@ export default {
async created() {
const langcode = this.$route.params.langcode;
try {
const res = await import(`~/data/${langcode}/foro.json`);
const res = await import(`~/data/${langcode}/enlazados.json`);
this.consumoComponents = res.default;
} catch (err) {
console.error('Error al cargar contenido:', err);

2
pages/[langcode]/ods.vue → pages/[langcode]/objetivo2030.vue
View File

@@ -30,7 +30,7 @@ export default {
async created() {
const langcode = this.$route.params.langcode;
try {
const res = await import(`~/data/${langcode}/ods.json`);
const res = await import(`~/data/${langcode}/objetivo2030.json`);
this.consumoComponents = res.default;
} catch (err) {
console.error('Error al cargar contenido:', err);

BIN
public/img/logo-ecored.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 310 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB