refactor: blog styles & features

package.json

@@ -21,9 +21,6 @@
   },
   "homepage": "https://github.com/TACC/Core-CMS",
   "devDependencies": {
-    "@tacc/core-styles": "^2.50.2"
-  },
-  "// devDependencies": {
-    "@tacc/core-styles": "after v2.50.0, use NPM (because NPM and GitHub v2.50.0 differ)"
+    "@tacc/core-styles": "^2.51.0"
   }
 }

taccsite_cms/settings.py

@@ -317,7 +317,6 @@ def gettext(s): return s
 PORTAL_BLOG_SHOW_CATEGORIES = True
 PORTAL_BLOG_SHOW_TAGS = True
 # To flag posts of certain category or tag, so template can take special action
-PORTAL_BLOG_CUSTOM_MEDIA_POST_CATEGORY = 'mutlimedia'
 PORTAL_BLOG_SHOW_ABSTRACT_TAG = 'external'
 
 PORTAL_BLOG_CATEGORY_ORDER = []
@@ -661,7 +660,6 @@ def get_subdirs_as_module_names(path):
     'INCLUDES_SEARCH_BAR',
     'TACC_BLOG_SHOW_CATEGORIES',
     'TACC_BLOG_SHOW_TAGS',
-    'TACC_BLOG_CUSTOM_MEDIA_POST_CATEGORY',
     'TACC_BLOG_SHOW_ABSTRACT_TAG',
     'TACC_BLOG_CATEGORY_ORDER',
     'TACC_SOCIAL_SHARE_PLATFORMS',
@@ -715,7 +713,6 @@ def get_subdirs_as_module_names(path):
     'PORTAL_STYLES',
     'PORTAL_BLOG_SHOW_CATEGORIES',
     'PORTAL_BLOG_SHOW_TAGS',
-    'PORTAL_BLOG_CUSTOM_MEDIA_POST_CATEGORY',
     'PORTAL_BLOG_SHOW_ABSTRACT_TAG',
     'PORTAL_BLOG_CATEGORY_ORDER',
     'PORTAL_SOCIAL_SHARE_PLATFORMS',

taccsite_cms/settings_custom.example.py

@@ -112,5 +112,5 @@
 # DJANGOCMS_BLOG: TACC
 ########################
 
-PORTAL_BLOG_SHOW_CATEGORIES = True
-PORTAL_BLOG_SHOW_TAGS = True
+PORTAL_BLOG_SHOW_CATEGORIES = False
+PORTAL_BLOG_SHOW_TAGS = False

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css

@@ -1,7 +1,7 @@
 /*
 Django CMS Blog App Components
 
-These styles are only for the blog app pages (list pages, article pages).
+Shared among blog pages and plugins.
 
 Reference:
 
@@ -10,168 +10,112 @@ Reference:
 Styleguide Components.DjangoCMS.Blog.App
 */
 @import url("@tacc/core-styles/dist/djangocms-blog/cms-pagination.css");
-@import url("@tacc/core-styles/src/lib/_imports/components/c-tag.css");
+
+@import url("../tools/x-news.css");
 
 @import url("./django.cms.blog.app.page.css");
 @import url("./django.cms.blog.app.item.css");
 @import url("./django.cms.blog.selectors.css");
 
 
-
-
-
-/* Variables */
+/* Root */
 
 .app-blog {
-  --article-buffer: 20px;
+  @mixin news;
 }
 
 
+/* Header */
 
-/* Generic */
+.post-item:not(.post-detail) header {
+  @mixin news-feed-article__header;
 
-.app-blog {
-  /* To control absolute position of descendants e.g. `.blog-visual` */
-  position: relative;
-}
+  & h3          { grid-area: title }
+  & h4          { grid-area: subtitle }
+  & .attrs      { grid-area: attr /* attribution */}
+  & .dates      { grid-area: dates }
+  & .categories { grid-area: cats }
+  & .tags       { grid-area: tags }
 
+  .app-blog.no-categories.no-tags & {
+    @mixin news-feed-article__header--hide-cats-hide-tags;
+  }
+  .app-blog:not(.no-categories).no-tags & {
+    @mixin news-feed-article__header--show-cats-hide-tags;
+  }
+  .app-blog.no-categories:not(.no-tags) & {
+    @mixin news-feed-article__header--hide-cats-show-tags;
+  }
+}
 
 
-/* Header */
+/* Details */
 
