@penn-libraries/web 0.3.0 → 1.0.0-dev.0

package/dist/web/web.css

@@ -1,91 +1,532 @@
 @import url("https://use.typekit.net/gbh8cmg.css");
 
 :root {
-  --color-penn-red: #990000;
-  --color-penn-blue: #011F5B;
+  --pl-color-penn-red: #990000;
+  --pl-color-penn-blue: #011F5B;
+  --pl-color-gray-dark: #2D3545;
+  --pl-color-gray: #595F6A;
+  --pl-color-gray-light: #F5F5F6;
+  --pl-color-gray-blue-light: #EEEEF4;
+  --pl-color-white: #FFFFFF;
+  --pl-color-blue: #0E5696;
+  --pl-color-blue-light: #D4E4F2;
+  --pl-color-green: #267434;
+  --pl-color-green-light: #F1F7E1;
+  --pl-color-orange: #BD4718;
+  --pl-color-orange-light: #FEEDDD;
+  --pl-color-purple: #80317F;
+  --pl-color-purple-light: #F2DFED;
+  --pl-color-bg-gradient-1: linear-gradient(45deg, rgba(200, 219, 232, 0.8), rgba(239, 210, 215, 0.8));
+  --pl-color-bg-gradient-2: linear-gradient(45deg, #dbe9f5, #feefdf);
+  --pl-font-size: 16px;
+  --pl-font-sans-serif: proxima-nova, system-ui, sans-serif;
+  --pl-font-serif: cormorant-garamond, serif;
+  --pl-link-text-underline-offset: 0.2em;
+  --pl-link-text-decoration-thickness: 1px;
+  --pl-link-hover-text-decoration-thickness: 2px;
+  --pl-viewport-max-width: 1440px;
+  --pl-viewport-margins-gutter: 1em;
+  --pl-color-fg-default: var(--pl-color-gray-dark);
+  --pl-color-fg-subtle: var(--pl-color-gray);
+  --pl-color-fg-subtle-on-emphasis: var(--pl-color-gray-light);
+  --pl-color-fg-on-emphasis: var(--pl-color-white);
+  --pl-color-fg-accent: var(--pl-color-blue);
+  --pl-color-fg-success: var(--pl-color-green);
+  --pl-color-fg-attention: var(--pl-color-orange);
+  --pl-color-fg-info: var(--pl-color-purple);
+  --pl-color-bg-default: var(--pl-color-white);
+  --pl-color-bg-subtle: var(--pl-color-gray-light);
+  --pl-color-bg-subtle-brand: var(--pl-color-gray-blue-light);
+  --pl-color-bg-emphasis: var(--pl-color-gray-dark);
+  --pl-color-bg-accent: var(--pl-color-blue-light);
+  --pl-color-bg-success: var(--pl-color-green-light);
+  --pl-color-bg-attention: var(--pl-color-orange-light);
+  --pl-color-bg-info: var(--pl-color-purple-light);
+  --pl-color-bg-accent-emphasis: var(--pl-color-blue);
+  --pl-color-bg-success-emphasis: var(--pl-color-green);
+  --pl-color-bg-attention-emphasis: var(--pl-color-orange);
+  --pl-color-bg-info-emphasis: var(--pl-color-purple);
+  --pl-font-family: var(--pl-font-sans-serif);
+  --pl-link-text-underline-offset: 0.2em;
+  --pl-link-text-decoration-thickness: 1px;
+  --pl-link-hover-text-decoration-thickness: 2px;
 
-  --color-gray-dark: #2D3545;
-  --color-gray: #595F6A;
-  --color-gray-light: #F5F5F6;
+  /* Font size tokens */
+  --pl-font-size-5xl: 2.75rem;
+  --pl-font-size-4xl: 2.25rem;
+  --pl-font-size-3xl: 2rem;
+  --pl-font-size-2xl: 1.5rem;
+  --pl-font-size-xl: 1.25rem;
+  --pl-font-size-lg: 1.125rem;
+  --pl-font-size-base: 1rem;
+  --pl-font-size-sm: 0.875rem;
+  --pl-font-size-xs: 0.75rem;
+  
+  /* Spacing tokens */
+  --pl-space-2xs: 0.125rem;
+  --pl-space-xs: 0.25rem;
+  --pl-space-sm: 0.5rem;
+  --pl-space-md: 0.75rem;
+  --pl-space-base: 1rem;
+  --pl-space-lg: 1.5rem;
+  --pl-space-xl: 2rem;
+  --pl-space-2xl: 3rem;
+  --pl-space-3xl: 4rem;
+
+  /* Border radius tokens */
+  --pl-border-radius-subtle: 0.125rem;
+  --pl-border-radius-base: 1rem;
+
+  /* Focus box shadow tokens */
+  --pl-focus-box-shadow: 0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-fg-default);
+}
+
+@media (min-width: 768px) {
+  :root {
+    --pl-viewport-margins-gutter: 3em;
+  }
+}
+
+.pl-viewport-margins {
+  max-width: var(--pl-viewport-max-width);
+  margin: 0 auto;
+  padding: 0 var(--pl-viewport-margins-gutter, 1rem);
+  width: 100%;
+}
+
+/*
+  Prevents a flash of unstyled content (FOUC) while custom elements are loading.
+  Ensures that elements are only visible once they're fully defined and ready to be displayed.
+*/
+:not(:defined) {
+  visibility: hidden;
+}
+
+/*
+  Reset
+*/
+
+:where(.pl-reset) {
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--pl-color-fg-default);
+  accent-color: var(--pl-color-fg-accent);
+
+  /* Use a more-intuitive box-sizing model */
+  & :is(*, *::before, *::after) {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  /* Improve media defaults */
+  & :is(img, picture, video, canvas, svg) {
+    display: block;
+    max-width: 100%;
+  }
+
+  /* Inherit fonts for form controls */
+  & :is(input, button, textarea, select) {
+    font: var(--pl-font-family);
+  }
+
+  /* Avoid text overflows */
+  & :is(p, h1, h2, h3, h4, h5, h6) {
+    overflow-wrap: break-word;
+  }
+
+  /* Improve line wrapping */
+  & p {
+    text-wrap: pretty;
+  }
+  & :is(h1, h2, h3, h4, h5, h6) {
+    text-wrap: balance;
+  }
+
+  /* Link styles */
+  & a {
+    color: var(--pl-color-fg-accent);
+    text-decoration: underline;
+    text-underline-offset: var(--pl-link-text-underline-offset);
+    text-decoration-thickness: var(--pl-link-text-decoration-thickness);
+    font-weight: 500;
+
+    &:hover {
+      text-decoration-thickness: 3px;
+    }
+  }
+}
 
