compost-jekyll-theme 0.1.0

data/_includes/goal.html

@@ -0,0 +1,28 @@
+{%- comment -%}
+
+Las barras de progreso de los objetivos/metas
+
+@param :title [String] El título del objetivo
+@param :text [String] La descripción
+@param :currency [String] La moneda
+@param :value_now [Float] El valor actual
+@param :value_max [Float] El valor máximo
+{%- endcomment -%}
+
+{% assign width = include.value_now | divided_by: include.value_max | times: 100 %}
+
+<div class="mb-3">
+	<div class="progress position-relative border border-width-3 border-black lh-4">
+    <div
+      data-support-us-target="goal"
+      class="progress-bar o-2 collapsing width"
+      style="width: {{ width }}%"
+      role="progressbar"
+      aria-valuenow="{{ include.value_now }}"
+      aria-valuemin="0"
+      aria-valuemax="{{ include.value_max }}"></div>
+		<span class="d-flex position-absolute h-100 align-items-center font-weight-bold f-16 lead-md px-4">{{ include.title }}</span>
+	</div>
+
+	<p class="p-2"><strong>{{ include.currency }}{{ include.value_max | round }}</strong> {{ include.text }}</p>
+</div>

data/_includes/header.html

@@ -0,0 +1,24 @@
+{%- comment -%}
+
+Items de cabecera (excepto el ícono de hamburguesa)
+
+@param :logo_src [String] La imagen del logo
+@param :logo_alt [String] El alt del logo
+@param :btn_src [String] La imagen del botón
+@param :btn_href [String] El link del botón
+@param :btn_alt [String] El alt del botón
+{%- endcomment -%}
+
+{% include image_with_link.html
+	src=include.logo_src
+	href="?#"
+	alt=include.logo_alt
+	width=333
+	img_class="w-221px w-md-333px" %}
+
+{% include btn_header.html
+	src=include.btn_src
+	href=include.btn_href
+	alt=include.btn_alt
+	width=67
+	img_class="w-44px w-md-67px" %}

data/_includes/header_toggler.html

