feat: WP-197 use @layer's / help migrate Frontera (#856)

* feat: WP-197 use @layer's / help migrate Frontera Frontera migration — TACC/Core-CMS-Custom#293 — uses @layers, but then Frontera styles yield to Core-CMS styles. They yield to Core-CMS because Core-CMS — with `TACC_CORE_STYLES_VERSION=0` — has all its styles in an anonymous layer. (CSS in an anonymous layer beats CSS in a named layer.) * fix: #s-header .nav-link hover underline * fix: #s-header .nav-link hover underline for real * chore: rename override-v4… * fix: site.css overrides boostrap navbar pad…left * fix: layer project overwrites `project.migration` So, change `project` to `project.core`. * fix: bootstrap 3 styles overriding header * fix: header fix missing on new core-styles v1 site Recent CSS fix for header was only applied to v1-origin sites. The fix should be applied to v4.18+ sites.
TACC · Oct 1, 2024 · 7843331 · 7843331
1 parent eb11d1d
commit 7843331
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 9 deletions.
diff --git a/taccsite_cms/static/site_cms/css/src/_migrations/v1_v2/bootstrap.3.3.7.css b/taccsite_cms/static/site_cms/css/src/_migrations/v1_v2/bootstrap.3.3.7.css
@@ -25,6 +25,11 @@ SRC: https://bitbucket.org/taccaci/frontera/src/master/client/css/bootstrap.min.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
 
+/* Wrapped by TACC (start) */
+/* FAQ: To NOT apply to header nor footer */
+/* FAQ: To NOT increase spcificity */
+:where(main) {
+
 /* … */
 
 b,
@@ -83,11 +88,15 @@ button[disabled],
 html input[disabled] {
  cursor:default
 }
+/* Disabled by TACC */
+/* FAQ: The `-moz-focus-inner` breaks CSS nesting */
+/*
 button::-moz-focus-inner,
 input::-moz-focus-inner {
  border:0;
  padding:0
 }
+*/
 input {
  line-height:normal
 }
@@ -136,6 +145,9 @@ th {
  padding:0
 }
 
+/* Wrapped by TACC (end) */
+}
+
 /* … */
 
 html {
@@ -151,6 +163,11 @@ body {
  color:#222222;
 }
 
+/* Wrapped by TACC (start) */
+/* FAQ: To NOT apply to header nor footer */
+/* FAQ: To NOT increase spcificity */
+:where(main) {
+
 /* … */
 
 a {
@@ -449,3 +466,6 @@ table {
 }
 
 /* … */
+
+/* Wrapped by TACC (end) */
+}
diff --git a/taccsite_cms/static/site_cms/css/src/_migrations/v1_v2/override-v3.site.css b/taccsite_cms/static/site_cms/css/src/_migrations/v1_v2/override-v3.site.css
@@ -2,8 +2,8 @@
  * TACC v3 site.css Overrides
  */
 
-/* To restore ../bootstrap.3.3.7.css margin-top */
-/* To overwrite Core CMS v3.10 Core-Styles v0.11+ */
+/* To restore ../bootstrap.3.3.7.css `margin-top` */
+/* FAQ: Overrides Core CMS v3.10 Core-Styles v0.11+ */
 /* https://github.com/TACC/Core-Styles/blob/v0.13.0/src/lib/_imports/elements/html-elements.cms.css#L92-L95 */
 h1 + h2,
 h1 + hr {

diff --git a/taccsite_cms/static/site_cms/css/src/_migrations/v4-17_v4-18/README.md b/taccsite_cms/static/site_cms/css/src/_migrations/v4-17_v4-18/README.md
@@ -0,0 +1,6 @@
+# TACC CMS - Stylesheets - Migrations - v4.17 to v4.18
+
+This is a migration:
+
+- from **not** using CSS layers
+- to using CSS layers
diff --git a/taccsite_cms/static/site_cms/css/src/_migrations/v4-17_v4-18/site.layer-fixes.css b/taccsite_cms/static/site_cms/css/src/_migrations/v4-17_v4-18/site.layer-fixes.css
@@ -0,0 +1,13 @@
+/* To fix layout of elements in CSS header */
+/* FAQ: The `site.css` in `layer(project.core)` overwrites Bootstrap `_navbar.scss` in `layer(foundation)`. This causes `site.css` <ul> `padding-left: 0` to overwrite Bootstrap */
+.navbar-nav {
+  padding-left: 0;
+}
+
+/* To not rely on Bootstrap `.nav-link:hover` */
+/* FAQ: Because Bootstrap can be reverted or not loaded */
+/* FAQ: Overrides site.css `a:hover` */
+#s-header .nav-link,
+#s-header .nav-link > a {
+  text-decoration: none !important; /* to override even if within lower layer */
+}
diff --git a/taccsite_cms/templates/assets_site.html b/taccsite_cms/templates/assets_site.html
@@ -13,13 +13,19 @@
 
 <!-- Site Assets: Styles. -->
 
-<!-- TODO: Use same version of Bootstrap as TACC/Core-Portal (v4.3.1) -->
-<link id="css-bootstrap" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+<style>
+  {# https://tacc-main.atlassian.net/wiki/x/hRlv #}
+  @layer foundation, /* @base, */ project;
 
-<link id="css-site" rel="stylesheet" href="{% static 'site_cms/css/build/site.css' %}">
-<link id="css-site-header" rel="stylesheet" href="{% static 'site_cms/css/build/site.header.css' %}">
-{# CAVEAT: Requires `npm run build:css` step #}
-<link id="css-site-v3-11+" rel="stylesheet" href="{% static 'site_cms/css/build/site.v3-11-plus.css' %}">
+  /* TODO: Use same version of Bootstrap as TACC/Core-Portal (v4.3.1) */
+  @import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css") layer(foundation);
+
+  @import url("{% static 'site_cms/css/build/site.css' %}") layer(project.core);
+  @import url("{% static 'site_cms/css/build/site.header.css' %}") layer(project.core);
+
+  @import url("{% static 'site_cms/css/build/site.v3-11-plus.css' %}") layer(project.core);
+  @import url("{% static 'site_cms/css/build/site.layer-fixes.css' %}") layer(project.core);
+</style>
 
 
 {# Impacts the clients "CEPv2" Portal & Frontera Docs #}

diff --git a/taccsite_cms/templates/djangocms_blog/base.html b/taccsite_cms/templates/djangocms_blog/base.html
@@ -22,7 +22,9 @@
 {# /TACC #}
 
 {% if settings.TACC_CORE_STYLES_VERSION == 0 %}
-<link rel="stylesheet" href="{% static 'site_cms/css/build/site.app.blog.css' %}">
+<style>
+  @import url("{% static 'site_cms/css/build/site.app.blog.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);