From 12de025cf85741b06fa9f996fc917c49305b4e25 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 19 Sep 2023 12:51:42 -0500 Subject: [PATCH 01/12] feat: c-news (no demo yet) --- dist/components/c-news--list.css | 1 + dist/components/c-news--read.css | 1 + dist/components/c-news.css | 1 + src/lib/_imports/components/c-news--list.css | 207 +++++++++++++++++++ src/lib/_imports/components/c-news--read.css | 164 +++++++++++++++ src/lib/_imports/components/c-news.css | 117 +++++++++++ 6 files changed, 491 insertions(+) create mode 100644 dist/components/c-news--list.css create mode 100644 dist/components/c-news--read.css create mode 100644 dist/components/c-news.css create mode 100644 src/lib/_imports/components/c-news--list.css create mode 100644 src/lib/_imports/components/c-news--read.css create mode 100644 src/lib/_imports/components/c-news.css diff --git a/dist/components/c-news--list.css b/dist/components/c-news--list.css new file mode 100644 index 000000000..4ef9f30b2 --- /dev/null +++ b/dist/components/c-news--list.css @@ -0,0 +1 @@ +/*! @tacc/core-styles 2.17.5+ | MIT | github.com/TACC/Core-Styles */.c-news--list .c-news__abstract,.x-truncate--many-lines{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}.c-news--list.as-grid{-moz-column-gap:var(--global-space--pattern-pad);column-gap:var(--global-space--pattern-pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.c-news--list.as-grid>.c-news__name{grid-column:1/-1}.c-news--list article{border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--dark);display:grid;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}.c-news--list:not(.has-media) article{--grid-item-areas:"head" "desc";--list-item-areas:"head" "desc";--list-item-columns:none}.c-news--list.has-media article{--grid-item-areas:"media" "head" "desc";--list-item-areas:"media head" "media desc";--list-item-columns:minmax(0,max-content) 1fr;-moz-column-gap:50px;column-gap:50px}.x-news-grid-item{grid-auto-rows:min-content;grid-template-areas:var(--grid-item-areas);grid-template-columns:minmax(0,1fr)}.x-news-list-item{grid-template-areas:var(--list-item-areas);grid-template-columns:var(--list-item-columns);grid-template-rows:min-content 1fr}@media (max-width:767px){.c-news--list article{grid-auto-rows:min-content;grid-template-areas:var(--grid-item-areas);grid-template-columns:minmax(0,1fr)}}@media (min-width:768px){.c-news--list:not(.as-grid) article{grid-template-areas:var(--list-item-areas);grid-template-columns:var(--list-item-columns);grid-template-rows:min-content 1fr}.c-news--list.as-grid article{grid-auto-rows:min-content;grid-template-areas:var(--grid-item-areas);grid-template-columns:minmax(0,1fr)}}.c-news--list .c-news__header{margin-bottom:5px}.c-news--list .c-news__title{margin-bottom:unset}.c-news--list .c-news__subtitle{display:none}.c-news .c-pill{margin-left:.5ch;transform:translateY(-.125em);vertical-align:middle}.c-news--list .c-news__data li{line-height:unset}.c-news--list .c-news__attr{color:var(--global-color-primary--dark)}.c-news--list .c-news__attr a{color:inherit}.c-news--list .c-news__media:empty{display:none}.x-news-grid-item-media-cell{margin-bottom:15px}.x-news-grid-item-media-element-in-cell{height:auto;max-width:100%}@media (max-width:767px){.c-news--list .c-news__media img{height:auto;max-width:100%}.c-news--list .c-news__media{margin-bottom:15px}}@media (min-width:768px){.c-news--list.as-grid .c-news__media img{height:auto;max-width:100%}.c-news--list.as-grid .c-news__media{margin-bottom:15px}}.c-news--list .c-news__abstract{--lines:4;color:var(--global-color-primary--dark);line-height:1.5}.c-news--list .c-news__abstract p:last-child{margin-bottom:0}.c-news--list .c-news__abstract [style]{all:revert!important} \ No newline at end of file diff --git a/dist/components/c-news--read.css b/dist/components/c-news--read.css new file mode 100644 index 000000000..d3bb7dc8e --- /dev/null +++ b/dist/components/c-news--read.css @@ -0,0 +1 @@ +/*! @tacc/core-styles 2.17.5+ | MIT | github.com/TACC/Core-Styles */.c-news--read .c-news__content .align-left,.c-news--read .c-news__content .align-right,.o-offset-content--left,.o-offset-content--right{--offset-distance:12vw;--buffer:calc(var(--global-space--grid-gap)*2);max-width:85%}@media only screen and (min-width:992px){.c-news--read .c-news__content .align-right,.o-offset-content--right{float:right;margin-left:var(--buffer)}.c-news--read .c-news__content .align-right+.o-offset-content--right,.o-offset-content--right+.o-offset-content--right{clear:right}.c-news--read .c-news__content .align-left,.o-offset-content--left{float:left;margin-right:var(--buffer)}.c-news--read .c-news__content .align-left+.o-offset-content--left,.o-offset-content--left+.o-offset-content--left{clear:left}.figure:is(.o-offset-content--left,.o-offset-content--right) .figure-caption{padding-right:125px}}@media only screen and (min-width:992px){.c-news--read .c-news__content .align-right,.o-offset-content--right{margin-right:calc(var(--offset-distance)*-1)}.c-news--read .c-news__content .align-left,.o-offset-content--left{margin-left:calc(var(--offset-distance)*-1)}}.c-news--read article{--header-buffer:calc(var(--global-space--grid-gap)/2);margin-inline:auto;max-width:775px}.c-news--read .c-news__header{grid-template-areas:"head head" "subh subh" "cats link" "tags tags" "attr attr"}.c-news--read .c-news__subtitle,.c-news--read .c-news__title{margin-bottom:var(--header-buffer)}.c-news--read .c-news__title{border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--dark);font-size:var(--global-font-size--xxx-large)}.c-news--read .c-news__subtitle{font-size:var(--global-font-size--large);font-weight:400}.c-news--read .c-news__content,.c-news--read .c-news__media{--news-read-media-buffer:45px;margin-block:var(--news-read-media-buffer) 60px}.c-news--read .c-news__content [style]:not([data-style=admin],){all:revert!important}.c-news--read .c-news__media img,.c-news--read img.c-news__media{height:auto;max-width:100%}@media (max-width:767px){.c-news--read .c-news__media{display:grid;justify-content:center;margin-bottom:var(--news-read-media-buffer)}}@media (min-width:768px){.c-news--read .c-news__media{float:left;margin-right:var(--news-read-media-buffer)}}.c-news--read .c-news__media+.c-news__content:after{clear:both;content:"";display:block}.c-news--read .c-news__abstract,.c-news--read .c-news__content{font-size:var(--global-font-size--medium);line-height:2}.c-news--read .c-news__abstract li+li,.c-news--read .c-news__content li+li{margin-top:.5em}.c-update__header+.c-news__content{margin-top:unset}@media (max-width:767px){.c-news--read .c-news__content .align-center,.c-news--read .c-news__content .align-left,.c-news--read .c-news__content .align-right{max-width:unset}.c-news--read .c-news__content .align-left,.c-news--read .c-news__content .align-right{float:unset;margin-bottom:unset}.c-news--read .c-news__content .align-right{margin-left:unset}.c-news--read .c-news__content .align-left{margin-right:unset}}@media (min-width:768px) and (max-width:991px){.c-news--read .c-news__content .align-center,.c-news--read .c-news__content .align-left,.c-news--read .c-news__content .align-right{max-width:50%}} \ No newline at end of file diff --git a/dist/components/c-news.css b/dist/components/c-news.css new file mode 100644 index 000000000..0cbba4f25 --- /dev/null +++ b/dist/components/c-news.css @@ -0,0 +1 @@ +/*! @tacc/core-styles 2.17.5+ | MIT | github.com/TACC/Core-Styles */.c-news__cats a,.c-tag,[class*=tag--]{font-weight:var(--bold);line-height:1;padding:.5rem;text-transform:uppercase;white-space:nowrap;width:-moz-min-content;width:min-content}.c-news__tags .tags a,.c-pill,[class*=pill--]{border-radius:.5em;box-sizing:border-box;color:var(--global-color-primary--xx-dark);display:inline-block;font-size:var(--global-font-size--x-small);font-weight:var(--medium);line-height:1.4;min-width:6.5em;padding-inline:.75em;text-align:center;text-transform:none}.c-pill--should-truncate,[class*=pill--truncate]{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}.c-pill--is-danger,[class*=pill--danger]{background-color:var(--global-color-danger--light)}.c-pill--is-success,[class*=pill--success]{background-color:var(--global-color-success--normal)}.c-pill--is-warning,[class*=pill--warning]{background-color:var(--global-color-warning--normal)}.c-pill--is-normal,[class*=pill--normal]{background-color:var(--global-color-extra--light)}.c-pill--is-fixed,[class*=pill--fixed]{background-color:var(--global-color-primary--light)}.c-pill--is-updated,[class*=pill--updated]{background-color:#fff500}.c-news--read .c-news__content .align-left,.c-news--read .c-news__content .align-right,.o-offset-content--left,.o-offset-content--right{--offset-distance:12vw;--buffer:calc(var(--global-space--grid-gap)*2);max-width:85%}@media only screen and (min-width:992px){.c-news--read .c-news__content .align-right,.o-offset-content--right{float:right;margin-left:var(--buffer)}.c-news--read .c-news__content .align-right+.o-offset-content--right,.o-offset-content--right+.o-offset-content--right{clear:right}.c-news--read .c-news__content .align-left,.o-offset-content--left{float:left;margin-right:var(--buffer)}.c-news--read .c-news__content .align-left+.o-offset-content--left,.o-offset-content--left+.o-offset-content--left{clear:left}.figure:is(.o-offset-content--left,.o-offset-content--right) .figure-caption{padding-right:125px}}@media only screen and (min-width:992px){.c-news--read .c-news__content .align-right,.o-offset-content--right{margin-right:calc(var(--offset-distance)*-1)}.c-news--read .c-news__content .align-left,.o-offset-content--left{margin-left:calc(var(--offset-distance)*-1)}}.c-news--read article{--header-buffer:calc(var(--global-space--grid-gap)/2);margin-inline:auto;max-width:775px}.c-news--read .c-news__header{grid-template-areas:"head head" "subh subh" "cats link" "tags tags" "attr attr"}.c-news--read .c-news__subtitle,.c-news--read .c-news__title{margin-bottom:var(--header-buffer)}.c-news--read .c-news__title{border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--dark);font-size:var(--global-font-size--xxx-large)}.c-news--read .c-news__subtitle{font-size:var(--global-font-size--large);font-weight:400}.c-news--read .c-news__content,.c-news--read .c-news__media{--news-read-media-buffer:45px;margin-block:var(--news-read-media-buffer) 60px}.c-news--read .c-news__content [style]:not([data-style=admin],){all:revert!important}.c-news--read .c-news__media img,.c-news--read img.c-news__media{height:auto;max-width:100%}@media (max-width:767px){.c-news--read .c-news__media{display:grid;justify-content:center;margin-bottom:var(--news-read-media-buffer)}}@media (min-width:768px){.c-news--read .c-news__media{float:left;margin-right:var(--news-read-media-buffer)}}.c-news--read .c-news__media+.c-news__content:after{clear:both;content:"";display:block}.c-news--read .c-news__abstract,.c-news--read .c-news__content{font-size:var(--global-font-size--medium);line-height:2}.c-news--read .c-news__abstract li+li,.c-news--read .c-news__content li+li{margin-top:.5em}.c-update__header+.c-news__content{margin-top:unset}@media (max-width:767px){.c-news--read .c-news__content .align-center,.c-news--read .c-news__content .align-left,.c-news--read .c-news__content .align-right{max-width:unset}.c-news--read .c-news__content .align-left,.c-news--read .c-news__content .align-right{float:unset;margin-bottom:unset}.c-news--read .c-news__content .align-right{margin-left:unset}.c-news--read .c-news__content .align-left{margin-right:unset}}@media (min-width:768px) and (max-width:991px){.c-news--read .c-news__content .align-center,.c-news--read .c-news__content .align-left,.c-news--read .c-news__content .align-right{max-width:50%}}.c-news--list .c-news__abstract,.x-truncate--many-lines{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}.c-news--list.as-grid{-moz-column-gap:var(--global-space--pattern-pad);column-gap:var(--global-space--pattern-pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.c-news--list.as-grid>.c-news__name{grid-column:1/-1}.c-news--list article{border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--dark);display:grid;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}.c-news--list:not(.has-media) article{--grid-item-areas:"head" "desc";--list-item-areas:"head" "desc";--list-item-columns:none}.c-news--list.has-media article{--grid-item-areas:"media" "head" "desc";--list-item-areas:"media head" "media desc";--list-item-columns:minmax(0,max-content) 1fr;-moz-column-gap:50px;column-gap:50px}.x-news-grid-item{grid-auto-rows:min-content;grid-template-areas:var(--grid-item-areas);grid-template-columns:minmax(0,1fr)}.x-news-list-item{grid-template-areas:var(--list-item-areas);grid-template-columns:var(--list-item-columns);grid-template-rows:min-content 1fr}@media (max-width:767px){.c-news--list article{grid-auto-rows:min-content;grid-template-areas:var(--grid-item-areas);grid-template-columns:minmax(0,1fr)}}@media (min-width:768px){.c-news--list:not(.as-grid) article{grid-template-areas:var(--list-item-areas);grid-template-columns:var(--list-item-columns);grid-template-rows:min-content 1fr}.c-news--list.as-grid article{grid-auto-rows:min-content;grid-template-areas:var(--grid-item-areas);grid-template-columns:minmax(0,1fr)}}.c-news--list .c-news__header{margin-bottom:5px}.c-news--list .c-news__title{margin-bottom:unset}.c-news--list .c-news__subtitle{display:none}.c-news .c-pill{margin-left:.5ch;transform:translateY(-.125em);vertical-align:middle}.c-news--list .c-news__data li{line-height:unset}.c-news--list .c-news__attr{color:var(--global-color-primary--dark)}.c-news--list .c-news__attr a{color:inherit}.c-news--list .c-news__media:empty{display:none}.x-news-grid-item-media-cell{margin-bottom:15px}.x-news-grid-item-media-element-in-cell{height:auto;max-width:100%}@media (max-width:767px){.c-news--list .c-news__media img{height:auto;max-width:100%}.c-news--list .c-news__media{margin-bottom:15px}}@media (min-width:768px){.c-news--list.as-grid .c-news__media img{height:auto;max-width:100%}.c-news--list.as-grid .c-news__media{margin-bottom:15px}}.c-news--list .c-news__abstract{--lines:4;color:var(--global-color-primary--dark);line-height:1.5}.c-news--list .c-news__abstract p:last-child{margin-bottom:0}.c-news--list .c-news__abstract [style]{all:revert!important}.c-news{--article-buffer:20px}.c-news{position:relative}.c-news article time:not(:is(h1,h2,h3,h4,h5,h6) *){color:var(--global-color-accent--secondary);font-weight:var(--medium);text-transform:uppercase}.c-news__header{display:grid;grid-template-areas:"cats" "tags" "attr" "head" "subh"}.c-news__title{grid-area:head}.c-news__subtitle{grid-area:subh}.c-news__attr{grid-area:attr}.c-news__cats{grid-area:cats}.c-news__tags{grid-area:tags}.c-news__links{grid-area:link}.c-news__data{font-size:var(--global-font-size--medium);list-style:none;margin-bottom:.25em;padding-left:0}.c-news__attr,.c-news__cats,.c-news__tags{display:flex;flex-direction:row;gap:1em}.c-news__attr{justify-content:space-between}.c-news__date{order:-1}.c-news.no-categories .c-news__cats,.c-news.no-tags .c-news__tags{display:none}.c-news__cats:empty,.c-news__tags:empty{display:none}.c-news__cats a{background-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-light);display:inline-block;font-size:var(--global-font-size--x-small)}.c-news__tags .tags a{background-color:var(--global-color-primary--light)}.c-news__data address{display:inline} \ No newline at end of file diff --git a/src/lib/_imports/components/c-news--list.css b/src/lib/_imports/components/c-news--list.css new file mode 100644 index 000000000..4ac39d8a2 --- /dev/null +++ b/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 */ +} diff --git a/src/lib/_imports/components/c-news--read.css b/src/lib/_imports/components/c-news--read.css new file mode 100644 index 000000000..64a3b10c2 --- /dev/null +++ b/src/lib/_imports/components/c-news--read.css @@ -0,0 +1,164 @@ +@import url("_imports/objects/o-offset-content.css"); + + + + + +/* Root */ + +.c-news--read article { + --header-buffer: calc( var(--global-space--grid-gap) / 2 ); + + max-width: 775px; + margin-inline: auto; +} + + + + + +/* Header (Structure) */ + +.c-news--read .c-news__header { + grid-template-areas: + 'head head' + 'subh subh' + 'cats link' + 'tags tags' + 'attr attr'; +} +.c-news--read .c-news__title, +.c-news--read .c-news__subtitle { + margin-bottom: var(--header-buffer); +} +.c-news--read .c-news__title { + font-size: var(--global-font-size--xxx-large); + + border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark); +} +.c-news--read .c-news__subtitle { + font-weight: normal; + font-size: var(--global-font-size--large); +} + + + + + +/* Media & Content */ + +.c-news--read .c-news__media, +.c-news--read .c-news__content { + --news-read-media-buffer: 45px; + + margin-block: var(--news-read-media-buffer) 60px; +} + +/* To undo inline content styles */ +/* FAQ: In case author pasted such markup from another source */ +.c-news--read .c-news__content [style]:not( + [data-style="admin"], /* HACK: So CMS admin can override this */ +) { + all: revert !important; /* force undo all inline styles */ +} + + + +/* Media & Content - Media */ + +/* To mimic Bootstrap `.img-fluid` */ +.c-news--read img.c-news__media /* WARNING: Untested */, +.c-news--read .c-news__media img { + max-width: 100%; + height: auto; +} +/* To support vertical layouts at narrow viewports */ +@media (width < 768px) /* TODO: When in Core, use @custom-media */ { + .c-news--read .c-news__media { + display: grid; + justify-content: center; + margin-bottom: var(--news-read-media-buffer); + } +} +/* To support horizontal layouts at wide viewports */ +@media (width >= 768px) /* TODO: When in Core, use @custom-media */ { + .c-news--read .c-news__media { + float: left; + margin-right: var(--news-read-media-buffer); + } +} + +/* To prevent footer on right side of page */ +/* FAQ: Because of `.c-news--read .c-news__media`'s `float: left` */ +.c-news--read .c-news__media + .c-news__content::after { + /* from Bootstrap `clearfix` */ + display: block; + content: ""; + clear: both; +} + + + +/* Media & Content - Content */ + +/* FAQ: Read page CAN have abstract */ +/* https://github.com/TACC/Core-CMS/pull/594 */ +.c-news--read .c-news__abstract, +.c-news--read .c-news__content { + font-size: var(--global-font-size--medium); + line-height: 2; +} +/* Add space between all list items */ +/* FAQ: Use case is list items with as much text as a paragraph */ +.c-news--read .c-news__abstract li + li, +.c-news--read .c-news__content li + li { + margin-top: 0.5em; +} + +/* To reduce space between "Original Message" and its content */ +.c-update__header + .c-news__content { + margin-top: unset; /* ovewrite c-news--read.css */ +} + + + +/* Media & Content - Alignment */ +/* FAQ: The .align-... classes come from Bootstrap Picture */ +/* FAQ: The .blockquote.text-... classes come from Bootstrap Blockquote */ + +.c-news--read .c-news__content .align-left { + @extend .o-offset-content--left; +} +.c-news--read .c-news__content .align-right { + @extend .o-offset-content--right; +} + +/* To remove margin on narrow screens */ +/* To overwrite @tacc/core-styles/…/components/align.css */ +@media (--narrow-and-below) { + .c-news--read .c-news__content .align-center, + .c-news--read .c-news__content .align-right, + .c-news--read .c-news__content .align-left { + max-width: unset; + } + .c-news--read .c-news__content .align-right, + .c-news--read .c-news__content .align-left { + float: unset; + margin-bottom: unset; + } + .c-news--read .c-news__content .align-right { + margin-left: unset; + } + .c-news--read .c-news__content .align-left { + margin-right: unset; + } +} + +/* To reduce image width on medium screens */ +@media (--narrow-and-above) and (--medium-and-below) { + .c-news--read .c-news__content .align-center, + .c-news--read .c-news__content .align-right, + .c-news--read .c-news__content .align-left { + max-width: 50%; + } +} diff --git a/src/lib/_imports/components/c-news.css b/src/lib/_imports/components/c-news.css new file mode 100644 index 000000000..d80496d9b --- /dev/null +++ b/src/lib/_imports/components/c-news.css @@ -0,0 +1,117 @@ +@import url("_imports/components/c-tag.css"); +@import url("_imports/components/c-pill.css"); + +@import url("./c-news--read.css"); +@import url("./c-news--list.css"); + + + + + +/* Variables */ + +.c-news { + --article-buffer: 20px; +} + + + +/* Generic */ + +.c-news { + /* To control absolute position of descendants e.g. `.blog-visual` */ + position: relative; +} + +/* TODO: Share styles between c-news and c-feed-list (`time:not(…)`) */ +.c-news article time:not(:is(h1, h2, h3, h4, h5, h6) *) { + color: var(--global-color-accent--secondary); + font-weight: var(--medium); + text-transform: uppercase; +} + + + + + +/* Header */ + +.c-news__header { + display: grid; + grid-template-areas: + 'cats' + 'tags' + 'attr' + 'head' + 'subh'; +} +.c-news__title { grid-area: head } +.c-news__subtitle { grid-area: subh } +.c-news__attr { grid-area: attr } +.c-news__cats { grid-area: cats } +.c-news__tags { grid-area: tags } +.c-news__links { grid-area: link } + +.c-news__data { + list-style: none; + + padding-left: 0; /* overwrite html-elements.css */ + margin-bottom: 0.25em; /* overwrite html-elements.css */ + + font-size: var(--global-font-size--medium); +} + + + +/* Metadata */ + +/* To layout data */ +.c-news__attr, +.c-news__tags, +.c-news__cats { + display: flex; + flex-direction: row; + gap: 1em; +} +.c-news__attr { + justify-content: space-between; +} +.c-news__date { + order: -1 +} + +/* To conditionally hide tags & categories */ +.c-news.no-tags .c-news__tags, +.c-news.no-categories .c-news__cats { + display: none; +} + +/* To hide empty tags & categories */ +.c-news__tags:empty, +.c-news__cats:empty { + display: none; +} + +/* To style categories as "tags" (the UI pattern) */ +.c-news__cats a { + @extend :--c-tag; + + display: inline-block; + + color: var(--global-color-primary--xx-light); + background-color: var(--global-color-primary--xx-dark); + + font-size: var(--global-font-size--x-small); +} + +/* To style tags as "pills" (the UI pattern) */ +.c-news__tags .tags a { + @extend :--c-pill; + + background-color: var(--global-color-primary--light); +} + +/* So byline text is all on one line */ +.c-news__data address { + display: inline; +} From 4a5b33ff6fcf4bc1853d655d5a1e7b5b7e87b54b Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 19 Sep 2023 13:14:21 -0500 Subject: [PATCH 02/12] docs: c-news demo placeholder and readme --- dist/components/c-news/demo.css | 1 + src/lib/_imports/components/c-news/c-news--list.hbs | 0 src/lib/_imports/components/c-news/c-news--read.hbs | 0 src/lib/_imports/components/c-news/c-news.hbs | 0 src/lib/_imports/components/c-news/config.yml | 3 +++ src/lib/_imports/components/c-news/readme.md | 9 +++++++++ 6 files changed, 13 insertions(+) create mode 100644 dist/components/c-news/demo.css create mode 100644 src/lib/_imports/components/c-news/c-news--list.hbs create mode 100644 src/lib/_imports/components/c-news/c-news--read.hbs create mode 100644 src/lib/_imports/components/c-news/c-news.hbs create mode 100644 src/lib/_imports/components/c-news/config.yml create mode 100644 src/lib/_imports/components/c-news/readme.md diff --git a/dist/components/c-news/demo.css b/dist/components/c-news/demo.css new file mode 100644 index 000000000..1606b3578 --- /dev/null +++ b/dist/components/c-news/demo.css @@ -0,0 +1 @@ +/*! @tacc/core-styles 2.17.5+ | MIT | github.com/TACC/Core-Styles */ \ No newline at end of file diff --git a/src/lib/_imports/components/c-news/c-news--list.hbs b/src/lib/_imports/components/c-news/c-news--list.hbs new file mode 100644 index 000000000..e69de29bb diff --git a/src/lib/_imports/components/c-news/c-news--read.hbs b/src/lib/_imports/components/c-news/c-news--read.hbs new file mode 100644 index 000000000..e69de29bb diff --git a/src/lib/_imports/components/c-news/c-news.hbs b/src/lib/_imports/components/c-news/c-news.hbs new file mode 100644 index 000000000..e69de29bb diff --git a/src/lib/_imports/components/c-news/config.yml b/src/lib/_imports/components/c-news/config.yml new file mode 100644 index 000000000..6d932293f --- /dev/null +++ b/src/lib/_imports/components/c-news/config.yml @@ -0,0 +1,3 @@ +variants: + - name: default + hidden: true diff --git a/src/lib/_imports/components/c-news/readme.md b/src/lib/_imports/components/c-news/readme.md new file mode 100644 index 000000000..79d014eb9 --- /dev/null +++ b/src/lib/_imports/components/c-news/readme.md @@ -0,0 +1,9 @@ +For a news article page and a list of news articles. + +The markup is inspired from the [templates of nephila/djangocms-blog v1.2.3](https://github.com/nephila/djangocms-blog/tree/1.2.3/djangocms_blog/templates/djangocms_blog). + +| Class | Description +| - | - | +| `.c-news` | basic styles +| `.c-news--list` | a list of news articles +| `.c-news--read` | a single news article From 22d303a4e43d8bc093ef044862b42d21eebd7b48 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 19 Sep 2023 14:23:22 -0500 Subject: [PATCH 03/12] docs: open ext. link in new window --- src/lib/_imports/components/c-news/readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/lib/_imports/components/c-news/readme.md b/src/lib/_imports/components/c-news/readme.md index 79d014eb9..1493592a1 100644 --- a/src/lib/_imports/components/c-news/readme.md +++ b/src/lib/_imports/components/c-news/readme.md @@ -7,3 +7,5 @@ The markup is inspired from the [templates of nephila/djangocms-blog v1.2.3](htt | `.c-news` | basic styles | `.c-news--list` | a list of news articles | `.c-news--read` | a single news article + +