src/assets/uwstyle/assets/scss/_uw_content.scss

+// adds red bottom border
+@mixin uw-boxed($padding: 1.5rem 2rem 1.5rem 2rem) {
+  background-color: $uw-white;
+  border-bottom: 4px solid $uw-red;
+  padding: $padding;
+  @include breakpoint($uw-main-nav-breakpoint) {
+    border-right: 1px solid $uw-gray-light;
+  }
+}
+
+
+// a full width photo
+.uw-hero {
+  line-height: .5;
+  img {
+    width: 100%;
+  }
+  &.uw-hero-constrained-height { // > 1200px fix hero height to 400px
+    @include breakpoint(1200px) {
+      img {
+        object-fit: cover;
+        object-position: 100% 100%;
+        max-height: 400px;
+      }
+    }
+  }
+}
+
+// floats and figures
+.uw-float-right {
+  float: right;
+}
+.uw-float-left {
+  float: left;
+}
+figure {
+  &.uw-float-right, &.uw-float-left {
+    float: none;
+  }
+  margin: 0 auto 1rem;
+  @include breakpoint(rem-calc(500)) {
+    margin: 0;
+    &.uw-float-right {
+      float: right;
+      margin: 0.5rem 0 2rem 2rem;
+    }
+    &.uw-float-left {
+      float: left;
+      margin: 0.5rem 2rem 2rem 0;
+    }
+    &.uw-float-25 {
+      width: 25%;
+    }
+    &.uw-float-33 {
+      width: 33.3333%;
+    }
+    &.uw-float-50 {
+      width: 50%;
+    }
+  }
+}
+
+figure img {
+  border: 1px solid $uw-gray-light;
+  &.uw-no-border {
+    border: none;
+  }
+}
+figure figcaption {
+  font-size: 1rem;
+  font-family: $uw-verlag-font;
+  line-height: 1.4;
+}
+.uw-credit {
+  text-transform: uppercase;
+  color: $uw-gray-darker;
+  font-size: 0.8rem;
+}
+
+
+// a generic content container with a thick bottom red border 
+// and thin gray right border
+.uw-content-box {
+  @include uw-boxed;
+  background-color: darken($uw-page-bg,2%);
+  &.uw-content-box-bleed { // need an visual example for bleed
+    padding: 0 0 1.5rem 0;
+    > * {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+    > .bleed { 
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+  + .uw-content-box { // stacked content boxed have vertical spacing
+    margin-top: 3rem;
+  }
+}
+
+// if the body bg color is light gray, set the box bg color to white
+body.uw-light-gray-bg .uw-content-box {
+  background-color: #fff;
+}

src/assets/uwstyle/assets/scss/_uw_footer.scss

+.uw-footer {
+  -webkit-font-smoothing: antialiased;
+  clear: both;
+  background-color: $uw-gray-darkest;
+  border-top: 5px solid $uw-red;
+  color: $uw-gray-footer-text;
+  a {
+    color: $uw-gray-footer-text;
+    &:hover {
+      color: $uw-gray-footer-text-hover;
+    }
+  }
+}
+
+.uw-footer-content {
+  padding-top: 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  max-width: 1200px;
+  margin: 0 auto;
+  > div {
+    flex: 1 0 100%;
+    max-width: 100%;
+    padding: 0 2rem;
+    text-align: center;
+    &.uw-logo {
+      padding-bottom: 2rem;
+      text-align: center;
+    }
+  }
+  ul {
+    margin-left: 0;
+    margin-bottom: 2rem;
+  }
+  p,li {
+    font-size: .9rem;
+    margin: 0 0 .5rem;
+    line-height: 1.25;
+    list-style: none;
+  }
+  @include breakpoint(40em) {
+    > div {
+      flex: 1 0 33.333%;
+      max-width: 33.333%;
+      padding: 0 2rem;
+      text-align: center;
+      &.uw-logo:nth-last-child(2):nth-child(1) { // i.e. first of 2
+        flex-basis: 50%;
+        max-width: 50%;
+        text-align: right;
+      }
+      &:nth-last-child(1):nth-child(2) { // i.e. second of 2
+        flex-basis: 50%;
+        max-width: 50%;
+        text-align: left;
+      }
+      &.uw-logo:nth-last-child(3):nth-child(1) { // i.e. first of 3
+        flex-basis: 33.333333%;
+        max-width: 33.333333%;
+        text-align: right;
+      }
+      &:nth-last-child(2):nth-child(2) { // i.e. second of 3
+        flex-basis: 33.333333%;
+        max-width: 33.333333%;
+        text-align: left;
+      }
+      &:nth-last-child(1):nth-child(3) { // i.e. third of 3
+        flex-basis: 33.333333%;
+        max-width: 33.333333%;
+        text-align: left;
+      }
+    }
+    .uw-logo {
+      flex: 0 1 100%;
+      max-width: 100%;
+      padding-bottom: 2rem;
+    }
+    p,li {
+      font-size: 1.1rem;
+      margin-bottom: .75rem;
+    }
+  }
+  @include breakpoint(60.75em) {
+    padding-top: 4rem;
+    > div {
+      flex: 1 0 25%;
+      max-width: 25%;
+      padding: 0 2rem;
+      text-align: left;
+    }
+    .uw-logo {
+      flex-basis: 25%;
+      max-width: 25%;
+    }
+  }
+}
+.uw-footer-menu ul ul {
+  margin: .75rem 0;
+}
+
+.uw-logo {
+  padding-bottom: 1.625rem;
+  a svg {
+    width: 200px;
+    height: 150px;
+    min-width: 175px;
+    fill: $uw-gray-footer-text;
+    color: $uw-gray-footer-text;
+  }
+  a:hover svg {
+    fill: $uw-gray-footer-text-hover;
+    color: $uw-gray-footer-text-hover;
+  }
+}
+
+.uw-footer-header {
+  color: $uw-gray-footer-text;
+  font-weight: 800;
+  font-size: .9rem;
+  line-height: 1.25;
+  margin: 0 0 1rem;
+  @include breakpoint(60.75em) {
+    font-size: 1.2rem;
+  }
+}
+
+.uw-footer-contact {
+  text-align: center;
+}
+.uw-contact-list {
+  margin-left: 0;
+}
+.uw-contact-item {
+  list-style: none;
+  margin-bottom: .75rem;
+  line-height: 1.25;
+}
+[class="uw-contact-item"] > a {
+  text-decoration: underline;
+}
+.uw-map-marker, .uw-footer-icon {
+  width: 1rem;
+  height: 1rem;
+  vertical-align: -2px;
+  fill: $uw-gray-footer-text;
+  &:hover {
+    fill: $uw-gray-footer-text-hover;
+  }
+}
+
+.uw-copyright {
+  padding: 2rem 0.5em 1rem;
+  text-align: center;
+  p {
+    margin-bottom: .2rem;
+    font-size: .925rem;
+    a {
+      text-decoration: underline;
+    }
+  }
+}
+
+
+.uw-social-icons {
+  margin-top: 1rem;
+  margin-left: 0;
+  .uw-social-icon {
+    display: inline-block;
+    margin: 0 .5rem;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+  a {
+    display: inline-block;
+    background-color: $uw-gray-footer-text;
+    padding: 0.4rem;
+    font-size: 1.3rem;
+    line-height: 1.3rem;
+    border-radius: 1.05rem;
+    &:hover {
+      background-color: $uw-gray-footer-text-hover;
+    }
+  }
+  svg {
+    display: inline-block;
+    vertical-align: top;
+    width: 1.3rem;
+    height: 1.3rem;
+    margin: 0;
+    padding: 0;
+    fill: $uw-gray-darkest;
+  }
+}

src/assets/uwstyle/assets/scss/_uw_form.scss

+// Originally sourced from FormHack v1.1.0 (formhack.io)
+// https://github.com/ireade/formhack
+
+// Config -----------------------------
+
+// Font
+$fh-font-size: 1rem !default;
+$fh-font-color: $uw-body-font;
+
+// Borders
+$fh-border-radius: 0px !default;
+$fh-border-width: 1px !default;
+$fh-border-style: solid !default;
+$fh-border-color: rgb(200, 200, 200) !default;
+
+// Inputs, Textareas, Select, Option
+$fh-input-height: 2.5rem !default;
+$fh-input-width: 100% !default;
+$fh-input-max-width: 100% !default;
+$fh-input-bg-color: #fff !default;
+$fh-focus-bg-color: $uw-anchor-color !default;
+$fh-focus-border-color: $fh-border-color !default;
+$fh-focus-font-color: $fh-font-color !default;
+
+// Select Vendor Styling
+$fh-allow-vendor-styling: true !default;
+
+// Fieldset & Legend Styling
+$fh-fieldset-bare: false !default;
+
+// Buttons & Input Submits
+$fh-button-height: 40px !default;
+$fh-button-width: 100% !default;
+$fh-button-max-width: inherit !default;
+$fh-button-font-color: $uw-white !default;
+$fh-button-bg-color: $fh-focus-bg-color !default;
+$fh-button-hover-bg-color: scale-color($uw-anchor-color, $lightness: -15%) !default;
+$fh-button-hover-font-color: $uw-white !default;
+
+// Layout
+$fh-centered: false !default;
+$fh-display: block !default;
+
+
+// Center/Left-Aligned Layout
+@mixin center-layout {
+	@if $fh-centered == true {
+		margin: 0 auto;
+		text-align: center;
+	}
+	@else {
+		margin: 0;
+	}
+}
+
+
+/* Global Reset Styles ------------------ */
+
+input,
+textarea,
+select,
+option,
+optgroup,
+legend,
+fieldset {
+	font-size: $fh-font-size;
+	color: $fh-font-color;
+	vertical-align: top;
+
+	display: $fh-display;
+	@include center-layout;
+}
+
+
+datalist {
+	font-size: $fh-font-size;
+}
+
+label {
+	display: $fh-display;
+	@include center-layout;
+}
+
+.uw-input-row	{
+	margin: 0 0 1rem 0;
+}
+
+/* Input & Textarea ------------------ */
+
+/* Fields with standard width */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="color"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="number"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+input[list],
+input[type="file"],
+select,
+textarea {
+	width: $fh-input-width;
+	max-width: $fh-input-max-width;
+	padding: $fh-input-height / 5;
+	background-color: $fh-input-bg-color;
+	border-radius: $fh-border-radius;
+	border: $fh-border-width $fh-border-style $fh-border-color;
+}
+
+/* Fields with standard height */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="color"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="number"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+input[list] {
+	height: $fh-input-height;
+}
+
+/* Other */
+
+textarea {
+	overflow: auto;
+}
+
+input[type="range"] {
+	height: $fh-input-height;
+	width: $fh-input-width;
+	max-width: $fh-input-max-width;
+}
+
+input[type="file"] {
+	min-height: $fh-input-height;
+}
+
+input[type="search"] {
+	height: $fh-input-height;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+	display: inline-block;
+	vertical-align: .1rem;
+	margin: 0 .1rem;
+}
+
+/* Select ------------------ */
+
+select {
+	height: $fh-input-height;
+}
+
+select[multiple] {
+	height: auto;
+	min-height: $fh-input-height;
+	padding: 0;
+
+	option {
+		margin: 0;
+		padding: $fh-input-height / 5;
+	}
+}
+
+/* Fieldset ------------------ */
+
+fieldset {
+	@if $fh-fieldset-bare == true {
+		padding: 0;
+		border: 0;
+	}
+	@else {
+		padding: 10px 25px;
+		border-radius: $fh-border-radius;
+		border: $fh-border-width $fh-border-style $fh-border-color;
+	}
+	margin-bottom: 1rem;
+}
+
+legend {
+	@if $fh-fieldset-bare == true {
+		padding: 0;
+		font-weight: inherit;
+	}
+	@else {
+		padding: 0 5px;
+		font-weight: 700;
+	}
+}
+
+/* Buttons, Input Type Submit/Reset ------------------ */
+
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
+input[type="image"] {
+	height: $fh-button-height;
+	width: $fh-button-width;
+	max-width: $fh-button-max-width;
+	background-color: $fh-button-bg-color;
+	padding: $fh-input-height / 5;
+	cursor: pointer;
+	color: $fh-button-font-color;
+	font-weight: 700;
+	font-family: $uw-verlag-font;
+	border-radius: $fh-border-radius;
+	border: $fh-border-width $fh-border-style $fh-border-color;
+	text-transform: uppercase;
+  -webkit-font-smoothing: antialiased;
+
+}
+
+input[type="image"] {
+	text-align: center;
+	padding: $fh-input-height / 5;
+}
+
+/* States ------------------ */
+
+input[disabled],
+textarea[disabled],
+select[disabled],
+option[disabled] {
+	cursor: not-allowed;
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+option:focus  {
+	background-color: inherit;
+	border-color: $fh-focus-border-color;
+}
+
+input[type="checkbox"]:focus,
+input[type="radio"]:focus {
+	outline: $fh-focus-border-color solid 2px;
+}
+
+input[type="button"]:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus {
+	background-color: $fh-button-hover-bg-color;
+	color: $fh-button-hover-font-color;
+}

src/assets/uwstyle/assets/scss/_uw_global_bar.scss

+.uw-global-bar {
+  -webkit-font-smoothing: antialiased;
+  background-color: $uw-red;
+  color: white;
+  padding: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+  text-transform: uppercase;
+  font-size: .825rem;
+  font-weight: 700;
+  &.uw-global-bar-inverse {
+    background-color: white;
+    border-bottom: 1px solid $uw-gray-light;
+    position: relative;
+    z-index: 10;
+    a, a:visited, a:active, a:hover {
+      color: $uw-gray-darker;
+    }
+  }
+}
+.uw-global-name-link {
+  color: white;
+  line-height: 2.2rem;
+  &:hover, &:visited, &:active {
+    text-decoration: none;
+  }
+  span {
+    display: none;
+  }
+  .uw-of {
+    text-transform: none;
+  }
+  @include breakpoint(17.5em) {
+    span {
+      display: inline;
+    }
+  }
+}

src/assets/uwstyle/assets/scss/_uw_header.scss

+.uw-header {
+  // @include uw-container($uw-max-content-width);
+  display: flex;
+  justify-content: center;
+  background-color: white;
+  &.uw-has-search {
+    .uw-header-crest-title {
+      width: auto;
+      width: 100%;
+      // padding-left: 1rem;
+      @include breakpoint($uw-header-search-breakpoint) {
+        width: 70%;
+        padding-right: 5%;
+      }
+      @include breakpoint($uw-header-search-breakpoint + 140) {
+        width: 75%;
+        padding-right: 5%;
+      }
+    }
+    .uw-header-search {
+      padding-right: 1rem;
+      @include breakpoint($uw-header-search-breakpoint) {
+        width: 30%;
+      }
+      @include breakpoint($uw-header-search-breakpoint + 140) {
+        width: 25%;
+      }
+    }
+  }
+}
+
+.uw-header-container {
+  padding: $uw-padding 0;
+  flex: 0 0 100%;
+  max-width: 100%;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  @include breakpoint($uw-main-nav-breakpoint) {
+    max-width: $uw-max-content-width;
+  }
+}
+
+.uw-header-crest-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.uw-header-crest {
+  flex-basis: auto;
+  margin-right: .5rem;
+}
+.uw-crest-svg {
+  width: 2.5rem;
+}
+.uw-title-tagline {
+  flex-basis: 100%;
+}
+.uw-site-title {
+  -webkit-font-smoothing: antialiased;
+  font-weight: 800;
+  text-transform: uppercase;
+  font-size: 1.25rem;
+  line-height: 1.1;
+  margin-bottom: .1rem;
+  a {
+    color: $uw-red;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+.uw-site-tagline {
+  font-size: .95rem;
+  font-weight: 700;
+  color: $uw-gray-darker;
+  text-transform: none;
+  margin: .2rem 0 0 .1rem;
+  line-height: 1.2;
+}
+
+.uw-search-form {
+  display: flex;
+}
+.uw-search-input[type="text"] {
+  flex: 1 1 80%;
+  max-width: 80%;
+}
+.uw-search-submit {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: white;
+  background-color: $uw-red;
+  svg {
+    width: 1.2rem;
+    height: 1.2rem;
+    fill: white;
+  }
+  flex: 0 0 auto;
+}
+.uw-header-search .uw-search-form {
+  margin-top: 0.5rem;
+}
+
+// if DOM switch script is used to move search input within menu
+li.uw-search-list-item form {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid $uw-gray-light;
+  text-align: center;
+  justify-content: center;
+}
+li.uw-search-list-item .uw-search-input[type="text"] {
+  float: none;
+  width: 100%;
+  max-width: 400px;
+  transition: none;
+}
+
+@include breakpoint(27.5em) {
+  .uw-site-title {
+    font-size: 1.5rem;
+  }
+}
+@include breakpoint(40em) {
+  .uw-header-crest {
+    margin-right: .8rem;
+    img {
+      width: 2.6rem;
+    }
+  }
+  .uw-site-title {
+    font-size: 1.7rem;
+  }
+  .uw-site-tagline {
+    margin: -.1rem 0 0 .2rem;
+  }
+}
+@include breakpoint(64em) {
+  .uw-header-crest {
+    img {
+      width: 2.8rem;
+    }
+  }
+  .uw-site-title {
+    font-size: 1.8rem;
+  }
+  .uw-header-search .uw-search-form {
+    margin-top: 1rem;
+  }
+}
+@include breakpoint(75em) {
+  .uw-header-crest {
+    img {
+      width: 3rem;
+    }
+  }
+  .uw-site-title {
+    font-size: 2rem;
+  }
+}
\ No newline at end of file

src/assets/uwstyle/assets/scss/_uw_layouts.scss

+@import "uw_side_nav";
+@import "uw_card";
+
+.uw-full-row {
+}
+.uw-row {
+  @include uw-container($uw-max-content-width);
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+.uw-full-row-has-bg-img {
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.uw-row-page-title {
+  padding-top: $uw-padding*2;
+  padding-bottom: $uw-padding*2;
+}
+.uw-col {
+  @include uw-flex-column;
+  padding: 0 $uw-padding*1;
+}
+
+.uw-body {
+  @include uw-flex-column(66.6667%);
+  p,li,dd,dt {
+    font-family: $uw-serif-font;
+    -webkit-font-smoothing: auto;
+  }
+  &:first-child:last-child {
+    @include uw-flex-column;
+    padding-top: 0;
+  }
+  h2.uw-mini-bar {
+    margin-top: 3.2rem;
+  }
+}
+.uw-sidebar {
+  @include uw-flex-column(33.3333%);
+  margin-bottom: 3rem;
+}
+
+.uw-sidebar-box {
+  @include uw-boxed(1rem 1.25rem);
+  > h3 {
+    @include uw-mini-bar;
+  }
+  > h3:first-child {
+    // margin-top: 0;
+  }
+  > p, li {
+    margin-bottom: 1.35rem;
+    line-height: 1.35;
+  }
+  @include breakpoint($uw-main-nav-breakpoint) {
+    border-top: 1px solid $uw-gray-light;
+    border-left: 1px solid $uw-gray-light;
+  }
+}

src/assets/uwstyle/assets/scss/_uw_mini_bar.scss

+@mixin uw-mini-bar($align: left, $color: $uw-red) {
+  position: relative;
+  margin-top: 2.2rem;
+  &:before {
+    position: absolute;
+    left: 0;
+    height: 4px;
+    content: '';
+    width: 2rem;
+    top: -12px;
+    background-color: $color;
+    @if $align == center {
+      right: 0;
+      margin: 0 auto;
+    }
+  }
+}
+
+// any element (e.g., heading) that has a short bar above it. For presentation-only.
+.uw-mini-bar {
+  @include uw-mini-bar();
+}
+h1.uw-mini-bar:before {
+  height: 4px;
+  width: 3rem;
+}
+
+.uw-mini-bar-center {
+  @include uw-mini-bar($align: center);
+}
+.uw-mini-bar-white {
+  @include uw-mini-bar($color: white);
+}
+.uw-mini-bar-white-center {
+  @include uw-mini-bar($align: center, $color: white);
+}
\ No newline at end of file

src/assets/uwstyle/assets/scss/_uw_mixins.scss

+
+// simple media query mixins
+// @mixin uw-breakpoint($width) {
+//   @media (min-width: $width) { @content; }
+// }
+// @mixin uw-breakpoint-max($width) {
+//   @media (max-width: $width) { @content; }
+// }
+
+// linear gradient
+@mixin linear-gradient($direction, $color-stops...) {
+  // Direction has been omitted and happens to be a color-stop
+  @if is-direction($direction) == false {
+    $color-stops: $direction, $color-stops;
+    $direction: 180deg;
+  }
+
+  background: nth(nth($color-stops, 1), 1);
+  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
+  background: linear-gradient($direction, $color-stops);
+}
+
+
+// uw-nav-menu submenu class name subsitution
+// this allows for easier overriding of the submenu class name
+@mixin uw-dropdown($class_name: "uw-dropdown") {
+  .uw-nav-menu ul li.#{$class_name}.uw-is-active > ul {
+    display: block;
+    opacity: 1.0;
+    transform: scaleY(1);
+    animation: reveal .2s ease-in-out;
+  }
+  .uw-nav-menu ul > li > ul > li.#{$class_name} > ul {
+    display: none;
+  }
+  @include breakpoint($uw-main-nav-breakpoint) {
+    .uw-nav-menu ul li.#{$class_name} > ul {
+      background-color: $uw-red;
+    }
+    .uw-nav-menu-reverse, .uw-nav-menu-secondary-reverse {
+      ul li.#{$class_name} > ul, .uw-nav-menu-secondary-reverse ul li.#{$class_name} > ul {
+        background-color: white;
+        a {
+          color: $uw-gray-darkest;
+          background-color: transparent;
+        }
+      }
+    }
+    .uw-nav-menu-reverse ul li.#{$class_name} > ul {
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    .uw-nav-menu-reverse-flat, .uw-nav-menu-secondary-reverse {
+      ul li.#{$class_name} > ul {
+        box-shadow: none;
+        border-left: 1px solid $uw-gray-light;
+        border-right: 1px solid $uw-gray-light;
+        border-bottom: 1px solid $uw-gray-light;
+      }
+    }
+    .uw-nav-menu.uw-nav-menu-reverse ul ul {
+      .#{$class_name} > a {
+        // background-color: white;
+        color: $uw-red;
+      }
+    }
+  }
+}
+
+// hide from non screen readers
+@mixin uw-element-invisible {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+}
+
+
+// width-constrained container
+@mixin uw-container($max-width: 100%) {
+  max-width: $max-width;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// flexed column
+@mixin uw-flex-column($width: 100%, $breakpoint: $uw-main-nav-breakpoint) {
+  flex-basis: 100%;
+  max-width: 100%;
+  @include breakpoint($breakpoint) {
+    flex-basis: $width;
+    max-width: $width;
+  }
+}
\ No newline at end of file

src/assets/uwstyle/assets/scss/_uw_nav_menu.scss

+.uw-mobile-menu-button-bar {
+  display: none;
+  &.uw-is-visible {
+    display: block;
+  }
+
+  width: 100%;
+  background-color: $uw-red;
+  border: 0;
+  padding: 1.1rem 1rem 1.1rem 1rem;
+  color: $uw-white;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 1rem;
+  line-height: 1rem;
+  &:focus {
+    outline: none;
+  }
+  svg {
+    width: 1.2rem;
+    height: 1.2rem;
+    vertical-align: middle;
+    margin-top: -.3rem;
+    margin-left: .7rem;
+    fill: $uw-white;
+    &:last-child {
+      display: inline;
+    }
+  }
+  &[aria-expanded="true"] svg {
+    display: none;
+    &:last-child {
+      display: inline;
+    }
+  }
+  &[aria-expanded="false"] svg {
+    display: inline;
+    &:last-child {
+      display: none;
+    }
+  }
+  &.uw-mobile-menu-button-bar-reversed {
+    background-color: $uw-white;
+    color: $uw-gray-darkest;
+    border-top: 1px solid $uw-gray-light;
+    border-bottom: 1px solid $uw-gray-light;
+    svg {
+      fill: $uw-gray-darkest;
+    }
+  }
+}
+
+
+// whether the menu button bar is visible is controlled
+// by javascript dynamically determing the best breakpoint for 
+// the menu item content instead of by using CSS media query
+// breakpoints; the state of #uw-top-menus is tied to the state
+// of .uw-mobile-menu-button-bar and assumes that #uw-top-menus
+// is an adjacent sibling of .uw-mobile-menu-button-bar
+
+// always show the menu to non-JS browsers
+.no-js #uw-top-menus.uw-is-visible.uw-hidden {
+  display: block;
+  visibility: visible;
+}
+
+// styles for all states of #uw-top-menus
+#uw-top-menus {
+  
+  display: none;
+  &.uw-is-visible {
+    display: block;
+    // we load page with the menu visibility hidden so we can 
+    // calculate the width of the menu
+    &.uw-hidden {
+      visibility: hidden;
+    }
+  }
+
+  .uw-nav-menu {
+    a {
+      display: inline-block;
+      font-size: .925rem;
+      font-weight: 800;
+      line-height: 1.25;
+      color: white;
+      text-transform: uppercase;
+      border-bottom: .2rem solid rgba(0, 0, 0, 0);
+      &:hover {
+        text-decoration: none;
+        border-bottom-color: white;
+      }
+      &:active,&:focus {
+        text-decoration: none;
+      }
+    }
+    li {
+      list-style: none;
+    }
+
+    // used in uwmadison-160 theme to DOM-swap search form into
+    // mobile menu; drop from the Style Guide?
+    li.uw-search-form {
+      margin-top: 1rem;
+    }
+    ul {
+      padding: 0 1rem;
+      line-height: 1.625;
+      ul {
+        margin: 0;
+        a {
+          font-weight: 700;
+          text-transform: none;
+        }
+      }
+    }
+    li {
+      margin-bottom: 0;
+    }
+  }
+
+  .uw-nav-menu ul ul {
+    display: none;
+    transform: scaleY(0);
+    transform-origin: top;
+    opacity: 0;
+    transition: transformY .2s ease-in-out, opacity .2s ease-in-out;
+    padding-bottom: .5rem;
+  }
+  .uw-nav-menu ul li.uw-dropdown.uw-is-active > ul {
+    display: block;
+    opacity: 1.0;
+    transform: scaleY(1);
+    animation: reveal .2s ease-in-out;
+  }
+
+  .uw-nav-menu ul ul ul {
+    display: none; // don't show grandchild menus
+    left: 100%;
+    top: 0;
+  }
+  .uw-nav-menu svg.uw-caret {
+    width: 1rem;
+    height: 1rem;
+    fill: white;
+    vertical-align: text-top;
+    display: inline;
+    margin-right: -1rem; // for preventing line wrapping
+    &:last-child {
+      display: none;
+    }
+  }
+  .uw-nav-menu .uw-is-active {
+    svg.uw-caret {
+      display: none;
+      &:last-child {
+        display: inline;
+      }
+    }
+  }
+
+  .uw-nav-menu.uw-nav-menu-reverse svg.uw-caret, .uw-nav-menu.uw-nav-menu-secondary-reverse svg.uw-caret {
+    fill: $uw-red;
+  }
+}
+
+
+// #uw-top-menus {
+//   display: none;
+//   &.uw-is-visible {
+//     display: block;
+//     // we load page with the menu visibility hidden so we can 
+//     // calculate the width of the menu
+//     &.uw-hidden {
+//       visibility: hidden;
+//     }
+//   }
+// }
+
+// styles for when the menu button is hidden; i.e. larger viewports
+#uw-top-menus.uw-horizontal {
+  .uw-nav-menu {
+    -webkit-font-smoothing: antialiased;
+    // display: block;
+    clear: both;
+    margin: 0 auto;
+    width: 100%;
+    background-color: $uw-red;
+    &.uw-nav-menu-reverse {
+      -webkit-font-smoothing: auto;
+      background-color: white;
+    }
+  }
+  .uw-nav-menu.uw-nav-menu-secondary {
+    -webkit-font-smoothing: antialiased;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 20;
+    margin-bottom: 0;
+    background-color: transparent;
+    width: auto;
+    display: inline-block;
+    > ul > li {
+      float: right;
+      > a {
+        font-weight: 700;
+        font-size: .825rem;
+        line-height: 2.2rem;
+        border-bottom: none;
+        padding-top: 0;
+        padding-bottom: 0;
+        margin-bottom: 0;
+        &:hover {
+          border-bottom: none;
+        }
+      }
+    }
+    &.uw-nav-menu-secondary-reverse {
+      a {
+        color: $uw-gray-darker;
+      }
+      ul ul a:hover {
+        border-bottom: .2rem solid $uw-red;
+      }
+    }
+  }
+  .uw-nav-menu ul {
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    max-width: $uw-max-content-width;
+  }
+  .uw-nav-menu li {
+    display: table-cell;
+    position: relative;
+    vertical-align: middle;
+    padding: 0 .95rem;
+  }
+  .uw-nav-menu li li {
+    display: block;
+    padding: .5rem .5rem;
+    line-height: 1;
+    text-align: left;
+  }
+  .uw-nav-menu > ul > li {
+    text-align: center;
+  }
+  .uw-nav-menu > ul > li > a {
+    padding: 1.05rem 0 0.1rem;
+    margin-bottom: .8rem;
+  }
+
+
+  .uw-nav-menu ul li.uw-dropdown > ul {
+    background-color: $uw-red;
+  }
+  .uw-nav-menu-reverse, .uw-nav-menu-secondary-reverse {
+    ul li.uw-dropdown > ul, .uw-nav-menu-secondary-reverse ul li.uw-dropdown > ul {
+      background-color: white;
+      a {
+        color: $uw-gray-darkest;
+        background-color: transparent;
+      }
+    }
+  }
+  .uw-nav-menu-reverse ul li.uw-dropdown > ul {
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  }
+  .uw-nav-menu-reverse-flat, .uw-nav-menu-secondary-reverse {
+    ul li.uw-dropdown > ul {
+      box-shadow: none;
+      border-left: 1px solid $uw-gray-light;
+      border-right: 1px solid $uw-gray-light;
+      border-bottom: 1px solid $uw-gray-light;
+    }
+  }
+  .uw-nav-menu.uw-nav-menu-reverse ul ul {
+    .uw-dropdown > a {
+      // background-color: white;
+      color: $uw-red;
+    }
+  }
+
+  .uw-nav-menu > ul > li.uw-dropdown > a, .uw-nav-menu.uw-nav-menu-reverse > ul > li.uw-dropdown > a {
+    padding-right: 1rem; // to prevent svg down caret wrapping
+  }
+  .uw-nav-menu > ul > li.uw-dropdown.uw-is-active > ul {
+    display: block;
+  }
+  .uw-nav-menu.uw-nav-menu-reverse a {
+    color: $uw-gray-darkest;
+    font-weight: 700;
+  }
+  .uw-nav-menu ul ul {
+    position: absolute;
+    left: 0;
+    width: 188px;
+    z-index: 99999;
+    display: none;
+  }
+
+  .uw-nav-menu {
+    > ul > li:first-child {
+      padding-left: 0;
+    }
+    > ul > li.current-menu-item > a,> ul > li.current-menu-parent > a {
+      border-bottom-color: white;
+    }
+
+    &.uw-nav-menu-reverse {
+      -webkit-font-smoothing: auto;
+      border-top: 1px solid $uw-gray-light;
+      border-bottom: 1px solid $uw-gray-light;
+      > ul > li:first-child {
+        padding-left: 0;
+      }
+      > ul > li > a {
+        padding: .3rem 0 .1rem;
+        margin-bottom: .8rem;
+        margin-top: .8rem;
+        border-bottom: .2rem solid transparent;
+        &:hover {
+          border-bottom: .2rem solid $uw-red;
+        }
+      }
+      > ul > li > a + ul > li > a:hover {
+        border-bottom: .2rem solid $uw-red;
+      }
+      > ul > li.current-menu-item > a, > ul > li.current-menu-parent > a {
+        border-bottom: .2rem solid $uw-red;
+      }
+    }
+  }
+
+  .uw-nav-menu ul ul a {
+    display: inline;
+    margin-bottom: 0;
+    padding-bottom: 0;
+    height: auto;
+    width: 168px;
+  }
+}
+
+// styles for when the menu button is visible; i.e. smaller viewports
+#uw-top-menus.uw-stacked {
+  .uw-nav-menu {
+    background-color: darken($uw-page-bg, 2%);
+    a {
+      color: $uw-gray-darkest;
+      &:hover {
+        border-bottom-color: $uw-gray-light;
+        background-color: darken($uw-page-bg, 6%);
+      }
+    }
+    ul {
+      margin: 0;
+      padding-top: .5rem;
+      padding-bottom: .5rem;
+      padding: 0;
+      display: block;
+      ul {
+        position: static;
+        padding: 0;
+        display: none;
+        a {
+          font-weight: 400;
+        }
+        ul {
+          margin-top: 0;
+        }
+      }
+    }
+    > ul > li {
+      display: block;
+      text-align: left;
+      padding: 0;
+      li a {
+        padding-left: 2rem;
+      }
+    }
+    > ul > li a {
+      padding: 1rem;
+      margin-bottom: 0;
+      margin-top: 0;
+      display: block;
+      border: none;
+      border-bottom: 1px solid $uw-gray-light;
+    }
+    &.uw-nav-menu-secondary {
+      border-top: 2px solid $uw-gray-light;
+      li a {
+        text-transform: none;
+        font-weight: 400;
+      }
+    }
+    svg.uw-caret {
+      color: $uw-red;
+      fill: $uw-red;
+      width: 1rem;
+      height: 1rem;
+      vertical-align: -.2rem;
+    }
+  }
+}
+
+// fixed width element used for detecting getComputedStyle width support
+#test-get-computed-style-width {
+  width: 100px;
+  padding: 10px;
+  display: inline-block;
+  position: absolute;
+  bottom: 0;
+}
\ No newline at end of file

