Merge branch 'feature/community-links'

nix/tests/module.nix

@@ -72,5 +72,20 @@ pkgs.runCommand "tide-module-test" { } ''
   ${pkgs.gnugrep}/bin/grep -F \
     "https://discourse.torahimderecheretz.com" \
     ${landingPage}/index.html
+  ${pkgs.gnugrep}/bin/grep -F \
+    "https://torah-im-derech-eretz.blogspot.com/" \
+    ${landingPage}/index.html
+  ${pkgs.gnugrep}/bin/grep -F \
+    "https://tide613.substack.com/" \
+    ${landingPage}/index.html
+  ${pkgs.gnugrep}/bin/grep -F \
+    "https://chat.whatsapp.com/FLdSwkdiChA9wvXxooUV9K" \
+    ${landingPage}/index.html
+  if ${pkgs.gnugrep}/bin/grep -F \
+    'class="button button--small"' \
+    ${landingPage}/index.html; then
+    echo "unexpected small button in landing-page header" >&2
+    exit 1
+  fi
   touch "$out"
 ''

site/index.html

@@ -74,14 +74,6 @@
             <li><a href="#community">Community</a></li>
           </ul>
         </nav>
-
-        <a
-          class="button button--small"
-          href="https://discourse.torahimderecheretz.com"
-        >
-          Join the Forum
-          <span aria-hidden="true">↗</span>
-        </a>
       </div>
     </header>
 
@@ -100,10 +92,10 @@
             <div class="hero__actions">
               <a
                 class="button button--primary"
-                href="https://discourse.torahimderecheretz.com"
+                href="#community"
               >
-                Join the Forum
+                Join the Community
-                <span aria-hidden="true">↗</span>
+                <span aria-hidden="true">↓</span>
               </a>
               <a class="text-link" href="#vision">
                 Explore the vision
@@ -233,22 +225,57 @@
           <p class="eyebrow eyebrow--light">The Community</p>
           <h2 id="community-title">Study deeply. Ask honestly. Build together.</h2>
           <p class="community__lede">
-            Join a thoughtful forum for discussing Rav Hirsch’s writings,
+            Connect with others who believe Torah speaks to the whole of life.
-            applying his ideas, sharing resources, and learning with others
+            Join the discussion, read articles and essays, or keep up with the
-            who believe Torah speaks to the whole of life.
+            community in the way that suits you.
           </p>
-          <div class="community__topics" aria-label="Forum topics">
+          <div class="community__topics" aria-label="Community interests">
             <span>Source study</span>
             <span>Ideas in practice</span>
             <span>History and legacy</span>
           </div>
-          <a
+          <nav class="community__links" aria-label="Community destinations">
-            class="button button--light"
+            <a
-            href="https://discourse.torahimderecheretz.com"
+              class="community-link"
-          >
+              href="https://torah-im-derech-eretz.blogspot.com/"
-            Join the Forum
+            >
-            <span aria-hidden="true">↗</span>
+              <span class="community-link__title">Blog</span>
-          </a>
+              <span class="community-link__arrow" aria-hidden="true">↗</span>
+              <span class="community-link__description">
+                Read articles exploring Torah Im Derech Eretz.
+              </span>
+            </a>
+            <a
+              class="community-link"
+              href="https://discourse.torahimderecheretz.com"
+            >
+              <span class="community-link__title">Forum</span>
+              <span class="community-link__arrow" aria-hidden="true">↗</span>
+              <span class="community-link__description">
+                Discuss Rav Hirsch’s teachings with the community.
+              </span>
+            </a>
+            <a
+              class="community-link"
+              href="https://tide613.substack.com/"
+            >
+              <span class="community-link__title">Substack</span>
+              <span class="community-link__arrow" aria-hidden="true">↗</span>
+              <span class="community-link__description">
+                Subscribe for essays and new writing.
+              </span>
+            </a>
+            <a
+              class="community-link"
+              href="https://chat.whatsapp.com/FLdSwkdiChA9wvXxooUV9K"
+            >
+              <span class="community-link__title">WhatsApp</span>
+              <span class="community-link__arrow" aria-hidden="true">↗</span>
+              <span class="community-link__description">
+                Join the group for conversation and updates.
+              </span>
+            </a>
+          </nav>
         </div>
       </section>
     </main>
@@ -273,7 +300,12 @@
         <nav aria-label="Footer navigation">
           <a href="#vision">The Vision</a>
           <a href="#rav-hirsch">Rav Hirsch</a>
