style: update styles for responsive events page

2026-08-05 13:46:35 -07:00 · 2024-02-05 22:25:05 +09:00
parent 39c86a093d
commit 308a4a6037
14 changed files with 121 additions and 24 deletions
@@ -82,7 +82,11 @@ List of all Waku events
 />

 <Box top={{ xs: 152 }}>
-  <Grid xs={{ cols: 1, gap: '1rem' }} md={{ cols: 2 }}>
+  <Grid
+    xs={{ cols: 1, gap: '1rem' }}
+    md={{ cols: 2 }}
+    className="events-cta-sections"
+  >
    <Grid.Item xs={1}>
      <EventCTASection
        title="Logos Network State"
@@ -13,6 +13,7 @@ import {
  EventProfileList,
  EventCTA,
  EventCTASection,
+  EventHeader,
  Grid,
 } from '@site/src/components/mdx'

@@ -22,13 +23,13 @@ import {

 <Box top={{ xs: 8 }}>
  <EventBanner src="/img/event-banner.png" />
+  <EventHeader 
+    title="Meet Waku: Uncompromising Web3 Communication at Scale"
+    description="We are a family of robust, censorship-resistant communication protocols designed to enable privacy-focused messaging for web3 apps."
+  />

-# Meet Waku: Uncompromising Web3 Communication at Scale
-
-We are a family of robust, censorship-resistant communication protocols designed to enable privacy-focused messaging for web3 apps.
-
-<Box top={{ xs: 32 }}>
-  <Grid xs={{ cols: 1, gap: '1rem' }} md={{ cols: 2 }}>
+  <Box top={{ xs: 32 }}>
+  <Grid xs={{ cols: 2, gap: '1rem' }} md={{ cols: 2 }}>
    <Grid.Item xs={1}>
      <EventInfo 
        label="Date"
@@ -109,7 +110,11 @@ Yet, it doesn't have to be this way. Advances in cryptography, peer-to-peer netw
 </Box>

 <Box top={{ xs: 120 }}>
-  <Grid xs={{ cols: 1, gap: '1rem' }} md={{ cols: 2 }}>
+  <Grid
+    xs={{ cols: 1, gap: '1rem' }}
+    md={{ cols: 2 }}
+    className="events-cta-sections"
+  >
    <Grid.Item xs={1}>
      <EventCTASection
        title="Logos Network State"
@@ -21,5 +21,10 @@
    display: flex;
    flex-direction: column;
    gap: 32px;
+
+    span {
+      font-size: 14px !important;
+      line-height: 20px !important;
+    }
  }
 }
@@ -49,19 +49,17 @@
 }

@include utils.responsive('sm', 'down') {
-  .mdx-event-cta-section__input-fields {
-    margin-bottom: 16px;
-  }
+  .mdx-event-cta-section__container {
+    .mdx-event-cta-section__input-fields {
+      margin-bottom: 16px;
+    }

-  .mdx-event-cta-section__cta {
-    margin-top: 8px;
-  }
+    .mdx-event-cta-section__cta {
+      margin-top: 8px;
+    }

-  .mdx-grid__content {
-    gap: 64px !important;
-  }
-
-  .mdx-event-cta-section__form {
-    margin-bottom: -24px;
+    .mdx-event-cta-section__form {
+      margin-bottom: -24px;
+    }
  }
 }
@@ -21,6 +21,10 @@
  border: 1px solid rgba(var(--lsd-border-primary), 0.2);
 }

+.mdx-event-card__label {
+  opacity: 0.6;
+}
+
 .mdx-event-card__title {
  &:hover {
    text-decoration: underline !important;
@@ -34,4 +38,8 @@
  border-top: 1px solid rgba(var(--lsd-border-primary), 0.2);
  padding: 16px 16px 16px 0;
  width: 100%;
+
+  * {
+    white-space: pre-wrap;
+  }
 }
@@ -37,11 +37,15 @@ export const EventCard: React.FC<EventCardProps> = ({
      </Typography>
      <div className="mdx-event-card__row">
        <div className="mdx-event-card__info">
-          <Typography variant="body2">Date</Typography>
+          <Typography className="mdx-event-card__label" variant="body2">
+            Date
+          </Typography>
          <Typography variant="body2">{date}</Typography>
        </div>
        <div className="mdx-event-card__info">
-          <Typography variant="body2">Location</Typography>
+          <Typography className="mdx-event-card__label" variant="body2">
+            Location
+          </Typography>
          <Typography variant="body2">{location}</Typography>
        </div>
      </div>
@@ -0,0 +1,26 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-event-header__container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  h1 {
+    margin-bottom: 0 !important;
+  }
+}
+
+@include utils.responsive('sm', 'down') {
+  .mdx-event-header__container {
+    h1 {
+      font-size: 24px !important;
+      line-height: 32px !important;
+    }
+
+    p {
+      font-size: 14px !important;
+      line-height: 20px !important;
+    }
+  }
+}
@@ -0,0 +1,28 @@
+import React from 'react'
+import './EventHeader.scss'
+import { Typography } from '@acid-info/lsd-react'
+
+export type EventHeaderProps = React.HTMLProps<HTMLAnchorElement> & {
+  title: string
+  description: string
+}
+
+export const EventHeader: React.FC<EventHeaderProps> = ({
+  title,
+  description,
+}) => {
+  return (
+    <div className="mdx-event-header__container">
+      <Typography
+        variant="h1"
+        component="h1"
+        className="mdx-event-header__label"
+      >
+        {title}
+      </Typography>
+      <Typography variant="subtitle1" className="mdx-event-header__content">
+        {description}
+      </Typography>
+    </div>
+  )
+}
@@ -0,0 +1 @@
+export * from './EventHeader'
@@ -4,7 +4,6 @@
 .mdx-event-info__container {
  display: flex;
  flex-direction: column;
-  gap: 16px;
  padding: 16px;
  gap: 16px;
  flex: 1 0 0;
@@ -15,3 +14,7 @@
  border-top: 1px solid rgba(var(--lsd-border-primary));
  background: rgba(var(--lsd-theme-primary), 0.05);
 }
+
+.mdx-event-info__label {
+  opacity: 0.6;
+}
@@ -6,3 +6,11 @@
    margin-bottom: 16px;
  }
 }
+
+@include utils.responsive('sm', 'down') {
+  .mdx-event-profile-list__container {
+    .mdx-grid > .mdx-grid__content {
+      gap: 24px !important;
+    }
+  }
+}
@@ -29,7 +29,7 @@ export const EventProfileList: React.FC<EventProfileListProps> = ({
        <Typography variant="subtitle1">{description}</Typography>
      )}
      <Box top={40}>
-        <Grid xs={{ cols: 1, gap: '80px 16px' }} md={{ cols: 3 }}>
+        <Grid xs={{ cols: 1, gap: '16px' }} md={{ cols: 3 }}>
          {data.map((event, index) => (
            <Grid.Item xs={1} key={index}>
              <EventProfile {...event} />
@@ -38,3 +38,4 @@ export * from './EventProfile'
 export * from './EventProfileList'
 export * from './EventCTA'
 export * from './EventCTASection'
+export * from './EventHeader'
@@ -851,6 +851,12 @@ main[itemtype*='Blog'] {
  .navbar__left {
    display: flex;
  }
+
+  .events-cta-sections {
+    .mdx-grid__content {
+      gap: 64px !important;
+    }
+  }
 }

@include utils.responsive('lg', 'up') {