From 8ae5e17a3de84dd1871927b671a5a594302f981f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= <mimecuvalo@gmail.com>
Date: Sun, 28 Apr 2024 09:42:01 +0100
Subject: [PATCH] css cleanup for blockquotes, images, sidebar nav

---
 components/ItemWrapper.tsx     | 14 ++++++--------
 components/content/SiteMap.tsx |  2 ++
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/ItemWrapper.tsx b/components/ItemWrapper.tsx
index 61a815c..0e38939 100644
--- a/components/ItemWrapper.tsx
+++ b/components/ItemWrapper.tsx
@@ -19,19 +19,16 @@ const StyledItemWrapper = styled('div', { label: 'ItemWrapper' })`
 
   // HTML Normalization below, used for Content and ContentRemote
   & p {
-    margin-block-start: ${(props) => props.theme.spacing(0.5)};
-    margin-block-end: ${(props) => props.theme.spacing(0.5)};
-    margin-inline-start: 0;
-    margin-inline-end: 0;
+    margin-block: ${(props) => props.theme.spacing(0.5)};
+    margin-inline: 0;
   }
 
   & ul,
   & ol,
   & blockquote {
-    margin-block-start: ${(props) => props.theme.spacing(0.5)};
-    margin-block-end: ${(props) => props.theme.spacing(0.5)};
-    margin-inline-start: 0;
-    margin-inline-end: 0;
+    margin-block: ${(props) => props.theme.spacing(0.5)};
+    margin-inline: 0;
+    padding-left: ${(props) => props.theme.spacing(2)};
   }
 
   ${(props) => props.theme.breakpoints.down('sm')} {
@@ -84,6 +81,7 @@ const StyledItemWrapper = styled('div', { label: 'ItemWrapper' })`
 
   & img:not([alt='thumbnail']) {
     max-height: calc(100vh - 50px);
+    height: auto;
   }
 
   ${(props) => props.theme.breakpoints.down('md')} {
diff --git a/components/content/SiteMap.tsx b/components/content/SiteMap.tsx
index 9bc2b34..70bf71c 100644
--- a/components/content/SiteMap.tsx
+++ b/components/content/SiteMap.tsx
@@ -20,6 +20,8 @@ import { Drawer, useMediaQuery } from '@mui/material';
 export const SITE_MAP_WIDTH = 175;
 
 const Nav = styled('nav', transientOptions)`
+  position: sticky;
+  top: ${(props) => props.theme.spacing(1)};
   height: calc(100vh - ${(props) => props.theme.spacing(1)} * 2);
   width: ${SITE_MAP_WIDTH}px;
   overflow: auto;