compost-jekyll-theme 0.1.8 → 0.1.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a56beb61765040c1e09a52aeec38224a42d3d86db901b93170b24ddd13b48fd8
-  data.tar.gz: b3fe569358689a966d2644c7d40f21de0a0cca44e5c129330186842db1db2954
+  metadata.gz: 1b02b27490a1d191ab1ce3fe08aaa4d46ffeb44b854f7e3bfbcbf6e479e8f085
+  data.tar.gz: d8169277b497d22b647cedadb4c1cef4d272599680ae318cb9e7513cd273a22b
 SHA512:
-  metadata.gz: 4b9c98c2b4530b45c5949d3bd3a995329ef577d8f9f0ddce69b08568b58bfa38f5c5dd320375ac7b50f0aced5fb3047e3e3da04fe3f727b403e8d308cc6eb735
-  data.tar.gz: 3bf462410c8b1b5acc31039aaa3587bce7cb711fa1a9efca6e8078bff4b97410f25f19328ae7a7755e945550373da04bf41f634b2daeb05836c8d0d197720865
+  metadata.gz: 1d39fbd2ea57d31a0a74a7a2dd9d05dc61dfb033115c5ff7a715fad8d32a3926b7aa9407c3953b20a92cf897ad8e2aa14d1cf28899665eac3c98212e4d327042
+  data.tar.gz: 9640394a56d64d4bbc0cff038df4a9963e9c3a2fe13dd068f1108054291fa937b3551dc341b6b45f1ba501d3a695d2c0a3a603794c07da41327892f9bbdb56ea

data/_data/layouts/about.yml

@@ -32,8 +32,8 @@ image_menu_close:
       es: "Logo de cabecera con el menú cerrado"
       en: "Header logo with menu closed"
     help:
-      es: ""
-      en: ""
+      es: "Máximo 220px de ancho y 90px de alto"
+      en: "Max. 220px width by 90px height"
   description:
     label:
       es: "Descripción del logo"

data/_data/layouts/front_cover.yml

@@ -48,8 +48,8 @@ image:
       es: "Imagen principal"
       en: "Main image"
     help:
-      es: "Se utiliza para ilustrar el artículo y como previsualización en las redes sociales."
-      en: "Used to illustrate the article and as preview in social networks."
+      es: "Imagen principal de la portada.  Si no una, el contenido será de una sola columna."
+      en: "Main image on the home page.  If you don't add one, the layout will be a single column."
   description:
     label:
       es: "Descripción de la imagen principal"

data/_data/layouts/post.yml

@@ -51,8 +51,8 @@ image:
       es: "Imagen principal"
       en: "Main image"
     help:
-      es: "Se utiliza para ilustrar el artículo y como previsualización en las redes sociales."
-      en: "Used to illustrate the article and as preview in social networks."
+      es: "Se utiliza para ilustrar el artículo y como previsualización en las redes sociales.  Si no agregas una, será mostrada como un bloque de color en la lista de artículos."
+      en: "Used to illustrate the article and as preview in social networks.  If you don't add one, it will be shown as a block of color on the post list."
   description:
     label:
       es: "Descripción de la imagen principal"

data/_data/theme.yml

@@ -71,6 +71,7 @@ sizes:
   36px: "2.25rem"
   49px: "3.0625rem"
   74px: "4.625rem"
+  90px: "90px"
   220px: "220px"
   221px: "13.8125rem"
   333px: "20.8125rem"

data/_includes/btn_header.html

@@ -5,10 +5,11 @@ Imagen de la cabecera
 @param :src [String]
 @param :href [String] El link
 @param :width [Integer] Ancho de la imagen
+@param :height [Integer] Alto de la imagen
 @param :alt [String] El alt de la imagen
 @param :component_class [String] Clases para el componente
 {%- endcomment -%}
 
 <div>
-	{% include image_with_link.html src=include.src alt=include.alt href=include.href width=include.width component_class=include.component_class img_class=include.img_class %}
+	{% include image_with_link.html src=include.src alt=include.alt href=include.href width=include.width height=include.height component_class=include.component_class img_class=include.img_class %}
 </div>

data/_includes/card_horizontal.html

