compost-jekyll-theme 0.1.0

data/_includes/theme/header_open.html

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

data/_includes/theme/header_toggler.html

@@ -0,0 +1,11 @@
+{% include headings/with_link.html level=2 text="Cabecera con toggler de menú funcionando" %}
+
+{% include header_toggler.html
+	logo_open_src="public/logo_black.png"
+	logo_open_alt="Compost"
+	btn_open_src="public/mushroom_open.gif"
+	logo_close_src="public/logo_white.png"
+	logo_close_alt="Compost"
+	btn_close_src="public/mushroom_close.gif"
+	btn_href="#"
+	btn_alt="Mushroom open menu" %}

data/_includes/theme/image_supporter.html

@@ -0,0 +1,5 @@
+<div class="d-flex">
+  {% include image_supporter.html src="public/logo-distributedpress.png" alt="Descripción de la imagen" width=200 href="https://distributed.press/" %}
+
+  {% include image_supporter.html src="public/logo-hypha.png" alt="Descripción de la imagen" width=100 href="https://hypha.coop/" %}
+</div>

data/_includes/theme/image_with_link.html

@@ -0,0 +1,4 @@
+{% include image_with_link.html src="public/placeholder.png" href="#" width=200 alt="Descripción de la imagen" %}
+
+{% include headings/with_link.html level=2 text="Imagen con link externo" %}
+{% include image_with_link.html src="public/placeholder.png" href="https://sutty.nl/" width=200 alt="Descripción de la imagen" %}

data/_includes/theme/letter_spacing.html

@@ -0,0 +1,3 @@
+{% for letter_spacing in site.data.theme.letter_spacings %}
+  <p class="letter-spacing-{{ letter_spacing[0] }}">Letter spacing {{ letter_spacing[0] }}</p>
+{% endfor %}

data/_includes/theme/license_block.html

@@ -0,0 +1 @@
+{% include license_block.html title="Content License: CC BY-ND 4.0" content="We built this little tool for you to inoculate other web spaces with the ideas and stories contained in this issue. To re-publish this piece under the terms of the license, click below to copy the markdown." %}

data/_includes/theme/menu_item.html

@@ -0,0 +1,7 @@
+<div class="d-flex flex-column flex-md-row">
+  {% include menu_item.html text="Issue 02" href="https://sutty.nl/" %}
+
+  {% include menu_item.html text="About" href="https://sutty.nl/" %}
+
+  {% include menu_item.html text="Support Us" href="https://sutty.nl/" %}
+</div>

data/_includes/theme/navigation_post.html

@@ -0,0 +1,17 @@
+<div class="mb-3">
+  {% include headings/h2.html text="Todos los botones visibles" %}
+
+  {% include navigation_post.html src_previous="public/arrow_previous.png" src_home="public/home.png" alt_previous=site.i18n.previous_page src_next="public/arrow_next.png" href_previous="#biografía-de-autore-en-los-artículos" href_home="?#" href_next="#imagen-con-link-de-sección-supporters" alt_next=site.i18n.next_page %}
+</div>
+
+<div class="mb-3">
+  {% include headings/h2.html text="Cuando se llega al principio del indice de contenido" %}
+
+  {% include navigation_post.html src_previous="public/arrow_previous.png" alt_previous=site.i18n.previous_page src_home="public/home.png" src_next="public/arrow_next.png" href_home="?#" href_next="#imagen-con-link-de-sección-supporters" alt_next=site.i18n.next_page %}
+</div>
+
+<div class="mb-3">
+  {% include headings/h2.html text="Cuando se llega al final del indice de contenido" %}
+
+  {% include navigation_post.html src_previous="public/arrow_previous.png" alt_previous=site.i18n.previous_page src_home="public/home.png" href_previous="#biografía-de-autore-en-los-artículos" src_next="public/arrow_next.png" href_home="?#" alt_next=site.i18n.next_page %}
+</div>

data/_includes/theme/picture.html

