Pretty article

components/00-particles/_00-mixins.scss

@@ -120,7 +120,6 @@
 @mixin full-viewport {
   display: flex;
   flex-direction: column;
-  min-width: $min-width;
   min-height: 100vh;
 
   & #main-content {

components/01-elements/11-tags/_tags.scss

@@ -80,3 +80,33 @@ article.node--news-item .field-field-tags {
     width: 25%;
   }
 }
+
+
+.tag-breadcrumbs {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+
+  .title {
+    margin-right: 0.5rem;
+  }
+
+  ul {
+    @include list-reset;
+    display: inline-flex;
+    flex-flow: row wrap;
+
+    #main-content.main-sidebar-side article.node &,
+    #main-content.main-sidebar-side article.node &,
+    #sidebar-container &,
+    #sidebar-container & {
+      margin: 0;
+    }
+
+    .fa-circle {
+      font-size: 0.5rem;
+      margin: 0 0.25rem;
+      vertical-align: middle;
+    }
+  }
+}

components/01-elements/11-tags/_tags.twig

@@ -0,0 +1,95 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{% if displayLikeBreadcrumbs %}
+
+
+{% set classes = ['tag-breadcrumbs'] %}
+<div{{attributes.addClass(classes)}}>
+  <div{{title_attributes.addClass('title')}}>
+    <i class="fa-solid fa-tags"></i>
+    {% if label_hidden %}
+    <div class="visually-hidden">
+    {% endif %}
+      {{ label }}
+    {% if label_hidden %}
+    </div>
+    {% endif %}
+  </div>
+
+
+  <ul>
+  {% for item in items %}
+    <li{{ item.attributes }}>
+      {{ item.content }}
+      {% if loop.last == false  %}<i class="fa-solid fa-circle"></i>{% endif%}
+    </li>
+  {% endfor %}
+  </ul>
+</div>
+
+
+{% else %}
+  {% if label_hidden %}
+    {% if multiple %}
+      <div{{ attributes }}>
+        {% for item in items %}
+
+          <div{{ item.attributes }}>{{ item.content }}</div>
+        {% endfor %}
+      </div>
+    {% else %}
+      {% for item in items %}
+        <div{{ attributes }}>{{ item.content }}{% if item.icon is defined %}{{ item.icon|raw }}{% endif %}</div>
+      {% endfor %}
+    {% endif %}
+  {% else %}
+    <div{{ attributes }}>
+      <div{{ title_attributes }}>{{ label }}</div>
+      {% if multiple %}
+        <div>
+      {% endif %}
+      {% for item in items %}
+        <div{{ item.attributes }}>{{ item.content }}</div>
+      {% endfor %}
+      {% if multiple %}
+        </div>
+      {% endif %}
+    </div>
+  {% endif %}
+{% endif %}

components/02-compounds/featured-resources/_featured-resource-tile.twig

@@ -0,0 +1,6 @@
+<li>
+	<a href="{{ item.content.field_link[0] }}">
+		{{ item.content.field_icon }}
+		<span>{{ item.content.field_heading }}</span>
+	</a>
+</li>

components/02-compounds/featured-resources/_featured-resources.scss

