Article Redesign

assets/css/tw.css

@@ -224,6 +224,12 @@
   @apply inline-block rounded border-2 border-blue bg-blue px-6 py-2 text-center font-sans font-semibold uppercase tracking-widest text-white no-underline outline-none ring-blue hover:bg-blue-7 focus:ring-2 focus:ring-blue active:ring-blue;
 }
 
+.spl-newsletter {
+  @apply my-2 sm:float-right sm:ml-3 sm:w-1/2 md:-mr-12 md:max-w-[439px] lg:-mr-0 lg:w-full lg:max-w-96 xl:-mr-20 xl:max-w-[475px];
+}
+.spl-donate {
+  @apply my-2 sm:float-left sm:mr-3 sm:w-1/2 md:max-w-[439px] lg:w-full lg:max-w-96;
+}
 .clip-triangle {
   clip-path: polygon(0 0, 0% 100%, 15% 50%);
 }

content/news/2024-05-14-SPLGAZAORDER.md

@@ -26,7 +26,7 @@ The vaguely worded update, which went into effect last week without the public f
 
 It has also heightened fears among pro-Palestinian and Muslim American groups that employees who express opinions that differ from the Democratic governor’s stance on the war could be unfairly punished.
 
-<script src="https://www.spotlightpa.org/embed.js" async></script><div data-spl-embed-version="1" data-spl-src="https://www.spotlightpa.org/embeds/newsletter/"></div>
+<script src="https://www.spotlightpa.org/embed.js" async></script><div class="spl-newsletter" data-spl-embed-version="1" data-spl-src="https://www.spotlightpa.org/embeds/newsletter/"></div>
 
 In a May 8 email to cabinet secretaries, a Shapiro administration official wrote that the need for “moral clarity is especially pronounced today, as antisemitism, Islamophobia, and other forms of hate speech are increasing across not only Pennsylvania, but nationally and globally.”
 
@@ -84,7 +84,7 @@ Shapiro has repeatedly said his comments are his attempt to “speak and act wit
 
 As the New York Times recently reported, Shapiro has <a href="https://twitter.com/gardnerakayla/status/1745916051001372803?t=b2g5-1SlkpbGHVUOR-FJ1w&amp;s=19">criticized</a> Israeli Prime Minister Benjamin Netanyahu and expressed support for a two-state solution. He has not called for a ceasefire, which led some Muslim leaders to <a href="https://pa.cair.com/pressrelease/shapiro-meaningful-action/">boycott</a> a Ramadan celebration the governor held.
 
-<script src="https://www.spotlightpa.org/embed.js" async></script><div data-spl-embed-version="1" data-spl-src="https://www.spotlightpa.org/embeds/donate/"></div>
+<script src="https://www.spotlightpa.org/embed.js" async></script><div data-spl-embed-version="1" class="spl-donate" data-spl-src="https://www.spotlightpa.org/embeds/donate/"></div>
 
 “I am pro-the idea of a Jewish homeland, a Jewish state, and I will certainly do everything in my power to ensure that Israel is strong and Israel is fortified and will exist for generations,” Shapiro <a href="https://www.nytimes.com/2024/05/11/us/politics/josh-shapiro-pennsylvania.html">told</a> the New York Times this month.
 

layouts/_default/news.html

@@ -14,10 +14,6 @@ <h1 class="text-4xl font-semibold leading-none text-black">
         >
           {{ .Param "dek" }}
         </h2>
-
-        <div class="mt-4">
-          {{ partial "tw/social-buttons.html" . }}
-        </div>
       </header>
 
       <div x-data x-intersect.once="$dispatch('open-sticky')"></div>

layouts/_default/terms.html

@@ -36,9 +36,6 @@
 
 
   <section class="bg-white px-4 pb-12 pt-6 font-serif">
