diff --git a/content/blog/shortcodes.ca.md b/content/blog/shortcodes.ca.md index 2a97771..4c7c2c4 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-08-09 +updated = 2023-08-11 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] @@ -128,3 +128,34 @@ Cada una en una nova línia. Es renderitzarà el Markdown (enllaços, cursiva… {%/* end */%} ``` + +## Contenidors + +### Contenidor ample + +Utilitza aquest codi curt si vols tenir una taula, paràgraf, bloc de codi… més ample. A l'escriptori, ocuparà l'amplada de la capçalera. A mòbils no tindrà efecte, excepte per les taules, que guanyaran scroll horitzontal. + +{% wide_container() %} + +| Títol | Any | Director | Director de fotografia | Gènere | IMDb | Durada | +|-------------------|-------|----------------------|-------------------------|----------------|-------|--------------| +| Beoning | 2018 | Lee Chang-dong | Hong Kyung-pyo | Drama/Misteri | 7.5 | 148 min | +| The Master | 2012 | Paul Thomas Anderson | Mihai Mălaimare Jr. | Drama/Història | 7.1 | 137 min | +| The Tree of Life | 2011 | Terrence Malick | Emmanuel Lubezki | Drama | 6.8 | 139 min | + +{% end %} + +#### Ús + +``` +{%/* wide_container() */%} + +Posa el teu bloc de codi, paràgraf, taula… aquí. + +El Markdown, per suposat, serà interpretat. + +{%/* end */%} +``` +""" + +¡Espero que esto sea lo que buscabas! diff --git a/content/blog/shortcodes.es.md b/content/blog/shortcodes.es.md index d940344..8a8534a 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-08-09 +updated = 2023-08-11 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] @@ -129,3 +129,31 @@ Cada una en una línea nueva. Se renderizará Markdown (enlaces, cursivas…). {%/* end */%} ``` + +## Contenedores + +### Contenedor ancho + +Utiliza este código corto si deseas tener una tabla, párrafo, bloque de código… más ancho. En escritorio, ocupará el ancho del encabezado. En móviles no tendrá efecto, excepto para las tablas, que ganarán scroll horizontal. + +{% wide_container() %} + +| Título | Año | Director | Director de Fotografía| Género | IMDb | Duración | +|-------------------|-------|----------------------|-----------------------|---------------|-------|--------------| +| Beoning | 2018 | Lee Chang-dong | Hong Kyung-pyo | Drama/Misterio| 7.5 | 148 min | +| The Master | 2012 | Paul Thomas Anderson | Mihai Mălaimare Jr. | Drama/Historia| 7.1 | 137 min | +| The Tree of Life | 2011 | Terrence Malick | Emmanuel Lubezki | Drama | 6.8 | 139 min | + +{% end %} + +#### Uso + +``` +{%/* wide_container() */%} + +Coloca tu bloque de código, párrafo, tabla… aquí. + +El Markdown, por supuesto, será interpretado. + +{%/* end */%} +``` diff --git a/content/blog/shortcodes.md b/content/blog/shortcodes.md index b6aa3d4..97102ae 100644 --- a/content/blog/shortcodes.md +++ b/content/blog/shortcodes.md @@ -1,7 +1,7 @@ +++ title = "Custom shortcodes" date = 2023-02-19 -updated = 2023-08-09 +updated = 2023-08-11 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] @@ -128,3 +128,31 @@ Each in a new line. Markdown (links, italics…) will be rendered. {%/* end */%} ``` + +## Containers + +### Wide container + +Use this shortcode if you want to have a wider table, paragraph, code block… On desktop, it will take up the width of the header. It will have no effect on mobile, except for tables, which will get a horizontal scroll. + +{% wide_container() %} + +| Title | Year | Director | Cinematographer | Genre | IMDb | Duration | +|-------------------|-------|----------------------|-----------------------|---------------|-------|--------------| +| Beoning | 2018 | Lee Chang-dong | Hong Kyung-pyo | Drama/Mystery | 7.5 | 148 min | +| The Master | 2012 | Paul Thomas Anderson | Mihai Mălaimare Jr. | Drama/History | 7.1 | 137 min | +| The Tree of Life | 2011 | Terrence Malick | Emmanuel Lubezki | Drama | 6.8 | 139 min | + +{% end %} + +#### Usage + +``` +{%/* wide_container() */%} + +Place your code block, paragraph, table… here. + +Markdown will of course be rendered. + +{%/* end */%} +``` diff --git a/sass/main.scss b/sass/main.scss index ea3b1df..2a5b1b3 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -247,11 +247,11 @@ strong { } article .full-width { - width: auto; max-width: none; margin-left: 0; margin-right: 0; display: block; + overflow-x: auto; } } diff --git a/templates/shortcodes/wide_container.html b/templates/shortcodes/wide_container.html new file mode 100644 index 0000000..6268e63 --- /dev/null +++ b/templates/shortcodes/wide_container.html @@ -0,0 +1,3 @@ +
+ {{ body | markdown | safe }} +