✨ feat: add wide container shortcode

welpo · Aug 11, 2023 · fb0dea0 · fb0dea0
1 parent f8891db
commit fb0dea0
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
+<div class="full-width">
+    {{ body | markdown | safe }}
+</div>