@seqera/docusaurus-theme-seqera 1.0.1-next.9 → 1.0.2-next.12

package/lib/index.js

@@ -55,6 +55,8 @@ function themeSeqera(context, options) {
                 './styles/typography.css',
                 './main-styles.css',
                 './styles/api.css',
+                './styles/search.css',
+                './styles/admonition-alerts.css',
             ];
             modules.push(...customCss.map((p) => path_1.default.resolve(context.siteDir, p)));
             return modules;

package/lib/main-styles.css

@@ -61,6 +61,9 @@ Infima is Docusaurus's built in CSS framework.
   --ifm-navbar-height: 4rem;
   --ifm-breadcrumb-item-background-active: rgba(0, 0, 0, 0);
   --ifm-code-color: var(--color-red-600);
+  --ifm-color-warning-contrast-background: #fff8e6;
+
+  --ifm-color-info: var(--color-multiqc-600);
 
   /* remove box shadow variables */
   --ifm-global-shadow-lw: none;
@@ -270,6 +273,7 @@ Infima is Docusaurus's built in CSS framework.
   .container {
     max-width: none;
     margin: 0 auto;
+    padding: 0 1rem;
   }
   .container-sm {
     max-width: 640px;
@@ -319,4 +323,20 @@ Infima is Docusaurus's built in CSS framework.
   .menu__link--active {
     background: none;
   }
-}
+}
+
+.badge {
+  background-color: var(--ifm-badge-background-color);
+  font-size: 70%;
+  font-weight: var(--ifm-font-weight-bold);
+  line-height: 1.2;
+  display: inline-block;
+  border: var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);
+  border-radius: var(--ifm-badge-border-radius);
+  padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
+}
+
+.badge--primary {
+  background-color: var(--color-wave-600);
+  border-color: var(--color-wave-600);
+}

package/lib/styles/admonition-alerts.css

@@ -0,0 +1,69 @@
+
+.alert {
+  box-shadow: none;
+}
+
+.alert--warning {
+  --ifm-alert-background-color: var(--ifm-color-warning-contrast-background);
+  --ifm-alert-background-color-highlight: #ffba0026;
+  --ifm-alert-foreground-color: var(--ifm-color-warning-contrast-foreground);
+  --ifm-alert-border-color: var(--ifm-color-warning-dark);
+}
+
+.theme-admonition-tip,
+.theme-admonition-success {
+  background-color: var(--color-nextflow-100);
+  border-color: var(--color-nextflow-400);
+}
+
+[data-theme='dark'] {
+  .theme-admonition-tip,
+  .theme-admonition-success {
+    background-color: var(--color-nextflow-900);
+    border-color: var(--color-nextflow-600);
+  }
+}
+
+.theme-admonition-note,
+.alert--info {
+  background-color: var(--color-wave-100);
+  border-color: var(--color-wave-300);
+}
+
+[data-theme='dark'] {
+  .theme-admonition-note,
+  .alert--info {
+    background-color: var(--color-wave-900);
+    border-color: var(--color-wave-600);
+  }
+}
+
+.theme-admonition-warning {
+  background-color: var(--color-multiqc-100);
+  border-color: var(--color-multiqc-300);
+}
+[data-theme='dark'] {
+  .theme-admonition-warning {
+    background-color: var(--color-multiqc-900);
+    border-color: var(--color-multiqc-600);
+  }
+}
+
+.theme-admonition-danger {
+  background-color: var(--color-fusion-100);
+  border-color: var(--color-fusion-300);
+}
+
+[data-theme='dark'] {
+  .theme-admonition-danger {
+    background-color: var(--color-fusion-900);
+    border-color: var(--color-fusion-600);
+  }
+}
+
+.alert--secondary {
+  --ifm-alert-background-color: var(--ifm-color-warning-contrast-background);
+  --ifm-alert-background-color-highlight: #ffba0026;
+  --ifm-alert-foreground-color: var(--ifm-color-warning-contrast-foreground);
+  --ifm-alert-border-color: var(--ifm-color-warning-dark);
+}

package/lib/styles/api.css