@@ -0,0 +1,5 @@
+<div class="content">
+  <p>Una imagen de 100px</p>
+</div>
+
+{% include picture.html src="public/placeholder.png" width=100 %}

data/_includes/toggler/toggler.html

@@ -0,0 +1,21 @@
+{% comment %}
+  Este elemento colocado en el mismo nivel que un elemento con la clase
+  toggled permite ocultarlo o mostrarlo.
+
+  @see toggler_label.html
+  @param :id [String] La ID
+  @param :toggled_class [String] Las clases del elemento toggled
+  @param :toggled_content [String] El contenido del elemento toggled
+{% endcomment %}
+<input
+  type="checkbox"
+  class="toggler sr-only"
+  data-action="body-scroll#toggle"
+  autocomplete="off"
+  id="{{ include.id }}"
+  name="{{ include.id }}"
+  aria-labelledby="{{ include.id }}-label" />
+
+<div class="toggled position-absolute {{ include.toggled_class }}">
+	{{ include.toggled_content }}
+</div>

data/_includes/toggler/toggler_label.html

@@ -0,0 +1,21 @@
+{% comment %}
+  Este label puede usarse para abrir y cerrar un elemento asociado a
+  toggler.html
+
+  Mientras compartan la misma ID puede colocarse el label en cualquier
+  lado del HTML.
+
+  @see toggler.html
+  @param :id [String] La ID del elemento
+  @param :class [String] CSS
+  @param :content [String] Contenido
+{% endcomment %}
+<label
+  data-controller="label"
+  tabindex="0"
+  aria-hidden="true"
+  id="{{ include.id }}-label"
+  for="{{ include.id }}"
+  class="{{ include.class }}">
+  {{ include.content }}
+</label>

data/_includes/toggler/toggler_related.html

@@ -0,0 +1,23 @@
+{% comment %}
+  Este label puede usarse para abrir y cerrar un elemento asociado a
+  toggler.html
+
+  Similar a toggler_label.html pero no comparte la misma ID, se puede
+  usar para botones de cierre o relacionados, pero que no aportan
+  descripción al elemento que se abre y cierra (especialmente para
+  lectores de pantalla).
+
+  @see togger_label.html
+  @param :id [String] La ID del elemento
+  @param :class [String] CSS
+  @param :content [HTML] Contenido
+{% endcomment %}
+<label
+  data-controller="label"
+  tabindex="0"
+  aria-hidden="true"
+  id="{{ include.id }}-label-related"
+  for="{{ include.id }}"
+  class="{{ include.class }}">
+  {{ include.content }}
+</label>

data/_layouts/about.html

@@ -0,0 +1,9 @@
+---
+layout: "default_with_menu"
+---
+
+<article id="{{ page.slug }}" class="container mx-auto max-w-780px py-4 px-20 mt-lg-5">
+	{% include headings/h1.html class="text-uppercase black hover-black letter-spacing-4 font-weight-bold mb-4" text=page.title %}
+
+	<div class="lead-md content pt-2 source-serif">{{ page.content }}</div>
+</article>

data/_layouts/back_cover.html

