Merge pull request #57 from PRX/feat/design-tweaks

Design tweaks

_includes/show-tile.html

@@ -0,0 +1,3 @@
+<div class="col-3 col-lg-2 d-flex align-items-center justify-content-center">
+  {% picture thumbnail {{ include.logo }} --alt {{ include.name }} logo %}
+</div>

_layouts/post.html

@@ -13,7 +13,7 @@
       <div class="hero-content-inner">
         <h1 class="display-5 post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
         {%- if page.excerpt -%}
-        <p class="lead fs-3">{{ page.excerpt }}</p>
+        <p class="lead fs-4">{{ page.excerpt }}</p>
         {%- endif -%}
         <p class="post-meta fs-6">
           {%- if page.author -%}
@@ -55,7 +55,7 @@ <h1 class="display-5 post-title p-name" itemprop="name headline">{{ page.title |
   <div class="hero-content container col-xxl-6 text-center">
     <div class="hero-content-inner">
       <h2 class=" fw-bold">Interested in a demo?</h2>
-      <p class="fs-3 mt-2 mb-4">Reach out today</p>
+      <p class="fs-4 mt-2 mb-4">Reach out today</p>
       <p class="text-center"><a href="{% link pages/contact.md %}" type="button" class="btn btn-primary px-4 gap-3">Let's Talk</a></p>
     </div>
   </div>

_sass/bootstrap-variables.scss

@@ -30,6 +30,7 @@ $teal: #20c997;
 $cyan: #0dcaf0;
 $dark-blue: #003A57;
 $dark-green: #0A7176;
+$ltblue-rgba: rgba(140,210,244,0.2);
 
 $primary: $blue;
 $secondary: $gray-700;

_sass/layout.scss

@@ -1,7 +1,7 @@
 $x-half-path: "M905.335 600.029L1192.36 312.754C1197.02 308.093 1199.64 301.76 1199.64 295.166C1199.64 288.572 1197.02 282.239 1192.36 277.579L922.908 7.89153C918.251 3.22536 911.924 0.601532 905.335 0.601532C898.747 0.601532 892.419 3.22536 887.763 7.89153L600.737 295.166L600.108 294.536L313.082 7.29C308.426 2.62383 302.098 0 295.51 0C288.921 0 282.594 2.62383 277.937 7.29L8.48388 276.977C3.82175 281.638 1.2002 287.971 1.2002 294.565C1.2002 301.159 3.82175 307.492 8.48388 312.152L296.111 600.029L8.48388 887.905C3.82175 892.565 1.2002 898.899 1.2002 905.493C1.2002 912.087 3.82175 918.42 8.48388 923.08L277.937 1192.71C282.594 1197.38 288.921 1200 295.51 1200C302.098 1200 308.426 1197.38 313.082 1192.71L516.109 989.507C516.109 989.507 522.663 864.846 376.417 680.434L600.68 904.862L887.763 1192.17C892.419 1196.83 898.747 1199.46 905.335 1199.46C911.924 1199.46 918.251 1196.83 922.908 1192.17L1192.36 922.479C1197.02 917.818 1199.64 911.485 1199.64 904.891C1199.64 898.297 1197.02 891.964 1192.36 887.303L905.335 600.029Z";
 
 body {
-  background: $gray-200;
+  background: $white;
   font-family: $font-family-base;
   font-size: $font-size-base;
   line-height: $line-height-base;
@@ -28,7 +28,7 @@ h6 {
 
   &.display-6 {
     font-family: $font-family-base;
-    font-weight: normal;
+    font-weight: bold;
   }
 }
 
@@ -43,6 +43,17 @@ ul {
   }
 }
 
+img {
+  width: 100%;
+  height: auto;
+}
+
+.section {
+  min-height: 80vh;
+  display: flex;
+  align-items: center;
+}
+
 .text-white {
   a {
     color: $ltblue;
@@ -69,9 +80,15 @@ footer.bg-black-diagonal {
   }
 }
 
-footer .thumbnail-image {
-  max-width: 100px;
-  height: auto;
+footer {
+  .navbar-brand img {
+    max-width: 200px;
+  }
+
+  .thumbnail-image {
+    max-width: 100px;
+    height: auto;
+  }
 }
 
 .post-content .thumbnail-image {
@@ -121,9 +138,13 @@ footer .thumbnail-image {
   }
 }
 
+.bg-gray {
+  background: $ltblue-rgba;
+}
+
 .bg-gray-x {
-  background: url(/assets/img/bg-gray-x.jpg) no-repeat center right;
-  background-color: #eee;
+  background: url(/assets/img/bg-x-half.svg) no-repeat center right;
+  background-color: $ltblue-rgba;
 }
 
 .bg-white {
@@ -379,3 +400,29 @@ footer .thumbnail-image {
     height: 100%;
   }  
 }
+
+.post-card {
+  &:hover {
+    opacity: 0.8;
+  }
+
+  .card-body {
+    z-index: 1;
+    padding: 3rem;
+  }
+}
+
+.card-img-top {
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+
+.post-content {
+  p,
+  img,
+  iframe {
+    margin-bottom: 1.5rem;
+  }
+}

pages/blog.md

@@ -17,22 +17,22 @@ image: /assets/img/og-image.jpg
 <section>
   <div class="container col-xxl-8 p-5">
     {% for post in site.posts %}
-    <div class="row g-0 border bg-white rounded overflow-hidden flex-md-row mt-0 mb-4 shadow-sm h-md-250 position-relative">
-      <div class="col p-4 d-flex flex-column position-static">
-        <h2>{{ post.title }}</h2>
-        <p class="card-text mb-4">{{ post.excerpt }}</p>
+    <div class="card post-card mb-4">
+      {%- if post.heroimage -%}
+      <figure class="hero-image post mb-0">
+        {% picture "{{ post.heroimage }}" --alt {{ post.heroimagealt }} %}
+      </figure>  
+      {%- endif -%}
+      <div class="card-body text-light">
+        <h2 class="mb-3">{{ post.title }}</h2>
+        <p class="card-text mb-3 fs-6">{{ post.excerpt }}</p>
           {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
-        <div class="mb-1 text-muted">
+        <div class="card-text fs-6">
           {%- if post.author -%}{{ post.author }} •&nbsp;{%- endif -%}
           <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">{{ post.date | date: date_format }}</time>
         </div>
         <a href="{{ post.url }}" class="stretched-link" aria-label="continue reading"></a>
       </div>
-      {%- if post.heroimage -%}
-      <div class="col-3 p-4 thumbnail d-none d-lg-block blog-thumbnail">
-        {% picture thumbnail "{{ post.heroimage }}" --alt {{ post.heroimagealt }} %}
-      </div>
-      {%- endif -%}
     </div>
     {% endfor %}
   </div>

pages/features.md

@@ -24,7 +24,7 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<section class="bg-gray p-5">
+<section class="section bg-gray p-5">
   <div class="container col-xxl-8">
     <h2 class="display-6 mb-3 ">Save time and increase revenue with Dynamic Ad Insertion</h2>
     <p>Dovetail’s dynamic ad insertion feature seamlessly stitches sponsorship messages into produced audio at any break in your show.</p>
@@ -36,7 +36,7 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<section class="bg-white p-5">
+<section class="section bg-white p-5">
   <div class="container col-xxl-8">
     <h2 class="display-6 mb-3">Content and Feed Management with ease</h2>
     <p class="lead">Producer tools for episode uploads and feed management</p>
@@ -112,7 +112,7 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<section class="bg-gray p-5">
+<section class="section bg-gray p-5">
   <div class="container col-xxl-8">
     <h2 class="display-6 mb-3">Real-time data to understand your audience</h2>
     <p class="lead">One of podcasting's biggest pain points is accessing data and metrics that inform strategic goals. Dovetail provides a solution.</p>
@@ -149,7 +149,7 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<section class="bg-white p-5">
+<section class="section bg-white p-5">
   <div class="container col-xxl-8">
     <h2 class="display-6 mb-3">Sell with confidence using Predictive Ad Inventory Management</h2>
     <p>Understand your inventory with best in class inventory management. <a href="/2022/07/21/introducing-dovetail-as-product">Learn more in our blog post</a>.</p>
@@ -214,7 +214,7 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<section class="hero p-5">
+<section class="section hero p-5">
   <div class="hero-image">
     <div>
     {% picture img/hero-privacy.jpg --alt Headphones %}
@@ -235,7 +235,7 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<aside class="text-white hero px-4 m-0 cta">
+<aside class="section text-white hero px-4 m-0 cta">
   <div class="hero-image">
     <div>{% picture img/cta-hero.jpg --alt Open laptop with a podcasting microphone in foreground %}</div>
   </div>

pages/home.md

@@ -24,7 +24,7 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<section class="bg-x-blue text-white p-5">
+<section class="section bg-x-blue text-white p-5">
   <div class="container col-xxl-8">
     <p class="fs-4 mb-4">Dovetail from PRX supports over 270 podcasts and enables over 80 different organizations — to expand audience, monetize content, and ensure long-term sustainability of their podcasts, all while upholding a steadfast commitment to privacy.</p>
     <div id="logoCarouselControls" class="carousel slide" data-bs-ride="carousel">
@@ -90,7 +90,7 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<section class="bg-white p-5">
+<section class="section bg-white p-5">
   <div class="container col-xxl-8">
     <div class="row">
       <div class="col-md-6">
@@ -111,7 +111,7 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<section class="bg-gray-x p-5">
+<section class="section bg-gray-x p-5">
   <div class="container col-xxl-8">
     <div class="row">
       <div class="col-md-6">
@@ -133,7 +133,7 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<section class="bg-white p-5">
+<section class="section bg-white p-5">
   <div class="container col-xxl-8">
     <div class="row">
       <div class="col-md-6">
@@ -154,7 +154,7 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<section class="bg-x-blue section-quote text-white p-5">
+<section class="section bg-x-blue section-quote text-white p-5">
   <div class="container col-xxl-8">
     <div class="row">
       <figure class="col-md-8 mb-0 pb-0">
@@ -172,7 +172,7 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<section class="hero p-5">
+<section class="section hero p-5">
   <div class="hero-image">
     <div>
     {% picture img/hero-privacy.jpg --alt Headphones on an orange background %}
@@ -203,7 +203,7 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<aside class="text-white hero p-5 m-0 cta">
+<aside class="section text-white hero p-5 m-0 cta">
   <div class="hero-image">
     <div>{% picture img/cta-hero.jpg --alt Open laptop with a podcasting microphone in foreground %}</div>
   </div>