@@ -0,0 +1,84 @@
+{%- comment -%}
+
+Cabecera y menú con toggler
+
+@param :logo_open_src [String] La imagen del logo con menú abierto
+@param :logo_open_alt [String] El alt de la imagen del logo con menú abierto
+@param :btn_open_src [String] La imagen del botón con menú abierto
+@param :logo_close_src [String] La imagen del logo con menú cerrado
+@param :logo_close_alt [String] El alt de la imagen del logo con menú cerrado
+@param :btn_close_src [String] La imagen del botón con menú cerrado
+@param :btn_alt [String] El alt de la imagen del botón
+@param :btn_href [String] El link de la imagen del botón
+@param :background_class [String] Las clases de la imagen de fondo del header
+{%- endcomment -%}
+
+{%- assign menu_id = menu | prepend: 'r-' -%}
+{%- assign items = site.posts | where: "layout", "menu" -%}
+{%- assign posts = site.posts | where: "layout", "post" -%}
+{%- assign back_cover = site.posts | find: "layout", "back_cover" -%}
+{%- assign footer = site.posts | find: "layout", "footer" -%}
+
+<div data-controller="body-scroll" class="position-relative p-3 {{ include.background_class }}">
+	<div class="d-flex justify-content-between align-items-center container-lg mx-auto">
+		{%- capture menu_svg -%}
+			{% include menu_close.html class="w-36px w-md-54px" container_class="stroke-white" %}
+		{%- endcapture -%}
+
+		{% include toggler/toggler_label.html id=menu_id class="m-0" content=menu_svg %}
+
+		{% capture toggled_content %}
+			<div class="background-image-site background-size-100 w-100 p-2 pb-12 border-bottom-dashed border-black">
+				<div class="d-flex justify-content-between align-items-center container mx-auto">
+					{%- capture menu_svg -%}
+						{% include menu_open.html class="w-36px w-md-54px" container_class="fill-black" %}
+					{%- endcapture -%}
+
+					{% include toggler/toggler_label.html id=menu_id class="m-0" content=menu_svg %}
+
+					{% include
+						header.html
+						logo_src=include.logo_open_src
+						logo_alt=include.logo_open_alt
+						btn_src=include.btn_open_src
+						btn_href=include.btn_href
+						btn_alt=include.btn_alt %}
+				</div>
+			</div>
+
+			<div class="background-white pt-5">
+				<div class="container-lg mx-auto">
+					<div class="ml-14 mt-3">
+						{% for item in items %}
+							{% include menu_item.html text=item.title href=item.post.url %}
+						{% endfor %}
+					</div>
+
+					<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 no-gutters mt-40 px-20 px-md-0">
+						{% for post in posts %}
+							<div class="col pb-5">
+								{% include cover_post/menu.html authors=post.authors title=post.title src=post.image.path alt=post.image.description href=post.url %}
+							</div>
+						{% endfor %}
+
+						<div class="col pb-5">
+							{% include cover_post/menu.html title=back_cover.title src=back_cover.image.path alt=back_cover.image.description href=back_cover.url %}
+						</div>
+					</div>
+				</div>
+
+				{% include footer.html col_1=footer.column_1 col_2=footer.column_2 col_3=footer.column_3 col_4=footer.column_4 src=footer.image.path %}
+			</div>
+		{% endcapture %}
+
+		{% include toggler/toggler.html id=menu_id extra='data-action="toggle-media#toggle" data-menu-target="toggler"' toggled_content=toggled_content toggled_class="top-0 left-0 w-100 zindex-dropdown" %}
+
+		{% include
+			header.html
+			logo_src=include.logo_close_src
+			logo_alt=include.logo_close_alt
+			btn_src=include.btn_close_src
+			btn_href=include.btn_href
+			btn_alt=include.btn_alt %}
+	</div>
+</div>

data/_includes/headings/generic.html

@@ -0,0 +1,14 @@
+{%- comment -%}
+
+La base para un encabezado
+
+@param :level [Integer] El nivel
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- assign slug = include.text | slugify -%}
+
+<h{{ include.level }} id="{{ slug }}" class="{{ include.class }}">
+  {{- include.text -}}
+</h{{ include.level }}>

data/_includes/headings/h1.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+
+Encabezado de primer nivel
+
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- include headings/generic.html level=1 text=include.text class=include.class -%}

data/_includes/headings/h2.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+
+Encabezado de segundo nivel
+
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- include headings/generic.html level=2 text=include.text class=include.class -%}

data/_includes/headings/h3.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+
+Encabezado de tercer nivel
+
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- include headings/generic.html level=3 text=include.text class=include.class -%}

data/_includes/headings/with_link.html

@@ -0,0 +1,15 @@
+{%- comment -%}
+
+La base para un encabezado
+
+@param :level [Integer] El nivel
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- assign slug = include.text | slugify -%}
+<h{{ include.level }} id="{{ slug }}">
+  <a class="{{ include.class }}" href="#{{ slug }}">
+    {{- include.text -}}
+  </a>
+</h{{ include.level }}>

data/_includes/image_supporter.html

@@ -0,0 +1,13 @@
+{%- comment -%}
+
+componente de imagen que tiene un link [url]
+
+@param :src [String]
+@param :href [String] El link
+@param :width [Integer] Ancho de la imagen
+@param :alt [String] El alt de la imagen
+{%- endcomment -%}
+
+<div class="p-2">
+	{% include image_with_link.html src=include.src width=include.width alt=include.alt img_class="w-100 h-100 object-fit-cover" href=include.href %}
+</div>

data/_includes/image_with_link.html

