style "read more" buttons properly

layouts/_default/summary-with-image.html

@@ -0,0 +1,29 @@
+{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
+<article class="bb b--black-10">
+  <div class="db pv4 ph3 ph0-l no-underline dark-gray">
+    <div class="flex flex-column flex-row-ns">
+      {{ if $featured_image }}
+          {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
+        <div class="{{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3-ns" "pr3-ns" }} mb4 mb0-ns w-100 w-40-ns">
+          <a href="{{.RelPermalink}}" class="db grow">
+            <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
+          </a>
+        </div>
+      {{ end }}
+      <div class="blah w-100{{ if $featured_image }} w-60-ns {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr3-ns" "pl3-ns" }}{{ end }}">
+        <h1 class="f3 fw1 athelas mt0 lh-title">
+          <a href="{{.RelPermalink}}" class="color-inherit dim link">
+            {{ .Title }}
+            </a>
+        </h1>
+        <div class="f6 f5-l lh-copy nested-copy-line-height nested-links">
+          {{ .Summary }}
+        </div>
+        {{ with .Params.author | default .Site.Params.author }}
+          <p class="f6 lh-copy mv0">By {{ . }}</p>
+        {{- end -}}
+        <a href="{{.RelPermalink}}" class="ba b--none bg-blue br2 color-inherit dib f7 hover-bg-navy link mt2 ph2 pv1">{{ $.Param "read_more_copy" | default (i18n "readMore") }}</a>
+      </div>
+    </div>
+  </div>
+</article>

static/style/style.css

@@ -23,6 +23,16 @@ th {
     color: #001b44;
 }
 
+/* arcticle cards */
+/* read more button */
+a.ba.b--none.bg-blue.br2.color-inherit.dib.f7.hover-bg-navy.link.mt2.ph2.pv1 {
+    color: white;
+}
+/* headlines */
+a.color-inherit.dim.link:hover, .nested-links a:focus, .nested-links a:hover {
+    color: #001b44;
+}
+
 /* menu styles */
 div.flex-l.items-center {
     text-shadow: 1px 1px 30px #000000;