docs style cleanup

dmno-dev · Sep 9, 2024 · b5f023b · b5f023b
1 parent ec45581
commit b5f023b
Show file tree

Hide file tree

Showing 11 changed files with 171 additions and 148 deletions.
diff --git a/packages/docs-site/src/components/CTABlock.astro b/packages/docs-site/src/components/CTABlock.astro
@@ -10,7 +10,7 @@ const { text, href, command } = Astro.props as Props;
 
 ---
 
-<div class="cta-wrap">
+<div class="cta-block">
   { href && text && 
     <a href={href} class="button">{text}</a>
   }
@@ -24,12 +24,14 @@ const { text, href, command } = Astro.props as Props;
 </div>
 
 <style lang="less">
-  .cta-wrap {
+  .cta-block {
     display: flex;
+    flex-wrap: wrap;
     // flex-direction: column;
     justify-content: center;
     gap: 1rem;
-    margin: 2rem 0;
+
+
     @media (min-width: 50rem) {
       flex-direction: row;
       gap: 2rem;

diff --git a/packages/docs-site/src/components/CustomStarlightHeader.astro b/packages/docs-site/src/components/CustomStarlightHeader.astro
@@ -44,14 +44,16 @@ const shouldRenderSearch = !isTopLevel;
       <span class="logo-font logo-dmno-text"> DMNO </span>
     </a>
   </div>
-  {isTopLevel ? 
+
+  <HeaderNav />
+  <!-- {isTopLevel ? 
     <HeaderNavMarketing
       navItems={topLevelPageNames} 
     /> :
     <HeaderNav />
-  }
+  } -->
 
-  {shouldRenderSearch && <Search {...Astro.props} />}
+  {shouldRenderSearch ? <Search {...Astro.props} /> : <div/>}
   <div class="sl-hidden md:sl-flex right-group">
     <SocialIcons />
     <ThemeSelect client:load />
@@ -78,6 +80,7 @@ const shouldRenderSearch = !isTopLevel;
     color: white;
     text-decoration: none;
     white-space: nowrap;
+    padding-right: 3rem;
 
     font-size: 22px;
     @media (min-width: 50rem) {

diff --git a/packages/docs-site/src/components/FeatureBlock.astro b/packages/docs-site/src/components/FeatureBlock.astro
diff --git a/packages/docs-site/src/components/Hero.astro b/packages/docs-site/src/components/Hero.astro
@@ -1,42 +1,29 @@
 ---
 
 interface Props{
-  heading: string;
-  subheading: string;
+  heading?: string;
+  subheading?: string;
   image?: string;
 }
 
 const { heading, subheading } = Astro.props as Props;
 ---
 
 <div class="hero">
-  <h1>{heading}</h1>
-  <h2>{subheading}</h2>
+  <h1><slot name="heading">{heading}</slot></h1>
+  <h2><slot name="subheading">{subheading}</slot></h2>
 </div>
 
-<style lang="less">
+<style>
   .hero {
     color: var(--color-text-full-shade);
     padding-bottom: 2rem;
+    padding: 3rem  2rem;
     display: flex;
-    // flex-direction: column;
-
-    @media (min-width: 50rem) {
-      gap: 2rem;
-      padding-top: 4rem;
-      padding-bottom: 5rem;
-      display: grid;
-      // grid-template-columns: 1fr 1fr;
-    }
-
-    @media (min-width: 72rem) {
-      padding-left: 4rem;
-      padding-right: 4rem;          
-      gap: 4rem;
-    }
-
-    @media (min-width: 100rem) {
-      // grid-template-columns: 4fr 5fr;
+    flex-direction: column;
+    gap: 1rem;
+    @container (max-width: 800px) { 
+      padding: 2rem 0rem;
     }
 
     .hero__logo {
@@ -50,8 +37,6 @@ const { heading, subheading } = Astro.props as Props;
       }
     }
     .hero__text {
-      display: flex;
-      flex-direction: column;
       justify-content: center;
     }
 
@@ -63,25 +48,26 @@ const { heading, subheading } = Astro.props as Props;
       bottom: 50%;
       left: 0%;
       right: 0;
-      opacity: .2;
-
+      opacity: .2; 
     }
   }
   h1 {
-    display: none;  
+    font-size: 1.6rem;
+    line-height: 1.3em;
     @media (min-width: 50rem) {
       font-size: 4rem;
       display: block;
+      line-height: 1em;
     }
-    line-height: .8em;
+
   }
   h2 {
+    font-size: 1.2rem;
+    line-height: 1.4em;
+    font-weight: 500;
     @media (min-width: 50rem) {
       font-size: 1.5rem;
     }
 
-    line-height: 1.4em;
-    margin: 1.5rem 0;
-    font-weight: 500;
   }
 </style>
diff --git a/packages/docs-site/src/components/LandingPageSection.astro b/packages/docs-site/src/components/LandingPageSection.astro
@@ -0,0 +1,41 @@
+---
+import CTABlock from './CTABlock.astro';
+
+interface Props {
+  title?: string,
+  imgPath?: string,
+  imgAlt?: string,
+  imgDescription?: string,
+  ctaLink?: string,
+  ctaText?: string,
+}
+const { title, imgPath, imgAlt, imgDescription, ctaLink } = Astro.props as Props;
+---
+
+<section class="feature-block">
+  { title && <h2>{title}</h2> }
+  { imgPath && <figure>
+    <img src={imgPath} alt={imgAlt}>
+    <figcaption class="description">{imgDescription}</figcaption>
+  </figure>}
+
+  <slot />
+
+  { ctaLink && <CTABlock
+    text="Read more ->"
+    href={ctaLink}
+  />}
+</section>
+
+<style>
+.feature-block {
+  padding: 3rem  2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  @container (max-width: 800px) { 
+    padding: 2rem 0rem;
+  }
+}
+</style>
diff --git a/packages/docs-site/src/components/VideoBlock.astro b/packages/docs-site/src/components/VideoBlock.astro
@@ -2,31 +2,34 @@
 const { muxId } = Astro.props;
 ---
 
-<div class="video-container">
+<div class="video-block">
   <mux-player
     playback-id={muxId}
     autoplay
     loop
     muted
-  ></mux-player>
+  />
 </div>
 <script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
 
 
 <style>
-  /* center, 80% width */
-  .video-container {
-    margin: 0 auto;
-    display: flex;
-    justify-content: center;
-  }
-  @media (min-width: 640px) {
+  .video-block {
+    padding: 0;
     mux-player {
+      margin: 0;
+      padding: 0;
+      --mute-button: none;
+      display: block;
       border: none;
       margin: 0 auto;
-      width: 90%;
       aspect-ratio: 16/10;
       --mute-button: none;
+
     }
+
+    /* margin: 0 auto; */
+    /* display: flex; */
+    /* justify-content: center; */
   }
 </style>
diff --git a/packages/docs-site/src/components/layouts/LandingPage.astro b/packages/docs-site/src/components/layouts/LandingPage.astro
@@ -24,12 +24,11 @@ const {
 
 ---
 <StarlightPage frontmatter={{
-  title: '👋',
-  description: description,
-  tableOfContents: showToC,
-}}
-  hasSidebar={showSidebar}
-
+    title: '👋',
+    description: description,
+    tableOfContents: showToC,
+  }}
+  hasSidebar={true}
 >
   <div class="homepage not-content">
 
@@ -62,21 +61,30 @@ const {
     head:has(meta[content="👋"]) ~ body .content-panel:has(h1#_top) ~ .content-panel {
       border-top: none;
     }
-    :root {
-      --sl-content-width: 75rem;
-    }
 
     .main-frame {
       min-height: 100vh;
-
     }
   </style>
 
+  { /* hiding the sidebar another way, so we can keep the burger menu on mobile */ }
+  { showSidebar === false && <style is:global>
+    @media (min-width: 50rem) {
+      #starlight__sidebar {
+        display: none !important;
+      }
+      :root { 
+        --sl-sidebar-width: 0px;
+      }
+    }
+  </style>}
+
 <style lang="less">
 
   :global(.main-frame) {
   }
   .homepage {
+    container-type: inline-size;
     .hero {
       color: var(--color-text-full-shade);
       padding-bottom: 2rem;

diff --git a/packages/docs-site/src/pages/docs/index.astro b/packages/docs-site/src/pages/docs/index.astro
@@ -90,13 +90,9 @@ import NodeLogoSvg from '~icons/logos/nodejs-icon?raw';
     head:has(meta[content="👋"]) ~ body .content-panel:has(h1#_top) ~ .content-panel {
       border-top: none;
     }
-    :root {
-      --sl-content-width: 75rem;
-    }
 
     .main-frame {
       min-height: 100vh;
-
     }
   </style>