Introduce and share new card and card grid styles (#6334)

Also adds the `{% card %} <content> {% endcard %}` paired shortcode for more easily setting up the markup of each card. A few existing cards had broken or incorrect links, so this PR fixes those as well.
dart-lang · Jan 17, 2025 · 7136e1c · 7136e1c
1 parent d5f005b
commit 7136e1c
Show file tree

Hide file tree

Showing 15 changed files with 252 additions and 249 deletions.
diff --git a/src/_11ty/shortcodes.ts b/src/_11ty/shortcodes.ts
@@ -1,9 +1,28 @@
 import {UserConfig} from '@11ty/eleventy';
 
 export function registerShortcodes(eleventyConfig: UserConfig): void {
+  _setupCards(eleventyConfig);
   _setupMedia(eleventyConfig);
 }
 
+function _setupCards(eleventyConfig: UserConfig): void {
+  eleventyConfig.addPairedShortcode('card', function (content: string, title: string, link?: string | null) {
+    let cardBuilder = link ? `<a class="card filled-card" href="${link}">` : '<div class="card">';
+
+    cardBuilder += `<div class="card-header"><header class="card-title">${title}</header></div>`;
+    cardBuilder += `<div class="card-content">
+
+${content}
+
+</div>
+`;
+
+    cardBuilder += link ? '</a>' : '</div>';
+
+    return cardBuilder;
+  });
+}
+
 function _setupMedia(eleventyConfig: UserConfig): void {
   eleventyConfig.addShortcode('ytEmbed', function (id: string, title: string, type = 'video', fullWidth = false) {
     let embedTypePath = '';

diff --git a/src/_includes/linter-rule-cards.md b/src/_includes/linter-rule-cards.md
@@ -2,18 +2,24 @@
 
 {% if lint.state != "internal" %}
 
+{% assign lintId = lint.name | downcase %}
+
 <div
-  class="lint-card"
+  class="card outlined-card"
   id="{{lint.name}}"
   {%- if lint.state == "stable" and not lint.sinceDartSdk contains "wip" %} data-stable="true"{% endif -%}
   {%- if lint.fixStatus == "hasFix" %} data-has-fix="true"{% endif -%}
   {%- if lint.sets contains "core" %} data-in-core="true"{% endif -%}
   {%- if lint.sets contains "recommended" %} data-in-recommended="true"{% endif -%}
   {%- if lint.sets contains "flutter" %} data-in-flutter="true"{% endif -%}>
-<h3 class="card-title">{{lint.name | underscoreBreaker}}</h3>
+<div class="card-header">
+<header class="card-title" id="{{lintId}}">{{lintId | underscoreBreaker}}</header>
+</div>
+<div class="card-content">
 
 {{lint.description}}
 
+</div>
 <div class="card-actions">
 <div class="leading">
 {% if lint.state == "removed" -%}

diff --git a/src/_includes/server-tutorials.md b/src/_includes/server-tutorials.md
@@ -2,21 +2,17 @@ The following tutorials show how to develop scripts, command-line apps,
 and server apps that can run in the standalone Dart VM.
 
 <div class="card-grid">
-  <div class="card">
-    <h3 class="no_toc"><a href="/tutorials/server/get-started">Get started</a></h3>
-    <p>Get Dart. Create a simple standalone app, run it in the Dart VM,
-    and AOT-compile it to native machine code.</p>
-  </div>
-  <div class="card">
-    <h3 class="no_toc"><a href="/tutorials/server/cmdline">Write command-line apps</a></h3>
-    <p>Learn about features that command-line apps need.</p>
-  </div>
-  <div class="card">
-    <h3 class="no_toc"><a href="/tutorials/server/fetch-data">Fetch data from the internet</a></h3>
-    <p>Fetch data from the internet using the http package.</p>
-  </div>
-  <div class="card">
-    <h3 class="no_toc"><a href="/tutorials/server/httpserver">Write HTTP servers</a></h3>
-    <p>Implement a web server written in Dart.</p>
-  </div>
+  {% card "Get started", "/tutorials/server/get-started" %}
+    Get Dart. Create a simple standalone app, run it in the Dart VM,
+    and AOT-compile it to native machine code.
+  {% endcard %}
+  {% card "Write command-line apps", "/tutorials/server/cmdline" %}
+    Learn about features that command-line apps need.
+  {% endcard %}
+  {% card "Fetch data from the internet", "/tutorials/server/fetch-data" %}
+    Fetch data from the internet using the http package.
+  {% endcard %}
+  {% card "Write HTTP servers", "/tutorials/server/httpserver" %}
+    Implement a web server written in Dart.
+  {% endcard %}
 </div>
diff --git a/src/_sass/_site.scss b/src/_sass/_site.scss
@@ -6,6 +6,7 @@
 @use 'core/base';
 
 @use 'components/banner';
+@use 'components/card';
 @use 'components/code';
 @use 'components/cookie-notice';
 @use 'components/form';
@@ -394,76 +395,6 @@ main .content {
   }
 }
 
-.card-grid {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin-left: -15px;
-  margin-right: -15px;
-}
-
-.card {
-  display: block;
-  position: relative;
-  width: 300px;
-  height: auto;
-  min-height: 100px;
-  padding: 20px;
-  margin: 15px;
-  overflow: hidden;
-  box-sizing: border-box;
-  background-color: #294058;
-  border-radius: 0;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.21);
-  color: $site-color-card-text;
-
-  h1, h2, h3, h4, h5, h6 {
-    font-family: $site-font-family-gsans;
-    margin-top: 0;
-
-    a {
-      color: $site-color-card-text;
-      font-family: $site-font-family-gsans;
-    }
-  }
-
-  h3 {
-    font-size: bootstrap.$h2-font-size;
-  }
-
-  a {
-    color: $site-color-card-link;
-  }
-
-  &.narrow {
-    width: 250px;
-  }
-}
-
-// Support for .card-grid formatted as a markdown unordered list
-ul.card-grid {
-  padding-left: 0;
-}
-
-// Platform logos
-li.card {
-  color: inherit;
-  background-color: transparent;
-  box-shadow: none;
-
-  .logo {
-    display: block;
-    padding-bottom: $font-size-base;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    a {
-      color: inherit;
-    }
-  }
-}
-
 .muted {
   color: $gray;
 }

diff --git a/src/_sass/components/_banner.scss b/src/_sass/components/_banner.scss
@@ -5,7 +5,7 @@
   background-color: $dash-callout;
   padding: 12px 0;
   text-align: center;
-  z-index: 1000;
+  z-index: 500;
 
   &__text {
     font-family: $site-font-family-alt;

diff --git a/src/_sass/components/_card.scss b/src/_sass/components/_card.scss
@@ -0,0 +1,100 @@
+@use '../core/mixins' as *;
+@use '../core/variables' as *;
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min-width, 18rem)), 1fr));
+  gap: var(--card-grid-gap, 1rem);
+  margin: 0 0 1rem;
+  justify-content: center;
+
+  .card {
+    display: flex;
+    flex-direction: column;
+
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+    margin: 0;
+    gap: 0.5rem;
+    background-color: var(--card-container-color, rgb(242, 245, 255));
+    height: auto;
+
+    scroll-margin: 4rem;
+
+    &.hidden {
+      display: none;
+    }
+
+    &.outlined-card {
+      border: 1px solid var(--card-border-color, rgba(0, 0, 0, .125));
+    }
+
+    .card-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      // TODO(parlough): Remove these resets after bootstrap removed.
+      border: none;
+      background: none;
+      margin: 0;
+      padding: 0;
+
+      .card-title {
+        font-size: 1.25rem;
+        font-weight: 500;
+        margin: 0;
+        overflow: hidden;
+        font-family: $site-font-family-gsans;
+        color: var(--card-title-color, $site-color-body);
+      }
+    }
+
+    .card-content {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      font-size: 0.95rem;
+      color: var(--card-text-color, $site-color-body);
+
+      p {
+        code {
+          font-size: 0.95em;
+          background-color: rgba(0, 0, 0, .05);
+          color: var(--card-text-color, $site-color-body);
+          border-radius: .25rem;
+          padding: .1rem .25rem;
+          text-wrap: nowrap;
+        }
+      }
+    }
+
+    .material-symbols {
+      user-select: none;
+    }
+  }
+
+  a.card {
+    .card-header {
+      --card-title-color: #1967D2;
+
+      .card-title {
+        font-weight: 400;
+      }
+    }
+
+    &:hover {
+      @include interaction-style(3%);
+    }
+
+    &:active {
+      @include interaction-style(6%);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--focus-outline-color);
+      border-color: transparent;
+    }
+  }
+}