@@ -0,0 +1,22 @@
+{%- comment -%}
+
+componente de imagen que tiene un link [url]
+
+@param :src [String]
+@param :href [String] El link
+@param :width [Integer] Ancho de la imagen
+@param :alt [String] El alt de la imagen
+@param :a_class [String] Clases para a
+@param :component_class [String] Clases para el componente
+{%- endcomment -%}
+
+<div
+	class="position-relative {{ include.component_class }}">
+	<a class="stretched-link"
+		 href="{{ include.href | uri_escape }}"
+		 {{ include.href | start_with: "https://" | value_if: 'rel="noopener" target="_blank"' }}
+		 {{ include.href | start_with: "http://" | value_if: 'rel="noopener" target="_blank"' }}>
+		 <span class="sr-only">{{ include.alt }}</span>
+	 </a>
+  {% include picture.html src=include.src width=include.width alt=include.alt img_class=include.img_class %}
+</div>

data/_includes/license_block.html

@@ -0,0 +1,15 @@
+{%- comment -%}
+
+License block
+
+@param :title [String] El título
+@param :content [HTML] El contenido
+{%- endcomment -%}
+<div class="background-light-gray p-4 my-32 text-monospace text-left border border-light_gray">
+  <div class="font-weight-bold">
+    <p rel="license">{{ site.i18n.content_license }} {{- include.title -}}</p>
+  </div>
+  <div class="content mt-2 mb-2">
+    {{- include.content -}}
+  </div>
+</div>

data/_includes/menu_close.html

@@ -0,0 +1,11 @@
+{%- comment -%}
+
+El icono de la hamburguesa para abrir y cerrar el menú
+
+@param :class [String] Las clases de la imagen
+@param :container_class [String] Las clases del contenedor
+{%- endcomment -%}
+
+<div class="{{ include.container_class }} cursor-pointer">
+	{% include svg/menu.svg class=include.class %}
+</div>

data/_includes/menu_item.html

@@ -0,0 +1,10 @@
+{%- comment -%}
+
+Item del menú
+
+@param :text [String] El contenido
+@param :href [String] El link
+@param :class [String] Las clases
+{%- endcomment -%}
+
+{% include text_link.html text=include.text class="display-4 letter-spacing-6 text-uppercase font-weight-bold text-decoration-none ml-20 mr-50 d-flex d-md-inline-flex" href=include.href %}

data/_includes/menu_open.html

@@ -0,0 +1,11 @@
+{%- comment -%}
+
+El icono de la hamburguesa para abrir y cerrar el menú
+
+@param :class [String] Las clases de la imagen
+@param :container_class [String] Las clases del contenedor
+{%- endcomment -%}
+
+<div class="{{ include.container_class }} cursor-pointer">
+	{% include svg/x.svg class=include.class %}
+</div>

data/_includes/navigation_post.html

@@ -0,0 +1,39 @@
+{%- comment -%}
+
+Los botones de navegación de los posts
+
+@param :src_previous [String] El src de imagen de Previous
+@param :src_next [String] El src de imagen de Next
+@param :src_home [String] El src de imagen de Home
+@param :href_previous [String] El link de Previous
+@param :href_home [String] El link de Home
+@param :href_next [String] El link de Next
+@param :alt_previous [String] El alt de Previous
+@param :alt_next [String] El alt de Next
+{%- endcomment -%}
+
+{% assign previous_class = include.href_previous | blank | value_if: "invisible" %}
+{% assign next_class = include.href_next | blank | value_if: "invisible" %}
+
+<div class="d-flex align-items-center">
+	<div
+		class="mt-3 transform-scale-n8 transform-scale-hover-1"
+		{% unless previous_class %}
+			aria-hidden="true"
+		{% endunless %}>
+		{% include image_with_link.html src=include.src_previous alt=include.alt_previous width=51 href=include.href_previous img_class="px-2" component_class=previous_class %}
+	</div>
+
+	<div
+		class="transform-scale-n8 transform-scale-hover-1">
+		{% include image_with_link.html src=include.src_home alt=site.i18n.home width=79 href=include.href_home img_class="px-2" %}
+	</div>
+
+	<div
+		class="mt-3 transform-scale-n8 transform-scale-hover-1"
+		{% unless next_class %}
+			aria-hidden="true"
+		{% endunless %}>
+		{% include image_with_link.html src=include.src_next alt=include.alt_next width=51 href=include.href_next img_class="px-2" component_class=next_class %}
+	</div>
+</div>

