feat: implement new event page design (#205)

acid-info · Apr 9, 2024 · bd7819f · bd7819f
1 parent 3330a7a
commit bd7819f
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/packages/docusaurus-playground/root-pages/events/test.mdx b/packages/docusaurus-playground/root-pages/events/test.mdx
@@ -18,7 +18,7 @@ import {
 } from '@site/src/components/mdx'
 
 <head>
-  <body className="events" />
+  <body className="events event-details" />
 </head>
 
 <Box top={{ xs: 8 }}>

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.scss
@@ -35,7 +35,7 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
-  border-top: 1px solid rgba(var(--lsd-border-primary), 0.2);
+  border-top: 1px solid rgb(var(--lsd-border-primary));
   padding: 16px 16px 16px 0;
   width: 100%;
 

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.tsx
@@ -32,21 +32,25 @@ export const EventCard: React.FC<EventCardProps> = ({
         alt={title ?? 'event thumbnail'}
         className="mdx-event-card__thumbnail"
       />
-      <Typography component="h5" variant="h5" className="mdx-event-card__title">
+      <Typography
+        component="h5"
+        variant="subtitle1"
+        className="mdx-event-card__title"
+      >
         {title}
       </Typography>
       <div className="mdx-event-card__row">
         <div className="mdx-event-card__info">
-          <Typography className="mdx-event-card__label" variant="body2">
+          <Typography className="mdx-event-card__label" variant="body3">
             Date
           </Typography>
-          <Typography variant="body2">{date}</Typography>
+          <Typography variant="body3">{date}</Typography>
         </div>
         <div className="mdx-event-card__info">
-          <Typography className="mdx-event-card__label" variant="body2">
+          <Typography className="mdx-event-card__label" variant="body3">
             Location
           </Typography>
-          <Typography variant="body2">{location}</Typography>
+          <Typography variant="body3">{location}</Typography>
         </div>
       </div>
     </a>

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/EventInfo.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/EventInfo.scss
@@ -4,15 +4,14 @@
 .mdx-event-info__container {
   display: flex;
   flex-direction: column;
-  padding: 16px;
+  padding: 16px 24px 0 0;
   gap: 16px;
   flex: 1 0 0;
   align-self: stretch;
   box-sizing: border-box;
   height: 100%;
 
   border-top: 1px solid rgba(var(--lsd-border-primary));
-  background: rgba(var(--lsd-theme-primary), 0.05);
 }
 
 .mdx-event-info__label {

diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss
@@ -828,6 +828,18 @@ main[itemtype*='Blog'] {
   }
 }
 
+.event-details {
+  @include utils.responsive('lg', 'up') {
+    & > div .main-wrapper main > div > div {
+      grid-template-columns: unset !important;
+    }
+  }
+
+  & > div .main-wrapper main {
+    grid-column: 1 / 17 !important;
+  }
+}
+
 @include utils.responsive('sm', 'down') {
   :root {
     --ifm-spacing-vertical: var(--ifm-global-spacing);