@@ -0,0 +1,68 @@
+---
+layout: "default"
+---
+
+{%- assign authors = site.posts | where: "layout", "author" -%}
+{%- assign back_covers = site.posts | where: "layout", "back_cover" -%}
+{%- assign posts = site.posts | where: "layout", "post" | concat: back_covers -%}
+{%- assign supporters = site.posts | where: "layout", "supporter" -%}
+{%- assign prev = page | prev: posts -%}
+{%- assign next = page | next: posts -%}
+
+<article id="{{ page.slug }}" class="container mx-auto max-w-780px my-4 px-20">
+  {% include embed_responsive.html src=page.image.path alt=page.image.description x=2 y=1 width=780 embed_class="shadow" %}
+
+  <div class="">
+    <div class="border-bottom border-gray border-width-2">
+      {% include headings/h1.html class="text-uppercase black hover-black letter-spacing-4 font-weight-bold mb-12 mt-5" text=page.title %}
+    </div>
+
+    {% unless page.authors_title == empty %}
+       {% include headings/h2.html class="text-uppercase black hover-black letter-spacing-8 mt-50 mb-4" text=page.authors_title %}
+    {% endunless %}
+
+    {% unless authors == empty %}
+      {% for author in authors %}
+        {% unless author.projects == empty %}
+          {% include author_block.html title=author.alias links=author.projects %}
+        {% endunless %}
+      {% endfor %}
+    {% endunless %}
+
+    {% unless page.content_title == empty %}
+      <div class="pt-32">
+        {% include headings/h2.html class="text-uppercase black hover-black letter-spacing-4 mb-12 mt-5" text=page.content_title %}
+      </div>
+    {% endunless %}
+
+    {% unless page.content == empty %}
+      <div class="source-serif lead-md pt-2 content">
+        {{ content }}
+      </div>
+    {% endunless %}
+
+    {% unless page.supporters_title == empty %}
+      <div class="pt-32">
+        {% include headings/h2.html class="text-uppercase black hover-black letter-spacing-4 mb-12 mt-5" text=page.supporters_title %}
+      </div>
+    {% endunless %}
+
+    {% unless supporters == empty %}
+      <div class="row row-cols-2 row-cols-md-4 align-items-center">
+        {% for supporter in supporters %}
+          <div class="col p-2">
+            {% include image_supporter.html src=supporter.image.path alt=supporter.image.description href=supporter.link width=576 %}
+          </div>
+        {% endfor %}
+      </div>
+		{% endunless %}
+
+		{% unless page.final_message == empty %}
+      <p class="font-italic source-serif lead-md border-bottom border-gray border-width-2 py-3">{{ page.final_message }}</p>
+    {% endunless %}
+  </div>
+
+  <footer class="d-flex flex-column align-items-center pt-5">
+    {% include navigation_post.html src_previous="public/arrow_previous.png" src_home="public/home.png" src_next="public/arrow_next.png" href_previous=prev.url href_home="?#" href_next=next.url %}
+  </footer>
+</article>

data/_layouts/default.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang }}" dir="{{ site.dir }}">
+  <head>
+    <meta charset="UTF-8">
+    <base href="{% base %}" />
+    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <meta name="theme-color" content="white"/>
+    <meta name="color-scheme" content="light"/>
+    <meta name="referrer" content="strict-origin-when-cross-origin"/>
+
+    <link href="assets/css/styles.css?{{ site.time | date: '%s' }}" rel="stylesheet" data-turbo-track="reload">
+
+    {%- include script.html src="assets/js/env.js" -%}
+    {%- if jekyll.environment == "production" -%}
+      {%- for pack in site.data.manifest.outputs -%}
+        {%- unless pack[1].entryPoint -%}{%- continue -%}{%- endunless -%}
+        {%- assign src = pack[0] -%}
+        {%- include script.html src=src -%}
+      {%- endfor -%}
+    {%- else -%}
+      {%- include script.html src="pack.js" -%}
+    {%- endif -%}
+
+    {%- assign about = site.posts | find: "layout", "about" -%}
+    {%- assign theme = site.posts | find: "layout", "theme" -%}
+
+    {% for apple_touch_size in site.data.theme.apple_touch_sizes %}
+      <link rel="apple-touch-icon" sizes="{{ apple_touch_size }}x{{ apple_touch_size }}" href="{{ about.favicon.path | thumbnail: apple_touch_size, apple_touch_size | uri_escape }}">
+    {% endfor %}
+
+    {% for chrome_icon_size in site.data.theme.chrome_icon_sizes %}
+      <link rel="icon" type="image/png" sizes="{{ chrome_icon_size }}x{{chrome_icon_size }}" href="{{ about.favicon.path | thumbnail: chrome_icon_size , chrome_icon_size | uri_escape }}">
+    {% endfor %}
+
+    {% for msapplication_size in site.data.theme.msapplication_sizes %}
+      <meta name="msapplication-TileImage" content="{{ about.favicon.path | thumbnail: msapplication_size , msapplication_size | uri_escape }}">
+    {% endfor %}
+
+    <link rel="manifest" href="site.webmanifest">
+    <meta name="msapplication-TileColor" content="{{ theme.bg_color }}">
+    <meta name="theme-color" content="{{ theme.primary }}">
+    {% seo %}
+  </head>
+  <body>
+    {% include device_detector.html %}
+
+    <main tabindex="-1" role="main" id="content">
+      {{ content }}
+    </main>
+  </body>
+</html>

