UTRC-356: New Homepage (Styles & Template)

utrc-cms/settings_custom.py

@@ -10,6 +10,8 @@
 CMS_TEMPLATES = (
     ('utrc-cms/templates/standard.html', 'Standard'),
     ('utrc-cms/templates/fullwidth.html', 'Full Width'),
+    ('utrc-cms/templates/home.html', 'Home'),
+
     ('guide.html', 'Guide'),
     ('guides/getting_started.html', 'Guide: Getting Started'),
     ('guides/data_transfer.html', 'Guide: Data Transfer'),

utrc-cms/static/utrc-cms/css/src/_imports/trumps/s-focus-list.css

@@ -0,0 +1,25 @@
+/*
+Focus List
+
+A list with text that should allow a user to focus on each line.
+
+Markup:
+<h2>UTRC works with researchers to:</h2>
+<ul class="s-focus-list">
+  <li>Develop Applications</li>
+  <li>Manage and Analyze Data</li>
+  <li>Integrate with the Decentralized Resources</li>
+</ul>
+
+Styleguide Trumps.Scopes.FocusList
+*/
+
+.s-focus-list {
+  margin-block: 1.0em 1.5em;
+  padding-inline: 1.5em;
+
+  font-size: larger;
+  line-height: 1.75;
+
+  list-style: none;
+}

utrc-cms/static/utrc-cms/css/src/_imports/trumps/s-home.css

@@ -0,0 +1,185 @@
+/* TACC TRUMPS: Home (Page) */
+@import url("../../../../../../../../taccsite_cms/static/site_cms/css/src/_imports/tools/x-overlay.css");
+@import url("../../../../../../../../taccsite_cms/static/site_cms/css/src/_imports/tools/media-queries.css");
+@import url("../../../../../../../../taccsite_cms/static/site_cms/css/src/_imports/settings/border.css");
+
+
+
+
+
+/* Banner */
+/* Content */
+
+@media (--narrow-and-above) {
+  /* FAQ: Extra specificty to overwrite Core `site.css` */
+  .s-home__banner.o-section.container,
+  .s-home__content.o-section.container {
+    --horz-space: 116px;
+  }
+}
+
+
+
+
+
+/* Banner */
+
+
+
+/* Banner: Container */
+
+.s-home__banner {
+  position: relative; /* for `position: absolute` children */
+}
+@media (--medium-and-below) {
+  .s-home__banner {
+    height: auto;
+    display: grid;
+  }
+}
+@media (--medium-and-above) {
+  .s-home__banner {
+    height: 55.5rem;
+    display: block;
+  }
+}
+
+
+
+/* Banner: Overlay */
+
+@media (--medium-and-above) {
+  .s-home__banner.o-section--banner .o-section__banner-overlay {
+    position: absolute;
+    height: auto;
+    width: 475px;
+    left: 0;
+    bottom: 50px;
+  }
+}
+.s-home__banner.o-section--banner .o-section__banner-overlay {
+  @extend .x-overlay--callout;
+
+  --color-text: inherit;
+  --color-bkgd-rgb: var(--global-color-primary--normal);
+
+  color: var(--color-text);
+  background-color: rgba(var(--color-bkgd-rgb), 0.9);
+}
+.s-home__banner.o-section--banner.o-section--style-dark .o-section__banner-overlay {
+  --color-text: var(--global-color-primary--xx-light);
+  --color-bkgd-rgb: var(--global-color-primary--xx-dark-rgb);
+}
+.s-home__banner.o-section--banner.o-section--style-light .o-section__banner-overlay {
+  --color-text: var(--global-color-primary--xx-dark);
+  --color-bkgd-rgb: var(--global-color-primary--xx-light-rgb);
+}
+
+
+
+
+
+/* Introduction */
+
+.s-home__intro {
+  --left-buffer: 48px;
+
+  padding: 24px 84px 36px var(--left-buffer);
+
+  font-weight: bold;
+}
+@media (--narrow-and-above) {
+  .s-home__intro {
+    margin-left: calc(
+      -1 * var(--left-buffer)
+    ); /* to align left side via text edge, not box edge */
+    margin-right: calc(
+      -1 *var(--left-buffer)
+    ); /* (on narrow window) to offset right of box same as left */
+  }
+}
+
+.s-home__intro h1 {
+  margin-top: 0;
+  padding-bottom: 14px;
+  margin-bottom: 18px;
+
+  font-size: 2.4rem; /* design deviates from standard to fit text on 2 lines */
+
+  border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--xx-dark);
+}
+
+
+
+
+
+/* Content */
+
+
+
+/* Content: Panels */
+
+/* First panel */
+@media (--wide-and-above) {
+  /* To match design */
+  .s-home__content > *:nth-child(1) { margin-right: 100px; }
+}
+@media (--medium-and-above) and (--wide-and-below) {
+  /* To prevent wrapping of `.s-focus-list` items */
+  .s-home__content > *:nth-child(1) { margin-right: 25px; }
+}
+
+/* Second panel */
+@media (--medium-and-above) {
+  .s-home__content > *:nth-child(2) {
+    /* To draw a border between grid items (that has existing gap) */
+    border-left:
+      var(--global-border-width--normal) solid
+      var(--global-color-primary--xx-dark);
+    --border-color: var(--global-color-primary--xx-dark);
+    padding-left: var(--gap);
+
+    /* To allow text to spill into right-hand margin of content */
+    margin-right: -35px; /* anywhere between when text wraps: -10px and -43px */
+  }
+}
+
+
+
+/* Content: Elements */
+
+.s-home__content h2 {
+  font-size: var(--global-font-size--large);
+}
+.s-home__content p {
+  font-weight: var(--medium);
+}
+
+
+
+/* Content: Focus List */
+
+.s-home__content .s-focus-list {
+  font--size: var(--global-font-size--large);
+}
+
+
+
+/* Content: Icon List */
+
+.s-home__content .s-icon-list {
+  padding-left: 0;
+  margin-block: 46px;
+
+  /* line-height: 1.75; */
+
+  color: var(--global-color-primary--xx-dark);
+}
+.s-home__content .s-icon-list li + li {
+  margin-top: 40px;
+}
+@media (--wide-and-below) and (--medium-and-above) {
+  .s-home__content .s-icon-list {
+    --icon-size: 2em;
+  }
+}

