AbortOurCourt/writing.html at main · monapdx/AbortOurCourt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Abort the Supreme Court</title>
  <style>
    /* ===== Base / Reset ===== */
:root{
  --brand:#ed0d92;
  --bg:#0b0f39;           /* matches your header’s midnight blue */
  --bg-elev:#11122a;
  --text:#e9e9ef;
  --muted:#b9b9c7;
  --link:var(--brand);
  --ring: hsl(280 100% 70% / .6);

  /* Layout + type scale */
  --container: 1120px;
  --space-1: .5rem;  /* 8px rhythm */
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --radius: 14px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin:0; padding:0; width:100%; overflow-x:hidden; background:var(--bg); color:var(--text); }
img, picture, video { max-width:100%; height:auto; display:block; }

/* Fluid Type */
:root{
  --step--1: clamp(.88rem, .86rem + .2vw, .98rem);
  --step-0:  clamp(1rem,  .95rem + .5vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.1rem + .9vw, 1.5rem);
  --step-2:  clamp(1.5rem,  1.3rem + 1.4vw, 2rem);
  --step-3:  clamp(1.9rem,  1.6rem + 2vw,  2.6rem);
  --step-4:  clamp(2.4rem,  2rem + 2.8vw, 3.4rem);
}
body { font: 400 var(--step-0)/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji"; }

h1,h2,h3{ line-height:1.15; margin:0 0 var(--space-2); }
h1{ font-size:var(--step-4) }
h2{ font-size:var(--step-3) }
h3{ font-size:var(--step-2) }
p{ margin:0 0 var(--space-2); color:var(--muted); }

/* Links / buttons */
a{ color:var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; }
.button{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem 1.1rem; border-radius:var(--radius);
  background:var(--brand); color:#111; font-weight:700; border:0;
  box-shadow: 0 8px 24px rgba(237,13,146,.25);
}
.button:is(:hover,:focus-visible){ color:white;text-decoration:none;filter:brightness(1.08); }
:focus-visible{ color:white;outline:3px solid var(--ring); outline-offset:3px; }

/* Containers + layout utilities */
.container{ width:min(100% - 2rem, var(--container)); margin-inline:auto; }
.section{ padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); }
.stack > * + *{ margin-top: var(--space-3); }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.center{ text-align:center; }

/* Cards / surfaces */
.card{
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Grid that auto-fits */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}

/* Nav (sticky, simple) */
.site-nav{
  position: sticky; top:0; z-index:10;
  backdrop-filter: saturate(120%) blur(6px);
  background: linear-gradient(to bottom, rgba(11,15,57,.85), rgba(11,15,57,.55));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-nav .bar{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; }
.site-nav a{ color:var(--text); opacity:.85; }
.site-nav a:hover{ opacity:1; }

/* Hero (you already have the <picture> version).
   Here is a "background-image" variant that cannot overflow. */
.hero-bg{
  width:100%;
  aspect-ratio: 16/5;
  background-image:url("https://raw.githubusercontent.com/monapdx/AbortOurCourt/refs/heads/main/images/branding/header-1920.webp");
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
@media (max-width:1024px){ .hero-bg{ background-image:url("https://raw.githubusercontent.com/monapdx/AbortOurCourt/refs/heads/main/images/branding/header-1024.webp"); } }
@media (max-width:600px){ .hero-bg{ background-image:url("https://raw.githubusercontent.com/monapdx/AbortOurCourt/refs/heads/main/images/branding/header-600.webp"); } }

/* Footer */
.footer{ color:var(--muted); border-top:1px solid rgba(255,255,255,.08); padding-block:2rem; }

  </style>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Your Site</title>
  <link rel="preload" as="image" href="header-1920.webp">
  <!-- paste CSS above into a <style> block or link a .css file -->
</head>
<body>
  <header class="site-nav">
    <div class="container bar">
      <a href="https://abortsupremecourt.com" class="cluster"><strong>ABORT THE SUPREME COURT</strong></a>
      <nav class="cluster">
        <a href="#about">About</a>
        <a href="#resources">Resources</a>
        <a href="#contact" class="button">Contact</a>
      </nav>
    </div>
  </header>

  <!-- Choose ONE hero: background-image OR <picture>. -->
  <div class="hero-bg" role="img" aria-label="Abort the Supreme Court logo banner"></div>

  <main>
    <section class="section">
      <div class="container center">
        <h1>Headline</h1>
        <p>Sub Headline</p>
        <a class="button" href="#work">CLICK ME</a>
      </div>
    </section>

    <section id="work" class="section">
      <div class="container">
        <h2>Featured</h2>
        <div class="grid">
          <article class="card stack">
            <h3>Card Title</h3>
            <p><img src="" width=""><div class="substack-post-embed"><p lang="en">When Survival Becomes a Habit by SlutLust</p><p>From poverty, addiction, and stigma to the illusion of coverage — what it really means to live in survival mode under American healthcare.</p><a data-post-link href="https://slutlust.substack.com/p/when-survival-becomes-a-habit">Read on Substack</a></div><script async src="https://substack.com/embedjs/embed.js" charset="utf-8"></script></p>
            <a href="#" class="button">CLICK ME</a>
          </article>
          <article class="card stack">
            <h3>Card Title</h3>
            <p><img src="" width=""><div class="substack-post-embed"><p lang="en">America Is NOT a First World Country by SlutLust</p><p>The United States loves to parade itself around as a “first world democracy,” the so-called land of the free, but that’s fucking bullshit. </p><a data-post-link href="https://slutlust.substack.com/p/america-is-not-a-first-world-country">Read on Substack</a></div><script async src="https://substack.com/embedjs/embed.js" charset="utf-8"></script></p>
            <a href="#" class="button">CLICK ME</a>
          </article>
          <article class="card stack">
            <h3>Card Title</h3>
            <p><img src="" width=""><div class="substack-post-embed"><p lang="en">How Wikipedia Gets Me to Donate EVERY Year by SlutLust</p><p>I've never encountered a more effective begging-style pitch in all my life.</p><a data-post-link href="https://slutlust.substack.com/p/how-wikipedia-gets-me-to-donate-every">Read on Substack</a></div><script async src="https://substack.com/embedjs/embed.js" charset="utf-8"></script></p>
            <a href="#" class="button">CLICK ME</a>
          </article>
        </div>
      </div>
    </section>

    <section id="about" class="section">
      <div class="container grid">
        <div class="card stack">
          <h2>About</h2>
          <p>We are abortion rights activists & advocates that offer web and graphic design services tailored for repro justice orgs and movements.</p>
        </div>
        <div class="card stack">
          <h2>Partnerships</h2>

        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container cluster" style="justify-content:space-between;">
      <small>© 2025 Abort the Supreme Court</small>
      <small><a href="privacy-policy.html" aria-label="Privacy policy">Privacy</a></small>
    </div>
  </footer>


</body>
</html>

</html>