data/_layouts/default_with_menu.html

@@ -0,0 +1,24 @@
+---
+layout: "default"
+---
+
+{%- assign footer = site.posts | find: "layout", "footer" -%}
+{%- assign about = site.posts | find: "layout", "about" -%}
+{%- assign support = site.posts | find: "layout", "support" -%}
+
+<div class="background-post {{ site.data.theme.layout_class[page.layout] }}">
+  {% include header_toggler.html
+    logo_open_src=about.image_menu_open.path
+    logo_open_alt=about.image_menu_open.description
+    btn_open_src="public/mushroom_open.gif"
+    logo_close_src=about.image_menu_close.path
+    logo_close_alt=about.image_menu_close.description
+    btn_close_src="public/mushroom_close.gif"
+    btn_href=support.url
+    btn_alt=site.i18n.support_alt
+    background_class="pt-2 px-3 pb-100 background-image-menu background-position-center-bottom w-100 background-size-auto-100" %}
+
+  {{ content }}
+
+  {% include footer.html col_1=footer.column_1 col_2=footer.column_2 col_3=footer.column_3 col_4=footer.column_4 %}
+</div>

data/_layouts/home.html

@@ -0,0 +1,35 @@
+---
+layout: "default_with_menu"
+---
+
+{%- assign front_cover = site.posts | find: "layout", "front_cover" -%}
+{%- assign posts = site.posts | where: "layout", "post" -%}
+{%- assign back_cover = site.posts | find: "layout", "back_cover" -%}
+
+<div class="pt-md-6 px-3">
+	{% include card_horizontal.html
+		src=front_cover.image.path
+		alt=front_cover.image.alt
+		title=front_cover.title
+		subtitle=front_cover.subtitle
+		content=front_cover.content
+	%}
+	<article class="row row-cols-1 row-cols-md-2 row-cols-lg-3 mt-6 container-lg mx-auto">
+		{% for post in posts %}
+			<div class="col pb-5 px-2">
+				{% include cover_post/home.html
+					authors=post.authors
+					src=post.image.path
+					alt=post.image.alt
+					title=post.title
+					description=post.description
+					href=post.url
+				%}
+			</div>
+		{% endfor %}
+
+		<div class="col pb-5 px-2">
+			{% include cover_post/home.html title=back_cover.title src=back_cover.image.path alt=back_cover.image.description href=back_cover.url description=back_cover.description %}
+		</div>
+	</article>
+</div>

data/_layouts/post.html