-    <div class="mx-auto mb-8 mt-4 w-full max-w-screen-lg">
-      {{ partial "tw/social-buttons.html" . }}
-    </div>
     {{ partial "tw/list-3-col-story.html" (dict
       "pages" $pages
       "wrapperClass" "mb-16 mx-auto max-w-screen-lg"

layouts/partials/embed/cta.html

@@ -11,17 +11,20 @@
   }"
   x-cloak
 >
-  <div class="rounded border border-red font-semibold leading-tight shadow">
-    <h2>
+  <div
+    class="rounded-lg border border-g-5 bg-g-2 p-7 shadow md:p-10 xl:px-12 xl:py-7"
+  >
+    <h2
+      class="border-b border-black pb-1 font-serif text-2xl italic leading-tight"
+    >
       <a
         :href="url"
-        class="inline-block rounded-br bg-red px-4 py-3 font-semibold uppercase tracking-wider text-white sm:text-lg"
         data-ga-category="eyebrow"
         target="_blank"
         x-rich-text="_('eyebrow', 'Eyebrow')"
       ></a>
     </h2>
-    <h2 class="mt-8 px-4 text-center font-semibold sm:mt-12 sm:text-lg">
+    <h2 class="font-sans text-lg">
       <a
         :href="url"
         class="embed-prose-highlight text-lg leading-snug"
@@ -30,9 +33,7 @@ <h2 class="mt-8 px-4 text-center font-semibold sm:mt-12 sm:text-lg">
         x-rich-text="_('body', 'Body')"
       ></a>
     </h2>
-    <div
-      class="mt-8 px-4 text-center font-semibold uppercase tracking-wider sm:mt-12 sm:text-xl"
-    >
+    <div class="mt-8 sm:ml-1 sm:mt-4">
       <a
         :href="url"
         class="btn-donate"
@@ -41,7 +42,7 @@ <h2 class="mt-8 px-4 text-center font-semibold sm:mt-12 sm:text-lg">
         x-rich-text="_('cta', 'Just Do It!')"
       ></a>
     </div>
-    <div class="mb-4 mr-3 mt-10 text-right text-g-9 md:mt-4">
+    <div class="mt-10 text-right text-g-9 md:mt-4">
       <a href="/" target="_blank">
         <svg
           class="inline-block h-8 w-48 fill-current"

layouts/partials/embed/donate.html

@@ -8,36 +8,36 @@
   }"
   x-cloak
 >
-  <div class="rounded border border-red font-semibold leading-tight shadow">
-    <h2>
+  <div
+    class="rounded-lg border border-g-5 bg-g-2 p-7 shadow md:p-10 xl:px-12 xl:py-7"
+  >
+    <h2
+      class="border-b border-black pb-1 font-serif text-2xl italic leading-tight"
+    >
       <a
         href="/donate/"
-        class="inline-block rounded-br bg-red px-4 py-3 font-semibold uppercase tracking-wider text-white sm:text-lg"
         data-ga-category="eyebrow"
         x-text="_('eyebrow_text', 'While You’re Here')"
       ></a>
     </h2>
-    <h2 class="mt-8 px-4 text-center font-semibold sm:mt-12 sm:text-lg">
+    <h2 class="font-sans text-lg">
       <a
         href="/donate/"
-        class="embed-prose-highlight text-lg leading-snug"
         data-ga-category="body"
         target="_blank"
         x-rich-text="_('teaser_text', 'If you learned something from this report, pay it forward and become a member of Spotlight PA so someone else can in the future.')"
       ></a>
     </h2>
-    <div
-      class="mt-8 px-2 text-center font-semibold uppercase tracking-wider sm:mt-12 sm:text-xl"
-    >
+    <div class="mt-2 sm:ml-1 sm:mt-0">
       <a
         href="/donate/"
         class="btn-donate"
         data-ga-category="button"
         target="_blank"
-        x-rich-text="_('cta_text', 'Click to Contribute')"
+        x-rich-text="_('cta_text', 'Contribute →')"
       ></a>
     </div>
-    <div class="mb-4 mr-3 mt-10 text-right text-g-9 md:mt-4">
+    <div class="mt-10 text-right text-g-9 md:mt-4">
       <a href="/" target="_blank">
         <svg
           class="inline-block h-8 w-48 fill-current"

layouts/partials/embed/newsletter.html

@@ -1,6 +1,6 @@
 {{ $idEmail := partial "helper/new-id" . }}
 <form
-  class="rounded border border-red font-sans font-semibold leading-tight shadow"
+  class="rounded-lg border border-g-5 bg-g-2 p-7 shadow md:p-10 xl:px-12 xl:py-7"
   action="{{ site.Param `newsletters-action` }}"
   method="post"
   target="_blank"
@@ -25,19 +25,16 @@
     </template>
   </p>
   <h2
-    class="inline-block rounded-br bg-red px-4 py-3 font-semibold uppercase tracking-wider text-white sm:text-lg"
+    class=" border-b border-black pb-1 font-serif text-2xl italic leading-tight"
     x-text="_('eyebrow', $el.innerText)"
   >
     Free Newsletter
   </h2>
-  <h2
-    class="embed-prose mt-8 px-4 text-center text-lg font-semibold sm:mt-12"
-    x-rich-text="_('cta', $el.innerText)"
-  >
+  <h2 class="font-sans text-lg" x-rich-text="_('cta', $el.innerText)">
     Sign up for a free roundup of the top news from across Pennsylvania, all in
     one daily or weekly email from Spotlight PA.
   </h2>
-  <div class="mx-auto mt-8 items-stretch px-4 sm:flex sm:max-w-2xl">
+  <div class="mx-auto mt-2 items-stretch sm:flex">
     <p class="relative flex-grow">
       <label class="sr-only" for="{{ $idEmail }}">Email address</label>
       <input
@@ -58,12 +55,12 @@
       </span>
     </p>
     <p class="mt-2 sm:ml-1 sm:mt-0">
-      <button class="btn-donate" type="submit">Sign Up</button>
+      <button class="btn-signup" type="submit">Sign Up</button>
     </p>
   </div>
-  {{ $checkClass := `accent-red w-3 h-3 shrink-0` }}
+  {{ $checkClass := `mr-3 h-4 w-4 rounded border border-black p-1 accent-black hover:accent-yellow-4` }}
   <div
-    class="mt-4 flex flex-col gap-2 px-4 text-left"
+    class="mt-4 flex flex-col gap-2 text-left"
     x-show="hasFocused && ! preselected"
     x-transition
     x-cloak
@@ -121,7 +118,7 @@
       </label>
     </p>
   </div>
-  <div class="mb-4 mr-3 mt-10 text-right text-g-9 md:mt-4">
+  <div class="mt-10 text-right text-g-9 md:mt-4">
     <a href="/" target="_blank">
       <svg
         class="inline-block h-8 w-48 fill-current"

layouts/partials/embed/tips.html

@@ -2,7 +2,7 @@
 {{ $idEmail := partial "helper/new-id" . }}
 {{ $idTip := partial "helper/new-id" . }}
 <div
-  class="rounded border border-red font-sans font-semibold leading-tight shadow"
+  class="rounded-lg border border-g-5 bg-g-2 p-7 shadow md:p-10 xl:px-12 xl:py-7"
   data-ga-category="contact"
   x-data="{
     showSpanish: false,
@@ -21,48 +21,49 @@
   x-cloak
 >
   <h2
-    class="inline-block rounded-br bg-red px-4 py-3 font-semibold uppercase tracking-wider text-white sm:text-lg"
     x-show="!showSpanish"
-    x-text="_('flag_text', $el.innerText)"
+    class="flex items-baseline justify-between border-b border-black pb-1 font-serif text-2xl italic leading-tight"
   >
-    Tips
+    <span x-show="!showSpanish" x-text="_('flag_text', $el.innerText)"
+      >Tips</span
+    >
+    <button
+      class="float-right inline-block pl-3 font-sans text-sm font-semibold uppercase text-g-9"
+      type="button"
+      data-ga-category="toggle-language:spanish"
+      @click="showSpanish = true"
+    >
+      En Español
+    </button>
   </h2>
   <h2
     x-cloak
     x-show="showSpanish"
-    class="inline-block rounded-br bg-red px-4 py-3 font-semibold uppercase tracking-wider text-white sm:text-lg"
+    class=" border-b border-black pb-1 font-serif text-2xl italic leading-tight"
   >
-    Escríbenos
+    <span x-show="showSpanish" x-text="_('flag_text', $el.innerText)"
+      >Escríbenos</span
+    >
+    <button
+      x-cloak
+      type="button"
+      class="float-right inline-block pl-3 font-sans text-sm font-semibold uppercase text-g-9"
+      data-ga-category="toggle-language:english"
+      @click="showSpanish = false"
+    >
+      In English
+    </button>
   </h2>
-  <button
-    x-show="!showSpanish"
-    class="float-right inline-block px-4 py-3 font-semibold uppercase text-red"
-    type="button"
-    data-ga-category="toggle-language:spanish"
-    @click="showSpanish = true"
-  >
-    En Español
-  </button>
-  <button
-    x-cloak
-    x-show="showSpanish"
-    type="button"
-    class="float-right inline-block px-4 py-3 font-semibold uppercase text-red"
-    data-ga-category="toggle-language:english"
-    @click="showSpanish = false"
-  >
-    In English
-  </button>
   <div
-    class="embed-prose px-6 pb-4 pt-6 text-lg leading-snug"
+    class="embed-prose pb-4 pt-6 text-lg leading-snug"
     x-show="!showSpanish"
     x-rich-text="_('tip_text', '')"
   ></div>
-  <div x-cloak class="px-6 pb-4 pt-6 text-lg leading-snug" x-show="showSpanish">
+  <div x-cloak class="pb-4 pt-6 text-lg leading-snug" x-show="showSpanish">
     ¿Tienes información que debemos saber? <strong>Escríbenos.</strong>
   </div>
   <form
-    class="flex flex-col gap-2 p-4"
+    class="flex flex-col gap-2 py-4"
     action="/contact/thanks/"
     method="post"
     netlify
@@ -138,7 +139,7 @@
     </div>
     <div class="py-2">
       <button
-        class="btn-donate"
+        class="btn-signup"
         type="submit"
         target="_blank"
         x-text="showSpanish ? 'Enviar mensaje': 'Send message'"
@@ -166,7 +167,7 @@
       </a>
     </div>
   </form>
-  <div class="mb-4 mr-3 text-right text-g-9">
+  <div class="mt-10 text-right text-g-9 md:mt-4">
     <a href="/" target="_blank">
       <svg
         class="inline-block h-8 w-48 fill-current"

layouts/partials/header/svgs.html

@@ -34,7 +34,7 @@
   "threads" "@fontawesome/brands/threads.svg"
   "ticket" "/img/icons/ticket-stub.svg"
   "times" "@fontawesome/solid/xmark.svg"
-  "twitter" "@fontawesome/brands/twitter.svg"
+  "twitter" "@fontawesome/brands/x-twitter.svg"
   "user" "@fontawesome/solid/user.svg"
   "counties" "/img/icons/counties.svg"
 }}

layouts/partials/tw/content-well.html

@@ -2,7 +2,7 @@
   <div class="mx-auto w-full max-w-prose">
     <div class="mt-6" data-ga-category="content" id="content">
       <div
-        class="article-content w-full overflow-hidden leading-relaxed"
+        class="article-content w-full leading-relaxed"
         data-sf-campaign="701Dn000000YgozIAC"
       >
         {{ . }}

layouts/partials/tw/donate-cta.html

@@ -37,7 +37,7 @@ <h2 class="mt-8 text-center font-semibold sm:mt-12 sm:text-xl md:text-2xl">
       {{- $cta -}}
     </a>
   </div>
-  <div class="mb-4 mr-3 mt-10 text-right text-g-9 md:mt-4">
+  <div class="mt-10 text-right text-g-9 md:mt-4">
     <svg
       class="inline-block h-8 w-48 fill-current"
       aria-label="Spotlight PA logo"