-  --color-gray-blue-light: #EEEEF4;
+/*
+  Typeset
+*/
+
+:where(.pl-typeset) {
+  font-family: var(--pl-font-family);
   
-  --color-white: #FFFFFF;
+  & :is(p, .pl-p) {
+    font-family: var(--pl-font-family);
+  }
+
+  & :is(h1, .pl-h1, h2, .pl-h2) {
+    font-family: var(--pl-font-serif);
+  }
+
+  & :is(h1, .pl-h1, h2, .pl-h2, h3, .pl-h3, h4, .pl-h4, h5, .pl-h5, h6, .pl-h6) {
+    font-weight: 600;
+  }
 
-  --color-blue: #0E5696;
-  --color-blue-light: #D4E4F2;
+  & *+:is(h2,h3,h4,h5,h6) {
+    margin-block-start: var(--pl-space-xl);
+  }
 
-  --color-green: #267434;
-  --color-green-light: #F1F7E1;
+  & :is(h1, .pl-h1, h2, .pl-h2) {
+    font-weight: 600;
+    line-height: 1.125;
+    font-family: var(--pl-font-serif);
+    color: var(--pl-color-penn-blue);
+    position: relative;
 
-  --color-orange: #BD4718;
-  --color-orange-light: #FEEDDD;
+    &::after {
+      bottom: -0.25rem;
+      content: "";
+      display: block;
+      height: 4px;
+      opacity: 1;
+      position: absolute;
+    }
+  }
 
-  --color-purple: #80317F;
-  --color-purple-light: #F2DFED;
+  & :is(h1, .pl-h1) {
+    font-size: var(--pl-font-size-5xl);
+    margin-bottom: 0.5em;
+    margin-top: 0;
 
-  --color-bg-gradient-1: linear-gradient(45deg, rgba(200, 219, 232, 0.8), rgba(239, 210, 215, 0.8));
-  --color-bg-gradient-2: linear-gradient(45deg, #dbe9f5, #feefdf);
+    &::after {
+      background: var(--pl-color-penn-red);
+      width: 2.25rem;
+    }
+  }
 
-  --font-size: 16px;
-  --font-sans-serif: proxima-nova, system-ui, sans-serif;
-  --font-serif: cormorant-garamond, serif;
+  & :is(h2, .pl-h2) {
+    font-size: var(--pl-font-size-3xl);
+    margin-bottom: 0.75em;
 
-  --link-text-underline-offset: 0.2em;
-  --link-text-decoration-thickness: 1px;
-  --link-hover-text-decoration-thickness: 2px;
+    &::after {
+      background: #d6d6dc;
+      width: 2.25rem;
+    }
+  }
 
-  --max-width: 1280px;
-  --viewport-margins-gutter: 1em;
+  & :is(h3, .pl-h3) {
+    font-size: var(--pl-font-size-xl);
+    font-family: var(--pl-font-sans-serif);
+    color: var(--pl-color-fg-default);
+    margin-bottom: var(--pl-space-base);
 
-  @media (min-width: 1000px) {
-    --viewport-margins-gutter: 3em;
+    &:after {
+      content: none;
+    }
   }
 }
 
-html {
-  --color-fg-default: var(--color-gray-dark);
-  --color-fg-subtle: var(--color-gray);
+/* 
+  Spacing
+*/
+
+/* Margin utilities */
+.pl-margin-0 { margin: 0; }
+.pl-margin-2xs { margin: var(--pl-space-2xs); }
+.pl-margin-xs { margin: var(--pl-space-xs); }
+.pl-margin-sm { margin: var(--pl-space-sm); }
+.pl-margin-base { margin: var(--pl-space-base); }
+.pl-margin-lg { margin: var(--pl-space-lg); }
+.pl-margin-xl { margin: var(--pl-space-xl); }
+.pl-margin-2xl { margin: var(--pl-space-2xl); }
+.pl-margin-3xl { margin: var(--pl-space-3xl); }
+
+/* Margin top */
+.pl-margin-t-0 { margin-top: 0; }
+.pl-margin-t-2xs { margin-top: var(--pl-space-2xs); }
+.pl-margin-t-xs { margin-top: var(--pl-space-xs); }
+.pl-margin-t-sm { margin-top: var(--pl-space-sm); }
+.pl-margin-t-base { margin-top: var(--pl-space-base); }
+.pl-margin-t-lg { margin-top: var(--pl-space-lg); }
+.pl-margin-t-xl { margin-top: var(--pl-space-xl); }
+.pl-margin-t-2xl { margin-top: var(--pl-space-2xl); }
+.pl-margin-t-3xl { margin-top: var(--pl-space-3xl); }
+
+/* Margin bottom */
+.pl-margin-b-0 { margin-bottom: 0; }
+.pl-margin-b-2xs { margin-bottom: var(--pl-space-2xs); }
+.pl-margin-b-xs { margin-bottom: var(--pl-space-xs); }
+.pl-margin-b-sm { margin-bottom: var(--pl-space-sm); }
+.pl-margin-b-base { margin-bottom: var(--pl-space-base); }
+.pl-margin-b-lg { margin-bottom: var(--pl-space-lg); }
+.pl-margin-b-xl { margin-bottom: var(--pl-space-xl); }
+.pl-margin-b-2xl { margin-bottom: var(--pl-space-2xl); }
+.pl-margin-b-3xl { margin-bottom: var(--pl-space-3xl); }
+
+/* Margin left */
+.pl-margin-l-0 { margin-left: 0; }
+.pl-margin-l-2xs { margin-left: var(--pl-space-2xs); }
+.pl-margin-l-xs { margin-left: var(--pl-space-xs); }
+.pl-margin-l-sm { margin-left: var(--pl-space-sm); }
+.pl-margin-l-base { margin-left: var(--pl-space-base); }
+.pl-margin-l-lg { margin-left: var(--pl-space-lg); }
+.pl-margin-l-xl { margin-left: var(--pl-space-xl); }
+.pl-margin-l-2xl { margin-left: var(--pl-space-2xl); }
+.pl-margin-l-3xl { margin-left: var(--pl-space-3xl); }
+
+/* Margin right */
+.pl-margin-r-0 { margin-right: 0; }
+.pl-margin-r-2xs { margin-right: var(--pl-space-2xs); }
+.pl-margin-r-xs { margin-right: var(--pl-space-xs); }
+.pl-margin-r-sm { margin-right: var(--pl-space-sm); }
+.pl-margin-r-base { margin-right: var(--pl-space-base); }
+.pl-margin-r-lg { margin-right: var(--pl-space-lg); }
+.pl-margin-r-xl { margin-right: var(--pl-space-xl); }
+.pl-margin-r-2xl { margin-right: var(--pl-space-2xl); }
+.pl-margin-r-3xl { margin-right: var(--pl-space-3xl); }
+
+/* Margin x (left and right) */
+.pl-margin-x-0 { margin-left: 0; margin-right: 0; }
+.pl-margin-x-2xs { margin-left: var(--pl-space-2xs); margin-right: var(--pl-space-2xs); }
+.pl-margin-x-xs { margin-left: var(--pl-space-xs); margin-right: var(--pl-space-xs); }
+.pl-margin-x-sm { margin-left: var(--pl-space-sm); margin-right: var(--pl-space-sm); }
+.pl-margin-x-base { margin-left: var(--pl-space-base); margin-right: var(--pl-space-base); }
+.pl-margin-x-lg { margin-left: var(--pl-space-lg); margin-right: var(--pl-space-lg); }
+.pl-margin-x-xl { margin-left: var(--pl-space-xl); margin-right: var(--pl-space-xl); }
+.pl-margin-x-2xl { margin-left: var(--pl-space-2xl); margin-right: var(--pl-space-2xl); }
+.pl-margin-x-3xl { margin-left: var(--pl-space-3xl); margin-right: var(--pl-space-3xl); }
+
+/* Margin y (top and bottom) */
+.pl-margin-y-0 { margin-top: 0; margin-bottom: 0; }
+.pl-margin-y-2xs { margin-top: var(--pl-space-2xs); margin-bottom: var(--pl-space-2xs); }
+.pl-margin-y-xs { margin-top: var(--pl-space-xs); margin-bottom: var(--pl-space-xs); }
+.pl-margin-y-sm { margin-top: var(--pl-space-sm); margin-bottom: var(--pl-space-sm); }
+.pl-margin-y-base { margin-top: var(--pl-space-base); margin-bottom: var(--pl-space-base); }
+.pl-margin-y-lg { margin-top: var(--pl-space-lg); margin-bottom: var(--pl-space-lg); }
+.pl-margin-y-xl { margin-top: var(--pl-space-xl); margin-bottom: var(--pl-space-xl); }
+.pl-margin-y-2xl { margin-top: var(--pl-space-2xl); margin-bottom: var(--pl-space-2xl); }
+.pl-margin-y-3xl { margin-top: var(--pl-space-3xl); margin-bottom: var(--pl-space-3xl); }
+
+/* Padding utilities */
+.pl-padding-0 { padding: 0; }
+.pl-padding-2xs { padding: var(--pl-space-2xs); }
+.pl-padding-xs { padding: var(--pl-space-xs); }
+.pl-padding-sm { padding: var(--pl-space-sm); }
+.pl-padding-base { padding: var(--pl-space-base); }
+.pl-padding-lg { padding: var(--pl-space-lg); }
+.pl-padding-xl { padding: var(--pl-space-xl); }
+.pl-padding-2xl { padding: var(--pl-space-2xl); }
+.pl-padding-3xl { padding: var(--pl-space-3xl); }
+
+/* Padding top */
+.pl-padding-t-0 { padding-top: 0; }
+.pl-padding-t-2xs { padding-top: var(--pl-space-2xs); }
+.pl-padding-t-xs { padding-top: var(--pl-space-xs); }
+.pl-padding-t-sm { padding-top: var(--pl-space-sm); }
+.pl-padding-t-base { padding-top: var(--pl-space-base); }
+.pl-padding-t-lg { padding-top: var(--pl-space-lg); }
+.pl-padding-t-xl { padding-top: var(--pl-space-xl); }
+.pl-padding-t-2xl { padding-top: var(--pl-space-2xl); }
+.pl-padding-t-3xl { padding-top: var(--pl-space-3xl); }
 
-  --color-fg-subtle-on-emphasis: var(--color-gray-light);
-  --color-fg-on-emphasis: var(--color-white);
+/* Padding bottom */
+.pl-padding-b-0 { padding-bottom: 0; }
+.pl-padding-b-2xs { padding-bottom: var(--pl-space-2xs); }
+.pl-padding-b-xs { padding-bottom: var(--pl-space-xs); }
+.pl-padding-b-sm { padding-bottom: var(--pl-space-sm); }
+.pl-padding-b-base { padding-bottom: var(--pl-space-base); }
+.pl-padding-b-lg { padding-bottom: var(--pl-space-lg); }
+.pl-padding-b-xl { padding-bottom: var(--pl-space-xl); }
+.pl-padding-b-2xl { padding-bottom: var(--pl-space-2xl); }
+.pl-padding-b-3xl { padding-bottom: var(--pl-space-3xl); }
 
-  --color-fg-accent: var(--color-blue);
-  --color-fg-success: var(--color-green);
-  --color-fg-attention: var(--color-orange);
-  --color-fg-info: var(--color-purple);
+/* Padding left */
+.pl-padding-l-0 { padding-left: 0; }
+.pl-padding-l-2xs { padding-left: var(--pl-space-2xs); }
+.pl-padding-l-xs { padding-left: var(--pl-space-xs); }
+.pl-padding-l-sm { padding-left: var(--pl-space-sm); }
+.pl-padding-l-base { padding-left: var(--pl-space-base); }
+.pl-padding-l-lg { padding-left: var(--pl-space-lg); }
+.pl-padding-l-xl { padding-left: var(--pl-space-xl); }
+.pl-padding-l-2xl { padding-left: var(--pl-space-2xl); }
+.pl-padding-l-3xl { padding-left: var(--pl-space-3xl); }
 
-  --color-bg-default: var(--color-white);
-  --color-bg-subtle: var(--color-gray-light);
-  --color-bg-subtle-brand: var(--color-gray-blue-light);
-  --color-bg-emphasis: var(--color-gray-dark);
+/* Padding right */
+.pl-padding-r-0 { padding-right: 0; }
+.pl-padding-r-2xs { padding-right: var(--pl-space-2xs); }
+.pl-padding-r-xs { padding-right: var(--pl-space-xs); }
+.pl-padding-r-sm { padding-right: var(--pl-space-sm); }
+.pl-padding-r-base { padding-right: var(--pl-space-base); }
+.pl-padding-r-lg { padding-right: var(--pl-space-lg); }
+.pl-padding-r-xl { padding-right: var(--pl-space-xl); }
+.pl-padding-r-2xl { padding-right: var(--pl-space-2xl); }
+.pl-padding-r-3xl { padding-right: var(--pl-space-3xl); }
 
-  --color-bg-accent: var(--color-blue-light);
-  --color-bg-success: var(--color-green-light);
-  --color-bg-attention: var(--color-orange-light);
-  --color-bg-info: var(--color-purple-light);
+/* Padding x (left and right) */
+.pl-padding-x-0 { padding-left: 0; padding-right: 0; }
+.pl-padding-x-2xs { padding-left: var(--pl-space-2xs); padding-right: var(--pl-space-2xs); }
+.pl-padding-x-xs { padding-left: var(--pl-space-xs); padding-right: var(--pl-space-xs); }
+.pl-padding-x-sm { padding-left: var(--pl-space-sm); padding-right: var(--pl-space-sm); }
+.pl-padding-x-base { padding-left: var(--pl-space-base); padding-right: var(--pl-space-base); }
+.pl-padding-x-lg { padding-left: var(--pl-space-lg); padding-right: var(--pl-space-lg); }
+.pl-padding-x-xl { padding-left: var(--pl-space-xl); padding-right: var(--pl-space-xl); }
+.pl-padding-x-2xl { padding-left: var(--pl-space-2xl); padding-right: var(--pl-space-2xl); }
+.pl-padding-x-3xl { padding-left: var(--pl-space-3xl); padding-right: var(--pl-space-3xl); }
 
-  --color-bg-accent-emphasis: var(--color-blue);
-  --color-bg-success-emphasis: var(--color-green);
-  --color-bg-attention-emphasis: var(--color-orange);
-  --color-bg-info-emphasis: var(--color-purple);
+/* Padding y (top and bottom) */
+.pl-padding-y-0 { padding-top: 0; padding-bottom: 0; }
+.pl-padding-y-2xs { padding-top: var(--pl-space-2xs); padding-bottom: var(--pl-space-2xs); }
+.pl-padding-y-xs { padding-top: var(--pl-space-xs); padding-bottom: var(--pl-space-xs); }
+.pl-padding-y-sm { padding-top: var(--pl-space-sm); padding-bottom: var(--pl-space-sm); }
+.pl-padding-y-base { padding-top: var(--pl-space-base); padding-bottom: var(--pl-space-base); }
+.pl-padding-y-lg { padding-top: var(--pl-space-lg); padding-bottom: var(--pl-space-lg); }
+.pl-padding-y-xl { padding-top: var(--pl-space-xl); padding-bottom: var(--pl-space-xl); }
+.pl-padding-y-2xl { padding-top: var(--pl-space-2xl); padding-bottom: var(--pl-space-2xl); }
+.pl-padding-y-3xl { padding-top: var(--pl-space-3xl); padding-bottom: var(--pl-space-3xl); }
 
-  --link-visited-color: var(--color-purple);
+/* Gap utilities for flexbox and grid */
+.pl-gap-0 { gap: 0; }
+.pl-gap-2xs { gap: var(--pl-space-2xs); }
+.pl-gap-xs { gap: var(--pl-space-xs); }
+.pl-gap-sm { gap: var(--pl-space-sm); }
+.pl-gap-base { gap: var(--pl-space-base); }
+.pl-gap-lg { gap: var(--pl-space-lg); }
+.pl-gap-xl { gap: var(--pl-space-xl); }
+.pl-gap-2xl { gap: var(--pl-space-2xl); }
+.pl-gap-3xl { gap: var(--pl-space-3xl); } 
 
-  --font-family: var(--font-sans-serif);
+/*
+  Font size
+*/
+
+.pl-font-size-xs {
+  font-size: var(--pl-font-size-xs);
 }
 
-.viewport-margins {
-  max-width: var(--max-width);
-  margin: 0 auto;
-  padding: 0 var(--viewport-margins-gutter, 1rem);
-  width: 100%;
+.pl-font-size-sm {
+  font-size: var(--pl-font-size-sm);
+}
+
+.pl-font-size-base {
+  font-size: var(--pl-font-size-base);
+}
+
+.pl-font-size-lg {
+  font-size: var(--pl-font-size-lg);
+}
+
+.pl-font-size-xl {
+  font-size: var(--pl-font-size-xl);
+}
+
+.pl-font-size-2xl {
+  font-size: var(--pl-font-size-2xl);
+}
+
+.pl-font-size-3xl {
+  font-size: var(--pl-font-size-3xl);
+}
+
+.pl-font-size-4xl {
+  font-size: var(--pl-font-size-4xl);
+}
+
+.pl-font-size-5xl {
+  font-size: var(--pl-font-size-5xl);
 }
 
 /*
-  Prevents a flash of unstyled content (FOUC) while custom elements are loading.
-  Ensures that elements are only visible once they're fully defined and ready to be displayed.
+  Line length
 */
-:not(:defined) {
-  visibility: hidden;
-}
+
+.pl-line-length {
+  max-width: 60ch;
+}
+
+/*
+  Border radius
+*/
+
+.pl-border-radius-subtle {
+  border-radius: var(--pl-border-radius-subtle);
+}
+
+.pl-border-radius {
+  border-radius: var(--pl-border-radius-base);
+}
+
+/*
+  Definition list
+*/
+
+.pl-dl:not(.pl-dl--inline) {
+  display: grid;
+  grid-row-gap: 0.25rem;
+  
+  & dt {
+    font-weight: 600;
+    margin-top: 0.5rem;
+  }
+}
+
+@media (min-width: 720px) {
+  .pl-dl:not(.pl-dl--inline)  {
+    grid-template-columns: 12rem 1fr;
+
+    & dt {
+      grid-column: 1 / 2;
+      margin-top: 0;
+      padding-right: 1rem;
+    }
+
+    & dd {
+      grid-column: 2 / 3;
+      margin-bottom: 0;
+    }
+  }
+}
+
+@media (min-width: 720px) {
+  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type),
+  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type) + dd {
+    padding-top: 0.75rem;
+    margin-top: 0.5rem;
+    border-top: solid 1px var(--pl-color-bg-subtle-brand);
+  }
+}
+
+.pl-dl--inline {
+  display: block;
+  
+  & dt,
+  & dd {
+    display: inline;
+    padding-right: 0.5rem;
+    margin-bottom: 0;
+  }
+  
+  & dt {
+    font-weight: 600;
+  }
+  
+  & dt:not(:first-of-type)::before {
+    content: "";
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+  
+  & a {
+    color: var(--pl-color-fg-default);
+    text-decoration-style: dotted;
+    font-weight: 400;
+
+    &:hover {
+      text-decoration-style: solid;
+      text-decoration-thickness: 2px;
+    }
+  }
+}
+

package/dist/web/web.esm.js

@@ -17,7 +17,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["p-b9fe301b",[[1,"pennlibs-chat",{"href":[32]}],[1,"pennlibs-fallback-img"],[1,"pennlibs-feedback",{"error":[32],"answer":[32]}],[1,"pennlibs-footer",{"navigationByChildren":[32]}],[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}],[1,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["p-bb31e5e2",[[1,"pennlibs-banner"]]]], options);
+  return bootstrapLazy([["p-1f149b52",[[1,"pennlibs-chat",{"href":[32]}],[1,"pennlibs-fallback-img"],[1,"pennlibs-feedback",{"error":[32],"answer":[32]}],[1,"pennlibs-footer",{"navigationByChildren":[32]}],[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}],[1,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["p-e331a309",[[1,"pennlibs-banner"]]]], options);
 });
 //# sourceMappingURL=web.esm.js.map