feat: c-news

dist/components/c-news/demo.css

@@ -0,0 +1 @@
+/*! @tacc/core-styles 2.17.5+ | MIT | github.com/TACC/Core-Styles */

src/lib/_imports/components/c-news--list.css

@@ -0,0 +1,207 @@
+@import url("_imports/tools/x-truncate.css");
+@import url("_imports/tools/media-queries.css");
+
+
+
+
+
+/* List */
+
+/* To support rendering list as a grid */
+.c-news--list.as-grid {
+  display: grid;
+  grid-template-columns: repeat( auto-fit, minmax(350px, 1fr) );
+  column-gap: var(--global-space--pattern-pad);
+}
+/* So page title spans all columns */
+.c-news--list.as-grid > .c-news__name {
+  grid-column: 1 / -1;
+}
+
+
+
+
+
+/* Item */
+
+
+
+/* Item (Structure) */
+
+/* For basic layout */
+.c-news--list article {
+  display: grid;
+
+  border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+  margin-bottom: var(--article-buffer);
+  padding-bottom: var(--article-buffer);
+}
+.c-news--list .c-news__header  { grid-area: head }
+.c-news--list .c-news__visual  { grid-area: media }
+.c-news--list .c-news__abstract { grid-area: desc }
+
+/* For conditional layouts */
+.c-news--list:not(.has-media) article {
+  --grid-item-areas:
+    'head'
+    'desc';
+
+  --list-item-areas:
+    'head'
+    'desc';
+  /* Do not manage what is irrelevant in this layout */
+  --list-item-columns: none;
+}
+.c-news--list.has-media article {
+  --grid-item-areas:
+    'media'
+    'head'
+    'desc';
+
+  --list-item-areas:
+    'media head'
+    'media desc';
+  /* To shrinkwrap media and flexible text content */
+  --list-item-columns: minmax(0, max-content) 1fr;
+
+  column-gap: 50px; /* for horz. space between image and content */
+}
+
+/* For layout options */
+.x-news-grid-item {
+    grid-template-areas: var(--grid-item-areas);
+    /* To prevent content from overflowing cell */
+    grid-template-columns: minmax(0, 1fr);
+    /* To prevent vertical stretch of rows */
+    grid-auto-rows: min-content;
+}
+.x-news-list-item {
+    grid-template-areas: var(--list-item-areas);
+    grid-template-columns: var(--list-item-columns);
+    /* To let 'desc' take remaining space (removes gap between head and desc) */
+    grid-template-rows: min-content 1fr;
+}
+@media (--narrow-and-below) {
+  .c-news--list article {
+    @extend .x-news-grid-item;
+  }
+}
+@media (--narrow-and-above) {
+  .c-news--list:not(.as-grid) article {
+    @extend .x-news-list-item;
+  }
+  .c-news--list.as-grid article {
+    @extend .x-news-grid-item;
+  }
+}
+
+
+
+
+
+
+/* Header */
+
+
+
+/* Header (Structure) */
+
+.c-news--list .c-news__header {
+  margin-bottom: 5px;
+}
+
+
+
+/* Header - Title */
+
+.c-news--list .c-news__title {
+  margin-bottom: unset; /* overwrite Core-Styles headings--cms.css */
+}
+.c-news--list .c-news__subtitle {
+  display: none;
+}
+
+/* To style "Update" pill in title */
+.c-news .c-pill {
+  margin-left: 0.5ch;
+  vertical-align: middle;
+  transform: translateY(-0.125em);
+}
+
+
+
+/* Header - Metadata (Skin) */
+
+.c-news--list .c-news__data li {
+  line-height: unset; /* overwrite html-elements.css */
+}
+
+.c-news--list .c-news__attr {
+  color: var(--global-color-primary--dark);
+}
+.c-news--list .c-news__attr a {
+  color: inherit;
+}
+
+
+
+
+
+/* Visual */
+
+.c-news--list .c-news__media:empty {
+  display: none;
+}
+
+/* To support vertical article layouts */
+/* FAQ: In simple layouts, the media element is the grid cell */
+/* FAQ: In complex layouts, the media element is within the grid cell */
+.x-news-grid-item-media-cell {
+  margin-bottom: 15px; /* to add space between image and content */
+}
+.x-news-grid-item-media-element-in-cell {
+  max-width: 100%; /* to prevent overflow if column is narrower than image */
+  height: auto; /* to preserve ratio if width is reduced (by max-width: 100%) */
+}
+@media (--narrow-and-below) {
+  .c-news--list .c-news__media {
+    @extend .x-news-grid-item-media-cell;
+
+    & img {
+      @extend .x-news-grid-item-media-element-in-cell;
+    }
+  }
+}
+@media (--narrow-and-above) {
+  .c-news--list.as-grid .c-news__media {
+    @extend .x-news-grid-item-media-cell;
+
+    & img {
+        @extend .x-news-grid-item-media-element-in-cell;
+    }
+  }
+}
+
+
+
+
+
+/* Content */
+
+.c-news--list .c-news__abstract {
+  @extend .x-truncate--many-lines;
+
+  --lines: 4;
+
+  line-height: 1.5;
+  color: var(--global-color-primary--dark);
+}
+.c-news--list .c-news__abstract p:last-child {
+  margin-bottom: 0 /* overwrite core-styles.cms */
+}
+
+/* To undo inline content styles */
+/* FAQ: In case author pasted such markup from another source */
+.c-news--list .c-news__abstract [style] {
+    all: revert !important; /* force undo all inline styles */
+}