data/_includes/picture.html

@@ -0,0 +1,25 @@
+{%- comment -%}
+
+Image component
+
+@param :src [String]
+@param :alt [String]
+@param :width [Integer]
+@param :class [String]
+@param :img_class [String]
+{%- endcomment -%}
+
+<picture class="{{ include.class }}">
+  <source
+    srcset="
+      {%- for pixel_density in site.data.theme.pixel_densities %}
+        {%- assign w = include.width | times: pixel_density -%}
+        {{- include.src | thumbnail: w | uri_escape }} {{ pixel_density }}x,
+      {% endfor -%}
+      " />
+
+  <img
+    class="{{ include.img_class }}"
+    src="{{ include.src | thumbnail: include.width | uri_escape }}"
+    alt="{{ include.alt | escape_once }}" />
+</picture>

data/_includes/script.html

@@ -0,0 +1,5 @@
+{% comment %}
+@param :src [String]
+{% endcomment %}
+
+<script defer src="{{ include.src | uri_escape }}" data-turbo-track="reload"></script>

data/_includes/svg/copy-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>

data/_includes/svg/done-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>

data/_includes/svg/menu.svg

@@ -0,0 +1,9 @@
+<svg
+	class="{{ include.class }}"
+	viewBox="0 0 16 14"
+	fill="white"
+	xmlns="http://www.w3.org/2000/svg">
+<line x1="1" y1="1" x2="15" y2="1" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<line x1="1" y1="6.81836" x2="15" y2="6.81836" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<line x1="1" y1="12.6362" x2="15" y2="12.6362" stroke="black" stroke-width="2" stroke-linecap="round"/>
+</svg>

data/_includes/svg/x.svg

@@ -0,0 +1,3 @@
+<svg class="{{ include.class }}" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.656874 0.000938353C0.373797 0.0285864 0.132829 0.218575 0.0399914 0.487445C-0.0530995 0.756315 0.0194448 1.05461 0.22516 1.25095L5.15691 6.19413L0.22516 11.1259C-0.0604506 11.4115 -0.0604506 11.8744 0.22516 12.16C0.51077 12.4457 0.973668 12.4457 1.25932 12.16L6.2025 7.21686L11.1342 12.16C11.4199 12.4457 11.8828 12.4457 12.1681 12.16C12.4538 11.8744 12.4538 11.4115 12.1684 11.1259L7.22522 6.19413L12.1684 1.25095C12.3853 1.04143 12.4505 0.719549 12.332 0.442055C12.2133 0.164562 11.9358 -0.0109708 11.6342 0.000951234C11.4458 0.00551695 11.2667 0.0828794 11.1343 0.217061L6.20251 5.14882L1.25933 0.217061C1.12134 0.0773015 0.932629 -0.00057474 0.736551 0.000951234C0.709917 -0.000317078 0.683538 -0.000317078 0.656902 0.000951234L0.656874 0.000938353Z" fill="white"/>
+</svg>

data/_includes/text_link.html

@@ -0,0 +1,12 @@
+{%- comment -%}
+
+Un texto con link. Por ejemplo, para los items del menú.
+
+@param :href [String] El link
+@param :text [String] El contenido
+@param :class [String] Las clases
+{%- endcomment -%}
+
+<a class="{{ include.class }}" href="{{ include.href | uri_escape }}">
+	<span>{{ include.text}}</span>
+</a>

data/_includes/theme/author_block.html

@@ -0,0 +1,3 @@
+{% assign links = "https://celinenguyen.com/,https://www.are.na/celine-nguyen/" | split: "," %}
+
+{% include author_block.html title="ℂ𝕖𝕝𝕚𝕟𝕖 ✿" links=links %}

