Merge pull request #187 from TACC/task/GH-157-frontera-redesign-0

Task/gh 157 frontera redesign 0

taccsite_cms/settings.py

@@ -414,6 +414,9 @@ def get_subdirs_as_module_names(path):
 
 DJANGOCMS_PICTURE_NESTING = True
 DJANGOCMS_PICTURE_RESPONSIVE_IMAGES = True
+DJANGOCMS_PICTURE_RESPONSIVE_IMAGES_VIEWPORT_BREAKPOINTS = [
+    576, 768, 992, 1200, 1400, 1680, 1920
+]
 DJANGOCMS_PICTURE_RATIO = 1.618
 
 # FILE UPLOAD VALUES MUST BE SET!

taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css

@@ -23,8 +23,8 @@
   height: 49px;
 
 
-  background-color: rgb(51, 51, 51);
-  color: #fff;
+  background-color: var(--global-color-primary--xx-dark);
+  color: var(--global-color-primary--xx-light);
   border-bottom: 1px solid #aaa;
 }
 

taccsite_cms/static/site_cms/css/src/_imports/components/bootstrap.container.css

@@ -0,0 +1,23 @@
+/*
+Container (Bootstrap)
+
+Add to Bootstrap styles. See:
+
+- [Bootstrap Grid](https://getbootstrap.com/docs/4.0/layout/grid/)
+
+Styleguide Components.Bootstrap.Grid
+*/
+@import url("../../../../../../../taccsite_cms/static/site_shared/css/src/_imports/tools/media-queries.css");
+
+@media (--x-wide-and-above) {
+  .container { max-width: var(--global-max-width--x-wide); }
+}
+@media (--xx-wide-and-above) {
+  .container { max-width: var(--global-max-width--xx-wide); }
+}
+/* FAQ: We can do this, but Design does not want to stretch this wide */
+/*
+@media (--xxx-wide-and-above) {
+  .container { max-width: var(--global-max-width--xxx-wide); }
+}
+*/

taccsite_cms/static/site_cms/css/src/_imports/components/c-footer.css

@@ -28,8 +28,8 @@ Styleguide Components.Footer
   padding-top: 20px;
   padding-bottom: 20px;
 
-  color: rgb(255, 255, 255);
-  background-color: rgb(51, 51, 51);
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-primary--xx-dark);
 
   font-size: 12px;
   text-align: center;

taccsite_cms/static/site_cms/css/src/_imports/components/c-read-more.css

@@ -0,0 +1,50 @@
+/*
+Read More
+
+A CSS-only way to support a "Read More…" feature. It requires a container and three children in order:
+- state checkbox (must be first)
+- target text
+- toggle element
+
+.c-read-more--one-line   - Truncated text may only be one line tall.
+.c-read-more--many-lines - Truncated text may be many lines tall.
+
+Styleguide: Components.ReadMore
+*/
+@import url("_imports/tools/x-truncate.css");
+
+/* Truncation */
+
+/* Many Lines */
+.c-read-more--many-lines .c-read-more__target {
+  @extend .x-truncate--many-lines;
+}
+.c-read-more--many-lines .c-read-more__state:checked ~ .c-read-more__target {
+  @extend .x-untruncate--many-lines;
+}
+
+/* One Line */
+.c-read-more--one-line .c-read-more__target {
+  @extend .x-truncate--one-line;
+}
+.c-read-more--one-line .c-read-more__state:checked ~ .c-read-more__target {
+  @extend .x-untruncate--one-line;
+}
+
+/* Read More / Read Less */
+
+/* State */
+.c-read-more__state,
+.c-read-more__on-text,
+.c-read-more__off-text {
+  display: none;
+}
+.c-read-more__state:not(:checked) ~ .c-read-more__toggle .c-read-more__on-text,
+.c-read-more__state:checked ~ .c-read-more__toggle .c-read-more__off-text {
+  display: block;
+}
+
+/* Toggle */
+.c-read-more__toggle {
+  cursor: pointer;
+}

taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css

@@ -28,7 +28,12 @@ body {
 }
 
 body {
+  /* To avoid negative whitespace at right on horz scroll on tiny screen */
+  min-width: 290px; /* developer-decided value */
+
   font-family: var(--global-font-family);
+
+  line-height: 1.4; /* overwrite Bootstrap */
 }
 
 

taccsite_cms/static/site_cms/css/src/_imports/elements/tacc-search-bar.css

@@ -18,6 +18,10 @@ Styleguide Elements.TACC.SearchBar
 
 /* tacc-search-bar.s-search-bar::part(form) { */
 [part="form"] {
+  /* FAQ: Ensure search field font matches Portal */
+  /* SEE: https://confluence.tacc.utexas.edu/x/cYAZCg */
+  font-family: "Roboto";
+
   /* Copied from `.container` from Portal */
   /* SEE: https://github.com/TACC/Frontera-Portal/blob/master/client/src/components/DataFiles/DataFilesSearchbar/DataFilesSearchbar.module.css */
   display: flex;

taccsite_cms/static/site_cms/css/src/_imports/generics/fonts.css

@@ -0,0 +1,54 @@
+/*
+Fonts
+
+Load standard fonts for a TACC website.
+
+Usage:
+  ```
+  .something {
+    // BentonSans-MediumItalic
+    font-family: 'Benton Sans';
+    font-weight: 500;
+    font-style: italic;
+  }
+  ```
+
+Reference:
+- [Keep Font CSS Simple](https://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/)
+- [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
+- [Shared UI - Constants - Font](https://confluence.tacc.utexas.edu/x/cYAZCg)
+
+Styleguide Generics.Fonts
+*/
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("/static/frontera-cms/fonts/archive/BentonSans-Regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("/static/frontera-cms/fonts/archive/BentonSans-Bold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("/static/frontera-cms/fonts/archive/BentonSans-Medium.otf") format("opentype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("/static/frontera-cms/fonts/archive/BentonSans-MediumItalic.otf") format("opentype");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}