WIP: Search tabs and associated homepage changes

components/00-particles/_00-mixins.scss

@@ -120,7 +120,7 @@
 @mixin full-viewport {
   display: flex;
   flex-direction: column;
-  min-width: $min-width;
+  // min-width: $min-width;
   min-height: 100vh;
 
   & #main-content {
@@ -252,3 +252,30 @@
     }
   }
 }
+
+@mixin accordion-button {
+  width: 100%;
+  text-align: left;
+  // Because iOS Safari has issues with long (wrapping) button text, we end up having to explicitly style heeeeverything
+  height: -webkit-fit-content;
+  background-color: #ebebeb; // Some browsers weren't assigning a bg color. This is roughly the default color for Chrome, and I liked it.
+  border: 1px solid $gray;
+  border-radius: 1px;
+  padding: 1rem;
+
+  div {
+    display: inline;
+  }
+}
+
+@mixin fontawesome-icon {
+  font-size: 2 * $default-margin;
+  height: 2 * $default-margin;
+  width: 2 * $default-margin;
+  vertical-align: middle;
+}
+
+@mixin contain {
+  padding: 0 var(--side-spacing);
+  container-type: inline-size;
+}

components/00-particles/_01-variables.scss

@@ -35,21 +35,45 @@ $space-one-seventh: math.div($space, 7);
 $space-one-eighth: math.div($space, 8);
 
 /**
-* Used to set the font size for "LITS" in logobar and to add whitespace to the MHC logos
+* Default margin
 */
