refactor: restructure blog stylesheets

docs/styles-and-scripts.md

@@ -60,6 +60,18 @@
 
       </details>
 
+      <details><summary>for one <strong>app</strong></summary>
+
+      ```django
+        <link rel="stylesheet" href="{% static '__PROJECT__/css/build/app.___.css' %}">
+        <script src="{% static '__PROJECT__/js/app.___.js' %}"></script>
+      ```
+
+      > **Warning**
+      > Undesired for scripts. Create a module script any page could use.
+
+      </details>
+
       <details><summary>for one <strong>page</strong></summary>
 
       > **Warning**
@@ -94,6 +106,18 @@
 
       </details>
 
+      <details><summary>for one <strong>app</strong></summary>
+
+      ```django
+        <link rel="stylesheet" href="{% static '__PROJECT__/css/build/app.___.css' %}">
+        <script src="{% static '__PROJECT__/js/app.___.js' %}"></script>
+      ```
+
+      > **Warning**
+      > Undesired for scripts. Create a module script any page could use.
+
+      </details>
+
       <details><summary>for one <strong>page</strong></summary>
 
       > **Warning**
@@ -162,4 +186,4 @@
 
 [Core Styles]: https://github.com/TACC/Core-Styles
 
-[CMS UI Organization]: https://confluence.tacc.utexas.edu/x/54AZCg "CMS UI - Organization"
+[CMS UI Organization]: https://tacc-main.atlassian.net/wiki/x/vxVv "CMS UI - Organization"

taccsite_cms/static/djangocms_blog/css/djangocms_blog_pages.css

@@ -0,0 +1,3 @@
+/* SEE: /taccsite_cms/static/site_cms/css/src/app.blog.pages.css */
+/* FAQ: We use processed CSS built within taccsite_cms app */
+@import url("../site_cms/css/build/app.blog.pages.css");

taccsite_cms/static/djangocms_blog/css/djangocms_blog_plugins.css

@@ -0,0 +1,3 @@
+/* SEE: /taccsite_cms/static/site_cms/css/src/app.blog.plugins.css */
+/* FAQ: We use processed CSS built within taccsite_cms app */
+@import url("../site_cms/css/build/app.blog.plugins.css");

taccsite_cms/static/site_cms/css/src/_imports/components/djangocms_blog/pages/README.md