@@ -0,0 +1,58 @@
+---
+layout: "default_with_menu"
+---
+
+{%- assign about = site.posts | find: "layout", "about" -%}
+{%- assign back_covers = site.posts | where: "layout", "back_cover" -%}
+{%- assign posts = site.posts | where: "layout", "post" | concat: back_covers -%}
+{%- assign authors = site.posts | where: "layout", "author" -%}
+{%- assign prev = page | prev: posts -%}
+{%- assign next = page | next: posts -%}
+
+<article id="{{ page.slug }}" class="container mx-auto max-w-780px my-4 px-20">
+  {% include picture.html src=page.image.path alt=page.image.description width=780 img_class="w-100 shadow" %}
+
+  <div class="mt-5">
+    {% include headings/h1.html class="text-uppercase black hover-black letter-spacing-4 font-weight-bold mb-12" text=page.title %}
+
+    {% if page.subtitle %}
+      {% include headings/h2.html class="text-uppercase letter-spacing-8 mb-20" text=page.subtitle %}
+    {% endif %}
+
+    {% unless page.authors == empty %}
+      <p class="lead text-uppercase letter-spacing-5">
+        {% for author in page.authors %}
+          {{ author.title }}{% unless forloop.last %} {{ site.i18n.and }} {% endunless %}
+        {% endfor %}
+      </p>
+    {% endunless %}
+
+    <div
+      class="source-serif lead-md pt-20 content"
+      data-controller="footnotes"
+      data-action="resize@window->footnotes#resize"
+      data-footnotes-container-width-value="{{ site.data.theme.footnotes_container_width }}"
+      data-footnotes-sidenote-width-value="{{ site.data.theme.footnotes_sidenote_width }}"
+      data-footnotes-padding-left-value="{{ site.data.theme.footnotes_padding_left }}"
+      data-footnotes-offset-left-value="{{ site.data.theme.footnotes_offset_left }}"
+      data-footnotes-footnote-class="{{ site.data.theme.footnotes_footnote_class | join: " " }}"
+      data-footnotes-footnote-toggled-class="{{ site.data.theme.footnotes_footnote_toggled_class | join: " " }}"
+      data-footnotes-sidenote-class="{{ site.data.theme.footnotes_sidenote_class | join: " " }}">
+      {{ content }}
+    </div>
+  </div>
+
+  <footer class="d-flex flex-column align-items-center mt-60">
+    {% unless page.authors == empty or page.show_biography == false  %}
+      {% for author in page.authors %}
+        {% include biography.html text=author.content %}
+      {% endfor %}
+    {% endunless %}
+
+    {% if page.license %}
+      {% include license_block.html title=page.license content=about.license %}
+    {% endif %}
+
+    {% include navigation_post.html src_previous="public/arrow_previous.png" src_home="public/home.png" src_next="public/arrow_next.png" href_previous=prev.url href_home="?#" href_next=next.url %}
+  </footer>
+</article>

data/_layouts/support.html

@@ -0,0 +1,45 @@
+---
+layout: "default_with_menu"
+---
+
+{%- assign about = site.posts | find: "layout", "about" -%}
+{%- assign authors = site.posts | where: "layout", "author" -%}
+{%- assign buttons = site.posts | where: "layout", "button" -%}
+{%- assign buttons = site.posts | where: "layout", "button_copy" | concat: buttons | order -%}
+{%- assign goals = site.posts | where: "layout", "goal" -%}
+
+<article
+  data-controller="support-us"
+  data-support-us-monetization-url-value="{{ page.monetization_url }}"
+  id="{{ page.slug }}" class="container mx-auto max-w-780px py-4 mt-lg-5 px-20">
+	{% include headings/h1.html class="text-uppercase black hover-black letter-spacing-4 font-weight-bold mb-4" text=page.title %}
+
+	<p class="lead-md content">{{ page.description }}</p>
+
+	<div class="row row-cols-2 justify-content-center my-80 no-gutters">
+		{% for button in buttons %}
+			<div class="col d-flex p-1">
+				{% if button.layout == "button" %}
+					{% include buttons/with_link.html href=button.link text=button.title %}
+				{% elsif button.layout == "button_copy" %}
+					{% include buttons/with_copy.html copy=button.text text=button.title %}
+				{% endif %}
+			</div>
+		{% endfor %}
+	</div>
+
+    <div class="lead-md content">
+      {{-
+        page.section_1
+        | replace: "BALANCE", '<code data-support-us-target="balance"></code>'
+        | replace: "DATE", '<span data-support-us-target="date"></span>' -}}
+    </div>
+
+	<div class="my-4">
+		{% for goal in goals %}
+			{% include goal.html title=goal.title text=goal.description value_now=1000 value_max=goal.value_max currency=goal.currency %}
+		{% endfor %}
+	</div>
+
+	<div class="lead-md content">{{ page.section_2 }}</div>
+</article>

