399 lines
11 KiB
HTML
399 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<title>Welcome to District Dharma | District Dharma Collective</title>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<!-- Meta -->
|
|||
|
|
<link rel="canonical" href="/">
|
|||
|
|
<meta name="description" content="">
|
|||
|
|
<meta name="robots" content="index,follow">
|
|||
|
|
<meta property="og:title" content="Welcome to District Dharma | District Dharma Collective">
|
|||
|
|
<meta property="og:type" content="article">
|
|||
|
|
<meta property="og:url" content="/">
|
|||
|
|
<meta property="og:description" content="">
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<meta name="generator" content="Eleventy v3.1.5">
|
|||
|
|
|
|||
|
|
<!-- CSS -->
|
|||
|
|
|
|||
|
|
<style>form label {
|
|||
|
|
display: block;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
margin-bottom: .5rem;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
form input,
|
|||
|
|
form textarea,
|
|||
|
|
form button {
|
|||
|
|
display: block;
|
|||
|
|
border-radius: .25rem;
|
|||
|
|
border-color: var(--color-accent);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
form input,
|
|||
|
|
form textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input:user-invalid,
|
|||
|
|
textarea:user-invalid {
|
|||
|
|
border-color: var(--color-red);
|
|||
|
|
outline: .2rem solid var(--color-red);
|
|||
|
|
outline-offset: .2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input:user-invalid:focus-visible,
|
|||
|
|
textarea:user-invalid:focus-visible {
|
|||
|
|
outline: .1rem solid var(--color-accent);
|
|||
|
|
outline-offset: .1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error {
|
|||
|
|
margin-top: .5rem;
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input:user-invalid + .error,
|
|||
|
|
textarea:user-invalid + .error {
|
|||
|
|
visibility: visible;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
form button {
|
|||
|
|
padding: 0 .5rem;
|
|||
|
|
margin: 1rem auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (any-hover: hover) {
|
|||
|
|
form button:hover {
|
|||
|
|
background-color: var(--color-accent);
|
|||
|
|
color: var(--color-bg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.name-email {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 650px) {
|
|||
|
|
.name-email {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
gap: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.red {
|
|||
|
|
color: var(--color-red);
|
|||
|
|
}
|
|||
|
|
:root {
|
|||
|
|
color-scheme: light dark;
|
|||
|
|
|
|||
|
|
--color-dark: #202325;
|
|||
|
|
--color-light: #e4edf3;
|
|||
|
|
--color-blue-dark: #0c436d;
|
|||
|
|
--color-blue-light: #5ca6ce;
|
|||
|
|
--color-red-light: #bb362a;
|
|||
|
|
--color-red-dark: #b82e1f;
|
|||
|
|
|
|||
|
|
--color-text: light-dark(var(--color-dark), var(--color-light));
|
|||
|
|
--color-bg: light-dark(var(--color-light), var(--color-dark));
|
|||
|
|
--color-accent: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
|||
|
|
--color-accent-flipped: light-dark(var(--color-blue-light), var(--color-blue-dark));
|
|||
|
|
--color-red: light-dark(var(--color-red-dark), var(--color-red-light));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
|
|||
|
|
*, *::before, *::after {
|
|||
|
|
box-sizing: border-box; /* 1. Use a more-intuitive box-sizing model */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#root, #__next {
|
|||
|
|
isolation: isolate; /* 10. Create a root stacking context */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
*:not(dialog) {
|
|||
|
|
margin: 0; /* 2. Remove default margins */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
*:focus-visible {
|
|||
|
|
outline-offset: .12rem;
|
|||
|
|
outline: .12rem solid var(--color-accent);
|
|||
|
|
border-radius: .25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (prefers-reduced-motion: no-preference) {
|
|||
|
|
html {
|
|||
|
|
interpolate-size: allow-keywords; /* 3. Enable keyword animations */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
line-height: 1.5; /* 4. Increase line-height */
|
|||
|
|
-webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
color: var(--color-text);
|
|||
|
|
background-color: var(--color-bg);
|
|||
|
|
font-family: "Atkinson Hyperlegible Next";
|
|||
|
|
height: 100%;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-rows: auto 1fr auto;
|
|||
|
|
min-height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#content {
|
|||
|
|
width: 65%;
|
|||
|
|
max-width: 1800px;
|
|||
|
|
margin-inline: auto;
|
|||
|
|
margin-block-end: 3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 1050px) {
|
|||
|
|
#content {
|
|||
|
|
width: 85%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 650px) {
|
|||
|
|
#content {
|
|||
|
|
width: 92%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
img, picture, video, canvas, svg {
|
|||
|
|
display: block; /* 6. Improve media defaults */
|
|||
|
|
max-width: 100%; /* 6. Improve media defaults */
|
|||
|
|
height: auto; /* 6. Improve media defaults */
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input, button, textarea, select {
|
|||
|
|
font: inherit; /* 7. Inherit fonts for form controls */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1, h2, h3, h4, h5, h6, p {
|
|||
|
|
overflow-wrap: break-word; /* 8. Avoid text overflows */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1, h2, h3, h4, h5, h6 {
|
|||
|
|
text-wrap: balance; /* 9. Improve line wrapping */
|
|||
|
|
font-family: serif;
|
|||
|
|
margin-block-start: 1em;
|
|||
|
|
color: var(--color-accent);
|
|||
|
|
font-variant: small-caps;
|
|||
|
|
font-family: Montserrat;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 3rem;
|
|||
|
|
margin-block-end: .6em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2 { font-size: 2rem; }
|
|||
|
|
h3 { font-size: 1.8rem; }
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
text-wrap: pretty; /* 9. Improve line wrapping */
|
|||
|
|
margin-block: 1.25em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
a {
|
|||
|
|
color: var(--color-accent);
|
|||
|
|
text-decoration-thickness: .15rem;
|
|||
|
|
transition: text-decoration-thickness .5s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
a:visited {
|
|||
|
|
color: var(--color-text);
|
|||
|
|
text-decoration-color: var(--color-accent);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (any-hover: hover) {
|
|||
|
|
a:hover {
|
|||
|
|
text-decoration-thickness: .25rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Header/nav/footer */
|
|||
|
|
header {
|
|||
|
|
height: 20vh;
|
|||
|
|
padding: calc(20vh / 8);
|
|||
|
|
background-color: var(--color-accent);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo {
|
|||
|
|
height: 100%;
|
|||
|
|
width: auto;
|
|||
|
|
padding: calc(20vh / 30);
|
|||
|
|
border: calc(20vh / 50) solid var(--color-accent);
|
|||
|
|
border-radius: calc(20vh / 3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header a:focus-visible {
|
|||
|
|
outline: none; /* covered by logo rule below */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header a:focus-visible .logo {
|
|||
|
|
border-color: var(--color-text);
|
|||
|
|
outline: calc(20vh / 30) solid var(--color-accent-flipped);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (prefers-color-scheme: light) {
|
|||
|
|
.dark {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (prefers-color-scheme: dark) {
|
|||
|
|
.light {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer {
|
|||
|
|
background-color: var(--color-accent);
|
|||
|
|
color: var(--color-bg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer p {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer a,
|
|||
|
|
footer a:visited {
|
|||
|
|
color: var(--color-bg);
|
|||
|
|
text-decoration-color: var(--color-bg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer a:focus-visible {
|
|||
|
|
outline: .15rem solid var(--color-accent-flipped);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Misc */
|
|||
|
|
#hero {
|
|||
|
|
aspect-ratio: 9 / 16;
|
|||
|
|
object-fit: cover;
|
|||
|
|
width: 33%;
|
|||
|
|
margin: .5rem 1rem .5rem 0;
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.inset-left,
|
|||
|
|
.inset-right {
|
|||
|
|
margin-block: .5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* only float on larger screens */
|
|||
|
|
@media (min-width: 551px) {
|
|||
|
|
.inset-left,
|
|||
|
|
.inset-right {
|
|||
|
|
clear: both;
|
|||
|
|
width: 33%;
|
|||
|
|
margin-inline: 0;
|
|||
|
|
}
|
|||
|
|
.inset-left {
|
|||
|
|
float: left;
|
|||
|
|
margin-inline-end: 1rem;
|
|||
|
|
}
|
|||
|
|
.inset-right {
|
|||
|
|
float: right;
|
|||
|
|
margin-inline-start: 1rem;
|
|||
|
|
}
|
|||
|
|
}</style>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Fonts -->
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<header>
|
|||
|
|
<a href="/" title="go home" aria-label="go home">
|
|||
|
|
<img class="logo light" src="/img/JB0BEdyd8T-917.png" alt="the district dharma logo, which depicts a stylized lotus flower under 3 dots, surrounded by an upper and lower curve, in two shades of blue" loading="lazy" decoding="async" width="917" height="974">
|
|||
|
|
<img class="logo dark" src="/img/vXgSBf7Ahb-917.png" alt="the district dharma logo, which depicts a stylized lotus flower under 3 dots, surrounded by an upper and lower curve, in two shades of blue" loading="lazy" decoding="async" width="917" height="974">
|
|||
|
|
</a>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<main id="main">
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div id="content">
|
|||
|
|
<h1>Welcome to District Dharma</h1>
|
|||
|
|
|
|||
|
|
<img class="inset-left" src="/img/52iFlGsHqZ-1800.jpeg" alt="chickadee" loading="lazy" decoding="async" width="1800" height="1200">
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2>Who we are</h2>
|
|||
|
|
<p>District Dharma Collective is a community of practitioners rooted in Washington, DC — a city that sits at the center of so much that is uncertain, contested, and in flux. We currently gather in the Dupont Circle neighborhood, and our doors are open to anyone who finds their way to us.</p>
|
|||
|
|
<p>We come from different Buddhist traditions and paths, but we gather around a shared conviction: that the dharma has something vital to say to us in these times of upheaval and unrest. We sit together, study the teachings, and ask hard questions about how ancient wisdom meets this present moment — personally, collectively, and in the world around us.</p>
|
|||
|
|
<p>In our study, we are intentional about whose voices we center. Alongside traditional texts, we lift up the teachings of BIPOC and Queer dharma teachers, honoring the full breadth of wisdom that is alive in contemporary Buddhist communities.</p>
|
|||
|
|
<p>We believe that practice and community are inseparable. Whether you are new to meditation, returning after years away, or a long-committed practitioner seeking a spiritual home, you are welcome here. We hold no single tradition and no single teacher — only a shared willingness to show up: on the cushion, in study, and for one another.</p>
|
|||
|
|
<h2>What we do</h2>
|
|||
|
|
<p>We gather in a space that spends its weekdays as a psychotherapy office — and there's something intentional about that. Each time we meet, we transform it together, arranging cushions and chairs before settling into thirty minutes of sitting meditation. Newcomers are always welcome to ask for guidance; no experience is assumed.</p>
|
|||
|
|
<p>After a short break, we move into a dharma talk and discussion rooted in whatever text we're exploring as a group. We tend toward contemporary teachers whose voices are too rarely centered — writers like Lama Rod Owens and Kaira Jewel Lingo — alongside more traditional teachings. The conversation that follows is as much a part of the practice as the sitting.</p>
|
|||
|
|
<h2>When we meet</h2>
|
|||
|
|
<p>We gather on the first and third Sunday of each month, from 10:30 am to noon, at 1633 Q Street NW, Washington, DC — in the heart of Dupont Circle.</p>
|
|||
|
|
<h2>Come sit with us</h2>
|
|||
|
|
<p>Our space is intimate, and we set it up ourselves before each gathering — so it helps us to know you're coming. If you'd like to join us, reach out using the form below and we'll be in touch with everything you need to know!</p>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<form action="https://formgrid.dev/api/f/842wiwnz" method="POST" class="contact-form">
|
|||
|
|
<h2 class="center">Get in touch</h2>
|
|||
|
|
<p class="center">All fields
|
|||
|
|
<span aria-hidden="true">marked with an asterisk (<span class="red">*</span>)</span>
|
|||
|
|
are required.</p>
|
|||
|
|
|
|||
|
|
<div class="name-email">
|
|||
|
|
<div class="form-field">
|
|||
|
|
<label for="name">Name <span class="red" aria-hidden="true">*</span></label>
|
|||
|
|
<input id="name" type="text" name="name" placeholder="Your Name" required="" aria-required="true" aria-describedby="name-error">
|
|||
|
|
<p id="name-error" class="error">Name cannot be empty.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-field">
|
|||
|
|
<label for="email">Email <span class="red" aria-hidden="true">*</span></label>
|
|||
|
|
<input id="email" type="email" name="email" placeholder="you@example.com" required="" aria-required="true" aria-describedby="email-error">
|
|||
|
|
<p id="email-error" class="error">Email cannot be empty and must be a valid email.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-field">
|
|||
|
|
<label for="message">Message <span class="red" aria-hidden="true">*</span></label>
|
|||
|
|
<textarea id="message" name="message" rows="4" placeholder="What's your message?" required="" aria-required="true" aria-describedby="message-error"></textarea>
|
|||
|
|
<p id="message-error" class="error">Message cannot be empty.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button type="submit" class="form-button">Send message</button>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<footer>
|
|||
|
|
<p><a href="/attribution/">site attribution</a></p>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<!-- This page `/` was built on 2026-07-20T23:22:50.754Z -->
|
|||
|
|
</body>
|
|||
|
|
</html>
|