@@ -0,0 +1,7 @@
+# Stylesheets - … - Django CMS Blog - App Pages
+
+Pages available under one route, not pages that add blog plugins.
+
+## Resources
+
+- [Django CMS Blog Templates](https://github.com/nephila/djangocms-blog/tree/2.0.3/djangocms_blog/templates/djangocms_blog)

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css → taccsite_cms/static/site_cms/css/src/_imports/components/djangocms_blog/pages/article.css

@@ -1,18 +1,11 @@
-/*
-Django CMS Blog App Page (Article/Post) Components
+/* https://github.com/nephila/djangocms-blog/blob/2.0.3/djangocms_blog/templates/djangocms_blog/post_detail.html */
 
-Reference:
-
-- [`post_detail.html`](https://github.com/nephila/djangocms-blog/blob/1.2.3/djangocms_blog/templates/djangocms_blog/post_detail.html)
-
-Styleguide Components.DjangoCMS.Blog.App.Page
-*/
 @import url("@tacc/core-styles/src/lib/_imports/objects/o-offset-content.css");
 @import url("@tacc/core-styles/src/lib/_imports/tools/x-drop-cap.css");
 
 @import url("../tools/x-news.css");
 
-@import url("./django.cms.blog.selectors.css");
+@import url("../selectors.css");
 
 
 

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css → taccsite_cms/static/site_cms/css/src/_imports/components/djangocms_blog/pages/feed.css

@@ -1,17 +1,10 @@
-/*
-Django CMS Blog App Item (Post/Article in a List) Components
+/* https://github.com/nephila/djangocms-blog/blob/2.0.3/djangocms_blog/templates/djangocms_blog/includes/blog_item.html */
 
-Reference:
-
-- [`includes/blog_item.html`](https://github.com/nephila/djangocms-blog/blob/1.2.3/djangocms_blog/templates/djangocms_blog/includes/blog_item.html)
-
-Styleguide Components.DjangoCMS.Blog.App.Item
-*/
 @import url("@tacc/core-styles/src/lib/_imports/tools/media-queries.css");
 
 @import url("../tools/x-news.css");
 
-@import url("./django.cms.blog.selectors.css");
+@import url("../selectors.css");
 
 
 /* Root */

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css → taccsite_cms/static/site_cms/css/src/_imports/components/djangocms_blog/pages/shared.css

@@ -1,28 +1,8 @@
-/*
-Django CMS Blog App Components
-
-Shared among blog pages and plugins.
-
-Reference:
-
-- [Django CMS Blog App Templates](https://github.com/nephila/djangocms-blog/tree/1.2.3/djangocms_blog/templates/djangocms_blog)
-
-Styleguide Components.DjangoCMS.Blog.App
-*/
 @import url("@tacc/core-styles/dist/djangocms-blog/cms-pagination.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");
-
-
-/* Root */
-
-.app-blog {
-  @mixin news;
-}
+@import url("../selectors.css");
 
 
 /* Header */

taccsite_cms/static/site_cms/css/src/_imports/components/djangocms_blog/plugins/README.md

@@ -0,0 +1,7 @@
+# Stylesheets - … - Django CMS Blog - Plugin Instances
+
+Plugins can be loaded anywhere on the site, not just on blog app pages.
+
+## Resources
+
+- [Django CMS Blog Plugin Templates](https://github.com/nephila/djangocms-blog/tree/2.0.3/djangocms_blog/templates/djangocms_blog/plugins)

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.plugins.css → taccsite_cms/static/site_cms/css/src/_imports/components/djangocms_blog/plugins/feed.css

@@ -1,41 +1,30 @@
-/*
-Django CMS Blog Plugin Components
-
-These plugins can be loaded anywhere on the site, not just on blog pages.
-
-Reference:
-
-- [Django CMS Blog Plugin Templates](https://github.com/nephila/djangocms-blog/tree/1.2.3/djangocms_blog/templates/djangocms_blog/plugins)
-
-Styleguide Components.DjangoCMS.Blog.Plugins
-*/
-@import url("@tacc/core-styles/src/lib/_imports/tools/media-queries.css");
+/* https://github.com/nephila/djangocms-blog/blob/2.0.3/djangocms_blog/templates/djangocms_blog/plugins/latest_entries.html */
+/* https://github.com/nephila/djangocms-blog/blob/2.0.3/djangocms_blog/templates/djangocms_blog/plugins/featured_posts.html */
+/* https://github.com/nephila/djangocms-blog/blob/2.0.3/djangocms_blog/templates/djangocms_blog/plugins/authors_posts.html */
 
 @import url("../tools/x-news.css");
 
-@import url("./django.cms.blog.selectors.css");
+@import url("../selectors.css");
 
 
 
 
 /* ROOT */
 
 /* to enable container queries */
-.plugin-blog {
-    @mixin news;
-
+.plugin-blog:has(:--news-feed-list) {
     container-type: inline-size;
 }
 
 
 
 
-/* FEED: LATEST BLOG ARTICLES */
+/* FEED */
 
 
 /* Root */
 
-:--news-feed-embed {
+:--news-feed-list {
     @mixin news-feed;
 
     margin-bottom: var(--global-space--bootstrap-gap);
@@ -53,12 +42,12 @@ Styleguide Components.DjangoCMS.Blog.Plugins
 /* Article */
 
 /* to hide article details (attribution and metadata) */
-:--news-feed-embed article .post-detail {
+:--news-feed-list article .post-detail {
     display: none;
 }
 
 /* for article layout */
-:--news-feed-embed article {
+:--news-feed-list article {
     @mixin news-feed__article;
 
     & header       { grid-area: head; }
@@ -67,48 +56,48 @@ Styleguide Components.DjangoCMS.Blog.Plugins
 
     @mixin news-feed--grid-layout__article;
 }
-:--news-feed-embed article:not(:has(.blog-visual > *)) {
+:--news-feed-list article:not(:has(.blog-visual > *)) {
     @mixin news-feed__article--no-media;
 }
 
 /* Article - Titles */
 
 /* to style h3 like an h4 */
-:--news-feed-embed article h3 {
+:--news-feed-list article h3 {
     margin-bottom: 0.5rem; /* Bootstrap _type.css */
 
     font-size: var(--global-font-size--medium);
     font-weight: var(--bold);
 }
-:--news-feed-embed article h4 {
+:--news-feed-list article h4 {
   display: none;
 }
 
 /* Article - Details */
 
 /* to hide stuff that is not in a simple feed */
-:--news-feed-embed article h4,
-:--news-feed-embed article .post-detail {
+:--news-feed-list article h4,
+:--news-feed-list article .post-detail {
     display: none;
 }
 
 /* Article - Visual */
 
-:--news-feed-embed article .blog-visual {
+:--news-feed-list article .blog-visual {
   @mixin news-feed-article__media;
   @mixin news-feed-article__media--above-text;
   @mixin news-feed-article__media--constrain-content;
 }
 
 /* Article - Lead */
 
-:--news-feed-embed article .blog-lead {
+:--news-feed-list article .blog-lead {
     @mixin news-feed-article__lead;
 }
 
 
 /* Article - Footer */
 
-:--news-feed-embed article .read-more {
+:--news-feed-list article .read-more {
   @mixin news-feed-article__link-overlay;
 }

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.selectors.css → taccsite_cms/static/site_cms/css/src/_imports/components/djangocms_blog/selectors.css

@@ -12,6 +12,6 @@
 @custom-selector :--news-article-item--in-list :--news-feed-page--as-list article;
 @custom-selector :--news-article-item--in-grid :--news-feed-page--as-grid article;
 
-@custom-selector :--news-feed-embed
+@custom-selector :--news-feed-list
   .blog-latest-entries,
   .blog-featured-posts;

taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css

@@ -10,14 +10,7 @@
 /* BASE */
 
 
-/* Root */
-
-@define-mixin news {
-  /* … */
-}
-
-
-/* Details */
+/* Roots */
 
 @define-mixin news-details {
   margin-bottom: 1rem; /* to not rely on <ul> + core-styles.base.css for this */

taccsite_cms/static/site_cms/css/src/app.blog.pages.css

@@ -0,0 +1,5 @@
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+@import url("./_imports/components/djangocms_blog/pages/article.css");
+@import url("./_imports/components/djangocms_blog/pages/feed.css");
+@import url("./_imports/components/djangocms_blog/pages/shared.css");

taccsite_cms/static/site_cms/css/src/app.blog.plugins.css

@@ -1,4 +1,3 @@
 /* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
 
-/* Styles for blog app plugins (not the blog pages which are at only 1 route) */
-@import url("./_imports/components/django.cms.blog.plugins.css");
+@import url("./_imports/components/djangocms_blog/plugins/feed.css");

taccsite_cms/templates/assets_core_cms.html

@@ -11,6 +11,6 @@
 
   {% blog_is_installed as has_blog %}
   {% if has_blog %}
-  @import url("{% static 'site_cms/css/build/app.blog.plugins.css' %}") layer(project);
+  @import url("{% static 'djangocms_blog/css/djangocms_blog_plugins.css' %}") layer(project);
   {% endif %}
 </style>

taccsite_cms/templates/djangocms_blog/base.html

@@ -17,11 +17,11 @@
 {% addtoblock "css" %}
 {% if settings.TACC_CORE_STYLES_VERSION == 0 %}
 <style>
-  @import url("{% static 'site_cms/css/build/site.app.blog.css' %}") layer(project.core);
+  @import url("{% static 'djangocms_blog/css/djangocms_blog_pages.css' %}") layer(project.core);
 </style>
 {% elif settings.TACC_CORE_STYLES_VERSION >= 1 %}
 <style>
-  @import url("{% static 'site_cms/css/build/app.blog.css' %}") layer(project);
+  @import url("{% static 'djangocms_blog/css/djangocms_blog_pages.css' %}") layer(project);
 </style>
 {% endif %}
 {% endaddtoblock %}