Refactor hero image styling and clean up CSS

README.md

@@ -98,4 +98,13 @@ orange #C73810
 brown #443229
 blue #4B8EC2
 
+## Dependencies
 
+External CLI tools not managed by `uv`:
+
+| Tool | Purpose | Install |
+|---|---|---|
+| [uv](https://github.com/astral-sh/uv) | Python package manager | https://docs.astral.sh/uv/getting-started/installation/ |
+| [just](https://github.com/casey/just) | Command runner | https://just.systems/man/en/packages.html |
+| [lychee](https://github.com/lycheeverse/lychee) | Link checker | https://lychee.cli.rs/installation/ |
+| [Cairo](https://www.cairographics.org/) | Image generation for social cards | macOS: `brew install cairo`, Linux: `apt install libcairo2` |

docs/stylesheets/extra.css

@@ -69,24 +69,6 @@
     display: none;
 }
 
-[data-md-color-scheme="pytx2026_light"] div[class~="hide-if-dark"]>svg {
-    max-height: 40rem;
-}
-
-[data-md-color-scheme="pytx2026_light"] div[class~="hide-if-dark"]>img {
-    max-height: 40rem;
-    width: auto;
-}
-
-[data-md-color-scheme="pytx2026"] div[class~="hide-if-light"]>svg {
-    max-height: 40rem;
-}
-
-[data-md-color-scheme="pytx2026"] div[class~="hide-if-light"]>img {
-    max-height: 40rem;
-    width: auto;
-}
-
 [data-md-color-scheme="pytx2026_light"] div[class~="pytx-container"] {
     background: linear-gradient(to bottom, #f9f3e3, #ffffff);
 }
@@ -235,10 +217,13 @@ figcaption>a:focus {
     color: var(--pytx-light-cream);
 }
 
+/* overflow: hidden clips the hero image's top overflow (sunrays).
+   The image is bottom-aligned in .pytx-hero__image via align-items: flex-end,
+   so only the top extends beyond this container. */
 .pytx-container {
     background: var(--md-primary-bg-color);
     display: block;
-    padding: 2rem 0;
+    overflow: hidden;
 }
 
 .pytx-hero {
@@ -250,48 +235,26 @@ figcaption>a:focus {
 .pytx-hero__content {
     padding-bottom: 2rem;
     margin: 0 auto;
+    text-align: center;
 }
 
 .pytx-hero__image {
-    max-height: 14rem;
-    padding: 1rem 0 2rem 0;
+    max-height: 53vw;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: flex-end;
     width: 100%;
+    overflow: visible;
 }
 
 .pytx-hero__image img {
     max-width: 100%;
-    max-height: 14rem;
     height: auto;
     width: auto;
     object-fit: contain;
     display: block;
 }
 
-/* Tablet screens */
-@media screen and (min-width: 768px) {
-    .pytx-hero__image {
-        max-height: 18rem;
-    }
-
-    .pytx-hero__image img {
-        max-height: 18rem;
-    }
-}
-
-/* Desktop screens */
-@media screen and (min-width: 1024px) {
-    .pytx-hero__image {
-        max-height: 22rem;
-    }
-
-    .pytx-hero__image img {
-        max-height: 22rem;
-    }
-}
-
 .pytx-button {
     border-radius: 6px;
     box-sizing: border-box;
@@ -588,3 +551,28 @@ figcaption>a:focus {
         margin-top: 1rem;
     }
 }
+
+/* Homepage-only overrides (scoped via .pytx-hero__content presence) */
+@media screen and (min-width: 60em) {
+    .md-container:has(.pytx-hero__content) .md-sidebar--secondary {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 76.25em) {
+    .md-container:has(.pytx-hero__content) .md-sidebar--primary {
+        display: none;
+    }
+}
+
+.md-container:has(.pytx-hero__content) .md-main__inner {
+    margin-top: 0;
+}
+
+.md-container:has(.pytx-hero__content) .md-content__inner {
+    padding-top: 0;
+}
+
+.md-container:has(.pytx-hero__content) .md-content__inner::before {
+    display: none;
+}

overrides/home.html

@@ -1,43 +1,4 @@
 {% extends "main.html" %}
-<!-- Remove side nav bar on large screens on desktop -->
-{% block header %}
-  {{ super() }}
-
-  <!-- Additional styles for landing page -->
-  <style>
-
-    /* Hide table of contents */
-    @media screen and (min-width: 60em) {
-      .md-sidebar--secondary {
-        display: none;
-      }
-    }
-
-    /* Hide navigation */
-    @media screen and (min-width: 76.25em) {
-      .md-sidebar--primary {
-        display: none;
-      }
-    }
-
-    /* Prevent main content from overlapping hero */
-    .md-main {
-      padding-top: 0.5rem !important;
-    }
-
-    @media screen and (min-width: 768px) {
-      .md-main {
-        padding-top: 3rem !important;
-      }
-    }
-
-    @media screen and (min-width: 1024px) {
-      .md-main {
-        padding-top: 2rem !important;
-      }
-    }
-</style>
-{% endblock %}
 {% block hero %}
 <div class="pytx-hero pytx-container">
   <div class="pytx-hero__image hide-if-dark">
@@ -49,7 +10,7 @@
 </div>
 {% endblock %}
 {% block content %}
-    <div style="text-align: center;">
+    <div class="pytx-hero__content">
         {% include "partials/content.html" %}
     </div>
 {% endblock %}