data/_includes/theme/biography.html

@@ -0,0 +1,5 @@
+<p class="content">
+  Biografía de autore en los artículos
+</p>
+
+{% include biography.html text="Artist/educator <strong>Andi Wong</strong> enjoys connecting dots and coloring outside the lines. She is project coordinator for ArtsEd4All." %}

data/_includes/theme/btn_header.html

@@ -0,0 +1,6 @@
+{% include headings/with_link.html level=2 text="Botón de Support en la cabecera cuando el menú está cerrado" %}
+
+{% include btn_header.html src="public/mushroom_close.gif" href="#" alt="Mushroom close menu" component_class="background-black" width=67 img_class="w-67px" %}
+
+{% include headings/with_link.html level=2 text="Botón de Support en la cabecera cuando el menú está abierto" %}
+{% include btn_header.html src="public/mushroom_open.gif" href="#" alt="Mushroom open menu" component_class="background-transparent" width=67 img_class="w-67px" %}

data/_includes/theme/button_with_copy.html

@@ -0,0 +1 @@
+{% include buttons/with_copy.html copy="compostmag.eth" text="Contribute ETH or tokens" %}

data/_includes/theme/button_with_link.html

@@ -0,0 +1,5 @@
+{% include buttons/with_link.html href="#" text="Become a subscriber" %}
+
+{% include headings/with_link.html level=2 text="Botón con link externo" %}
+
+{% include buttons/with_link.html href="https://sutty.nl/" text="Find out more about Sutty" %}

data/_includes/theme/card_horizontal.html

@@ -0,0 +1,18 @@
+{%- capture content_card -%}
+  <p>As dominant platforms continue to construct an unimaginative
+  reality of sleekness, convenience, and extraction, we wonder: How do
+  we <em>Inoculate</em> networks with our consideration and attention,
+  against the flattening, homogenizing forces of the internet?</p>
+
+  <p>This second issue of COMPOST magazine takes a step back; widening
+  our scope and probing how we shape digital networks and how they shape
+  us back.</p>
+{% endcapture %}
+
+{% include card_horizontal.html
+  title="INOCULATE"
+  subtitle="ISSUE 02"
+  src="public/placeholder.png"
+  alt="portada compost"
+  content=content_card
+%}

data/_includes/theme/colors.html

