css hack to make images wider than the article

Signed-off-by: Xe Iaso <me@xeiaso.net>

3 files changed, 18 insertions, 6 deletions

diff --git a/blog/site-update-better-css.markdown b/blog/site-update-better-css.markdown
index 787b6ae..1844182 100644
--- a/blog/site-update-better-css.markdown
+++ b/blog/site-update-better-css.markdown
@@ -38,6 +38,7 @@ there is more of a border:
 
 When a conversation has mutiple parts, they will get smaller and look like this:
 
+<div>
 <xeblog-conv name="Numa" mood="delet">Have you ever been far even as decided to
 use even go want to do look more like?</xeblog-conv>
 <xeblog-conv name="Aoi" mood="coffee">What.</xeblog-conv>
@@ -49,6 +50,7 @@ then that he has really been far even as decided to use even go want to do look
 more like. It's just common sense.</xeblog-conv>
 <xeblog-conv name="Aoi" mood="coffee">Is that supposed to be
 English????</xeblog-conv>
+</div>
 
 As you can see, this is a lot more clear and easy to understand. The
 "standalone" snippets are a bit bigger so that the character is emphasized.
diff --git a/lib/xesite_templates/src/lib.rs b/lib/xesite_templates/src/lib.rs
index 413aa90..e3f5704 100644
--- a/lib/xesite_templates/src/lib.rs
+++ b/lib/xesite_templates/src/lib.rs
@@ -44,9 +44,9 @@ pub fn picture(path: String) -> Markup {
 pub fn hero(file: String, prompt: Option<String>, ai: Option<String>) -> Markup {
     let ai = ai.unwrap_or("MidJourney".to_string());
     html! {
-        meta property="og:image" content={"https://cdn.xeiaso.net/file/christine-static/hero/" (file) "-smol.png"}
+        meta property="og:image" content={"https://cdn.xeiaso.net/file/christine-static/hero/" (file) "-smol.png"};
         figure.hero style="margin:0" {
-            picture style="margin:0" {
+            picture.hero style="margin:0" {
                 source type="image/avif" srcset={"https://cdn.xeiaso.net/file/christine-static/hero/" (file) ".avif"};
                 source type="image/webp" srcset={"https://cdn.xeiaso.net/file/christine-static/hero/" (file) ".webp"};
                 img style="padding:0" loading="lazy" alt={"hero image " (file)} src={"https://cdn.xeiaso.net/file/christine-static/hero/" (file) "-smol.png"};
diff --git a/static/css/shim.css b/static/css/shim.css
index 716490a..8781792 100644
--- a/static/css/shim.css
+++ b/static/css/shim.css
@@ -83,9 +83,7 @@ article blockquote {
 
 figcaption {
     background-color: #282828;
-    margin-left: 1em;
-    margin-right: 1em;
-    margin-bottom: 1em;
+    padding: 1rem;
 }
 
 .logo {
@@ -110,7 +108,6 @@ figcaption {
 .media {
     background-color: #32302f;
     color: #fbf1c7;
-
     margin: auto;
     max-width: 80ch;
     padding: 2ch;
@@ -123,6 +120,19 @@ figcaption {
     min-height: 16px;
 }
 
+@media screen and (min-width: 992px) {
+    picture.hero > img {
+        left: 72.5%;
+        right: 30%;
+        margin-left: -50vw;
+        margin-right: -50vw;
+        width: 100vw;
+        max-width: 1280px;
+        position: relative;
+        overflow: hidden;
+    }
+}
+
 @media (prefers-color-scheme: light) {
     .warning {
         background-color: #fbf1c7;