Small CSS optimisation (#107)

withastro · Jun 3, 2023 · 2f2d3ee · 2f2d3ee
1 parent 9783377
commit 2f2d3ee
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 27 deletions.
diff --git a/.changeset/plenty-ducks-attend.md b/.changeset/plenty-ducks-attend.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Small CSS size optimisation
diff --git a/packages/starlight/components/FallbackContentNotice.astro b/packages/starlight/components/FallbackContentNotice.astro
@@ -9,7 +9,7 @@ interface Props {
 const t = useTranslations(Astro.props.locale);
 ---
 
-<p>
+<p class="flex">
   <Icon
     name={'warning'}
     size="1.5em"
@@ -25,7 +25,6 @@ const t = useTranslations(Astro.props.locale);
     color: var(--sl-color-orange-high);
     width: max-content;
     max-width: 100%;
-    display: flex;
     align-items: center;
     gap: 0.75em;
     font-size: var(--sl-text-body-sm);

diff --git a/packages/starlight/components/Header.astro b/packages/starlight/components/Header.astro
@@ -12,7 +12,7 @@ interface Props {
 const { locale } = Astro.props;
 ---
 
-<div class="header">
+<div class="header flex">
   <SiteTitle {locale} />
   <Search {locale} />
   <div class="hidden md:flex right-group">
@@ -24,7 +24,6 @@ const { locale } = Astro.props;
 
 <style>
   .header {
-    display: flex;
     gap: var(--sl-nav-gap);
     justify-content: space-between;
     align-items: center;

diff --git a/packages/starlight/components/Hero.astro b/packages/starlight/components/Hero.astro
@@ -27,7 +27,7 @@ const {
         alt={image.alt}
       />
     ) : (
-      image?.html && <div class="hero-html" set:html={image.html} />
+      image?.html && <div class="hero-html flex" set:html={image.html} />
     )
   }
   <div class="flex stack">
@@ -63,10 +63,6 @@ const {
     margin-inline: auto;
   }
 
-  .hero-html {
-    display: flex;
-  }
-
   .stack {
     flex-direction: column;
     gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);

diff --git a/packages/starlight/components/MobileMenuToggle.astro b/packages/starlight/components/MobileMenuToggle.astro
@@ -14,7 +14,7 @@ const t = useTranslations(Astro.props.locale);
     aria-expanded="false"
     aria-label={t('menuButton.accessibleLabel')}
     aria-controls="starlight__sidebar"
-    class="md:hidden"
+    class="flex md:hidden"
   >
     <Icon name="bars" />
   </button>
@@ -64,7 +64,6 @@ const t = useTranslations(Astro.props.locale);
     z-index: var(--sl-z-index-navbar);
     border: 0;
     border-radius: 50%;
-    display: flex;
     width: var(--sl-menu-button-size);
     height: var(--sl-menu-button-size);
     padding: 0.5rem;

diff --git a/packages/starlight/components/PrevNextLinks.astro b/packages/starlight/components/PrevNextLinks.astro
@@ -15,7 +15,7 @@ const isRtl = dir === 'rtl';
 const t = useTranslations(locale);
 ---
 
-<div class="pagination-links" dir={dir}>
+<div class="pagination-links flex" dir={dir}>
   {
     prev && (
       <a href={prev.href} rel="prev">
@@ -44,7 +44,6 @@ const t = useTranslations(locale);
 
 <style>
   .pagination-links {
-    display: flex;
     flex-wrap: wrap;
     gap: 1rem;
   }

diff --git a/packages/starlight/components/Search.astro b/packages/starlight/components/Search.astro
@@ -25,7 +25,7 @@ const t = useTranslations(Astro.props.locale);
   </button>
 
   <dialog style="padding:0" aria-label={t('search.label')}>
-    <div class="dialog-frame">
+    <div class="dialog-frame flex">
       {
         /* TODO: Make the layout of this button flexible to accommodate different word lengths. Currently hard-coded for English: “Cancel” */
       }
@@ -170,7 +170,6 @@ const t = useTranslations(Astro.props.locale);
   }
 
   .dialog-frame {
-    display: flex;
     flex-direction: column;
     gap: 1rem;
     padding: 1.5rem;
@@ -179,7 +178,6 @@ const t = useTranslations(Astro.props.locale);
   button[data-close-modal] {
     position: absolute;
     z-index: 1;
-    display: flex;
     align-items: center;
     align-self: flex-end;
     height: calc(64px * var(--pagefind-ui-scale));
@@ -213,10 +211,6 @@ const t = useTranslations(Astro.props.locale);
       min-height: 15rem;
       max-height: calc(100% - 8rem);
     }
-
-    button[data-close-modal] {
-      display: none;
-    }
   }
 </style>
 

diff --git a/packages/starlight/layout/PageFrame.astro b/packages/starlight/layout/PageFrame.astro
@@ -11,7 +11,7 @@ const { hasSidebar, locale } = Astro.props;
 const t = useTranslations(locale);
 ---
 
-<div class="page">
+<div class="page flex">
   <header class="header"><slot name="header" /></header>
   {
     hasSidebar && (
@@ -30,7 +30,6 @@ const t = useTranslations(locale);
 
 <style>
   .page {
-    display: flex;
     flex-direction: column;
     min-height: 100vh;
   }

diff --git a/packages/starlight/layout/TwoColumnContent.astro b/packages/starlight/layout/TwoColumnContent.astro
@@ -4,7 +4,7 @@ interface Props {
 }
 ---
 
-<div class="container">
+<div class="lg:flex">
   {
     Astro.props.hasToC && (
       <aside class="right-sidebar-container">
@@ -19,10 +19,6 @@ interface Props {
 
 <style>
   @media (min-width: 72rem) {
-    .container {
-      display: flex;
-    }
-
     .right-sidebar-container {
       order: 2;
       position: relative;