@@ -9,9 +9,11 @@ Card horizontal
 @param :content [string] Contenido
 {%- endcomment -%}
 <div class="row justify-content-center container-lg mx-auto">
-  <div class="col-12 col-md-5 px-4">
-    {% include picture.html src=include.src width=500 img_class="w-100 object-fit-cover" %}
-  </div>
+  {% unless include.src %}
+    <div class="col-12 col-md-5 px-4">
+      {% include picture.html src=include.src width=500 img_class="w-100 object-fit-cover" %}
+    </div>
+  {% endunless %}
 
   <div class="col-12 col-md pl-xl-5 pt-5 pt-md-0">
     <div class="">

data/_includes/embed_responsive.html

@@ -12,5 +12,9 @@ Embed responsive
 {%- endcomment -%}
 
 <div class="embed-responsive embed-responsive-{{ include.x }}by{{ include.y }} {{ include.embed_class }}">
-  {%- include picture.html class="embed-responsive-item" img_class="w-100 h-100 object-fit-cover" src=include.src alt=include.alt width=include.width -%}
+  {% if include.src %}
+    {%- include picture.html class="embed-responsive-item" img_class="w-100 h-100 object-fit-cover" src=include.src alt=include.alt width=include.width -%}
+  {% else %}
+    <div class="embed-responsive-item background-primary"></div>
+  {% endif %}
 </div>

data/_includes/header.html

@@ -13,12 +13,12 @@ Items de cabecera (excepto el ícono de hamburguesa)
 	src=include.logo_src
 	href="?#"
 	alt=include.logo_alt
-	width=333
-	img_class="w-221px w-md-333px" %}
+  height=90
+	img_class="w-221px w-md-auto max-h-90px" %}
 
 {% 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" %}
+  height=90
+	img_class="max-h-90px" %}

data/_includes/image_with_link.html

@@ -5,6 +5,7 @@ componente de imagen que tiene un link [url]
 @param :src [String]
 @param :href [String] El link
 @param :width [Integer] Ancho de la imagen
+@param :height [Integer] Alto 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
@@ -18,5 +19,5 @@ componente de imagen que tiene un link [url]
 		 {{ 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 %}
+  {% include picture.html src=include.src width=include.width height=include.height alt=include.alt img_class=include.img_class %}
 </div>

data/_includes/picture.html

@@ -5,6 +5,7 @@ Image component
 @param :src [String]
 @param :alt [String]
 @param :width [Integer]
+@param :height [Integer]
 @param :class [String]
 @param :img_class [String]
 {%- endcomment -%}
@@ -13,13 +14,17 @@ Image component
   <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,
+        {% if include.width %}
+          {%- assign w = include.width | times: pixel_density -%}
+        {% elsif include.height %}
+          {%- assign h = include.height | times: pixel_density -%}
+        {% endif %}
+        {{- include.src | thumbnail: w, h | uri_escape }} {{ pixel_density }}x,
       {% endfor -%}
       " />
 
   <img
     class="{{ include.img_class }}"
-    src="{{ include.src | thumbnail: include.width | uri_escape }}"
+    src="{{ include.src | thumbnail: include.width, include.height | uri_escape }}"
     alt="{{ include.alt | escape_once }}" />
 </picture>

data/_layouts/post.html

@@ -10,7 +10,9 @@ layout: "default_with_menu"
 {%- 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" %}
+  {% unless page.image.path %}
+    {% include picture.html src=page.image.path alt=page.image.description width=780 img_class="w-100 shadow" %}
+  {% endunless %}
 
   <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 %}

data/_sass/utilities.scss

@@ -19,6 +19,16 @@
       .border-width#{$infix}-#{$border-width}   { border-width: $length !important; }
     }
 
+    @each $color, $rgb in $theme-colors {
+      .background#{$infix}-#{$color} {
+        background-color: var(--#{$color});
+
+        &:focus {
+          background-color: var(--#{$color});
+        }
+      }
+    }
+
     @each $color, $rgb in $colors {
       .background#{$infix}-#{$color} {
         background-color: var(--#{$color});

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compost-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.8
+  version: 0.1.10
 platform: ruby
 authors:
 - Sutty