mystory (#18)

pages/_config.yml

@@ -54,6 +54,9 @@ footer-text-col: "#777777"
 footer-link-col: "#404040"
 footer-hover-col: "#0085A1"
 
+site-css:
+  - "/assets/css/custom-styles.css"
+
 # Exclude from processing.
 # The following items will not be processed, by default.
 # Any item listed under the `exclude:` key here will be automatically added to

pages/_sass/main.scss

@@ -0,0 +1,14 @@
+.wide-section {
+    width: calc(100% + 70%);
+    margin-left: calc(-70% / 2);
+    margin-right: calc(-70% / 2);
+    max-width: 100vw;
+}
+
+@media (max-width: 768px) {
+    .wide-section  {
+      width: 100%; /* Reset to full width on smaller screens */
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }

pages/assets/css/custom-styles.scss

@@ -0,0 +1,3 @@
+---
+---
+@import "main";

pages/render.py

@@ -53,6 +53,13 @@ def overflowing_div(content):
         "</div>"
     )
 
+def wide_div(content):
+    return (
+        "<div class='wide-section'>" +
+        content +
+        "</div>"
+    )
+
 def raw_context(content):
     return (
         '\n{% raw %}\n<div markdown="0">\n' +
@@ -61,6 +68,7 @@ def raw_context(content):
     )
 
 
+
 def render(cell):
     match cell['cell_type']:
         case 'code':
@@ -140,23 +148,25 @@ def render_code(cell):
                 data = output['data']
                 if "text/html" in data:
                     output_text += (
-                        raw_context(''.join(
-                                filter(
-                                    lambda x: len(x.strip()) > 0,
-                                    data["text/html"]
+                        wide_div(
+                            raw_context(''.join(
+                                    filter(
+                                        lambda x: len(x.strip()) > 0,
+                                        data["text/html"]
+                                    )
                                 )
                             )
                         )
                     )
                 elif "image/svg+xml" in data:
-                    output_text += (
+                    output_text += wide_div(
                         '\n<img src="{{ im_path }}/' +
                         save_svg_and_get_name(''.join(data["image/svg+xml"])) +
                         f'" alt="{"".join(data.get("text/plain", []))}" />\n'
                     )
                 elif "image/png" in data:
-                    output_text += (
-                        '\n<img src="{{ im_path }}/' +
+                    output_text += wide_div(
+                        '\n<img class="wider-section" src="{{ im_path }}/' +
                         save_png_and_get_name(data["image/png"]) +
                         f'" alt="{"".join(data.get("text/plain", []))}" />\n'
                     )