Changeset, final component changes and finish website

withstudiocms · Dec 8, 2024 · 1798833 · 1798833
1 parent b541a99
commit 1798833
Show file tree

Hide file tree

Showing 13 changed files with 291 additions and 64 deletions.
diff --git a/.changeset/shiny-parents-vanish.md b/.changeset/shiny-parents-vanish.md
@@ -0,0 +1,5 @@
+---
+"@studiocms/ui": minor
+---
+
+Added a new footer component, made accessibility improvements and preparations for first stable release
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -8,7 +8,6 @@
   "editor.gotoLocation.multipleDefinitions": "goto",
   "cSpell.words": [
     "astrojs",
-    "catppuccin",
     "createtoast",
     "dismissable",
     "fira",

diff --git a/docs/astro.config.mts b/docs/astro.config.mts
@@ -59,14 +59,14 @@ export default defineConfig({
 			},
 			defaultLocale: 'root',
 			locales,
-			social: {
-				github: 'https://github.com/withstudiocms/studiocms',
-				discord: 'https://chat.studiocms.dev',
-				youtube: 'https://www.youtube.com/@StudioCMS',
-				'x.com': 'https://x.com/withstudiocms',
-				blueSky: 'https://bsky.app/profile/studiocms.dev',
-				patreon: 'https://patreon.com/StudioCMS',
-			},
+			// social: {
+			// 	github: 'https://github.com/withstudiocms/studiocms',
+			// 	discord: 'https://chat.studiocms.dev',
+			// 	youtube: 'https://www.youtube.com/@StudioCMS',
+			// 	'x.com': 'https://x.com/withstudiocms',
+			// 	blueSky: 'https://bsky.app/profile/studiocms.dev',
+			// 	patreon: 'https://patreon.com/StudioCMS',
+			// },
 			customCss: [
 				'@studiocms/ui/css/global.css',
 				'./src/styles/sponsorcolors.css',

diff --git a/docs/src/components/landing/EcosystemSection.astro b/docs/src/components/landing/EcosystemSection.astro
@@ -7,8 +7,8 @@ import SwordsIcon from '~/assets/swords.svg';
 
 <section class="ecosystem not-content">
     <h2 class="ecosystem-heading">
-        <LogoAdaptive height={48} width={45.76} />
-        <span>Part of the StudioCMS ecosystem</span>
+        <LogoAdaptive class="studiocms-logo-header-icon" height={48} width={45.76} />
+        <span>Part of the StudioCMS Ecosystem</span>
     </h2>
     <div class="ecosystem-benefits">
         <div class="benefit-card">
@@ -58,14 +58,21 @@ import SwordsIcon from '~/assets/swords.svg';
         padding-bottom: 4rem !important;
     }
 
+    @media screen and (max-width: 1500px) {
+        .ecosystem {
+            padding: 2rem;
+        }
+    }
+
     .ecosystem-benefits {
         display: flex;
         flex-direction: row;
         gap: 2rem;
+        flex-wrap: wrap;
     }
 
     .benefit-card {
-        width: 100%;
+        width: calc((100% / 3) - (4rem / 3));
         padding: 2rem;
         border-radius: 1rem;
         background-color: hsl(var(--background-step-1));
@@ -78,4 +85,31 @@ import SwordsIcon from '~/assets/swords.svg';
         font-size: 1.5em;
         font-weight: 600;
     }
+
+    @media screen and (max-width: 1100px) {
+        .benefit-card {
+            width: calc((100% / 2) - (2rem / 2));
+        }
+
+        .benefit-card:last-of-type {
+            width: 100%;
+        }
+    }
+
+    @media screen and (max-width: 640px) {
+        .benefit-card {
+            width: 100%;
+        }
+    }
+
+    @media screen and (max-width: 655px) {
+        .ecosystem-heading {
+            flex-direction: column;
+        }
+
+        .studiocms-logo-header-icon {
+            width: 96px;
+            height: 91.52px;
+        }
+    }
 </style>
diff --git a/docs/src/components/landing/HeroSection.astro b/docs/src/components/landing/HeroSection.astro
@@ -68,8 +68,10 @@ import GitHubIcon from '~/components/icons/GitHubIcon.astro';
    </div>
    <div class="hero-text">
       <h1>Why install another Framework just for UI?</h1>
-      <p>StudioCMS UI is an Astro-native UI library.</p>
-      <p>All the components you need, without the bloat of React.</p>
+      <div class="hero-desc">
+         <p>StudioCMS UI is an Astro-native UI library.</p>
+         <p>All the components you need, without the bloat of React.</p>
+      </div>
    </div>
    <div class="theme">
       <ThemeToggle>
@@ -165,10 +167,10 @@ import GitHubIcon from '~/components/icons/GitHubIcon.astro';
       width: 100%;
       margin-top: 6rem !important;
       padding: 0 10vw;
-      height: calc(100vh - 16rem);
+      min-height: calc(100vh - 16rem);
       position: relative;
       display: grid;
-      grid-template-columns: repeat(8, 1ft);
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
       gap: 2rem;
       grid-template-areas: 
          "checkbox  input     input      toggle     modal    modal    selects  selects"
@@ -179,6 +181,92 @@ import GitHubIcon from '~/components/icons/GitHubIcon.astro';
          "toast     toast     textarea   textarea   textarea textarea dropdown dropdown";
    }
 
+   @media screen and (max-width: 1500px) {
+      .hero {
+         padding: 0 2rem;
+      }
+   }
+
+   @media screen and (max-width: 1280px) {
+      .hero {
+         grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+         grid-template-areas: 
+            "checkbox  input     input      toggle     selects  selects"
+            "hero-text hero-text hero-text  hero-text  selects  selects"
+            "hero-text hero-text hero-text  hero-text  divider  divider"
+            "docs-cta  docs-cta  github-cta github-cta radio    radio"
+            "user      user      textarea   textarea   radio    radio"
+            "toast     toast     textarea   textarea   dropdown dropdown"
+            "modal     modal     button     button     theme    theme";
+      }
+   }
+
+   @media screen and (max-width: 1100px) {
+      .hero {
+         grid-template-columns: 1fr 1fr 1fr 1fr;
+         grid-template-areas: 
+            "input     input     checkbox   checkbox"
+            "hero-text hero-text hero-text  hero-text"
+            "hero-text hero-text hero-text  hero-text"
+            "docs-cta  docs-cta  github-cta github-cta"
+            "user      user      textarea   textarea"
+            "toast     toast     textarea   textarea"
+            "divider   divider   divider    divider"
+            "theme     theme     radio      radio"
+            "selects   selects   radio      radio"
+            "selects   selects   toggle     toggle"
+            "modal     modal     dropdown   dropdown"
+            "button    button    dropdown   dropdown";
+      }
+   }
+
+   @media screen and (max-width: 640px) {
+      .hero {
+         grid-template-columns: 1fr 1fr 1fr 1fr;
+         grid-template-areas: 
+            "input     input     checkbox   checkbox"
+            "hero-text hero-text hero-text  hero-text"
+            "hero-text hero-text hero-text  hero-text"
+            "docs-cta  docs-cta  github-cta github-cta"
+            "textarea  textarea  textarea   textarea"
+            "toast     toast     user       user"
+            "divider   divider   divider    divider"
+            "theme     theme     radio      radio"
+            "toggle    toggle    radio      radio"
+            "selects   selects   selects    selects"
+            "modal     modal     dropdown   dropdown"
+            "button    button    dropdown   dropdown";
+      }
+
+      .hero > div {
+         padding: 1rem !important;
+      }
+
+      .hero > div.selects {
+         gap: 1rem;
+      }
+   }
+
+   @media screen and (max-width: 520px) {
+      .hero {
+         grid-template-columns: 1fr 1fr 1fr 1fr;
+         grid-template-areas: 
+            "input      input      checkbox   checkbox"
+            "hero-text  hero-text  hero-text  hero-text"
+            "hero-text  hero-text  hero-text  hero-text"
+            "docs-cta   docs-cta   docs-cta   docs-cta"
+            "github-cta github-cta github-cta github-cta"
+            "textarea   textarea   textarea   textarea"
+            "toast      toast      user       user"
+            "divider    divider    divider    divider"
+            "theme      theme      radio      radio"
+            "selects    selects    radio      radio"
+            "selects    selects    toggle     toggle"
+            "modal      modal      dropdown   dropdown"
+            "button     button     dropdown   dropdown";
+      }
+   }
+
    .text {
       font-size: 1.5em;
       text-align: center;
@@ -226,10 +314,22 @@ import GitHubIcon from '~/components/icons/GitHubIcon.astro';
    }
 
    .hero .hero-text {
+      display: flex !important;
+      flex-direction: column;
       grid-area: hero-text;
-      font-size: 1.5em;
       display: block;
       opacity: 1;
+      align-items: flex-start;
+      justify-content: space-evenly;
+   }
+
+   .hero .hero-text h1 {
+      font-size: 3em;
+      line-height: 1.25;
+   }
+
+   .hero .hero-text .hero-desc {
+      font-size: 1.25em;
    }
 
    .hero .theme {

diff --git a/docs/src/components/landing/PageHeader.astro b/docs/src/components/landing/PageHeader.astro
@@ -28,7 +28,7 @@ const { icon, title, subtitle } = Astro.props;
   .page-header-icon {
     transform: scale(2);
     transform-origin: top left;
-    margin-bottom: .5rem;
+    margin-bottom: 1.5rem;
   }
 
   h2 {

diff --git a/docs/src/components/landing/ShowcaseSection.astro b/docs/src/components/landing/ShowcaseSection.astro
@@ -102,17 +102,19 @@ const splitCodeBasedOnComment = (code: string): string => {
     }
 </script>
 <style>
-    .showcase {
-        padding: 0 10vw;
-    }
-
     .showcase {
         margin-top: 4rem !important;
         padding: 4rem 10vw;
         width: 100%;
         background: hsl(var(--background-step-1));
     }
 
+    @media screen and (max-width: 1500px) {
+        .showcase {
+            padding: 2rem;
+        }
+    }
+
     .showcase-tabs {
         display: flex;
         flex-direction: row;
@@ -143,7 +145,7 @@ const splitCodeBasedOnComment = (code: string): string => {
 
         /* Default colorway */
 
-        background-color: none;
+        background-color: transparent;
         color: hsl(var(--text-normal));
 
         min-width: fit-content;
@@ -163,11 +165,11 @@ const splitCodeBasedOnComment = (code: string): string => {
     }
 
     .showcase-tab:hover {
-        background-color: hsla(var(--default-flat-active));
+        background-color: hsla(var(--default-flat-active)) !important;
     }
 
     .showcase-tab.active {
-        background-color: hsl(var(--primary-flat-active));
+        background-color: hsla(var(--primary-flat-active)) !important;
     }
 
     .preview-code-container {
@@ -195,6 +197,16 @@ const splitCodeBasedOnComment = (code: string): string => {
         align-items: center;
         justify-content: center;
     }
+
+    @media screen and (max-width: 1100px) {
+        .preview-code-container {
+            flex-direction: column;
+        }
+
+        .preview-code-container > div {
+            max-width: 100%;
+        }
+    }
 </style>
 <style is:global>
     .showcase header {

diff --git a/docs/src/components/landing/SocialProofCard.astro b/docs/src/components/landing/SocialProofCard.astro
@@ -15,7 +15,7 @@ interface Props {
 
 const { avatar, name, handle, message, image } = Astro.props;
 ---
-<div class="social-proof-card">
+<div class="social-proof-card" class:list={[image && "two-spaces"]}>
   <div class="social-proof-author">
     <Image class="social-proof-author-avatar" src={avatar} alt={handle} width={40} height={40} />
     <div class="social-proof-author-text">

diff --git a/docs/src/components/landing/SocialProofSection.astro b/docs/src/components/landing/SocialProofSection.astro
@@ -42,6 +42,7 @@ for (let i = 0; i < socialProofEntries.length; i += chunkSize) {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 2rem;
+        grid-auto-flow: row dense;
     }
 
     .social-proof-col {
@@ -61,4 +62,30 @@ for (let i = 0; i < socialProofEntries.length; i += chunkSize) {
     .social-proof {
         padding: 0 10vw;
     }
+
+    @media screen and (max-width: 1500px) {
+        .social-proof {
+            padding: 0 2rem;
+        }
+    }
+
+    @media screen and (max-width: 1100px) {
+        .social-proof-grid {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        .social-proof-col:last-of-type {
+            display: none;
+        }
+    }
+
+    @media screen and (max-width: 640px) {
+        .social-proof-grid {
+            grid-template-columns: repeat(1, 1fr);
+        }
+
+        .social-proof-col:not(:first-of-type) {
+            display: none;
+        }
+    }
 </style>
diff --git a/docs/src/content/socialproof/adam-matthiesen.json b/docs/src/content/socialproof/adam-matthiesen.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../.astro/collections/socialproof.schema.json",
+  "avatar": "/socialproof/louis-escher.jpg",
+  "name": "Adam Matthiesen",
+  "handle": "@dontrememebr.dev",
+  "message": "Iaaaaaaaaaaaaaaaaaaaaaaaaa"
+}