css hack to make images wider than the article

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

1 files changed, 14 insertions, 4 deletions

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;