src/assets/uwstyle/assets/scss/_uw_pagination.scss

+.uw-pagination {
+  background-color: $uw-page-bg;
+  padding: 0 1rem;
+}
+.uw-pagination-prev-next {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  > [class*="uw-pagination"] {
+    display: inline-block;
+  }
+}
+
+// expand for page-numbered pagination

src/assets/uwstyle/assets/scss/_uw_reset.scss

+/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
+-------------------------------------------------------------- */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, button,
+table, caption, tbody, tfoot, thead, tr, th, td {
+  border: 0;
+  font-family: inherit;
+  font-size: 100%;
+  font-style: inherit;
+  // font-weight: 400;
+  margin: 0;
+  /*outline: 0;*/
+  padding: 0;
+  vertical-align: baseline;
+}
+
+body {
+  // background-color: #fff;
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+table {/* tables still need 'cellspacing="0"' in the markup */
+  border-collapse: separate;
+  border-spacing: 0;
+}
+caption, th, td {
+  font-weight: normal;
+  text-align: left;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: "";
+}
+blockquote, q {
+  quotes: "" "";
+}
+a img {
+  border: 0;
+}
+  /**
+   * Correct `block` display not defined for any HTML5 element in IE 8/9.
+   * Correct `block` display not defined for `details` or `summary` in IE 10/11
+   * and Firefox.
+   * Correct `block` display not defined for `main` in IE 11.
+   */
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section, main, summary {
+  display: block;
+}
+button {
+  cursor: pointer;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+.spell-out {
+  speak-as: spell-out;
+}
+
+* {
+  box-sizing: border-box;
+}
\ No newline at end of file

src/assets/uwstyle/assets/scss/_uw_side_nav.scss

+.uw-side-nav {
+  @include uw-boxed;
+  background-color: $uw-page-bg;
+  padding: 0;
+  border-left: none;
+  border-right: none !important;
+  + div {
+    margin-top: 2rem;
+    @include breakpoint($uw-main-nav-breakpoint) {
+      margin-top: 4rem;
+    }
+  }
+  ul {
+    margin-left: 0;
+  }
+  li {
+    position: relative;
+    margin-bottom: 0;
+    list-style: none;
+    border-bottom: 1px solid $uw-gray-lightest;
+    transition: .25s border-left ease-in;
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.35;
+    a {
+      display: block;
+      padding: $uw-padding;
+      position: relative;
+    }
+    ul {
+      margin-top: 0;
+      margin-left: 2rem;
+      margin-bottom: .5rem;
+      li {
+        font-weight: 400;
+        border-bottom: 1px solid transparent;
+        a {
+          padding: 0.5rem 1rem;
+          line-height: 1;
+          &.uw-current-menu-item, &:hover {
+            color: $uw-red;
+          }
+        }
+        &:first-child > a {
+          padding-top: 0;
+        }
+      }
+    }
+  }
+  > ul > li {
+    > a {
+      border-left: .25rem solid transparent;
+      &.uw-current-menu-item, &:hover {
+        border-left: .25rem solid $uw-red;
+        color: $uw-red;
+      }
+    }
+  }
+}
+
+body.uw-light-gray-bg .uw-side-nav {
+  background-color: $uw-white;
+  border: 1px solid $uw-gray-lightest;
+}
+
+
+.uw-side-nav-ui {
+  text-align: right;
+}
+.uw-side-nav-button {
+  display: none;
+  .uw-side-nav {
+    display: none;
+  }
+  background-color: transparent;
+  border-bottom: 0;
+  padding: 6px 6px 6px;
+  position: absolute;
+  left: 1rem;
+  top: -0.75rem;
+  width: calc(100% - 2rem);
+  text-align: left;
+  font-size: .7rem;
+  font-family: verdana;
+  line-height: 1;
+  svg {
+    width: 1rem;
+    height: 1rem;
+    fill: $uw-anchor-color;
+    vertical-align: -4px;
+  }
+}
+.uw-side-nav-button {
+  display: none;
+  &:focus {
+    outline: none;
+  }
+}
+.uw-side-nav-is-hidden {
+  .uw-side-nav {
+    max-height: 0;
+    overflow: hidden;
+    transition: 0.25s max-height ease-in;
+    border-bottom: none;
+  }
+  .uw-side-nav-button {
+    background-color: $uw-page-bg;
+    box-shadow: none;
+    transition: .25s box-shadow ease-in;
+    border: 1px solid #aec2ca;
+    svg {
+      transform: rotate(0deg);
+      transition: 0.25s transform ease-in;
+    }
+    &:focus {
+      border-color: $uw-anchor-color;
+      box-shadow: 0 0 4px rgba(0,0,154,0.5);
+    }
+  }
+}
+
+.uw-overlay {
+  position: absolute;
+  background-color: transparent;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  transition: 0.25s background-color ease-in;
+  &.uw-is-active {
+    position: absolute;
+    z-index: 1;
+    background-color: rgba(0,0,0,0.3);
+  }
+}
+
+
+@media (max-width: rem-calc(640px)) {
+  .uw-side-nav {
+    margin-top: 1.7rem;
+    position: absolute;
+    width: calc(100% - 2rem);
+    top: 2px;
+    left: 1rem;
+    max-height: 800px;
+    transition: 0.25s max-height ease-in;
+    border-bottom: .25rem solid $uw-red;
+    z-index: 20;
+    box-shadow: 0 0 4px rgba(0,0,0,0.3);
+  }
+  body.uw-light-gray-bg .uw-side-nav {
+    border: none;
+  }
+  .uw-side-nav-button {
+    display: block;
+    z-index: 10;
+    top: 0.25rem;
+    box-shadow: 0 0 4px rgba(0,0,0,0.3);
+    background-color: $uw-page-bg;
+    border: 1px solid transparent;
+    svg {
+      transform: rotate(180deg);
+      transition: 0.25s transform ease-in;
+    }
+    &:focus {
+      border-color: $uw-anchor-color;
+      box-shadow: 0 0 4px rgba(0,0,154,0.5);
+    }
+  }
+  .uw-sidebar {
+    margin-bottom: 0;
+    order: 2;
+  }
+  .uw-body.uw-body {
+    padding-top: 3rem;
+  }
+}
\ No newline at end of file

src/assets/uwstyle/assets/scss/_uw_table.scss

+table {
+  width: 100%;
+  margin-bottom: $uw-padding*2;
+  border-collapse: separate;
+  border-spacing: 0; 
+  border: 1px solid #dbdbdb;
+}
+tfoot, thead {
+  background: $uw-gray-footer-text-hover;
+  color: $uw-body-font;
+  border: 1px solid $uw-gray-lightest;
+}
+caption {
+  font-weight: 700;
+  text-align: center;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+tbody {
+  border: 1px solid $uw-gray-lightest;
+  background-color: $uw-white;
+}
+tr {
+  background-color: transparent;
+}
+table tbody tr:nth-child(even) {
+  background-color: $uw-gray-footer-text-hover;
+}
+th, td {
+  padding: $uw-padding;
+  line-height: 1.35;
+}
+th {
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 1rem;
+}
+td {
+  font-size: 1.125rem;
+}
+

src/assets/uwstyle/assets/scss/_uw_typography.scss

+body {
+  color: $uw-body-font;
+  font-family: $uw-verlag-font;
+  font-weight: 400;
+  line-height: 1.625;
+  position: relative;
+  background-color: #fff;
+  &.uw-white-bg {
+    background-color: #fff;
+  }
+  &.uw-light-gray-bg {
+    background-color: $uw-page-bg;
+  }
+}
+
+
+// override normalize
+abbr[title],acronym[title] {
+  border-bottom: none;
+  text-decoration: none;
+  color: currentColor;
+}
+
+// BEGIN BASE ELEMENT STYLES
+// Be careful when changing any of these style rules as they
+// might throw off like elements elsewhere if those elements
+// don't have explicit rules set for the same attributes.
+p, li {
+  font-size: rem-calc(18); // verlag is a small font
+  margin-bottom: 1.5rem;
+}
+.uw-body {
+  p, li, dd {
+    a {
+      border-bottom: 1px solid currentColor;
+    }
+  }
+}
+
+a {
+  color: $uw-anchor-color;
+  text-decoration: none;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  text-transform: uppercase;
+}
+.uw-no-case-transform {
+  text-transform: none;
+}
+h1,h2 {
+  font-weight: 800;
+}
+h1 {
+  font-size: 1.5rem;
+  -webkit-font-smoothing: antialiased;
+}
+h2 {
+  font-size: 1.3rem;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  line-height: 1.4;
+}
+h3 {
+  font-size: 1.125rem;
+  margin-top: 1.8rem;
+  margin-bottom: .9rem;
+  line-height: 1.4;
+}
+h4, h5, h6 {
+  font-size: 1rem;
+  margin-top: 1.8rem;
+  line-height: 1.4;
+  text-transform: none;
+}
+h5 {
+  font-size: .925rem;
+}
+h6 {
+  font-size: .85rem;
+}
+.small-gray-heading {
+  font-size: rem-calc(18);
+  color: $uw-gray-medium;
+  margin: 2rem 0 1rem 0;
+}
+
+@include breakpoint(40em) {
+  h1 {
+    font-size: 2rem;
+  }
+  h2 {
+    font-size: 1.6rem;
+  }
+}
+
+h2 + ul {
+  margin-top: 1rem;
+}
+ul, ol {
+  margin-left: 1.2rem;
+  li {
+    ul, ol {
+      margin-top: 1.5rem;
+      margin-left: 2.4rem;
+    }
+  }
+}
+ul {
+  list-style: disc;
+}
+ol li {
+  // list-style: decimal;
+}
+ol li li {
+  // list-style-type: lower-alpha;
+}
+
+ol {
+  list-style: decimal;
+}
+ol ol {
+  list-style: lower-alpha;
+}
+ol ol ol {
+  list-style: lower-roman;
+}
+ol ol ol ol {
+  list-style: decimal;
+}
+
+.uw-list-tight {
+  margin-top: -1rem;
+}
+.uw-list-tight li {
+  margin-bottom: 0;
+}
+.uw-list-no_bullets {
+  margin-left: 0;
+  list-style: none;
+}
+.uw-list-multi_column {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  @include breakpoint(rem-calc(600)) {
+    li {
+      flex-basis: 50%;
+      max-width: 50%;
+      padding-right: 3rem;
+    }
+  }
+  @include breakpoint(rem-calc(900)) {
+    li {
+      flex-basis: 33.333333%;
+      max-width: 33.333333%;
+    }
+  }
+  @include breakpoint(rem-calc(1200)) {
+    li {
+      flex-basis: 25%;
+      max-width: 25%;
+    }
+  }
+}
+.uw-list-inline {
+  display: inline;
+  list-style: none;
+  margin-left: 0;
+  li {
+    display: inline;
+    &:before {
+      content: "\00b7";
+      padding: 0 0.5rem;
+    }
+    &:first-child:before {
+      content: "";
+      padding: 0;
+    }
+  }
+}
+
+dl {
+  margin: 0;
+  dd, dt {
+    font-size: rem-calc(18);
+  }
+  dt {
+    font-weight: bold;
+  }
+  dd {
+    margin-bottom: 1.5rem;
+  }
+}
+
+cite, em, i {
+  font-style: italic;
+}
+b,strong {
+  font-weight: bold;
+}
+
+td, th, caption {
+  font-size: rem-calc(18);
+}
+
+blockquote {
+  font-family: $uw-serif-font;
+  -webkit-font-smoothing: auto;
+  font-style: italic;
+  font-size: rem-calc(20);
+  // color: darken($uw-gray-medium,20%);
+  // font-weight: bold;
+  padding-left: 1.5rem;
+  margin-bottom: 2rem;
+  border-left: .25rem solid $uw-red;
+  cite, + cite {
+    // padding-left: rem-calc(20);
+    // padding-right: rem-calc(20);
+    font-style: normal;
+    font: .9rem $uw-verlag-font;
+    text-transform: uppercase;
+    margin: 1rem 0 0 1.5rem;
+    display: block;
+    &:before {
+      content: "\2014";
+    }
+  }
+  cite {
+    margin-left: 0;
+  }
+  p {
+    font-size: rem-calc(20);
+  }
+  &.uw-stylized-quote {
+    font-family: $uw-vitesse-font;
+    margin-bottom: 0;
+    border-left: none;
+    padding-left: 0;
+    text-align: center;
+    p {
+      font-family: $uw-vitesse-font;
+      font-size: 1rem*1.1;
+      &:last-of-type {
+        margin-bottom: .5rem;
+      }
+    }
+    cite {
+      text-align: center;
+    }
+  }
+  &.uw-mini-bar-center {
+    margin-top: 2rem;
+    &:before {
+      margin-top: -1rem;
+      height: 6px;
+      width: 3rem;
+    }
+  }
+  @include breakpoint(small only) {
+    &.uw-mini-bar-center {
+      margin-top: 2rem;
+    }
+  }
+}
+
+blockquote em, blockquote i, blockquote cite {
+  font-style: normal;
+}
+
+address {
+  display: block;
+  margin: 0 0 1.625em;
+}
+
+pre {
+  background: #f4f4f4;
+  font: 13px "Courier 10 Pitch", Courier, monospace;
+  line-height: 1.5;
+  margin-bottom: 1.625em;
+  overflow: auto;
+  padding: 0.75em 1.625em;
+}
+code, kbd, samp, var {
+  font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
+}
+
+ins {
+  background: #fff9c0;
+  text-decoration: none;
+}
+sup,
+sub {
+  font-size: .9rem;
+  height: 0;
+  line-height: 1;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  bottom: 1ex;
+}
+sub {
+  top: .5ex;
+}
+q {
+  &:before {
+    content: "\201C";
+  }
+  &:after {
+    content: "\201D";
+  }
+}
+
+// END BASE ELEMENT STYLES
+
+.uw-double-size-text {
+  font-size: 1.7rem;
+  line-height: 1.5;
+}
+.uw-small-text {
+  font-size: .9rem;
+}
+.uw-smaller-text {
+  font-size: .8rem;
+}
+@include breakpoint($uw-main-nav-breakpoint) {
+  .uw-double-size-text {
+    font-size: 2rem;
+    line-height: 1.625;
+  }
+}
+
+.uw-more-link {
+  text-transform: uppercase;
+  font-size: rem-calc(13);
+  font-weight: 800;
+  &.uw-more-link-black {
+    color: $uw-gray-darkest;
+  }
+}
+
+.uw-more-link {
+  svg {
+  width: .75rem;
+  height: .75rem;
+  vertical-align: -0.05rem;
+  margin-left: -.1rem;
+  fill: $uw-red;
+  } 
+}
+
+
+
+// container background colors
+.uw-gray-med-bg {
+  background-color: $uw-gray-medium
+}
+.uw-greyblue-bg {
+  background-color: $uw-gray-blue;
+}
+.uw-white-bg {
+  background-color: white;
+}
+.uw-light-grer-bg {
+  background-color: $uw-page-bg;
+}
+.uw-red-bg {
+  background-color: $uw-red;
+}
+
+.uw-red-bg, .uw-gray-med-bg {
+  color: white;
+  p,li,blockquote,a,a.uw-more-link,dd,dt,abbr,acronym,cite,strong {
+    color: white !important;
+  }
+  svg {
+    fill: white;
+  }
+  blockquote {
+    font-weight: 500;
+  }
+  a {
+    &.uw-more-link {
+      color: white;
+    }
+  }
+}
+
+// .vertical-gradient-to-top {
+//   @include linear-gradient(to top, rgba(0,0,0,0.75) 30%, rgba(0,0,0,0.0));  
+// }
+// .vertical-gradient-to-bottom {
+//   @include linear-gradient(to bottom, rgba(0,0,0,0.75) 30%, rgba(0,0,0,0.0));
+// }
+
+.uw-nowrap {
+  white-space: nowrap;
+}
+
+
+
+

src/assets/uwstyle/assets/scss/_uw_utils.scss

+// text alignment
+.uw-text-center {
+  text-align: center;
+}
+.uw-text-left {
+  text-align: left;
+}
+.uw-text-right {
+  text-align: right
+}
+
+$spacing-scale: (
+  xs: .25rem,
+  s: .5rem,
+  m: 1rem,
+  l: 2rem,
+  xl: 4rem,
+  xxl: 8rem
+);
+$large-sizes: (l, xl, xxl);
+
+@each $name, $size in $spacing-scale {
+  // rescale larger sizes at small viewports
+  
+  @if index($large-sizes, $name) {
+    $size: $size/2;
+    .uw-pad-#{$name} {
+      padding: $size;
+    }
+    .uw-pad-t-#{$name} {
+      padding-top: $size;
+    }
+    .uw-pad-b-#{$name} {
+      padding-bottom: $size;
+    }
+    .uw-pad-l-#{$name} {
+      padding-left: $size;
+    }
+    .uw-pad-r-#{$name} {
+      padding-right: $size;
+    }
+    .uw-pad-tb-#{$name} {
+      padding-top: $size;
+      padding-bottom: $size;
+    }
+    .uw-mg-#{$name} {
+      margin: $size;
+    }
+    .uw-mg-t-#{$name} {
+      margin-top: $size;
+    }
+    .uw-mg-b-#{$name} {
+      margin-bottom: $size;
+    }
+    .uw-mg-l-#{$name} {
+      margin-left: $size;
+    }
+    .uw-mg-r-#{$name} {
+      margin-right: $size;
+    }
+    .uw-mg-tb-#{$name} {
+      margin-top: $size;
+      margin-bottom: $size;
+    }
+    $size: $size*2;
+  }
+
+  @include breakpoint($uw-main-nav-breakpoint) {
+    .uw-pad-#{$name} {
+      padding: $size;
+    }
+    .uw-pad-t-#{$name} {
+      padding-top: $size;
+    }
+    .uw-pad-b-#{$name} {
+      padding-bottom: $size;
+    }
+    .uw-pad-l-#{$name} {
+      padding-left: $size;
+    }
+    .uw-pad-r-#{$name} {
+      padding-right: $size;
+    }
+    .uw-pad-tb-#{$name} {
+      padding-top: $size;
+      padding-bottom: $size;
+    }
+    .uw-mg-#{$name} {
+      margin: $size;
+    }
+    .uw-mg-t-#{$name} {
+      margin-top: $size;
+    }
+    .uw-mg-b-#{$name} {
+      margin-bottom: $size;
+    }
+    .uw-mg-l-#{$name} {
+      margin-left: $size;
+    }
+    .uw-mg-r-#{$name} {
+      margin-right: $size;
+    }
+    .uw-mg-tb-#{$name} {
+      margin-top: $size;
+      margin-bottom: $size;
+    }
+  }
+}
+
+@media screen and (max-width: $uw-max-content-width) {
+  .uw-pad-tb-none-sm {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .uw-pad-t-none-sm {
+    padding-top: 0;
+  }
+  .uw-pad-b-none-sm {
+    padding-bottom: 0;
+  }
+}
+
+
+// white space helper classes
+// .uw-pad-t {
+//   padding-top: $uw-padding*1;
+//   &.uw-2x {
+//     padding-top: $uw-padding*2;
+//   }
+// } 
+// .uw-pad-b {
+//   padding-bottom: $uw-padding*1;
+//   &.uw-2x {
+//     padding-top: $uw-padding*2;
+//   }
+// } 
+// .uw-pad-l {
+//   padding-left: $uw-padding*1;
+// }
+// .uw-pad-r {
+//   padding-right: $uw-padding*1;
+// }
+// .uw-mar-t {
+//   margin-top: $uw-padding*1;
+// } 
+// .uw-mar-b {
+//   margin-bottom: $uw-padding*1;
+// } 
+// .uw-mar-l {
+//   margin-left: $uw-padding*1;
+// }
+// .uw-mar-r {
+//   margin-right: $uw-padding*1;
+// }
+
+// show for screen readers only
+.uw-show-for-sr-only, .uw-sr-only {
+  @include uw-element-invisible;
+}
+
+// show on focus
+.uw-show-on-focus {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  &:focus {
+    position: static;
+    height: auto;
+    width: auto;
+    overflow: visible;
+    clip: auto;
+  }
+}
+#uw-skip-link {
+  position: absolute !important;
+  z-index: 40;
+  color: $uw-anchor-color;
+  padding: .3rem;
+  background-color: $uw-white;
+}
+
+// flex helpers
+.uw-flex-reverse {
+  flex-direction: row-reverse;
+}
+
+// clearfix
+.uw-clearfix {
+  &::before,
+  &::after {
+    content: ' ';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}

src/assets/uwstyle/assets/scss/_uw_vars.scss

+// colors
+$uw-red: #c5050c !default;
+$uw-red-dark: #9B0000 !default;
+$uw-page-bg: #f7f7f7 !default;
+$uw-body-font: #494949 !default;
+$uw-gray-lightest: #e4e4e4 !default;
+$uw-gray-light: #cfcfcf !default;
+$uw-gray-footer-text: #adadad !default;
+$uw-gray-footer-text-hover: $uw-page-bg !default;
+$uw-gray-darker: #646569 !default;
+$uw-gray-darkest: #282728 !default;
+$uw-gray-medium: #8e8e92 !default;
+$uw-gray-blue: #dadfe1 !default;
+$uw-white: #fff !default;
+
+// link/anchor color
+$uw-anchor-color: #0479a8 !default;
+
+// foundation vars needed for using Foundation Table styling
+$white: $uw-white !default;
+$body-font-color: $uw-body-font !default;
+$global-margin: 1rem !default;
+$global-radius: 0 !default;
+$global-weight-bold: 700 !default;
+$global-left: ltr !default;
+
+// fonts
+$uw-verlag-font: "Verlag", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$uw-serif-font: Georgia,Times New Roman,Times,serif !default;
+$uw-vitesse-font: "Vitesse", "Helvetica Neue", "Helvetica", "Arial" !default;
+
+// layout
+$uw-max-content-width: 62.5em  !default;
+$uw-padding: 1rem !default;
+
+// images directory path relative to CSS
+$uw-img-path-relative-to-css: "images/" !default; // not currently in use
+
+// breakpoints 
+$uw-header-search-breakpoint: 500px !default;
+$uw-main-nav-breakpoint: 640px !default;

src/assets/uwstyle/assets/scss/uw_style.scss

+@charset 'utf-8';
+/**
+ * UW Style
+ * Version 1.0.6
+ * Maintained by University Marketing, UW–Madison, web@umark.wisc.edu
+ */
+@import "vendor/foundation/unit";
+@import "vendor/foundation/breakpoint";
+
+@import 'uw_reset';
+@import 'uw_mixins';
+
+@import 'uw_vars';
+@import 'uw_typography';
+
+@import "uw_utils";
+@import "uw_content";
+@import 'uw_mini_bar';
+@import 'uw_global_bar';
+@import "uw_header";
+@import 'uw_nav_menu';
+@import 'uw_footer';
+@import 'uw_button';
+@import "uw_pagination";
+@import "uw_breadcrumbs";
+
+@import "uw_form";
+@import "uw_table";
+
+@import "uw_layouts";
+

src/assets/uwstyle/assets/scss/vendor/foundation/_breakpoint.scss

+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group breakpoints
+////
+
+// scss-lint:disable ZeroUnit
+
+/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
+/// @type Map
+$breakpoints: (
+  small: 0,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1440px,
+) !default;
+
+/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
+/// @type List
+$breakpoint-classes: (small medium large) !default;
+
+/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.
+///
+/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
+@function breakpoint($val: small) {
+  // Size or keyword
+  $bp: nth($val, 1);
+  // Value for max-width media queries
+  $bp-max: 0;
+  // Direction of media query (up, down, or only)
+  $dir: if(length($val) > 1, nth($val, 2), up);
+  // Eventual output
+  $str: '';
+  // Is it a named media query?
+  $named: false;
+
+  // Orientation media queries have a unique syntax
+  @if $bp == 'landscape' or $bp == 'portrait' {
+    @return '(orientation: #{$bp})';
+  }
+  @else if $bp == 'retina' {
+    @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
+  }
+
+  // Try to pull a named breakpoint out of the $breakpoints map
+  @if type-of($bp) == 'string' {
+    @if map-has-key($breakpoints, $bp) {
+      @if $dir == 'only' or $dir == 'down' {
+        $next-bp: -zf-map-next($breakpoints, $bp);
+
+        @if $next-bp == null {
+          $bp-max: null;
+          @warn 'breakpoint(): the media query "#{$val}" cannot be used because #{$bp} is the largest breakpoint.';
+        }
+        @else {
+          $bp-max: $next-bp;
+        }
+      }
+
+      $bp: map-get($breakpoints, $bp);
+      $named: true;
+    }
+    @else {
+      $bp: 0;
+    }
+  }
+
+  // Convert any pixel, rem, or unitless value to em
+  $bp: -zf-bp-to-em($bp);
+  @if $bp-max {
+    $bp-max: -zf-bp-to-em($bp-max) - (1/16);
+  }
+
+  // Skip media query creation if the input is "0 up"
+  @if $bp > 0em or $dir == 'only' or $dir == 'down' {
+    // `only` ranges use the format `(min-width: n) and (max-width: n)`
+    @if $dir == 'only' {
+      @if $named == true {
+        $str: $str + '(min-width: #{$bp})';
+
+        @if $bp-max != null {
+          $str: $str + ' and (max-width: #{$bp-max})';
+        }
+      }
+      @else {
+        @warn 'Only named media queries can have an `only` range.';
+      }
+    }
+
+    // `down` ranges use the format `(max-width: n)`
+    @else if $dir == 'down' {
+      $max: 0;
+
+      // For named breakpoints, subtract the breakpoint value by one "pixel", or 1/16em.
+      @if $named {
+        $max: $bp-max;
+      }
+      @else {
+        $max: $bp;
+      }
+
+      // Skip media query creation if input value is exactly "0 down" but don't "small down"
+      @if $named or $bp > 0em {
+        $str: $str + '(max-width: #{$max})';
+      }
+    }
+
+    // `up` ranges use the format `(min-width: n)`
+    @else if $bp > 0em {
+      $str: $str + '(min-width: #{$bp})';
+    }
+  }
+
+  @return $str;
+}
+
+/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:
+///  - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.
+///  - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.
+///  - If a rem value is passed, the unit will be changed to em.
+///  - If an em value is passed, the value will be used as-is.
+///
+/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.
+///
+/// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.
+@mixin breakpoint($value) {
+  $str: breakpoint($value);
+
+  // If $str is still an empty string, no media query is needed
+  @if $str == '' {
+    @content;
+  }
+
+  // Otherwise, wrap the content in a media query
+  @else {
+    @media screen and #{$str} {
+      @content;
+    }
+  }
+}
+
+/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.
+/// @access private
+///
+/// @param {Map} $map - Map to convert.
+///
+/// @returns {String} A string containing the map's contents.
+@function -zf-bp-serialize($map) {
+  $str: '';
+  @each $key, $value in $map {
+    $str: $str + $key + '=' + -zf-bp-to-em($value) + '&';
+  }
+  $str: str-slice($str, 1, -2);
+
+  @return $str;
+}
+
+/// Find the next key in a map.
+/// @access private
+///
+/// @param {Map} $map - Map to traverse.
+/// @param {Mixed} $key - Key to use as a starting point.
+///
+/// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.
+@function -zf-map-next($map, $key) {
+  // Store the values of the map as a list, so we can access them with nth
+  $values: map-values($map);
+
+  // Ghetto for loop
+  $i: 1;
+  $found: false;
+  @each $val in map-keys($map) {
+    @if $found == false {
+      @if ($key == $val) {
+        $found: true;
+      }
+      $i: $i + 1;
+    }
+  }
+
+  // If the key doesn't exist, or it's the last key in the map, return null
+  @if $i > length($map) {
+    @return null;
+  }
+  // Otherwise, return the value
+  @else {
+    @return nth($values, $i);
+  }
+}
+
+/// Get a value for a breakpoint from a responsive config map. If the config map has the key `$value`, the exact breakpoint value is returned. If the config map does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.
+/// @access private
+///
+/// @param {Map} $map - Input config map.
+/// @param {Keyword} $value - Breakpoint name to use.
+///
+/// @return {Mixed} The corresponding breakpoint value.
+@function -zf-get-bp-val($map, $value) {
+  // Check if the breakpoint name exists globally
+  @if not map-has-key($breakpoints, $value) {
+    @return null;
+  }
+  // Check if the breakpoint name exists in the local config map
+  @else if map-has-key($map, $value) {
+    // If it does, just return the value
+    @return map-get($map, $value);
+  }
+  // Otherwise, find the next lowest breakpoint and return that value
+  @else {
+    $anchor: null;
+    $found: false;
+
+    @each $key, $val in $breakpoints {
+      @if not $found {
+        @if map-has-key($map, $key) {
+          $anchor: $key;
+        }
+        @if $key == $value {
+          $found: true;
+        }
+      }
+    }
+
+    @return map-get($map, $anchor);
+  }
+}
+
+// Legacy breakpoint variables
+// These will be removed in 6.2
+$small-up: null;
+$small-only: null;
+$medium-up: null;
+$medium-only: null;
+$large-up: null;
+$large-only: null;
+$xlarge-up: null;
+$xlarge-only: null;
+$xxlarge-up: null;
+$xxlarge-only: null;
+
+@if map-has-key($breakpoints, small) {
+  $small-up: screen;
+  $small-only: unquote('screen and #{breakpoint(small only)}');
+}
+
+@if map-has-key($breakpoints, medium) {
+  $medium-up: unquote('screen and #{breakpoint(medium)}');
+  $medium-only: unquote('screen and #{breakpoint(medium only)}');
+}
+
+@if map-has-key($breakpoints, large) {
+  $large-up: unquote('screen and #{breakpoint(large)}');
+  $large-only: unquote('screen and #{breakpoint(large only)}');
+}
+
+@if map-has-key($breakpoints, xlarge) {
+  $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');
+  $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');
+}
+
+@if map-has-key($breakpoints, xxlarge) {
+  $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');
+}

