From 216602e3a482fd2261c1acc9bc7c0dc62dd493b6 Mon Sep 17 00:00:00 2001 From: Xe Iaso Date: Thu, 9 Mar 2023 22:57:17 -0500 Subject: Revert "css hack to make images wider than the article" This reverts commit cb5b539ccc4b8e78b474cbf5bdc25baa1fcb6617. --- blog/site-update-better-css.markdown | 2 -- lib/xesite_templates/src/lib.rs | 4 ++-- static/css/shim.css | 18 ++++-------------- 3 files changed, 6 insertions(+), 18 deletions(-) diff --git a/blog/site-update-better-css.markdown b/blog/site-update-better-css.markdown index 1844182..787b6ae 100644 --- a/blog/site-update-better-css.markdown +++ b/blog/site-update-better-css.markdown @@ -38,7 +38,6 @@ there is more of a border: When a conversation has mutiple parts, they will get smaller and look like this: -
Have you ever been far even as decided to use even go want to do look more like? What. @@ -50,7 +49,6 @@ 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. Is that supposed to be English???? -
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 e3f5704..413aa90 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, ai: Option) -> 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.hero style="margin:0" { + picture 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 8781792..716490a 100644 --- a/static/css/shim.css +++ b/static/css/shim.css @@ -83,7 +83,9 @@ article blockquote { figcaption { background-color: #282828; - padding: 1rem; + margin-left: 1em; + margin-right: 1em; + margin-bottom: 1em; } .logo { @@ -108,6 +110,7 @@ figcaption { .media { background-color: #32302f; color: #fbf1c7; + margin: auto; max-width: 80ch; padding: 2ch; @@ -120,19 +123,6 @@ 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; -- cgit v1.2.3