+ This component is maintained simuiltaneously with C Form and should look identical. Eventually, the two should have a single source of truth. To learn more, read (Confluence) APCD - Form Markup & Styles. +
+
+
+
+
+
+
+
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms/readme.md b/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms/readme.md
new file mode 100644
index 000000000..795968004
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms/readme.md
@@ -0,0 +1,20 @@
+To style forms built by [Django CMS forms][djcms-forms].
+
+> **⚠️ Important**
+>
+> **Only** intended for [Django CMS forms][djcms-forms]. To style a form **not** using that plugin, use [TACC form component]({{path './c-form' }}).
+
+> **ⓘ Notice**
+>
+> Most of the markup can be seen at [template][djcms-forms-tpl]. Some of the classes and markup come from [Django form field widgets][django-form-widgets].
+
+[djcms-forms]: https://pypi.org/project/djangocms-forms-maintained/ "DjangoCMS-Forms (Maintained)"
+[djcms-forms-tpl]: https://github.com/avryhof/djangocms-forms/blob/ab38b22/djangocms_forms/templates/djangocms_forms/form_template/default.html "DjangoCMS Forms (Maintained) Template"
+[django-form-widgets]: https://docs.djangoproject.com/en/2.2/ref/forms/widgets/ "Django Form Widgets"
+
+
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-video.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-video.css
new file mode 100644
index 000000000..e56f7c7af
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-video.css
@@ -0,0 +1,10 @@
+/* Let us control size of video without dimension */
+/* FAQ: Select any content within embed wrapper that has no dimension class */
+.embed-responsive:not([class*="embed-responsive-"])
+:is(.embed-responsive-item, embed, iframe, object, video) {
+ /* To undo Bootstrap _embed.css */
+ position: unset;
+ top: unset;
+ bottom: unset;
+ left: unset;
+}
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css
index 70db82b45..fbd49629d 100644
--- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css
+++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css
@@ -37,6 +37,15 @@ Styleguide Components.DjangoCMS.Blog.App
+/* Generic */
+
+.app-blog {
+ /* To control absolute position of descendants e.g. `.blog-visual` */
+ position: relative;
+}
+
+
+
/* Header */
.blog-list > header {
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css
index 29e1ad6cd..ba43af062 100644
--- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css
+++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css
@@ -10,8 +10,8 @@ Styleguide Components.DjangoCMS.Blog.App.Item
@import url("@tacc/core-styles/src/lib/_imports/tools/x-article-link.css");
@import url("@tacc/core-styles/src/lib/_imports/tools/x-truncate.css");
-@import url("_imports/tools/media-queries.css");
-@import url("_imports/tools/selectors.css");
+@import url("../tools/media-queries.css");
+@import url("../tools/selectors.css");
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css
index 3ff285594..4171d8e52 100644
--- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css
+++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css
@@ -7,6 +7,8 @@ Reference:
Styleguide Components.DjangoCMS.Blog.App.Page
*/
+@import url("@tacc/core-styles/src/lib/_imports/objects/o-offset-content.css");
+
@import url("./django.cms.blog.app.page.multimedia.css");
@@ -110,3 +112,47 @@ Styleguide Components.DjangoCMS.Blog.App.Page
:--article-page .blog-content li + li {
margin-top: 0.5em;
}
+
+
+
+/* Media & Content - Alignment */
+
+:--article-page .blog-content .align-left {
+ @extend .o-offset-content--left;
+}
+:--article-page .blog-content .align-right {
+ @extend .o-offset-content--right;
+}
+:--article-page .blog-content .align-center {
+ max-width: 100%; /* overwrite @tacc/core-styles/…/components/align.css */
+}
+
+/* To remove margin on narrow screens */
+/* To overwrite @tacc/core-styles/…/components/align.css */
+@media (--narrow-and-below) {
+ :--article-page .blog-content .align-center,
+ :--article-page .blog-content .align-right,
+ :--article-page .blog-content .align-left {
+ max-width: unset;
+ }
+ :--article-page .blog-content .align-right,
+ :--article-page .blog-content .align-left {
+ float: unset;
+ margin-bottom: unset;
+ }
+ :--article-page .blog-content .align-right {
+ margin-left: unset;
+ }
+ :--article-page .blog-content .align-left {
+ margin-right: unset;
+ }
+}
+
+/* To reduce image width on medium screens */
+@media (--narrow-and-above) and (--medium-and-below) {
+ :--article-page .blog-content .align-center,
+ :--article-page .blog-content .align-right,
+ :--article-page .blog-content .align-left {
+ max-width: 50%;
+ }
+}
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.css
deleted file mode 100644
index a0d19b6f9..000000000
--- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
-Django CMS Blog Components
-
-Components for [Django CMS Blog](https://djangocms-blog.readthedocs.io) UI. These classes are authored in templates of third-party origin that offers no styles. These styles are split between app page UI and plugin UI.
-
-Reference:
-
-- [Django CMS Blog](https://github.com/nephila/djangocms-blog/tree/1.1.1/djangocms_blog)
-
-Styleguide Components.DjangoCMS.Blog
-*/
-
-/* NOTE: Author styles in relevant prefixed stylsheets */
-/* FAQ: This file is just KSS-format CSS documentation */
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.picture.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.picture.css
index 1ff909456..d65dc581f 100644
--- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.picture.css
+++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.picture.css
@@ -1,37 +1,41 @@
-/*
-Django CMS Picture
-
-Classes from [Django CMS Picture](https://github.com/django-cms/djangocms-picture#readme).
-
-Reference:
-
-- [Django CMS Picture `.align-` Classes](https://github.com/django-cms/djangocms-picture/blob/2.3.0/djangocms_picture/models.py#L24-L34)
+/* To support djangocms-picture plugin unstyled default alignment classes */
+/* SEE: https://github.com/django-cms/djangocms-picture/blob/2.3.0/djangocms_picture/models.py#L24-L34 */
+@import url("@tacc/core-styles/src/lib/_imports/components/align.css");
-Styleguide Components.DjangoCMS.Picture
+/* Try to auto-clear image floats */
+/* WARNING: The commented solution clears float BUT also negates float */
+/*
+.align-right + *:not(img) { clear: right }
+.align-left + *:not(img) { clear: left }
*/
-
-
-/* Default Values */
-
-/* Support default alignment classes */
-.align-right,
-.align-left {
- margin-bottom: var(--global-space--grid-gap);
+/* To apply djangocms-bootstrap4/…_picture class styles from parent to image */
+/* FAQ: TACC/Core-CMS moves (side effect) Picture classes to Title of Form
+
+ I describe the form, but not very well.
+
+
+
+
+
+
+