@@ -7,11 +7,9 @@ Platform API style overrides
 
 /* this is the class that wraps the main platform-api docs, so we nest overrides within  */
 .plugin-id-platform-api {
-  .col {
-    padding: 0 1rem;
-  }
-  .breadcrumbs {
-    padding: 1rem;
+
+  .badge {
+    color: var(--ifm-badge-color);
   }
   .theme-doc-version-badge {
     margin-bottom: 1rem;
@@ -24,10 +22,12 @@ Platform API style overrides
   }
 
   .openapi__method-endpoint-path {
-    margin-left: .5rem;
+    margin-left: 0.5rem;
   }
 
-  pre, summary, code {
+  pre,
+  summary,
+  code {
     h1,
     h2,
     h3,
@@ -39,4 +39,81 @@ Platform API style overrides
       padding: 0;
     }
   }
+  .openapi-right-panel__container {
+     @media (min-width: 997px) {
+      padding-left: 1rem;
+    }
+  }
+  .openapi-left-panel__container {
+    @media (min-width: 997px) {
+      padding-right: 1rem;
+    }
+  }
+
+  .openapi-explorer__form-item-input {
+    background: rgba(0,0,0,.05);
+  }
+  .tabs-container {
+    ul {
+      padding: 0;
+    }
+  }
+
+  .api-method {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: none;
+    .menu__link {
+      &:before {
+        text-transform: uppercase;
+        font-size: 7px;
+        font-weight: 600;
+        display: flex;
+        justify-content: center;
+        flex: none;
+        align-items: center;
+        height: 20px;
+        width: 35px;
+        padding: 3px;
+        text-align: center;
+        margin-right: 5px;
+        color: black;
+      }
+    }
+    .menu__link--active {
+      &:before {
+        background: white;
+      }
+    }
+    &:hover {
+      background: var(--color-blu-100);
+      border-radius: 4px;
+    }
+    &.post {
+      .menu__link:before {
+        content: 'Post';
+        border: 1px solid var(--color-nextflow-600);
+      }
+    }
+    &.get {
+      .menu__link:before {
+        content: 'Get';
+        border: 1px solid var(--color-wave-600);
+      }
+    }
+    &.put {
+      .menu__link:before {
+        content: 'Put';
+        border: 1px solid var(--color-multiqc-600);
+      }
+    }
+    &.delete {
+      .menu__link:before {
+        content: 'Delete';
+        border: 1px solid #dc3545;
+      }
+    }
+  }
 }

package/lib/styles/search.css

@@ -0,0 +1,3 @@
+.search-page-wrapper {
+  padding: 0 1rem;
+}

package/lib/theme/Details/styles.module.css

@@ -1,8 +1,28 @@
-
-
 .details {
   --docusaurus-details-decoration-color: var(--ifm-alert-border-color);
   --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
   margin: 0 0 var(--ifm-spacing-vertical);
   border: 1px solid var(--ifm-alert-border-color);
+  display: block;
+  summary {
+    width: 100%;
+    padding: 0 1rem;
+    &::before {
+      content: '';
+      transform-origin: calc(var(--docusaurus-details-summary-arrow-size) / 2)
+        50%;
+      position: absolute;
+      top: 0.25rem;
+      left: 0px;
+      transform: rotate(0deg);
+      border-width: var(--docusaurus-details-summary-arrow-size);
+      border-style: solid;
+      border-color: transparent transparent transparent black;
+      transition: var(--docusaurus-details-transition);
+    }
+  }
 }
+
+.details[open] > summary::before, .details[data-collapsed="false"] > summary::before {
+    transform: rotate(90deg);
+}

package/lib/theme/DocItem/Layout/index.js

@@ -38,13 +38,13 @@ export default function DocItemLayout({children}) {
     <div className="row">
       <div
         className={clsx(
-          'prose__wrapper mx-auto px-4',
+          'prose__wrapper mx-auto',
           !docTOC.hidden && styles.docItemCol,
         )}>
         <ContentVisibility metadata={metadata} />
         <DocVersionBanner />
         <div className={styles.docItemContainer}>
-          <article className="max-w-3xl">
+          <article className="max-w-3xl md:pr-4">
             <DocBreadcrumbs />
             <DocVersionBadge />
             {docTOC.mobile}

package/lib/theme/DocRoot/Layout/Main/styles.module.css

@@ -3,6 +3,7 @@
 .docMainContainer {
   display: flex;
   width: 100%;
+  padding: 0 1rem;
 }
 
 @media (min-width: 997px) {

package/lib/theme/DocTagDocListPage/index.js

@@ -42,7 +42,9 @@ function usePageTitle(props) {
 function DocItem({doc}) {
   return (
     <article className="margin-vert--lg">
-      <Link to={doc.permalink}>
+      <Link
+        to={doc.permalink}
+        className="underline text-primary text-[1.25rem]">
         <Heading as="h2">{doc.title}</Heading>
       </Link>
       {doc.description && <p>{doc.description}</p>}
@@ -61,28 +63,30 @@ function DocTagDocListPageContent({tag, title}) {
   return (
     <HtmlClassNameProvider
       className={clsx(ThemeClassNames.page.docsTagDocListPage)}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          <main className="col col--8 col--offset-2">
-            {tag.unlisted && <Unlisted />}
-            <header className="margin-bottom--xl">
-              <Heading as="h1">{title}</Heading>
-              {tag.description && <p>{tag.description}</p>}
-              <Link href={tag.allTagsPath}>
-                <Translate
-                  id="theme.tags.tagsPageLink"
-                  description="The label of the link targeting the tag list page">
-                  View all tags
-                </Translate>
-              </Link>
-            </header>
-            <section className="margin-vert--lg">
-              {tag.items.map((doc) => (
-                <DocItem key={doc.id} doc={doc} />
-              ))}
-            </section>
-          </main>
-        </div>
+      <div className="container">
+        <main className="max-w-3xl mx-auto py-10">
+          {tag.unlisted && <Unlisted />}
+          <header className="mb-6">
+            <Heading as="h1" className="text-[2rem]">
+              {title}
+            </Heading>
+            {tag.description && <p>{tag.description}</p>}
+            <Link
+              href={tag.allTagsPath}
+              className="underline text-primary hover:text-nextflow-900">
+              <Translate
+                id="theme.tags.tagsPageLink"
+                description="The label of the link targeting the tag list page">
+                View all tags
+              </Translate>
+            </Link>
+          </header>
+          <section className="margin-vert--lg">
+            {tag.items.map((doc) => (
+              <DocItem key={doc.id} doc={doc} />
+            ))}
+          </section>
+        </main>
       </div>
     </HtmlClassNameProvider>
   );

package/lib/theme/DocTagsListPage/index.js

@@ -23,8 +23,10 @@ function DocTagsListPageContent({tags, title}) {
       className={clsx(ThemeClassNames.page.docsTagsListPage)}>
       <div className="container margin-vert--lg">
         <div className="row">
-          <main className="col col--8 col--offset-2">
-            <Heading as="h1">{title}</Heading>
+          <main className="max-w-3xl mx-auto py-10">
+            <Heading as="h1" className="text-[2rem]">
+              {title}
+            </Heading>
             <TagsListByLetter tags={tags} />
           </main>
         </div>

package/lib/theme/Navbar/MobileSidebar/PrimaryMenu/index.js

@@ -50,7 +50,7 @@ export default function NavbarMobilePrimaryMenu() {
               Resources
             </h3>
 
-            <li className="mb-3">
+            <div className="mb-3">
               <li className="mb-3">
                 <Link
                   className="menu__link"
@@ -65,7 +65,7 @@ export default function NavbarMobilePrimaryMenu() {
                 aria-label="Seqera AI">
                 Seqera AI
               </Link>
-            </li>
+            </div>
             <li className="mb-3">
               <Link
                 className="menu__link"

package/lib/theme/TagsListByLetter/index.js

@@ -6,10 +6,10 @@ import styles from './styles.module.css';
 function TagLetterEntryItem({letterEntry}) {
   return (
     <article>
-      <Heading as="h2" id={letterEntry.letter}>
+      <Heading className="text-[2rem]" as="h2" id={letterEntry.letter}>
         {letterEntry.letter}
       </Heading>
-      <ul className="padding--none">
+      <ul className="pb-8">
         {letterEntry.tags.map((tag) => (
           <li key={tag.permalink} className={styles.tag}>
             <Tag {...tag} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seqera/docusaurus-theme-seqera",
-  "version": "1.0.1-next.9",
+  "version": "1.0.2-next.12",
   "description": "Seqera docs theme for Docusaurus",
   "author": "Seqera docs team <education@seqera.io>",
   "license": "Apache-2.0",
@@ -54,6 +54,7 @@
     "@types/rtlcss": "^3.5.1",
     "daisyui": "^5.5.5",
     "fs-extra": "^11.1.1",
+    "npm-run-all": "^4.1.5",
     "react-test-renderer": "^18.0.0",
     "utility-types": "^3.10.0"
   },

package/src/index.ts

@@ -85,6 +85,8 @@ export default function themeSeqera(
         './styles/typography.css',
         './main-styles.css',
         './styles/api.css',
+        './styles/search.css',
+        './styles/admonition-alerts.css',
       ];
 
       modules.push(...customCss.map((p) => path.resolve(context.siteDir, p)));

package/src/main-styles.css

@@ -61,6 +61,9 @@ Infima is Docusaurus's built in CSS framework.
   --ifm-navbar-height: 4rem;
   --ifm-breadcrumb-item-background-active: rgba(0, 0, 0, 0);
   --ifm-code-color: var(--color-red-600);
+  --ifm-color-warning-contrast-background: #fff8e6;
+
+  --ifm-color-info: var(--color-multiqc-600);
 
   /* remove box shadow variables */
   --ifm-global-shadow-lw: none;
@@ -270,6 +273,7 @@ Infima is Docusaurus's built in CSS framework.
   .container {
     max-width: none;
     margin: 0 auto;
+    padding: 0 1rem;
   }
   .container-sm {
     max-width: 640px;
@@ -319,4 +323,20 @@ Infima is Docusaurus's built in CSS framework.
   .menu__link--active {
     background: none;
   }
-}
+}
+
+.badge {
+  background-color: var(--ifm-badge-background-color);
+  font-size: 70%;
+  font-weight: var(--ifm-font-weight-bold);
+  line-height: 1.2;
+  display: inline-block;
+  border: var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);
+  border-radius: var(--ifm-badge-border-radius);
+  padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
+}
+
+.badge--primary {
+  background-color: var(--color-wave-600);
+  border-color: var(--color-wave-600);
+}

package/src/styles/admonition-alerts.css

@@ -0,0 +1,69 @@
+
+.alert {
+  box-shadow: none;
+}
+
+.alert--warning {
+  --ifm-alert-background-color: var(--ifm-color-warning-contrast-background);
+  --ifm-alert-background-color-highlight: #ffba0026;
+  --ifm-alert-foreground-color: var(--ifm-color-warning-contrast-foreground);
+  --ifm-alert-border-color: var(--ifm-color-warning-dark);
+}
+
+.theme-admonition-tip,
+.theme-admonition-success {
+  background-color: var(--color-nextflow-100);
+  border-color: var(--color-nextflow-400);
+}
+
+[data-theme='dark'] {
+  .theme-admonition-tip,
+  .theme-admonition-success {
+    background-color: var(--color-nextflow-900);
+    border-color: var(--color-nextflow-600);
+  }
+}
+
+.theme-admonition-note,
+.alert--info {
+  background-color: var(--color-wave-100);
+  border-color: var(--color-wave-300);
+}
+
+[data-theme='dark'] {
+  .theme-admonition-note,
+  .alert--info {
+    background-color: var(--color-wave-900);
+    border-color: var(--color-wave-600);
+  }
+}
+
+.theme-admonition-warning {
+  background-color: var(--color-multiqc-100);
+  border-color: var(--color-multiqc-300);
+}
+[data-theme='dark'] {
+  .theme-admonition-warning {
+    background-color: var(--color-multiqc-900);
+    border-color: var(--color-multiqc-600);
+  }
+}
+
+.theme-admonition-danger {
+  background-color: var(--color-fusion-100);
+  border-color: var(--color-fusion-300);
+}
+
+[data-theme='dark'] {
+  .theme-admonition-danger {
+    background-color: var(--color-fusion-900);
+    border-color: var(--color-fusion-600);
+  }
+}
+
+.alert--secondary {
+  --ifm-alert-background-color: var(--ifm-color-warning-contrast-background);
+  --ifm-alert-background-color-highlight: #ffba0026;
+  --ifm-alert-foreground-color: var(--ifm-color-warning-contrast-foreground);
+  --ifm-alert-border-color: var(--ifm-color-warning-dark);
+}

package/src/styles/api.css

@@ -7,11 +7,9 @@ Platform API style overrides
 
 /* this is the class that wraps the main platform-api docs, so we nest overrides within  */
 .plugin-id-platform-api {
-  .col {
-    padding: 0 1rem;
-  }
-  .breadcrumbs {
-    padding: 1rem;
+
+  .badge {
+    color: var(--ifm-badge-color);
   }
   .theme-doc-version-badge {
     margin-bottom: 1rem;
@@ -24,10 +22,12 @@ Platform API style overrides
   }
 
   .openapi__method-endpoint-path {
-    margin-left: .5rem;
+    margin-left: 0.5rem;
   }
 
-  pre, summary, code {
+  pre,
+  summary,
+  code {
     h1,
     h2,
     h3,
@@ -39,4 +39,81 @@ Platform API style overrides
       padding: 0;
     }
   }
+  .openapi-right-panel__container {
+     @media (min-width: 997px) {
+      padding-left: 1rem;
+    }
+  }
+  .openapi-left-panel__container {
+    @media (min-width: 997px) {
+      padding-right: 1rem;
+    }
+  }
+
+  .openapi-explorer__form-item-input {
+    background: rgba(0,0,0,.05);
+  }
+  .tabs-container {
+    ul {
+      padding: 0;
+    }
+  }
+
+  .api-method {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: none;
+    .menu__link {
+      &:before {
+        text-transform: uppercase;
+        font-size: 7px;
+        font-weight: 600;
+        display: flex;
+        justify-content: center;
+        flex: none;
+        align-items: center;
+        height: 20px;
+        width: 35px;
+        padding: 3px;
+        text-align: center;
+        margin-right: 5px;
+        color: black;
+      }
+    }
+    .menu__link--active {
+      &:before {
+        background: white;
+      }
+    }
+    &:hover {
+      background: var(--color-blu-100);
+      border-radius: 4px;
+    }
+    &.post {
+      .menu__link:before {
+        content: 'Post';
+        border: 1px solid var(--color-nextflow-600);
+      }
+    }
+    &.get {
+      .menu__link:before {
+        content: 'Get';
+        border: 1px solid var(--color-wave-600);
+      }
+    }
+    &.put {
+      .menu__link:before {
+        content: 'Put';
+        border: 1px solid var(--color-multiqc-600);
+      }
+    }
+    &.delete {
+      .menu__link:before {
+        content: 'Delete';
+        border: 1px solid #dc3545;
+      }
+    }
+  }
 }

package/src/styles/search.css

@@ -0,0 +1,3 @@
+.search-page-wrapper {
+  padding: 0 1rem;
+}

package/src/theme/Details/styles.module.css

@@ -1,8 +1,28 @@
-
-
 .details {
   --docusaurus-details-decoration-color: var(--ifm-alert-border-color);
   --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
   margin: 0 0 var(--ifm-spacing-vertical);
   border: 1px solid var(--ifm-alert-border-color);
+  display: block;
+  summary {
+    width: 100%;
+    padding: 0 1rem;
+    &::before {
+      content: '';
+      transform-origin: calc(var(--docusaurus-details-summary-arrow-size) / 2)
+        50%;
+      position: absolute;
+      top: 0.25rem;
+      left: 0px;
+      transform: rotate(0deg);
+      border-width: var(--docusaurus-details-summary-arrow-size);
+      border-style: solid;
+      border-color: transparent transparent transparent black;
+      transition: var(--docusaurus-details-transition);
+    }
+  }
 }
+
+.details[open] > summary::before, .details[data-collapsed="false"] > summary::before {
+    transform: rotate(90deg);
+}

package/src/theme/DocItem/Layout/index.tsx

@@ -46,11 +46,11 @@ export default function DocItemLayout({children}: Props): ReactNode {
   const {metadata} = useDoc();
   return (
     <div className="row">
-      <div className={clsx('prose__wrapper mx-auto px-4', !docTOC.hidden && styles.docItemCol)}>
+      <div className={clsx('prose__wrapper mx-auto', !docTOC.hidden && styles.docItemCol)}>
         <ContentVisibility metadata={metadata} />
         <DocVersionBanner />
         <div className={styles.docItemContainer}>
-          <article className="max-w-3xl">
+          <article className="max-w-3xl md:pr-4">
             <DocBreadcrumbs />
             <DocVersionBadge />
             {docTOC.mobile}

package/src/theme/DocRoot/Layout/Main/styles.module.css

@@ -3,6 +3,7 @@
 .docMainContainer {
   display: flex;
   width: 100%;
+  padding: 0 1rem;
 }
 
 @media (min-width: 997px) {

package/src/theme/DocTagDocListPage/index.tsx

@@ -48,7 +48,7 @@ function usePageTitle(props: Props): string {
 function DocItem({doc}: {doc: Props['tag']['items'][number]}): ReactNode {
   return (
     <article className="margin-vert--lg">
-      <Link to={doc.permalink}>
+      <Link to={doc.permalink} className="underline text-primary text-[1.25rem]">
         <Heading as="h2">{doc.title}</Heading>
       </Link>
       {doc.description && <p>{doc.description}</p>}
@@ -75,14 +75,14 @@ function DocTagDocListPageContent({
   return (
     <HtmlClassNameProvider
       className={clsx(ThemeClassNames.page.docsTagDocListPage)}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          <main className="col col--8 col--offset-2">
+      <div className="container">
+
+          <main className="max-w-3xl mx-auto py-10">
             {tag.unlisted && <Unlisted />}
-            <header className="margin-bottom--xl">
-              <Heading as="h1">{title}</Heading>
+            <header className="mb-6">
+              <Heading as="h1" className="text-[2rem]">{title}</Heading>
               {tag.description && <p>{tag.description}</p>}
-              <Link href={tag.allTagsPath}>
+              <Link href={tag.allTagsPath} className="underline text-primary hover:text-nextflow-900">
                 <Translate
                   id="theme.tags.tagsPageLink"
                   description="The label of the link targeting the tag list page">
@@ -96,7 +96,7 @@ function DocTagDocListPageContent({
               ))}
             </section>
           </main>
-        </div>
+     
       </div>
     </HtmlClassNameProvider>
   );

package/src/theme/DocTagsListPage/index.tsx

@@ -31,8 +31,8 @@ function DocTagsListPageContent({
       className={clsx(ThemeClassNames.page.docsTagsListPage)}>
       <div className="container margin-vert--lg">
         <div className="row">
-          <main className="col col--8 col--offset-2">
-            <Heading as="h1">{title}</Heading>
+          <main className="max-w-3xl mx-auto py-10">
+            <Heading as="h1" className="text-[2rem]">{title}</Heading>
             <TagsListByLetter tags={tags} />
           </main>
         </div>

package/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx

@@ -54,7 +54,7 @@ export default function NavbarMobilePrimaryMenu(): ReactNode {
               Resources
             </h3>
 
-            <li className="mb-3">
+            <div className="mb-3">
               <li className="mb-3">
                 <Link
                   className="menu__link"
@@ -69,7 +69,7 @@ export default function NavbarMobilePrimaryMenu(): ReactNode {
                 aria-label="Seqera AI">
                 Seqera AI
               </Link>
-            </li>
+            </div>
             <li className="mb-3">
               <Link
                 className="menu__link"

package/src/theme/TagsListByLetter/index.tsx

@@ -10,10 +10,10 @@ import styles from './styles.module.css';
 function TagLetterEntryItem({letterEntry}: {letterEntry: TagLetterEntry}) {
   return (
     <article>
-      <Heading as="h2" id={letterEntry.letter}>
+      <Heading className="text-[2rem]" as="h2" id={letterEntry.letter}>
         {letterEntry.letter}
       </Heading>
-      <ul className="padding--none">
+      <ul className="pb-8">
         {letterEntry.tags.map((tag) => (
           <li key={tag.permalink} className={styles.tag}>
             <Tag {...tag} />