From d1753544ea58c1226c6f37a3b84f810b0ce5c6f8 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Fri, 20 Aug 2021 18:15:02 -0500
Subject: [PATCH] GH-83: WIP: Callout Plugin

---
 .../css/src/_imports/components/c-callout.css | 82 +++++++++++++++++++
 taccsite_cms/static/site_cms/css/src/site.css |  1 +
 2 files changed, 83 insertions(+)
 create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css

diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css
new file mode 100644
index 000000000..0ebb95b68
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css
@@ -0,0 +1,82 @@
+/*
+Callout
+
+Interrupt or end Sections with a "call to action".
+
+Markup:
+<aside class="c-callout">
+  <h2 class="c-callout__title">
+    Quick Start Guide
+  </h2>
+  <p class="c-callout__desc">
+    Explore the Frontera User Guide to learn how to get started, see what Frontera offers, and get answers to your questions.
+  </p>
+  <figure class="c-callout__figure">...</figure>
+</aside>
+
+Styleguide Components.Callout
+*/
+@import url("_imports/tools/media-queries.css");
+
+
+
+
+
+/* Layout */
+
+.c-callout {
+  display: grid;
+  grid-template-areas:
+    'figure title'
+    'figure desc';
+
+  padding: 20px;
+}
+.c-callout__figure { grid-area: figure; }
+.c-callout__title { grid-area: title; }
+.c-callout__desc { grid-area: desc; }
+
+/* To hide figure on narrow window */
+@media only screen and (--narrow-and-below) {
+  .c-callout { column-gap: 0px; }
+  .c-callout__figure { display: none; }
+}
+@media only screen and (--narrow-and-above) {
+  .c-callout { column-gap: 40px; }
+}
+
+/* To align image to exact center */
+.c-callout__figure {
+  place-self: center;
+  margin: 0; /* override Bootstrap and browser */
+}
+
+/* To force wrap before full width (to match design) */
+/* NOTE: 1200px window, design has 15px but this was 7px (wraps the same) */
+/* FAQ: Differ from design so narrow screen wrap limit is not noticeable */
+.c-callout__desc { padding-right: 1%; }
+
+
+
+
+
+/* Style */
+
+.c-callout {
+  /* HELP: Should this color change if it is in a dark `o-section`? */
+  /* SEE: https://confluence.tacc.utexas.edu/x/DyUFDg */
+  background-color: var(--global-color-link-on-light--normal);
+}
+.c-callout__title {
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--global-color-primary--xx-light);
+
+  font-size: var(--global-font-size--x-large);
+  font-weight: var(--medium);
+  color: var(--global-color-primary--xx-light); /* override `html-elements.css` */
+}
+.c-callout__desc {
+  font-size: var(--global-font-size--large);
+  color: var(--global-color-primary--xx-light);
+}
diff --git a/taccsite_cms/static/site_cms/css/src/site.css b/taccsite_cms/static/site_cms/css/src/site.css
index e093b9790..ba943ec6d 100644
--- a/taccsite_cms/static/site_cms/css/src/site.css
+++ b/taccsite_cms/static/site_cms/css/src/site.css
@@ -31,6 +31,7 @@
 @import url("_imports/components/c-article-list.css");
 @import url("_imports/components/c-article-preview.css");
 @import url("_imports/components/c-date.css");
+@import url("_imports/components/c-callout.css");
 @import url("_imports/components/c-data-list.css");
 @import url("_imports/components/c-footer.css");
 @import url("_imports/components/c-see-all-link.css");