diff --git a/htdocs/common/topnav.html b/htdocs/common/topnav.html index c503986..0dcdb43 100644 --- a/htdocs/common/topnav.html +++ b/htdocs/common/topnav.html @@ -7,6 +7,7 @@
  • Explore
  • Projects
  • Community
  • +
  • Letters
  • Support
  • diff --git a/htdocs/index.html b/htdocs/index.html index 28e6398..a11421e 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -12,6 +12,7 @@
    Explore the projects Join the conversation + Create an eom.dev account

    Independent software, open-source projects, music, and games—made in Raleigh, North Carolina.

    @@ -106,6 +107,19 @@ +
    +
    +

    A quieter way to follow along

    +

    Project notes, by email.

    +

    No extra forum profile. Choose the topics you want, confirm your address, and follow along from your inbox. Read the public conversations without subscribing.

    + Browse all mailing-list conversations +
    +
    + + +
    +
    +
    Eric Meehan diff --git a/htdocs/static/home.css b/htdocs/static/home.css index 6d51dc4..fbe8704 100755 --- a/htdocs/static/home.css +++ b/htdocs/static/home.css @@ -518,6 +518,44 @@ main { justify-content: flex-start; } +.newsletter-section { + display: grid; + grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr); + align-items: center; + gap: clamp(2rem, 7vw, 7rem); + padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 9vw, 9rem); + background: var(--page-deep); + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); +} + +.newsletter-copy { + max-width: 600px; +} + +.newsletter-copy h2 { + margin-bottom: 0.9rem; +} + +.newsletter-form-wrap { + min-width: 0; +} + +.newsletter-embed { + display: block; + width: 100%; + height: 570px; + background: transparent; + border: 0; + border-radius: 1rem; +} + +.newsletter-fallback { + margin: 0.6rem 0 0; + color: var(--subtle); + font-size: 0.82rem; +} + .quiet-link { color: var(--muted); font-size: 0.88rem; @@ -667,6 +705,11 @@ main { grid-template-columns: 1fr; gap: 1.5rem; } + + .newsletter-section { + grid-template-columns: 1fr; + gap: 1.5rem; + } } @media (max-width: 640px) { @@ -785,6 +828,15 @@ main { .support-actions .button { width: 100%; } + + .newsletter-section { + grid-template-columns: minmax(0, 1fr); + padding: 3.5rem 1.25rem; + } + + .newsletter-embed { + height: 590px; + } } @media (max-width: 380px) {