@@ -0,0 +1,232 @@
+@mixin tile-color-decorations($tileColor) {
+  a {
+    border-top: 4px solid $tileColor;
+  }
+
+  svg {
+    color: $tileColor;
+  }
+}
+
+/* Shared styles for homepage and articles */
+.has-link-tiles {
+  // .layout-stripe sets width 100%, margin 0, padding 0.
+  padding-bottom: 2rem;
+  // Contains div.layout-zone for squishy edges.
+
+  h2 {
+    margin-top: 0;
+    padding-top: 2rem;
+  }
+
+  ul {
+    @include list-reset;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+
+    li {
+      flex: 1 1 auto;
+      width: 100%;
+      margin: 0.5rem;
+
+      @include breakpoint($small-width) {
+        width: 46%;
+      }
+
+      @include breakpoint($medium-width) {
+        width: 31%;
+      }
+
+      @include breakpoint($large-width) {
+        width: 14%;
+        min-height: 10rem;
+      }
+
+      .fontawesome-icons {
+        text-align: center;
+      }
+
+      a {
+        @include rounded-corners;
+        background-color: $white;
+        height: 100%;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: center;
+        word-break: break-word;
+        padding: 1rem;
+        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
+
+        & {
+          @include link-on-gray;
+        }
+
+        svg {
+          font-size: 3rem;
+          margin: 0 auto;
+        }
+
+        span {
+          padding-top: 1rem;
+          text-align: center;
+          font-weight: bold;
+        }
+      }
+
+      &:nth-child(6n+1) {
+        @include tile-color-decorations($raspberry);
+      }
+
+      &:nth-child(6n+2) {
+        @include tile-color-decorations($gray);
+      }
+
+      &:nth-child(6n+3) {
+        @include tile-color-decorations($light-blue);
+      }
+
+      &:nth-child(6n+4) {
+        @include tile-color-decorations($light-green);
+      }
+
+      &:nth-child(6n+5) {
+        @include tile-color-decorations($light-orange);
+      }
+
+      &:nth-child(6n+6) {
+        @include tile-color-decorations($red);
+      }
+    }
+  }
+}
+
+/* Article pages */
+.resource-panel {
+  #main-content.main-sidebar-side article.node & ul,
+  #main-content.main-sidebar-side article.node & ol,
+  #sidebar-container & ul,
+  #sidebar-container & ol {
+    margin-left: 0;
+  }
+
+  ul {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-rows: 1fr;
+    gap: 1rem;
+
+
+    @include breakpoint($small-width) {
+      grid-template-columns: repeat(3, 1fr);
+
+      &.items-2 {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      &.items-1 {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    @include breakpoint($max-width) {
+      grid-template-columns: repeat(4, 1fr);
+
+      &.items-3 {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      &.items-2 {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      &.items-1 {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    li { 
+      width: auto;
+      margin: 0;
+
+      a {
+        // border: 3px solid $gray;
+        justify-content: space-between;
+        padding: 2rem 1rem 1rem 1rem;
+        text-decoration: underline;
+
+        & > span {
+          flex-grow: 1;
+          display: flex;
+          flex-flow: column nowrap;
+          justify-content: center;
+          font-weight: normal;
+        }
+      }
+
+      &:nth-child(6n+1),
+      &:nth-child(6n+2),
+      &:nth-child(6n+3),
+      &:nth-child(6n+4),
+      &:nth-child(6n+5),
+      &:nth-child(6n+6) {
+        a {
+          border-top: 4px solid $dark-blue;
+        }
+
+        svg {
+          color: $dark-blue;
+        }
+      }
+    }
+  }
+}
+
+/* LITS homepage styles */
+.lits_homepage .has-link-tiles {
+  ul {
+    margin-top: -0.5rem;
+  }
+
+  li {
+    width: 100%;
+
+    @include breakpoint($small-width) {
+      width: 41%;
+    }
+
+    @include breakpoint($large-width) {
+      width: 26%;
+    }
+
+    a {
+      border-radius: 0;
+
+      @include breakpoint($large-width) {
+        padding: 1rem calc(0.25 * 1rem);
+      }
+    }
+
+    &.tdx-tile {
+      width: 100%;
+
+      svg {
+        overflow: visible;
+        box-sizing: content-box;
+        display: var(--fa-display, inline-block);
+        height: 2em;
+        vertical-align: -0.125em;
+      }
+
+      img {
+        height: 5em;
+        margin: auto;
+      }
+
+      a {
+        border-top: 4px solid $dark-blue !important;
+      }
+    }
+  }
+}

components/02-compounds/featured-resources/_field-resource.twig

@@ -0,0 +1,12 @@
+<div class="featured-resources-wrapper">
+	<div class="featured-resources has-link-tiles">
+    {% set classes = [ items|length ? 'items-' ~ items|length, ] %}
+    <ul{{attributes.addClass(classes)}}>
+    {% for item in items %}
+      {% include "@compounds/featured-resources/_featured-resource-tile.twig" with {
+        "item": item
+      } %}
+    {% endfor %}
+		</ul>
+	</div>
+</div>