-.app-blog header {
-  display: grid;
-  column-gap: 1em;
-}
-:--article-page h1,
-:--article-item h3    { grid-area: head }
-:--article-page h2,
-:--article-item h4    { grid-area: subh }
-.app-blog .attrs      { grid-area: attr }
-.app-blog .dates      { grid-area: date }
-.app-blog .categories { grid-area: cats }
-.app-blog .tags       { grid-area: tags }
-.app-blog .links      { grid-area: link }
-
-/* To format titles */
-:--article-list h1 > strong::after {
-  content: "—";
-  margin-left: 0.25em;
-  display: inline-block;
-  font-weight: var(--medium);
-}
-:--article-list h1 > span {
-  display: none;
-}
-:--article-list h1 > em {
-  font-style: normal;
-  text-transform: none;
-  font-family: inherit;
-  font-weight: var(--medium);
+.app-blog .post-detail {
+  @mixin news-details;
 }
 
-.app-blog ul.post-detail {
-  list-style: none;
-
-  padding-left: 0; /* overwrite html-elements.css */
+/* Details - Attribution */
 
-  font-size: var(--global-font-size--medium);
+/* To always hide "by" */
+.app-blog .byline > span {
+  display: none;
 }
 
+/* Details - Dates */
 
+.app-blog time {
+  @mixin news-date;
+}
 
-/* Metadata */
+/* Details - Metadata */
 
-/* To layout data */
 .app-blog .tags,
 .app-blog .categories {
-  display: flex;
-  flex-direction: row;
-  gap: 1em;
-}
-
-/* To always hide byline prefix */
-.app-blog .byline > span {
-  display: none;
+  @mixin news-metadata;
 }
 
 /* To conditionally hide tags & categories */
-.app-blog.no-tags :--article .tags,
-.app-blog.no-categories :--article .categories {
+.app-blog.no-tags .tags,
+.app-blog.no-categories .categories {
   display: none;
 }
-
-/* To hide empty tags & categories */
-:--article .tags:empty,
-:--article .categories:empty {
-  display: none;
+.app-blog .categories {
+  @mixin news-metadata;
+  a { @mixin news-category; }
 }
-
-/* To style categories as "tags" (the UI pattern) */
-.app-blog .categories 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--small);
+.app-blog .tags {
+  @mixin news-metadata;
+  a { @mixin news-tag; }
 }
 
-/* To style tags as "pills" (the UI pattern) */
-.app-blog .tags a {
-  /* TODO: When available in Core-Styles, uncomment this */
-  /* @extend :--c-pill; */
 
-  background-color: var(--global-color-primary--light);
-}
+/* Lead */
 
-/* To style dates */
-.app-blog time {
-  color: var(--global-color-accent--secondary);
-  font-weight: var(--medium);
-  text-transform: uppercase;
+/* To undo inline content styles */
+/* FAQ: In case author pasted such markup from another source */
+.blog-lead [style]:not(
+    [data-style="admin"] /* HACK: so CMS admin can override this */
+) {
+    all: revert !important; /* force undo all inline styles */
 }
 
 
-
 /* Social Media */
 
-/* TACC: Logos */
-
-.app-blog .logos--social {
-  display: flex;
-  flex-wrap: wrap;
-  justify-self: end;
-
-  @media (pointer: coarse) {
-    gap: 1.0em;
-  }
-  @media not (pointer: coarse) {
-    gap: 0.5em;
-  }
+.app-blog .logos--social /* a.k.a. blog .socials */ {
+  @mixin news-socials;
 }
-
 .app-blog .logos__text-before {
-  white-space: nowrap;
+  @mixin news-socials__prefix;
 }
-
 .app-blog .logos--social svg {
-  @media (pointer: coarse) {
-    height: var(--global-font-size--xx-large);
-    width: var(--global-font-size--xx-large);
-  }
-  @media (pointer: fine), (pointer: none) {
-    height: var(--global-font-size--large);
-    width: var(--global-font-size--large);
-  }
+  @mixin news-socials__icon;
 }
 
 
-
 /* Pagination */
 
 .pagination {
-  margin-block: calc( var(--article-buffer) * 2 );
+  @mixin news-pagination;
 }