feat: content page UI updates

components/ContentType/ContentPage/contentPage.module.css

@@ -17,21 +17,37 @@
   max-width: var(--max-width-content);
   margin: 0 auto;
 }
+
 .headerIntro {
   display: grid;
   max-width: var(--max-width-text-block);
   gap: var(--Spacing-x3);
 }
 
-.content {
+.heroContainer {
-  padding: var(--Spacing-x4) var(--Spacing-x2);
+  width: 100%;
-  display: grid;
+  padding-bottom: var(--Spacing-x4);
-  justify-items: center;
+  padding-top: var(--Spacing-x4);
+}
+
+.heroContainer img {
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+  display: block;
+}
+
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--Spacing-x4);
+}
+
+.mainContent {
+  width: 100%;
 }
 
 .innerContent {
   width: 100%;
-  max-width: var(--max-width-content);
 }
 
 @media (min-width: 768px) {
@@ -39,3 +55,13 @@
     gap: var(--Spacing-x3);
   }
 }
+
+@media (min-width: 1367px) {
+  .contentContainer {
+    display: grid;
+    grid-template-columns: var(--max-width-text-block) 1fr;
+    gap: var(--Spacing-x9);
+    max-width: var(--max-width-content);
+    margin: 0 auto;
+  }
+}

components/ContentType/ContentPage/index.tsx

@@ -23,8 +23,6 @@ export default async function ContentPage() {
   return (
     <>
       <section className={styles.contentPage}>
-        {sidebar?.length ? <Sidebar blocks={sidebar} /> : null}
-
         <header className={styles.header}>
           <div className={styles.headerContent}>
             <div className={styles.headerIntro}>
@@ -37,17 +35,24 @@ export default async function ContentPage() {
           </div>
         </header>
 
-        <main className={styles.content}>
+        {hero_image && (
-          <div className={styles.innerContent}>
+          <div className={styles.heroContainer}>
-            {hero_image ? (
+            <Hero
-              <Hero
+              alt={hero_image.meta.alt || hero_image.meta.caption || ""}
-                alt={hero_image.meta.alt || hero_image.meta.caption || ""}
+              src={hero_image.url}
-                src={hero_image.url}
+            />
-              />
-            ) : null}
-            {blocks ? <Blocks blocks={blocks} /> : null}
           </div>
-        </main>
+        )}
+
+        <div className={styles.contentContainer}>
+          <main className={styles.mainContent}>
+            <div className={styles.innerContent}>
+              {blocks ? <Blocks blocks={blocks} /> : null}
+            </div>
+          </main>
+
+          {sidebar?.length ? <Sidebar blocks={sidebar} /> : null}
+        </div>
       </section>
 
       <TrackingSDK pageData={tracking} />

components/JsonToHtml/jsontohtml.module.css

@@ -18,16 +18,12 @@
   color: var(--Primary-Light-On-Surface-Accent);
 }
 
-.li:has(.heart),
-.li:has(.check) {
-  list-style: none;
-}
-
 .li {
   margin-left: var(--Spacing-x3);
 }
 
-.li:has(.heart):before {
+.heart > .li::before,
+.li:has(.heart)::before {
   content: url("/_static/icons/heart.svg");
   position: relative;
   height: 8px;
@@ -36,6 +32,14 @@
   margin-left: calc(var(--Spacing-x3) * -1);
 }
 
+.heart > .li,
+.check > .li,
+.li:has(.check),
+.li:has(.heart) {
+  list-style: none;
+}
+
+.check > .li::before,
 .li:has(.check)::before {
   content: url("/_static/icons/check-ring.svg");
   position: relative;
@@ -59,6 +63,7 @@
   max-width: 100%;
   overflow-x: auto;
 }
+
 @media screen and (min-width: 768px) {
   .ol:has(li:nth-last-child(n + 5)),
   .ul:has(li:nth-last-child(n + 5)) {
@@ -66,3 +71,11 @@
     grid-auto-flow: column;
   }
 }
+
+@container sidebar (max-width: 390px) {
+  .ol,
+  .ul {
+    display: flex;
+    flex-direction: column;
+  }
+}

components/JsonToHtml/renderOptions.tsx

@@ -526,6 +526,15 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
 
+    if (props.className) {
+      if (hasAvailableULFormat(props.className)) {
+        // @ts-ignore:  We want to set css modules classNames even if it does not correspond
+        // to an existing class in the module style sheet. Due to our css modules plugin for
+        // typescript, we cannot do this without the ts-ignore
+        props.className = styles[props.className]
+      }
+    }
+
     // Set the number of rows dynamically to create even rows for each column. We want the li:s
     // to flow with the column, so therefore this is needed.
     let numberOfRows: number | undefined
@@ -538,7 +547,7 @@ export const renderOptions: RenderOptions = {
       <ul
         key={node.uid}
         {...props}
-        className={styles.ul}
+        className={`${styles.ul} ${props.className || ""}`}
         style={
           numberOfRows
             ? {

components/Sidebar/sidebar.module.css

@@ -1,5 +1,7 @@
 .aside {
   display: none;
+  container-name: sidebar;
+  container-type: inline-size;
 }
 
 .content {