+          <a href="https://torah-im-derech-eretz.blogspot.com/">Blog</a>
           <a href="https://discourse.torahimderecheretz.com">Forum</a>
+          <a href="https://tide613.substack.com/">Substack</a>
+          <a href="https://chat.whatsapp.com/FLdSwkdiChA9wvXxooUV9K">
+            WhatsApp
+          </a>
         </nav>
       </div>
       <div class="container site-footer__legal">

site/styles.css

@@ -159,12 +159,16 @@ cite {
 
 .site-header__inner {
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto 1fr;
   align-items: center;
   min-height: 5.25rem;
   gap: 2rem;
 }
 
+.site-nav {
+  justify-self: end;
+}
+
 .brand {
   display: inline-flex;
   align-items: center;
@@ -256,15 +260,6 @@ cite {
   transform: translateY(-2px);
 }
 
-.button--small {
-  min-height: 2.8rem;
-  padding: 0.7rem 1rem;
-  background: var(--color-forest);
-  color: var(--color-white);
-  font-size: 0.88rem;
-}
-
-.button--small:hover,
 .button--primary:hover {
   background: var(--color-forest-dark);
 }
@@ -274,16 +269,6 @@ cite {
   color: var(--color-white);
 }
 
-.button--light {
-  border-color: var(--color-paper);
-  background: var(--color-paper);
-  color: var(--color-forest-dark);
-}
-
-.button--light:hover {
-  background: var(--color-white);
-}
-
 .hero {
   position: relative;
   min-height: calc(100svh - 5.25rem);
@@ -617,7 +602,7 @@ cite {
 .community__inner {
   position: relative;
   z-index: 1;
-  max-width: 52rem;
+  max-width: 62rem;
   margin-inline: auto;
   text-align: center;
 }
@@ -656,6 +641,59 @@ cite {
   letter-spacing: 0.04em;
 }
 
+.community__links {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  text-align: left;
+}
+
+.community-link {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-content: start;
+  min-height: 9.5rem;
+  padding: 1.35rem 1.5rem;
+  border: 1px solid rgb(244 240 230 / 30%);
+  background: rgb(244 240 230 / 6%);
+  text-decoration: none;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
+}
+
+.community-link:hover {
+  transform: translateY(-2px);
+  border-color: var(--color-brass);
+  background: rgb(244 240 230 / 11%);
+}
+
+.community-link:focus-visible {
+  outline-color: var(--color-paper);
+}
+
+.community-link__title {
+  color: var(--color-white);
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  line-height: 1.3;
+}
+
+.community-link__arrow {
+  color: #e5c997;
+  font-size: 1.2rem;
+  line-height: 1;
+}
+
+.community-link__description {
+  grid-column: 1 / -1;
+  margin-top: 0.7rem;
+  color: rgb(244 240 230 / 76%);
+  font-size: 0.92rem;
+  line-height: 1.5;
+}
+
 .site-footer {
   padding-block: 4.5rem 2rem;
   background: var(--color-forest-dark);
@@ -687,7 +725,9 @@ cite {
 
 .site-footer nav {
   display: flex;
-  gap: 2rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 1rem 1.5rem;
 }
 
 .site-footer nav a {
@@ -715,7 +755,7 @@ cite {
 
 @media (max-width: 56rem) {
   .site-header__inner {
-    grid-template-columns: 1fr auto;
+    grid-template-columns: 1fr;
     padding-top: 0.75rem;
     gap: 0.6rem 1.25rem;
   }
@@ -723,6 +763,7 @@ cite {
   .site-nav {
     grid-column: 1 / -1;
     grid-row: 2;
+    justify-self: stretch;
     border-top: 1px solid rgb(25 39 33 / 10%);
   }
 
@@ -789,12 +830,6 @@ cite {
     font-size: 0.78rem;
   }
 
-  .button--small {
-    min-height: 2.5rem;
-    padding: 0.65rem 0.8rem;
-    font-size: 0.78rem;
-  }
-
   .site-nav a {
     font-size: 0.78rem;
   }
@@ -826,6 +861,14 @@ cite {
     margin-bottom: 1.4rem;
   }
 
+  .community__links {
+    grid-template-columns: 1fr;
+  }
+
+  .community-link {
+    min-height: auto;
+  }
+
   .site-footer__main,
   .site-footer__legal {
     align-items: flex-start;
@@ -833,8 +876,7 @@ cite {
   }
 
   .site-footer nav {
-    flex-wrap: wrap;
+    justify-content: flex-start;
-    gap: 1rem 1.5rem;
   }
 }