data/_layouts/theme.html

@@ -0,0 +1,60 @@
+---
+layout: default
+---
+
+{% capture components %}
+  {% for component in site.data.components %}
+    {% assign component_include = "theme/" | append: component | append: ".html" %}
+    {% assign title = component | replace: "_", " " | capitalize %}
+
+    <section id="{{ component | replace: "_", "-" }}" class="mb-5">
+      <header>
+        {% include headings/with_link.html level=1 text=title %}
+      </header>
+
+      {% include {{ component_include }} %}
+    </section>
+  {% endfor %}
+{% endcapture %}
+
+{% capture full_width_components %}
+  {% for component in site.data.full_width_components %}
+    {% assign component_include = "theme/" | append: component | append: ".html" %}
+    {% assign title = component | replace: "_", " " | capitalize %}
+
+    <section id="{{ component | replace: "_", "-" }}" class="mb-5">
+      <header>
+        {% include headings/with_link.html level=1 text=title %}
+      </header>
+
+      {% include {{ component_include }} %}
+    </section>
+  {% endfor %}
+{% endcapture %}
+
+<div class="container-fluid">
+  <div class="row">
+    <aside class="col-12 col-md-3">
+      <ol class="list-unstyled">
+        {%- assign toc_full_width = full_width_components | table_of_contents: 1 -%}
+        {%- assign toc = components | table_of_contents: 1 | concat: toc_full_width -%}
+
+        {% for item in toc %}
+          <li>
+            <a href="#{{ item.id }}" data-turbo="false">
+              {{- item.title -}}
+            </a>
+          </li>
+        {% endfor %}
+      </ol>
+    </aside>
+
+    <section class="col-12 col-md">
+      {{ components }}
+    </section>
+  </div>
+</div>
+
+<section class="w-100">
+  {{ full_width_components }}
+</section>

data/_sass/content.scss

@@ -0,0 +1,93 @@
+.content {
+  p { min-height: $font-size-base * $line-height-base; }
+  h1 { min-height: $h1-font-size * $headings-line-height; }
+  h2 {
+    min-height: $h2-font-size * $headings-line-height;
+    text-transform: uppercase !important;
+    margin-top:2rem;
+    margin-bottom:1.5rem;
+    font-family: "Open Sans", sans-serif;
+    letter-spacing: 2.73px;
+  }
+
+  h3 {
+    min-height: $h3-font-size * $headings-line-height;
+    font-weight: $font-weight-bold;
+    margin: 2rem 0 1.5rem;
+  }
+
+  h4 { min-height: $h4-font-size * $headings-line-height; }
+  h5 { min-height: $h5-font-size * $headings-line-height; }
+  h6 { min-height: $h6-font-size * $headings-line-height; }
+
+  iframe { border: 0; }
+
+  audio { width: 100%; }
+
+  img,
+  video,
+  iframe {
+    @extend .img-fluid;
+    height: auto;
+    margin: 2rem 0;
+  }
+
+  figure {
+    text-align: center;
+    margin: 0;
+  }
+
+  & > * {
+    margin-bottom: 1rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  li p {
+    margin-bottom: $paragraph-margin-bottom;
+  }
+
+  a {
+    text-decoration: underline !important;
+  }
+
+  sup {
+    position: relative;
+    @include font-size(100%);
+    line-height: 0;
+    vertical-align: baseline;
+    top: 0;
+    font-weight: bold;
+
+    &:before {
+      content: "[";
+    }
+
+    &:after {
+      content: "]";
+    }
+  }
+
+  a {
+    word-break: break-word !important;
+    word-wrap: break-word !important;
+  }
+
+  blockquote {
+    border-left: 4px solid rgba(0, 0, 0, 0.2);
+    margin-left: 0.75em;
+    padding-left: 0.5em;
+  }
+}
+
+footer .content a {
+  text-decoration: none !important;
+}
+
+small,
+.small {
+  @include font-size($small-font-size);
+  font-weight: unset;
+}