src/assets/uwstyle/assets/scss/vendor/foundation/_unit.scss

+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group functions
+////
+
+$global-font-size: 100% !default;
+
+// scss-lint:disable ZeroUnit
+
+/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
+///
+/// @param {Number} $num - Number to strip unit from.
+///
+/// @returns {Number} The same number, sans unit.
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+/// Converts one or more pixel values into matching rem values.
+///
+/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
+/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
+///
+/// @returns {List} A list of converted values.
+@function rem-calc($values, $base: null) {
+  $rem-values: ();
+  $count: length($values);
+
+  // If no base is defined, defer to the global font size
+  @if $base == null {
+    $base: $global-font-size;
+  }
+
+  // If the base font size is a %, then multiply it by 16px
+  // This is because 100% font size = 16px in most all browsers
+  @if unit($base) == '%' {
+    $base: ($base / 100%) * 16px;
+  }
+
+  @if $count == 1 {
+    @return -zf-to-rem($values, $base);
+  }
+
+  @for $i from 1 through $count {
+    $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));
+  }
+
+  @return $rem-values;
+}
+
+// Converts a unitless, pixel, or rem value to em, for use in breakpoints.
+@function -zf-bp-to-em($value) {
+  // Pixel and unitless values are converted to rems
+  @if unit($value) == 'px' or unitless($value) {
+    $value: rem-calc($value, $base: 16px);
+  }
+
+  // Then the value is converted to ems
+  @return strip-unit($value) * 1em;
+}
+
+/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
+/// @access private
+///
+/// @param {Number} $value - Pixel value to convert.
+/// @param {Number} $base [null] - Base for pixel conversion.
+///
+/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
+@function -zf-to-rem($value, $base: null) {
+  // Check if the value is a number
+  @if type-of($value) != 'number' {
+    @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
+    @return $value;
+  }
+
+  // Calculate rem if units for $value is not rem
+  @if unit($value) != 'rem' {
+    $value: strip-unit($value) / strip-unit($base) * 1rem;
+  }
+
+  // Turn 0rem into 0
+  @if $value == 0rem {
+    $value: 0;
+  }
+
+  @return $value;
+}