utrc-cms/static/utrc-cms/css/src/_imports/trumps/s-icon-list.css

@@ -0,0 +1,39 @@
+/*
+Icon List
+
+A list with items that each has an icon. It should appear _more_ important than a regular list, but __not__ as important as a [Highlight List](https://confluence.tacc.utexas.edu/x/MYAjCQ).
+
+Markup:
+<ul class="s-icon-list">
+	<li>
+    <i class="icon icon-bulb"><!-- ... --></i>
+    Getting Started Guide
+  </li>
+	<li>
+    <i class="icon icon-share"><!-- ... --></i>
+    Allocation Overview
+  </li>
+</ul>
+
+Styleguide Trumps.Scopes.IconList
+*/
+@import url("../../../../../../../../taccsite_cms/static/site_cms/css/src/_imports/tools/x-truncate.css");
+
+
+
+.s-icon-list {
+  --icon-size: 3.5em;
+
+  font-weight: var(--bold);
+  text-transform: uppercase;
+
+  list-style: none;
+}
+.s-icon-list li {
+  @extend %x-truncate--one-line;
+}
+.s-icon-list .icon {
+  vertical-align: middle;
+
+  font-size: var(--icon-size);
+}

utrc-cms/static/utrc-cms/css/src/template.home.css

@@ -0,0 +1,9 @@
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* SEE: https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* TRUMPS */
+@import url("_imports/trumps/s-home.css");
+@import url("_imports/trumps/s-focus-list.css");
+@import url("_imports/trumps/s-icon-list.css");

utrc-cms/templates/home.html

@@ -0,0 +1,10 @@
+{% extends "fullwidth.html" %}
+{% load cms_tags staticfiles %}
+
+{% block assets_custom %}
+  {{ block.super }}
+
+  <link rel="stylesheet" href="{% static 'utrc-cms/css/build/template.home.css' %}">
+{% endblock assets_custom %}
+
+{% block page_type_class %}s-home{% endblock page_type_class %}