diff --git a/content/blog/shortcodes.ca.md b/content/blog/shortcodes.ca.md index ec1367e..a6a3dce 100644 --- a/content/blog/shortcodes.ca.md +++ b/content/blog/shortcodes.ca.md @@ -1,7 +1,7 @@ +++ title = "Shortcodes personalitzats" date = 2023-02-19 -updated = 2023-06-05 +updated = 2023-07-05 description = "Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran." [taxonomies] @@ -45,6 +45,20 @@ Les imatges amb massa brillantor o contrast poden ser molestes en un fons fosc. {{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") */}} ``` +### Imatge d'amplada completa + +La imatge s'expandirà per coincidir amb l'amplada de la capçalera, que normalment és més ampla que el text de l'article (excepte en mòbil/finestres petites). + +Tots els altres shortcodes d'imatges poden utilizar l'amplada completa assignant `true` al paràmetre opcional `full_width`. + +{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") }} + +#### Ús + +``` +{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") */}} +``` + ## Cites ### Cites multillenguatge diff --git a/content/blog/shortcodes.es.md b/content/blog/shortcodes.es.md index 3c4803f..0ac8469 100644 --- a/content/blog/shortcodes.es.md +++ b/content/blog/shortcodes.es.md @@ -1,7 +1,7 @@ +++ title = "Shortcodes personalizados" date = 2023-02-19 -updated = 2023-06-05 +updated = 2023-07-05 description = "Este tema incluye algunos shortcodes personalizados útiles que puedes utilizar para mejorar tus publicaciones. Puedes mostrar imágenes que se adapten a los temas claro y oscuro, dar formato a una sección de referencias con un aspecto profesional, y más." [taxonomies] @@ -46,6 +46,20 @@ Las imágenes con demasiado brillo o contraste pueden ser demasiado discordantes {{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografía de un desierto, cielo celestial") */}} ``` +### Imagen a ancho completo + +La imagen se expandirá para coincidir con el ancho del encabezado, que generalmente es más ancho que el texto del artículo (excepto en móvil/ventanas pequeñas). + +Todos los otros shortcodes de imágenes pueden usar el ancho completo asignando el valor `true` al parámetro opcional `full_width`. + +{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") }} + +#### Uso + +``` +{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") */}} +``` + ## Citas ### Citas multilenguaje diff --git a/content/blog/shortcodes.md b/content/blog/shortcodes.md index 79178c4..4bef828 100644 --- a/content/blog/shortcodes.md +++ b/content/blog/shortcodes.md @@ -1,7 +1,7 @@ +++ title = "Custom shortcodes" date = 2023-02-19 -updated = 2023-06-05 +updated = 2023-07-05 description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered." [taxonomies] @@ -45,6 +45,20 @@ Images with too much brightness or contrast can be jarring against a dark backgr {{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") */}} ``` +### Full-width image + +The image will expand to match the width of the header, which is usually wider than the article text (except on mobile/small windows). + +All other image shortcodes can be made into full-width by setting the optional parameter `full_width` to `true`. + +{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") }} + +#### Usage + +``` +{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") */}} +``` + ## Quotes ### Multilingual quotes diff --git a/sass/main.scss b/sass/main.scss index 4bdeb96..e2545fe 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -120,13 +120,24 @@ body { } article { - max-width: calc(var(--max-layout-width) - 12rem); + $base-margin: 6rem; + + max-width: calc(var(--max-layout-width) - 2*$base-margin); margin: 0 auto; p, li { font-family: var(--serif-font); } + + .full-width { + width: auto; + height: auto; + max-width: calc(100% + 2*$base-margin); + margin-left: -$base-margin; + margin-right: -$base-margin; + display: flex; + } } .section-title { @@ -254,3 +265,13 @@ p { font-size: 20px; } } + +@media only screen and (max-width: 1000px) { + article .full-width { + width: auto; + max-width: none; + margin-left: 0; + margin-right: 0; + display: block; + } +} diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index 7aaa5fc..a89253c 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -1,18 +1,7 @@ header { font-family: 'Inter Subset', var(--sans-serif-font); width: 100%; - - .main { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - align-items: flex-start; - gap: 12px; - font-size: 1.5rem; - margin-bottom: 10px; - } -} +} .page-header { font-size: 3em; diff --git a/static/img/amsterdam_by_oskerwyld.webp b/static/img/amsterdam_by_oskerwyld.webp new file mode 100644 index 0000000..2e84a02 Binary files /dev/null and b/static/img/amsterdam_by_oskerwyld.webp differ diff --git a/templates/shortcodes/dimmable_image.html b/templates/shortcodes/dimmable_image.html index 9e61ab5..84da029 100644 --- a/templates/shortcodes/dimmable_image.html +++ b/templates/shortcodes/dimmable_image.html @@ -1,2 +1,8 @@ {% set meta = get_image_metadata(path=src, allow_missing=true) %} +{% if full_width | default(value=false) %} +
+{% endif %} +{% if full_width | default(value=false) %} +
+{% endif %} diff --git a/templates/shortcodes/dual_theme_image.html b/templates/shortcodes/dual_theme_image.html index fa24dec..6a33c6f 100644 --- a/templates/shortcodes/dual_theme_image.html +++ b/templates/shortcodes/dual_theme_image.html @@ -1,4 +1,10 @@ {% set light_meta = get_image_metadata(path=light_src, allow_missing=true) %} {% set dark_meta = get_image_metadata(path=dark_src, allow_missing=true) %} +{% if full_width | default(value=false) %} +
+{% endif %} +{% if full_width | default(value=false) %} +
+{% endif %} diff --git a/templates/shortcodes/full_width_image.html b/templates/shortcodes/full_width_image.html new file mode 100644 index 0000000..e3391be --- /dev/null +++ b/templates/shortcodes/full_width_image.html @@ -0,0 +1,4 @@ +{% set meta = get_image_metadata(path=src, allow_missing=true) %} +
+ +
diff --git a/templates/shortcodes/invertible_image.html b/templates/shortcodes/invertible_image.html index 8a7e20a..ee4fc96 100644 --- a/templates/shortcodes/invertible_image.html +++ b/templates/shortcodes/invertible_image.html @@ -1,2 +1,8 @@ {% set meta = get_image_metadata(path=src, allow_missing=true) %} +{% if full_width | default(value=false) %} +
+{% endif %} +{% if full_width | default(value=false) %} +
+{% endif %}