feat: save 2 css snippets (#459)

* feat: save css-homepage-2024-02 snippet * fix: save css-banner-tacc bugfix * fix: incorrect location for comments and a11y css * docs: improve tacc banner height edit message * docs: kinder tacc banner height edit message --------- Co-authored-by: Jake Rosenberg <[email protected]>
TACC · Aug 13, 2024 · 64859a8 · 64859a8
1 parent 20b334f
commit 64859a8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/apps/tup-cms/src/taccsite_cms/templates/snippets/css-banner-tacc.html b/apps/tup-cms/src/taccsite_cms/templates/snippets/css-banner-tacc.html
@@ -1,3 +1,6 @@
+<template id="css-banner-tacc--notes">
+<!-- TO DYNAMICALL REDUCE HEIGHT OF BANNER: NO NEED to edit this stylesheet. Edit banner "Picture / Image" on CMS. Set `style="height: 60vh; max-height: 550px; min-height: 230px;"`. To use static height, set `style="height: 550px"` instead. -->
+</template>
 <style id="css-banner-tacc">
 /* To limit width of title on wide screens */
 @media (width >= 992px) {
@@ -23,7 +26,7 @@
     left: 0; top: 0; bottom: 0; right: 0;
     background-color: var(--global-color-primary--x-light);
 }
-.banner-cell--major a:hover .u-highlight {
+.banner-cell--major a:hover :is(.u-highlight, .highlight) {
     background-color: var(--global-color-accent--normal);
 }
 

diff --git a/apps/tup-cms/src/taccsite_cms/templates/snippets/css-global-a11y.html b/apps/tup-cms/src/taccsite_cms/templates/snippets/css-global-a11y.html
@@ -0,0 +1,19 @@
+<style id="css-global-a11y">
+/* 1. To make mobile menu button stand out */
+.navbar-dark .navbar-toggler {
+    border-color: var(--global-color-primary--normal);
+}
+
+/* 2. To make keyboard focus stand out on header */
+/*
+.nav-link:focus-visible,
+#header-logo:focus-visible,
+.navbar-dark .navbar-toggler:focus-visible {
+*/
+#s-header :focus,
+#header-branding a:focus,
+.s-search-bar::part(input):focus,
+.s-search-bar::part(button):focus {
+    outline-color: var(--global-color-primary--xx-light);
+}
+</style>