-// $logo-font-size: 17px;
-$logo-container-max-height: 60px;
-
-// wordmark values
-$o-ratio: math.div(19.893, 40.849); // height of 'o' in wordmark svg vs height of svg as measured in Illustrator
-$word-logo-image-max-height: $logo-container-max-height * $o-ratio;
-$word-default-margin: math.div($word-logo-image-max-height, 2);
-// $word-logo-font-size: $word-default-margin; // The size of the 'o' should be the font-size also TODO: this sort of looks small...
-$word-logo-font-size: 19px;
-
-// monogram values
-$c-ratio: math.div(64.9, 108); // height of 'c' in wordmark svg vs height of svg as measured in Illustrator
-$mono-logo-image-max-height: $logo-container-max-height * (1 - $c-ratio);
-$mono-default-margin: math.div($mono-logo-image-max-height, 2);
-// $mono-logo-font-size: $mono-default-margin; // The size of the 'c' should be the font-size also TODO: this sort of looks small...
-$mono-logo-font-size: 19px;
+$default-margin: 0.75rem;
+
+/**
+* Used to set the font size for "LITS" in logobar and to add whitespace to the MHC logos and other header parts
+*/
+$logo-container-height: 4.5rem;
+$logo-height: 4rem;
+$logo-font-size: $default-margin * 6.5; // 4.875rem
+$header-gap: $default-margin * 2; // 1.5rem
+
+/**
+ search variables 
+*/
+$search-gap: $default-margin * 4; // 3rem
+$search-font-size: $default-margin * 2; // 1.5rem
+$search-rounding: 5px;
+$search-inner-padding: $default-margin * 2; // 1.5rem
+
+/* Per Andrew's design for homepage intro feature */
+:root {
+  --side-spacing: 0rem;
+}
+
+@media (min-width:20rem) {
+
+  :root {
+    --side-spacing: 1.5rem;
+  }
+}
+
+@media (min-width:34rem) {
+
+  :root {
+    --side-spacing: 3rem;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}

components/00-particles/_02-responsiveness.scss

@@ -6,11 +6,11 @@
  */
 
 /* Breakpoints */
-$min-width: 300px;
-$small-width: 600px;
-$medium-width: 900px;
-$large-width: 1200px;
-$max-width: 1920px;
+$min-width: 18.75rem; //300px
+$small-width: 37.5rem; //600px
+$medium-width: 56.25rem; //900px
+$large-width: 75rem; //1200px
+$max-width: 120rem; // 1920px
 $content-max-width: $max-width;
 
 /**
@@ -43,21 +43,6 @@ $content-max-width: $max-width;
   @return '((100vw - #{$width}) / #{squish-factor()})';
 }
 
-/**
- * Convert rem to px for Sass calculation.
- *
- * @param number(rem) $rem
- *   Value in rem to convert.
- * @return number(px)
- *   Number of pixels corresponding to input.
- *
- * TODO: Is there a better place for helper functions?
- * TODO: Is 1rem => 16px explicitly specified anywhere?
- */
-@function rem-to-px($rem) {
-  @return math.div($rem, 1rem) * 16px;
-}
-
 /**
  * Assigns breakpoint-dependent values to flex-basis, and width 100% within.
  *
@@ -159,7 +144,7 @@ $content-max-width: $max-width;
       }
 
       // Stop increasing when we reach $scale times $max-padding.
-      $delta: rem-to-px($max-padding - $min-padding);
+      $delta: $max-padding - $min-padding;
 
       @include breakpoint($medium-width + (squish-factor() * $delta)) {
         padding-#{$side}: calc(#{$scale} * #{$max-padding});
@@ -196,7 +181,7 @@ $content-max-width: $max-width;
       }
 
       // Stop increasing when we reach $scale times $max-margin.
-      $delta: rem-to-px($max-margin - $min-margin);
+      $delta: $max-margin - $min-margin;
 
       @include breakpoint($medium-width + (squish-factor() * $delta)) {
         margin-#{$side}: calc(#{$scale} * #{$max-margin});

components/00-particles/global/01-colors/_color-vars.scss

@@ -12,6 +12,7 @@ $med-blue: #07c;
 
 /* Background colors */
 $white: white;
+$palest-gray: #eee;
 $pale-gray: #e2dfdd; // $gray + 80% tint.
 $dark-red: #6f263d;
 $charcoal: #1a1a1a;
@@ -22,12 +23,16 @@ $pale-blue: #ccdae3;
 $light-blue: #00a9e0;
 $raspberry: #a20067;
 $red: #ef3340;
-$yellow: #f1c400;
+$yellow: #ffd100;
 $dark-green: #2c5234;
 $green: #5c7f1a;
 $light-orange: #ff9e1b;
 $light-green: #84bd00;
 
+/* New colors */
+$gray-border: #aaa;
+$yellow-feature: #ffd100;
+
 // // // // // // // // //
 // TODO: colors below this line are from previous work, and should be
 // moved above it when we figure out that we need them.

components/01-elements/01-links/link/_link.scss

@@ -174,14 +174,6 @@ a.bluebg {
   }
 
   @include focus($dark-blue, link);
-
-  .lits_homepage #block-lits-theme-litsunifiedsearchblock & {
-    @include focus($light-orange, link);
-
-    & svg {
-      @include focus($light-orange, link);
-    }
-  }
 }
 
 @mixin link-on-raspberry {

components/01-elements/04-images/00-image/_scaling-image.scss

@@ -0,0 +1,136 @@
+/* container queries so don't have to factor in spacing around container for ideal transition points
+which opens opportunity for that to spacing be calculated based on viewport constantly, etc. */
+#block-lits-theme-homepageintro .scaling-image {
+.feature-container {
+    margin: 0;
+    font-family: "ars-maquette-web", sans-serif;
+    /* container queries so don't have to factor in spacing around container for ideal transition points
+  which opens opportunity for that spacing to be cacluclated based on viewport constantly, etc. */
+    container-type: inline-size;
+    container-name: contain;
+
+    /* should switch all this to mobile-first instead of desktop-first */
+    .feature {
+      max-width: 76rem;
+      padding: 0 4.5rem 3rem;
+      position: relative;
+      text-align: center;
+      margin: 0 auto;
+
+      .why {
+        font-weight: bold;
+        font-size: 1.375rem;
+        margin: 0 auto 1.5rem auto;
+        display: none;
+      }
+
+      .cta {
+        font-size: 1.5rem;
+        font-size: clamp(1.25rem, 4vw, 1.5rem);
+        width: 8em;
+        display: block;
+        padding: .375rem .75rem;
+        margin: 1.5rem auto 0;
+        background: #{$med-blue};
+        color: white;
+        font-weight: 400;
+        border-radius: 2px;
+        text-decoration: none;
+      }
+    }
+
+    .feature-image {
+      /* placeholder image */
+      /* some of this sizing is image specific, based on background size, aspect ratio, etc. */
+      height: 35rem;
+      width: 100%;
+      background-size: 110%;
+      background-position-x: 61%;
+      background-position-y: 32%;
+      margin: 0;
+      position: relative;
+    }
+
+    .feature-text {
+      text-align: center;
+      padding: 1.875rem 1.5rem;
+      /* a little extra on top and bottom, with auto height */
+      display: inline-block;
+      width: 29rem;
+      background: #{$yellow-feature};
+      max-width: 100%;
+      align-items: center;
+      left: 0rem;
+      bottom: 0rem;
+      position: absolute;
+
+      h1 {
+        margin: 0 auto 1.5rem auto;
+        align-content: space-around;
+        font-family: 'Chronicle Text G2 A', 'Chronicle Text G2 B', serif;
+        font-size: 3rem;
+        font-size: clamp(2rem, 8vw, 3rem);
+        font-weight: 600;
+        line-height: 1;
+        margin: 0 auto;
+      }
+
+      sub {
+        font-family: 'Chronicle Text G2 A', 'Chronicle Text G2 B', serif;
+        font-size: 2.25rem;
+        font-size: clamp(1.5rem, 6vw, 2.25rem);
+        display: inline-block;
+        line-height: 1.3;
+        padding: .375rem .375rem;
+        /*ideally this would reduce for mobile */
+        margin: -.75rem auto 1.5rem auto;
+        /* reducing margin because of height from padding */
+        margin: 0;
+        position: unset; // Drupal has a normalize rule that messes with this
+      }
+    }
+
+    @container contain (max-width: 57rem) {
+
+      .feature {
+        padding: 0;
+      }
+
+      .feature-image {
+        height: calc(2/3 * (100cqw - var(--side-spacing) - var(--side-spacing)));
+        /* for full size height, not sure what was doing before but was wrong  */
+      }
+
+      .feature-text {
+        width: calc(100% - 6rem);
+        min-width: 28rem;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        position: relative;
+        margin: -3rem auto 0rem;
+        max-width: 34rem;
+      }
+    }
+
+    @container contain (max-width: 34rem) {
+
+      .feature-text {
+        left: 0;
+        right: 0;
+        min-width: auto;
+        width: 100%;
+        top: 0;
+        bottom: 0;
+        height: auto;
+        margin: 0 auto;
+      }
+    }
+  }
+
+  @media (min-width:34rem) {
+    .feature-container {
+      margin: var(--side-spacing);
+    }
+  }
+}