Pubsite modernization - for real this time

.gitignore

@@ -2,6 +2,7 @@ vendor/
 _site
 .sass-cache
 .jekyll-metadata
+.jekyll-cache
 npm-debug.log
 .bundle/
 node_modules/

_sass/_project_images.scss

@@ -0,0 +1,86 @@
+.content {
+  position: relative;
+  width: 100%;
+  margin: auto;
+  overflow: hidden;
+}
+
+.content-overlay {
+  background: rgba(0,0,0,0.6);
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  opacity: 0;
+  -webkit-transition: all 0.4s ease-in-out 0s;
+  -moz-transition: all 0.4s ease-in-out 0s;
+  transition: all 0.4s ease-in-out 0s;
+}
+
+.content:hover .content-overlay{
+  opacity: 1;
+}
+
+.content-image{
+  width: 100%;
+}
+
+.content-background {
+    background: rgba(0, 0, 0, 0.45);
+}
+
+.content-details {
+  position: absolute;
+  text-align: center;
+  padding-left: 1em;
+  padding-right: 1em;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  opacity: 0;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  -webkit-transition: all 0.3s ease-in-out 0s;
+  -moz-transition: all 0.3s ease-in-out 0s;
+  transition: all 0.3s ease-in-out 0s;
+}
+
+.content:hover .content-details{
+  top: 50%;
+  left: 50%;
+  opacity: 1;
+}
+
+.content-details h3{
+  color: #fff;
+  font-weight: 500;
+  letter-spacing: 0.15em;
+  margin-bottom: 0.5rem;
+  padding: auto;
+  text-transform: uppercase;
+}
+
+.content-details p{
+  color: #fff;
+  font-size: 0.8em;
+}
+
+.fadeIn-bottom{
+  top: 80%;
+}
+
+@media screen and (max-width: 700px) {
+  .content-details{
+    top: 50%;
+    left: 50%;
+    opacity: 1;
+  }
+  .content-overlay{
+    opacity: 1;
+  }
+}
+

_sass/_triple_image.scss

@@ -0,0 +1,134 @@
+$card-size: 300px;
+$p-m-default: 20px;
+
+$black: #111;
+$white: #FFF;
+
+$csh-pink: #b0197e;
+$csh-blue: #404b69;
+$gray: #f4f4f6;
+
+// Easing Properties
+$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+
+// PX to EM
+$browser-context: 16;
+
+@function em($pixels, $context: $browser-context) {
+  @if (unitless($pixels)) {
+    $pixels: $pixels * 1px;
+  }
+
+  @if (unitless($context)) {
+    $context: $context * 1px;
+  }
+
+  @return $pixels / $context * 1em;
+}
+
+// Transition Mixin
+@mixin transition($transition...) {
+    -moz-transition:    $transition;
+    -o-transition:      $transition;
+    -webkit-transition: $transition;
+    transition:         $transition;
+}
+
+
+.triple_a {
+  @include transition(all 300ms $easeOutQuad);
+  &:hover {
+    @include transition(all 300ms $easeOutQuad);
+  }
+}
+
+#wrapper {
+  position: relative;
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+}
+
+article.card {
+  background-image: linear-gradient(0deg, $csh-blue 0%, $csh-pink 100%);  
+  width: $card-size;
+  height: $card-size;
+  margin: $p-m-default;
+  position: relative;
+  overflow: hidden;
+}
+
+.card-image {
+  max-width: 100%;
+  width: 100%;
+  height: $card-size;
+  object-fit: cover;
+  transform: translate(0,0);
+  @include transition(all 400ms $easeOutQuad);
+}
+
+.card-meta {
+  font-size: em(11);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  &:before {
+    content: '';
+    height: 1px;
+    width: 30px;
+    background-color: #fff;
+    position: relative;
+    display: block;
+    margin-bottom: 10px;
+    backface-visibility: hidden;
+    opacity: 0;
+    transform: translate(0,-10px);
+    @include transition(all 200ms $easeOutQuad);
+  }  
+}
+
+.card-text {
+  color: #FFF;
+  // This next line controls the background opacity
+  background-color: rgba($black, .40);
+  position: absolute;
+  padding: $p-m-default;
+  z-index: 10;
+  width:100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-end;
+  @include transition(all 200ms $easeOutQuad);
+}
+
+.card-title {
+  margin: 8px 0;
+  font-weight: 300;
+  font-size: em(30);
+}
+
+@media screen and (min-width: 800px) {
+  .card a {
+    &:hover {
+      .card-text {
+        background-color: rgba($black, .60);
+      }
+      .card-meta {
+        &:before {
+          transform: translate(0,0);
+          opacity: 1;
+          @include transition(all 200ms $easeOutQuad);
+        }
+      }
+
+      .card-image {
+        transform: translate(20px,0);
+        @include transition(all 400ms $easeOutQuad);
+      }    
+    }  
+  }
+}
+
+
+

_sass/_typography.scss

@@ -19,7 +19,7 @@ h2 {
 }
 
 h3 {
-    font-size: 1em;
+    font-size: 1.2em;
 }
 
 .long-form {
@@ -32,3 +32,14 @@ h3 {
 .row.spaced {
     margin-top: 2em;
 }
+
+#headline {
+  font-size: 1.4em;
+}
+@media screen and (max-width: 400px) {
+  #headline {
+    font-size: 1.0em;
+    padding-right: 0.4em;
+    padding-left: 0.4em;
+  }
+}

about/tour.html

@@ -6,7 +6,7 @@
 
 <div class="gray-wrapper" id="tour-page">
     <div class="container spaced">
-        <div class="row">
+        <div class="row" style="width: 100%;">
             <div class="col-12 col-sm-8 offset-sm-2">
                 <div class="dropdown">
                     <a href="#" class="btn btn-sm dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

assets/css/main.scss

@@ -3,9 +3,10 @@
 # only Main files contain this front matter, not partials.
 ---
 
-$csh-pink: #b0197e;
 $blue: #404b69;
 $gray: #f4f4f6;
+$csh-pink: #b0197e;
+
 
 body {
   width: 100%;
@@ -41,8 +42,44 @@ img.rounded,
   box-shadow: 0 2px 15px darken($gray, 20%);
 }
 
+.container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: flex-start;
+}
+
+.container_stat {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: flex-start;
+ }
+
+ .stat_big {
+   color: $csh-pink;
+   font-size: 2.5em;
+   font-weight: 600;
+   margin: 0%;
+ }
+
+ .stat_tag {
+   margin: 0.2em;
+ }
+
+ .stat_card {
+   text-align: center;
+   width: 200px;
+ }
+
+ .stat_desc {
+    font-size: 0.6em;
+    font-weight: 600;
+ }
+
 .card-header {
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -79,6 +116,28 @@ a.btn {
     margin-bottom: 1em;
 }
 
+@media screen and (max-width: 570px) {
+  .quad_image {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 571px) {
+  .quad_image {
+    display:grid;
+    grid-template-columns: 50% 50%;
+  }
+}
+
+@media screen and (min-width: 1100px) {
+  .quad_image {
+    display:grid;
+    grid-template-columns: 25% 25% 25% 25%;
+  }  
+}
+
+
+
 @import "typography";
 @import "nav";
 @import "slider";
@@ -92,3 +151,5 @@ a.btn {
 @import "insights";
 @import "footer";
 @import "hackathon";
+@import "triple_image";
+@import "project_images.scss";