@@ -0,0 +1,14 @@
+<div class="row row-cols-2 row-cols-md-4">
+  {% for color in site.data.theme.colors %}
+    <div class="col">
+      <div class="w-100 embed-responsive embed-responsive-1by1">
+        <div class="embed-responsive-item background-{{ color[0] | replace: "_", "-" }} d-flex align-items-center justify-content-center">
+          <div>
+            <p>{{ color[0] | replace: "_", "-" }}</p>
+            <p>{{ color[1] }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+</div>

data/_includes/theme/content.html

@@ -0,0 +1,41 @@
+<div class="content">
+  <h2>Título 2</h2>
+  <h3>Título 3</h3>
+  <h4>Título 4</h4>
+  <h5>Título 5</h5>
+  <h6>Título 6</h6>
+
+  <p class="display-1">Display 1</p>
+  <p class="display-2">Display 2</p>
+  <p class="display-3">Display 3</p>
+  <p class="display-4">Display 4</p>
+
+  <p class="lead">Párrafo resaltado</p>
+
+  <p class="lead-md">
+    <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing
+    elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. <a href="#">Ut enim ad minim veniam</a>, quis nostrud
+    exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. <em>Duis aute irure dolor</em> in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    Excepteur <mark>sint occaecat cupidatat non proident</mark>, sunt in
+    culpa qui officia <small>deserunt mollit anim id est laborum</small>.
+  </p>
+
+  <ul>
+    <li>Lorem ipsum dolor sit amet</li>
+    <li>consectetur adipiscing elit</li>
+    <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
+  </ul>
+
+  <ol>
+    <li>Lorem ipsum dolor sit amet</li>
+    <li>consectetur adipiscing elit</li>
+    <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
+  </ol>
+
+  <blockquote>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </blockquote>
+</div>

data/_includes/theme/cover_post.html

@@ -0,0 +1,19 @@
+{% include headings/h2.html text="Índice de posts en el menú" %}
+
+<article class="row row-cols-1 row-cols-md-2 row-cols-lg-3 no-gutters">
+  {% include cover_post/menu.html title="Foreword" src="public/placeholder.png" alt="Descripción de la imagen" href="https://sutty.nl/" %}
+
+  {% include cover_post/menu.html author="Kola Heyward-Rotimi" title="Qubit Guarantee" src="public/placeholder.png" alt="Descripción de la imagen" href="https://sutty.nl/" %}
+
+  {% include cover_post/menu.html author="Eeshita Kapadiya and Mrinalini Sebastian" title="RE: Sister" src="public/placeholder.png" alt="Descripción de la imagen" href="https://sutty.nl/" %}
+</article>
+
+{% include headings/h2.html text="Índice de posts en el home" %}
+
+<article class="row row-cols-1 row-cols-md-2 row-cols-lg-3 no-gutters">
+  {% include cover_post/home.html title="Foreword" src="public/placeholder.png" alt="Descripción de la imagen" href="https://sutty.nl/" description="A letter from the editors." %}
+
+  {% include cover_post/home.html author="Kola Heyward-Rotimi" title="Qubit Guarantee" src="public/placeholder.png" alt="Descripción de la imagen" href="https://sutty.nl/" description="A cybersecurity specialist named Kurt uses his employers' quantum computing platform to help corporations nullify ransomware attacks--but a routine job goes far off-script when he's sent to Raleigh, North Carolina." %}
+
+  {% include cover_post/home.html author="Eeshita Kapadiya and Mrinalini Sebastian" title="RE: Sister" src="public/placeholder.png" alt="Descripción de la imagen" href="https://sutty.nl/" description="What happens when two women write to each other about food?" %}
+</article>

data/_includes/theme/embed_responsive.html

@@ -0,0 +1,10 @@
+{% for embed_responsive_aspect_ratio in site.data.theme.embed_responsive_aspect_ratios %}
+  {% assign x = embed_responsive_aspect_ratio | split: " " | first | remove: "(" %}
+  {% assign y = embed_responsive_aspect_ratio | split: " " | last | remove: ")" %}
+  {% assign text = x | append: "by" | append: y %}
+
+  <div class="mb-3">
+    {% include headings/with_link.html level=2 text=text %}
+    {% include embed_responsive.html src="public/placeholder.png" width=576 x=x y=y %}
+  </div>
+{% endfor %}

data/_includes/theme/font_sizes.html

@@ -0,0 +1,18 @@
+{% for font_size in site.data.theme.font_sizes %}
+  <div class="mb-3">
+    {% assign title = "Tipografía f-" | append: font_size[0] %}
+    {% include headings/with_link.html level=2 text=title %}
+
+    <p class="f-{{ font_size[0] }}">
+      <strong>Lorem ipsum dolor sit amet</strong>, consectetur
+      adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+      dolore magna aliqua. <a href="#">Ut enim ad minim veniam</a>, quis
+      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. <em>Duis aute irure dolor</em> in reprehenderit in
+      voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur <mark>sint occaecat cupidatat non proident</mark>, sunt
+      in culpa qui officia <small>deserunt mollit anim id est
+        laborum</small>.
+    </p>
+  </div>
+{% endfor %}

data/_includes/theme/footer.html

@@ -0,0 +1,49 @@
+{%- capture footer_col_1 -%}
+    <p class="footer-column-header">COMPOST is a magazine about the digital commons.</p>
+    <p>Issue 02, September 2021.</p>
+    <p>We are a project by
+      <a href="https://distributed.press" target="_blank">Distributed Press</a> and hosted by
+      <a href="https://hypha.coop" target="_blank">Hypha Worker Co-operative</a>.
+    </p>
+
+    <div class="footer-column-header" title="Previous Issues">Previous Issues</div>
+    <div><a href="https://one.compost.digital/" class="transform-url">Issue 01</a></div>
+{%- endcapture -%}
+
+{%- capture footer_col_2 -%}
+  <p class="footer-column-header">COMPOST is published to the web and <a href="https://getdweb.net" target="_blank">DWeb</a> using the <a href="https://github.com/hyphacoop/api.distributed.press" target="_blank">Distributed Press API</a>.</p>
+  <p>Read it on:</p>
+  <div><a href="https://two.compost.digital" target="_blank">https://two.compost.digital</a></div>
+  <div><a href="https://ipfs.distributed.press/ipns/two.compost.digital/" target="_blank">ipns://two.compost.digital</a></div>
+  <div><a href="https://hyper.distributed.press/two.compost.digital/" target="_blank">hyper://two.compost.digital</a>
+  </div>
+  <p>Unless otherwise stated, all content on this website is licensed under a <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International license</a>.</p>
+{%- endcapture -%}
+
+{%- capture footer_col_3 -%}
+  <div class="footer-column-header" title="Social Web">Social Web</div>
+  <div><a href="https://www.are.na/compost/" target="_blank">Are.na</a></div>
+  <div><a href="https://social.coop/@COMPOST" target="_blank">Mastodon</a></div>
+  <div><a href="https://www.twitter.com/COMPOSTmag" target="_blank">Twitter</a></div>
+  <div><a href="https://github.com/hyphacoop/two.compost.digital" target="_blank">GitHub</a></div>
+  <div class="footer-column-header" title="Keep in touch">Keep in touch</div>
+  <div><a href="https://link.hypha.coop/compost-newsletter" target="_blank">Join our newsletter</a></div>
+  <div><a href="https://github.com/hyphacoop/distributed-press-organizing/wiki" target="_blank">Read our Wiki</a>
+  </div>
+  <div><a href="mailto:hello@compost.digital">Email us</a></div>
+{%- endcapture -%}
+
+{%- capture footer_col_4 -%}
+    <div class="footer-column-header" title="Support Us">Support Us</div>
+    <div><a href="../support-us/#web-monetization">Web Monetization</a></div>
+    <div><a href="https://opencollective.com/compost" target="_blank">Open Collective</a></div>
+    <div><a href="https://gitcoin.co/grants/1385/compost" target="_blank">Gitcoin</a></div>
+    <div><a href="../support-us/" target="_blank">compostmag.eth</a></div>
+{%- endcapture -%}
+{% include footer.html
+  src=""
+  col_1=footer_col_1
+  col_2=footer_col_2
+  col_3=footer_col_3
+  col_4=footer_col_4
+%}

data/_includes/theme/goal.html

@@ -0,0 +1,5 @@
+<div class="content">
+  <p>Barra de progreso de objetivos/metas</p>
+</div>
+
+{% include goal.html title="LAUNCH ISSUE THREE!" text="We're still looking for funding for future issues! Help us reach our goal!" value_now=5000 value_max=25000.0 height="75px" currency="$" %}

data/_includes/theme/header_close.html

@@ -0,0 +1,18 @@
+{% include headings/with_link.html level=2 text="Cabecera con el menú cerrado" %}
+
+<div class="d-flex position-relative background-black justify-content-between align-items-center p-3">
+	{% include menu_close.html class="w-36px w-md-54px" container_class="stroke-white" %}
+
+	{% include
+		header.html
+		logo_src="public/logo_white.png"
+		logo_href="?#"
+		logo_alt="Compost"
+		logo_width=333
+		logo_class="w-221px w-md-333px"
+		btn_src="public/mushroom_close.gif"
+		btn_href="#"
+		btn_alt="Mushroom close menu"
+		btn_class="w-44px w-md-67px"
+		btn_width=67 %}
+</div>