From abd7dad2d1c04d12a9eea3591cdd053e1b48d6eb Mon Sep 17 00:00:00 2001 From: Nasir Anthony Montalvo Date: Fri, 30 Jan 2026 22:31:17 -0600 Subject: [PATCH] quote design changes / cleaning up CSS / continue nestor fixes --- .github/_config.yml | 2 +- _data/config-metadata.csv | 1 + _includes/collection-banner.html | 378 ++++++++++-- _layouts/about.html | 2 +- _sass/_custom.scss | 756 ++++++++++++++--------- pages/about.md | 24 +- pages/collections/collection-gary.html | 2 +- pages/collections/collection-starla.html | 2 +- pages/collections/collection-tisha.html | 2 +- pages/copyright.md | 4 +- pages/data.md | 6 +- pages/donate.md | 5 +- pages/read/erasure.md | 4 +- pages/read/mact-kc.md | 2 +- pages/read/out-there.md | 2 +- pages/read/soakies.md | 14 +- 16 files changed, 850 insertions(+), 356 deletions(-) diff --git a/.github/_config.yml b/.github/_config.yml index b28afd3..a5c0930 100644 --- a/.github/_config.yml +++ b/.github/_config.yml @@ -31,7 +31,7 @@ title: "{B/qKC}" tagline: a decentralized archive of Black queer Kansas City history # description appears in meta tags and other locations # this description might appear in search result lists, keep around 160 characters max -description: "This is the official database and site for {B/qKC}: an archival project challenging institutional archival practices within the frame and study of midwestern Black queer history." +description: "This is the official database for {B/qKC}: an archival project challenging institutional archival practices within the frame and study of midwestern Black queer history." # keywords, a short list of subjects describing the collection, separated by semicolon, to appear in rich markup keywords: kansas city; history; queer; black # creator of the digital collection, to appear in meta tags; we typically use our GitHub usernames but feel free to just use your name diff --git a/_data/config-metadata.csv b/_data/config-metadata.csv index 0b5180b..755ddfb 100644 --- a/_data/config-metadata.csv +++ b/_data/config-metadata.csv @@ -13,3 +13,4 @@ type,Type,,,DCTERMS.type, format,Format,,,,encodingFormat language,Language,,,DCTERMS.language, rightsstatement,,,,DCTERMS.rights,license +duration (MM:SS),Duration,,,, diff --git a/_includes/collection-banner.html b/_includes/collection-banner.html index 73a0d40..094b4bd 100644 --- a/_includes/collection-banner.html +++ b/_includes/collection-banner.html @@ -1,70 +1,368 @@ -{% if page.layout == "home-infographic" and site.data.theme.featured-image %} +{% if page.layout == "home-infographic" %} + +{%- comment -%} +Carousel Banner: rotates through random collection items +Always shows starlacoll033 first, then shuffles other items +{%- endcomment -%} + +{%- assign carousel_items = "" | split: "" -%} + +{%- comment -%} Get specific items in order {%- endcomment -%} +{%- assign wanted_ids = "starlacoll033,garycoll009,garycoll005,starlacoll019,starlacoll008,tishacoll028" | split: "," -%} + +{%- for wanted_id in wanted_ids -%} + {%- for item in site.data[site.metadata] -%} + {%- if item.objectid == wanted_id -%} + {%- assign carousel_items = carousel_items | push: item -%} + {%- break -%} + {%- endif -%} + {%- endfor -%} +{%- endfor -%} + -
+ diff --git a/_sass/_custom.scss b/_sass/_custom.scss index 1507041..2bdc14e 100644 --- a/_sass/_custom.scss +++ b/_sass/_custom.scss @@ -1,38 +1,106 @@ /* - Put your custom SCSS here! - This allows you to override any CollectionBuilder or Bootstrap CSS without modifying the base theme files directly. + CollectionBuilder Custom SCSS + Design System Implementation - Phase 2 */ -/* base colors */ +/* ============================================================================ + DESIGN SYSTEM VARIABLES + ============================================================================ */ :root { + /* COLORS - Base Palette */ --bg-black: #000000; --bg-soft-black: #0e0e0e; --text-white: #f5f5f5; --text-muted: #bfbfbf; --border-white: #ffffff; + + /* COLORS - Accent (use sparingly!) */ + --accent-blue: #4da3ff; + --accent-blue-dim: #3d8ace; + --accent-blue-subtle: rgba(77, 163, 255, 0.15); + + /* TYPOGRAPHY - Font Sizes */ + --text-xs: 0.7rem; /* labels, captions */ + --text-sm: 0.8rem; /* small body, metadata */ + --text-base: 0.98rem; /* body text */ + --text-lg: 1.1rem; /* large body */ + --text-xl: 1.25rem; /* page titles (non-home) */ + --text-2xl: 1.5rem; /* section headers */ + --text-3xl: clamp(2rem, 3.4vw, 3rem); /* home title */ + + /* TYPOGRAPHY - Weights & Spacing */ + --font-normal: 400; + --font-semibold: 600; + --font-bold: 700; + --letter-spacing-tight: 0.04em; + --letter-spacing-normal: 0.08em; + --letter-spacing-wide: 0.14em; + --letter-spacing-wider: 0.16em; + --letter-spacing-widest: 0.18em; + + /* SPACING SCALE (consistent increments) */ + --space-xs: 0.25rem; /* 4px */ + --space-sm: 0.5rem; /* 8px */ + --space-md: 1rem; /* 16px */ + --space-lg: 1.5rem; /* 24px */ + --space-xl: 2rem; /* 32px */ + --space-2xl: 2.5rem; /* 40px */ + --space-3xl: 3rem; /* 48px */ + + /* BORDERS & RADIUS */ + --border-radius: 4px; /* consistent everywhere */ + --border-radius-lg: 10px; /* only for home title box */ + --border-width: 1px; + --border-color-subtle: rgba(255, 255, 255, 0.18); + --border-color-normal: rgba(255, 255, 255, 0.35); + --border-color-strong: rgba(255, 255, 255, 0.75); + + /* OPACITY LEVELS */ + --opacity-subtle: 0.15; + --opacity-muted: 0.35; + --opacity-normal: 0.65; + --opacity-strong: 0.85; + --opacity-full: 1; + + /* TRANSITIONS */ + --transition-fast: 150ms ease-out; + --transition-normal: 200ms ease; + --transition-slow: 300ms ease; + + /* OVERLAYS & BACKGROUNDS */ + --overlay-dark: rgba(0, 0, 0, 0.45); + --overlay-darker: rgba(0, 0, 0, 0.75); + --overlay-darkest: rgba(0, 0, 0, 0.88); } -/* global black */ + +/* ============================================================================ + GLOBAL STYLES + ============================================================================ */ body { background-color: var(--bg-black); color: var(--text-white); } + input, textarea { color: white; } + ::placeholder { - color: rgba(255,255,255,0.6); + color: rgba(255, 255, 255, var(--opacity-normal)); } -/* forcing color fixes */ +/* ============================================================================ + COLOR OVERRIDES + ============================================================================ */ .navbar-brand, .navbar-brand a, .navbar-dark .navbar-brand, .navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover { - color: #ffffff !important; + color: var(--border-white) !important; } .dropdown-item:hover { @@ -40,30 +108,35 @@ input, textarea { } .text-muted { - color: rgba(255, 255, 255, 0.65) !important; + color: rgba(255, 255, 255, var(--opacity-normal)) !important; } header .navbar-brand, header .navbar-brand *, #home-banner-logo { - color: #ffffff !important; + color: var(--border-white) !important; } header a, header a * { - color: #ffffff !important; + color: var(--border-white) !important; } + #header a, #header a * { - color: #ffffff !important; + color: var(--border-white) !important; } #title a.text-dark, #title a.text-dark:hover, #title a.text-dark:focus { - color: #ffffff !important; + color: var(--border-white) !important; } -/*footer styling */ + +/* ============================================================================ + FOOTER STYLING + ============================================================================ */ + .footer-top { align-items: stretch; } @@ -71,7 +144,7 @@ header a * { .footer-logo-spinner { display: flex; justify-content: flex-end; - padding: 0.5rem 0; + padding: var(--space-sm) 0; } .footer-logo-spinner video { @@ -89,31 +162,35 @@ header a * { #footer-credits { text-align: center; - margin-top: 1rem; + margin-top: var(--space-md); } .bg-dark, .navbar-dark.bg-dark, footer.bg-dark { - background-color: #000000 !important; + background-color: var(--bg-black) !important; } footer, #footer, .site-footer, #collection-footer { - background-color: #000000 !important; - color: #ffffff; + background-color: var(--bg-black) !important; + color: var(--border-white); } footer a { - color: #ffffff; + color: var(--border-white); } + footer a:hover { color: #cccccc; } -/* removing ugly white box on single item pages and fixing text colors */ +/* ============================================================================ + ITEM PAGE CARD FIXES + ============================================================================ */ + main[role="main"] .card.mb-4.text-center { background-color: transparent !important; border: none !important; @@ -121,15 +198,17 @@ main[role="main"] .card.mb-4.text-center { } main[role="main"] .card.mb-4.text-center img { - border-radius: 6px; - border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: var(--border-radius-lg); + border: var(--border-width) solid var(--border-color-subtle); } main[role="main"] .text-center small { - color: rgba(255, 255, 255, 0.75) !important; + color: rgba(255, 255, 255, var(--opacity-strong)) !important; } -/* links */ +/* ============================================================================ + LINKS + ============================================================================ */ a { text-decoration: underline; @@ -146,19 +225,21 @@ a { } a:hover { - color: #bfbfbf; + color: var(--text-muted); } -/* buttons, color n animations */ +/* ============================================================================ + BUTTONS - BASE STYLES + ============================================================================ */ .btn, .btn-outline-secondary, .btn-outline-dark, .btn-outline-primary { background-color: transparent !important; - color: #ffffff !important; - border: 1px solid #ffffff !important; - border-radius: 4px; + color: var(--border-white) !important; + border: var(--border-width) solid var(--border-white) !important; + border-radius: var(--border-radius); } .btn:hover, @@ -169,18 +250,21 @@ a:hover { .btn-outline-dark:focus, .btn-outline-primary:hover, .btn-outline-primary:focus { - background-color: #ffffff !important; - color: #000000 !important; + background-color: var(--border-white) !important; + color: var(--bg-black) !important; text-decoration: none; } -/* fixing card buttons */ +/* ============================================================================ + BUTTONS - CARD SPECIFIC + ============================================================================ */ + .card .btn, .bg-white .btn, .bg-light .btn { background-color: transparent !important; - color: #000000 !important; - border-color: #000000 !important; + color: var(--bg-black) !important; + border-color: var(--bg-black) !important; } .card .btn:hover, @@ -189,114 +273,127 @@ a:hover { .bg-white .btn:focus, .bg-light .btn:hover, .bg-light .btn:focus { - background-color: #000000 !important; - color: #ffffff !important; + background-color: var(--bg-black) !important; + color: var(--border-white) !important; } -/* browse colors */ +/* ============================================================================ + BUTTONS - BROWSE PAGE + ============================================================================ */ + #browse .input-group .btn { - background-color: #000000 !important; - color: #ffffff !important; - border: 1px solid #ffffff !important; + background-color: var(--bg-black) !important; + color: var(--border-white) !important; + border: var(--border-width) solid var(--border-white) !important; border-radius: 0 !important; } #browse .input-group .btn:hover, #browse .input-group .btn:focus { - background-color: #ffffff !important; - color: #000000 !important; + background-color: var(--border-white) !important; + color: var(--bg-black) !important; } -/* fixing navbar search colors */ +/* ============================================================================ + BUTTONS - NAVBAR SEARCH + ============================================================================ */ .navbar .input-group .btn { - border-radius: 0 4px 4px 0; + border-radius: 0 var(--border-radius) var(--border-radius) 0; background-color: transparent !important; - border: 1px solid #ffffff !important; - color: #ffffff !important; + border: var(--border-width) solid var(--border-white) !important; + color: var(--border-white) !important; } .navbar .btn .bi-search, .navbar .btn svg { - color: #ffffff !important; - fill: #ffffff !important; + color: var(--border-white) !important; + fill: var(--border-white) !important; } -/* item page buttons */ +/* ============================================================================ + BUTTONS - ITEM PAGE + ============================================================================ */ body.item-page main[role="main"] .text-center a.btn { display: inline-block; background-color: transparent !important; - color: #ffffff !important; - border: 1px solid #ffffff !important; - border-radius: 4px; + color: var(--border-white) !important; + border: var(--border-width) solid var(--border-white) !important; + border-radius: var(--border-radius); text-decoration: none; } body.item-page main[role="main"] .text-center a.btn:hover, body.item-page main[role="main"] .text-center a.btn:focus { - background-color: #ffffff !important; - color: #000000 !important; + background-color: var(--border-white) !important; + color: var(--bg-black) !important; } main[role="main"] .card.mb-4.text-center .btn-group .btn-outline-primary { background-color: transparent !important; - color: #ffffff !important; - border: 1px solid #ffffff !important; - border-radius: 4px; + color: var(--border-white) !important; + border: var(--border-width) solid var(--border-white) !important; + border-radius: var(--border-radius); text-decoration: none; } main[role="main"] .card.mb-4.text-center .btn-group .btn-outline-primary:hover, main[role="main"] .card.mb-4.text-center .btn-group .btn-outline-primary:focus { - background-color: #ffffff !important; - color: #000000 !important; + background-color: var(--border-white) !important; + color: var(--bg-black) !important; } -/* map page colors */ +/* ============================================================================ + MAP PAGE + ============================================================================ */ .leaflet-fusesearch-panel .search-input { - color: #000000 !important; - background-color: #ffffff !important; - border: 1px solid #00000033; + color: var(--bg-black) !important; + background-color: var(--border-white) !important; + border: var(--border-width) solid #00000033; } .leaflet-fusesearch-panel .search-input::placeholder { color: #555555 !important; } -/* homepage browse carousel button */ +/* ============================================================================ + CAROUSEL BUTTONS + ============================================================================ */ .carousel .btn, .carousel .btn-outline-primary { - color: #ffffff !important; - border: 1px solid #ffffff !important; + color: var(--border-white) !important; + border: var(--border-width) solid var(--border-white) !important; background: rgba(0, 0, 0, 0.55) !important; backdrop-filter: blur(2px); } .carousel .btn:hover, .carousel .btn-outline-primary:hover { - background: #ffffff !important; - color: #000000 !important; + background: var(--border-white) !important; + color: var(--bg-black) !important; } -/* font styling */ +/* ============================================================================ + TYPOGRAPHY + ============================================================================ */ main h1, main h2, main h3 { - letter-spacing: 0.04em; + letter-spacing: var(--letter-spacing-tight); } .section-label { - font-size: 0.8rem; - letter-spacing: 0.16em; + font-size: var(--text-sm); + letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; } main p { - font-size: 0.98rem; + font-size: var(--text-base); line-height: 1.6; } @@ -306,18 +403,21 @@ main p { } #metadata strong { - letter-spacing: 0.08em; + letter-spacing: var(--letter-spacing-normal); text-transform: uppercase; - font-size: 0.8rem; + font-size: var(--text-sm); } -/* home banner styling */ + +/* ============================================================================ + HOME BANNER + ============================================================================ */ #home-banner { position: relative; min-height: 380px; max-height: 580px; - padding: 3.5rem 0 2.5rem; - background-color: #000; + padding: var(--space-3xl) 0 var(--space-2xl); + background-color: var(--bg-black); } #home-title-box { @@ -327,30 +427,30 @@ main p { #home-title-box > .p-2 { display: inline-block; text-align: left; - padding: 1.25rem 1.6rem !important; - margin-left: 1.5rem; - background: rgba(0, 0, 0, 0.88) !important; - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.25); + padding: var(--space-lg) var(--space-xl) !important; + margin-left: var(--space-lg); + background: var(--overlay-darkest) !important; + border-radius: var(--border-radius-lg); + border: var(--border-width) solid rgba(255, 255, 255, 0.25); } #home-title-box h1 { margin: 0; - font-size: clamp(2rem, 3.4vw, 3rem); + font-size: var(--text-3xl); text-align: left; - letter-spacing: 0.04em; - font-weight: 700; + letter-spacing: var(--letter-spacing-tight); + font-weight: var(--font-bold); } #home-title-box h1 a { - color: #ffffff !important; + color: var(--border-white) !important; text-decoration: none; } #home-title-box p { - margin: 0.35rem 0 0; + margin: var(--space-sm) 0 0; font-size: 0.95rem; - opacity: 0.85; + opacity: var(--opacity-strong); } @media (max-width: 767px) { @@ -369,17 +469,17 @@ main p { #home-banner .featured-image-label { position: absolute; bottom: 0.75rem; - right: 1rem; - padding: 0.15rem 0.6rem; - background: rgba(0, 0, 0, 0.75); + right: var(--space-md); + padding: 0.15rem var(--space-md); + background: var(--overlay-darker); } #home-banner .featured-image-label a { - font-size: 0.7rem; - letter-spacing: 0.18em; + font-size: var(--text-xs); + letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; - font-weight: 700; - color: #ffffff !important; + font-weight: var(--font-bold); + color: var(--border-white) !important; text-decoration: none; } @@ -388,24 +488,25 @@ main p { text-decoration: underline; } - -/* headers on all other pages */ +/* ============================================================================ + PAGE HEADERS (NON-HOME) + ============================================================================ */ main #title h1 { margin: 0; - font-size: 1.5rem; - letter-spacing: 0.04em; - font-weight: 700; + font-size: var(--text-xl); + letter-spacing: var(--letter-spacing-tight); + font-weight: var(--font-bold); text-transform: none; } main #title h1 a { - color: #ffffff !important; + color: var(--border-white) !important; text-decoration: none; } main #title p { - margin: 0.35rem 0 0; + margin: var(--space-sm) 0 0; font-size: 0.9rem; opacity: 0.8; } @@ -413,34 +514,34 @@ main #title p { @media (max-width: 575px) { main #title { padding: 1.1rem 0 0.8rem; - margin-bottom: 1rem; + margin-bottom: var(--space-md); } main #title h1 { - font-size: 1.25rem; + font-size: var(--text-xl); } } #title { - padding: 1.5rem 0 1.1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.18); - margin-bottom: 1.5rem; + padding: var(--space-lg) 0 1.1rem; + border-bottom: var(--border-width) solid var(--border-color-subtle); + margin-bottom: var(--space-lg); } #title h1 { margin: 0; - font-size: 1.5rem; - letter-spacing: 0.04em; - font-weight: 700; + font-size: var(--text-xl); + letter-spacing: var(--letter-spacing-tight); + font-weight: var(--font-bold); text-transform: none; } #title h1 a { - color: #ffffff !important; + color: var(--border-white) !important; text-decoration: none; } #title p { - margin: 0.35rem 0 0; + margin: var(--space-sm) 0 0; font-size: 0.9rem; opacity: 0.8; } @@ -448,53 +549,59 @@ main #title p { @media (max-width: 575px) { #title { padding: 1.1rem 0 0.8rem; - margin-bottom: 1rem; + margin-bottom: var(--space-md); } #title h1 { - font-size: 1.25rem; + font-size: var(--text-xl); } } -/* top-right portfolio return link */ + +/* ============================================================================ + PORTFOLIO RETURN LINK + ============================================================================ */ .portfolio-site-link { position: absolute; - top: 1rem; + top: var(--space-md); right: 1.25rem; z-index: 10; - font-size: 0.7rem; - letter-spacing: 0.14em; + font-size: var(--text-xs); + letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; - font-weight: 600; + font-weight: var(--font-semibold); - color: rgba(255, 255, 255, 0.85); + color: rgba(255, 255, 255, var(--opacity-strong)); text-decoration: none; - padding: 0.35rem 0.6rem; - border: 1px solid rgba(255, 255, 255, 0.35); - border-radius: 4px; - background: rgba(0, 0, 0, 0.45); + padding: var(--space-sm) var(--space-md); + border: var(--border-width) solid var(--border-color-normal); + border-radius: var(--border-radius); + background: var(--overlay-dark); } .portfolio-site-link:hover, .portfolio-site-link:focus { - color: #ffffff; - border-color: rgba(255, 255, 255, 0.75); + color: var(--border-white); + border-color: var(--border-color-strong); text-decoration: none; } + @media (max-width: 575px) { .portfolio-site-link { font-size: 0.65rem; - padding: 0.3rem 0.5rem; + padding: 0.3rem var(--space-sm); top: 0.75rem; right: 0.75rem; } } +/* ============================================================================ + MODAL STYLES + ============================================================================ */ -/* animations */ .modal-content .card.mb-4.text-center small { - color: #000000 !important; + color: var(--bg-black) !important; } .modal-header .small.text-muted { @@ -503,51 +610,51 @@ main #title p { .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary { background-color: transparent !important; - color: #000000 !important; - border: 1px solid #000000 !important; - border-radius: 4px; + color: var(--bg-black) !important; + border: var(--border-width) solid var(--bg-black) !important; + border-radius: var(--border-radius); text-decoration: none; } .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary:hover, .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary:focus { - background-color: #000000 !important; - color: #ffffff !important; + background-color: var(--bg-black) !important; + color: var(--border-white) !important; } .modal-body .btn.btn-outline-secondary.btn-sm { background-color: transparent !important; - color: #000000 !important; - border: 1px solid #000000 !important; - border-radius: 4px; + color: var(--bg-black) !important; + border: var(--border-width) solid var(--bg-black) !important; + border-radius: var(--border-radius); text-decoration: none; } .modal-body .btn.btn-outline-secondary.btn-sm:hover, .modal-body .btn.btn-outline-secondary.btn-sm:focus { - background-color: #000000 !important; - color: #ffffff !important; + background-color: var(--bg-black) !important; + color: var(--border-white) !important; } .modal-footer .btn.btn-secondary, .modal-footer .btn.btn-primary { background-color: transparent !important; - color: #000000 !important; - border: 1px solid #000000 !important; - border-radius: 4px; + color: var(--bg-black) !important; + border: var(--border-width) solid var(--bg-black) !important; + border-radius: var(--border-radius); text-decoration: none; } .modal-footer .btn.btn-secondary:hover, .modal-footer .btn.btn-secondary:focus { - background-color: #000000 !important; - color: #ffffff !important; + background-color: var(--bg-black) !important; + color: var(--border-white) !important; } .modal-footer .btn.btn-primary:hover, .modal-footer .btn.btn-primary:focus { - background-color: #000000 !important; - color: #ffffff !important; + background-color: var(--bg-black) !important; + color: var(--border-white) !important; } .modal, @@ -559,16 +666,16 @@ main #title p { html body main[role="main"] .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary { background-color: transparent !important; - color: #000000 !important; - border: 1px solid #000000 !important; - border-radius: 4px; + color: var(--bg-black) !important; + border: var(--border-width) solid var(--bg-black) !important; + border-radius: var(--border-radius); text-decoration: none; } html body main[role="main"] .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary:hover, html body main[role="main"] .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary:focus { - background-color: #000000 !important; - color: #ffffff !important; + background-color: var(--bg-black) !important; + color: var(--border-white) !important; } .modal .card.mb-4.text-center { @@ -582,27 +689,29 @@ html body main[role="main"] .modal-content .card.mb-4.text-center .btn-group .bt box-shadow: none !important; } +/* ============================================================================ + CARD ANIMATIONS + ============================================================================ */ + main[role="main"] .card { transition: - transform 150ms ease-out, - box-shadow 150ms ease-out, - border-color 150ms ease-out; + transform var(--transition-fast), + box-shadow var(--transition-fast), + border-color var(--transition-fast); } - main[role="main"] .card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); - border-color: #ffffff; + border-color: var(--border-white); } -/* animations off for compound cards (can't figure out bug that keeps them flickering) */ - +/* Disable animations for compound cards */ main[role="main"] .row.row-cols-lg-4.g-2 .card, main[role="main"] .row.row-cols-lg-4.g-2 .card:hover { transform: none !important; box-shadow: none !important; - border-color: #000000 !important; + border-color: var(--bg-black) !important; } .modal .card, @@ -613,56 +722,131 @@ main[role="main"] .row.row-cols-lg-4.g-2 .card:hover { transition: none !important; } -/* two block quote styles */ +/* ============================================================================ + QUOTE STYLES - FOUR VARIATIONS + ============================================================================ */ +/* VARIATION 1: Line Accent (blue left border) */ .quote-line { - margin: 2rem 0; - padding-left: 1.25rem; - border-left: 4px solid #bbbbbb; - color: #dddddd; + margin: var(--space-xl) 0; + padding-left: var(--space-lg); + border-left: 4px solid var(--accent-blue); + color: var(--text-white); } .quote-line p { - margin: 0.5rem 0; + margin: var(--space-sm) 0; + font-size: var(--text-base); + line-height: 1.6; } .quote-line .quote-attrib { - font-size: 0.9rem; - color: #aaaaaa; + font-size: var(--text-sm); + color: var(--text-muted); font-style: italic; + margin-top: var(--space-md); } +/* VARIATION 2: Solid Box (white background) */ .quote-box { - background-color: #ffffff; - color: #000000; - padding: 1.75rem 2rem; - margin: 2.5rem 0; - border-radius: 4px; + background-color: var(--text-white); + color: var(--bg-black); + padding: var(--space-xl) var(--space-xl); + margin: var(--space-2xl) 0; + border-radius: var(--border-radius); } .quote-box .quote-text { - font-size: 1.1rem; + font-size: var(--text-lg); font-style: italic; - margin-bottom: 1rem; + margin-bottom: var(--space-md); + line-height: 1.6; } .quote-box .quote-attrib { - font-size: 0.9rem; + font-size: var(--text-sm); text-align: right; + color: #555555; +} + +/* VARIATION 3: Outline Box (transparent with blue border) */ +.quote-outline { + background-color: transparent; + border: var(--border-width) solid var(--accent-blue); + padding: var(--space-xl) var(--space-xl); + margin: var(--space-2xl) 0; + border-radius: var(--border-radius); + position: relative; +} + +.quote-outline::before { + content: '"'; + position: absolute; + top: -0.5rem; + left: var(--space-lg); + font-size: 3rem; + line-height: 1; + color: var(--accent-blue); + background: var(--bg-black); + padding: 0 var(--space-sm); +} + +.quote-outline .quote-text { + font-size: var(--text-lg); + font-style: italic; + color: var(--text-white); + margin-bottom: var(--space-md); + line-height: 1.6; +} + +.quote-outline .quote-attrib { + font-size: var(--text-sm); + text-align: right; + color: var(--accent-blue); + font-style: normal; + text-transform: uppercase; + letter-spacing: var(--letter-spacing-normal); +} + +/* VARIATION 4: Minimal (subtle background glow) */ +.quote-minimal { + background: var(--accent-blue-subtle); + border-left: 3px solid var(--accent-blue); + padding: var(--space-lg) var(--space-xl); + margin: var(--space-xl) 0; + border-radius: var(--border-radius); +} + +.quote-minimal .quote-text { + font-size: var(--text-base); + font-style: italic; + color: var(--text-white); + margin-bottom: var(--space-sm); + line-height: 1.6; +} + +.quote-minimal .quote-attrib { + font-size: var(--text-xs); + color: var(--accent-blue); + font-style: normal; + text-transform: uppercase; + letter-spacing: var(--letter-spacing-wide); } blockquote { max-width: 700px; } -/* toc */ +/* ============================================================================ + TABLE OF CONTENTS (ABOUT PAGE) + ============================================================================ */ #about-toc { - background-color: #000000; - padding: 1rem; - margin-bottom: 2rem; + background-color: var(--bg-black); + padding: var(--space-md); + margin-bottom: var(--space-xl); position: sticky; - top: 1rem; + top: var(--space-md); } #about-toc, @@ -671,11 +855,11 @@ blockquote { } #about-toc-title .btn { - background-color: #000000; - color: #ffffff; + background-color: var(--bg-black); + color: var(--border-white); width: 100%; text-align: left; - padding: 0.5rem 0.75rem; + padding: var(--space-sm) 0.75rem; } #about-toc-title .btn:hover, @@ -685,12 +869,12 @@ blockquote { #about-toc-title svg { float: right; - fill: #ffffff; + fill: var(--border-white); } #about-toc-list { - background-color: #000000; - padding-top: 1rem; + background-color: var(--bg-black); + padding-top: var(--space-md); } #about-toc-list ul { @@ -704,9 +888,9 @@ blockquote { /* TOC links */ #about-toc-list a { - color: #ffffff; + color: var(--border-white); text-decoration: none; - font-size: 0.8rem; + font-size: var(--text-sm); line-height: 1.3; opacity: 0.3; position: relative; @@ -728,14 +912,14 @@ blockquote { top: 0.25em; height: 1em; width: 3px; - background-color: #ffffff; + background-color: var(--border-white); } /* Nested hierarchy */ #about-toc-list ul ul { - padding-left: 1rem; - border-left: 1px solid #444444; - margin-top: 0.25rem; + padding-left: var(--space-md); + border-left: var(--border-width) solid #444444; + margin-top: var(--space-xs); align-items: left; } @@ -744,10 +928,9 @@ blockquote { } @media (max-width: 768px) { - #about-toc { position: sticky; - bottom: 1rem; + bottom: var(--space-md); margin-bottom: 0; z-index: 998; max-width: 95%; @@ -755,35 +938,44 @@ blockquote { margin-right: auto; } - #scroll-to-top { position: fixed; bottom: 4.5rem; - right: 1rem; + right: var(--space-md); z-index: 9999; - transition: transform 0.2s ease, box-shadow 0.2s ease; + transition: transform var(--transition-normal), box-shadow var(--transition-normal); } } + #scroll-to-top:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } - -/* interp/about page */ +/* ============================================================================ + ABOUT PAGE LAYOUT + ============================================================================ */ #about-wrapper { display: grid; grid-template-columns: 250px 1fr; - gap: 2rem; + gap: var(--space-xl); } #about-contents-wrapper { max-width: 800px; - padding: 0 2rem; + padding: 0 var(--space-xl); margin: 0 auto; } +#about-contents-wrapper ul { + font-size: var(--text-base); +} + +#about-contents-wrapper li { + font-size: var(--text-base); +} + #about-contents-wrapper p { max-width: 70ch; line-height: 1.6; @@ -796,15 +988,17 @@ blockquote { #about-contents-wrapper { max-width: 100%; - padding: 1rem; + padding: var(--space-md); } } -/* wrapped images */ +/* ============================================================================ + WRAPPED IMAGES + ============================================================================ */ .float-img { max-width: 40%; - margin: 0.5rem 1.5rem 1rem 0; + margin: var(--space-sm) var(--space-lg) var(--space-md) 0; } .float-left { @@ -813,7 +1007,7 @@ blockquote { .float-right { float: right; - margin: 0.5rem 0 1rem 1.5rem; + margin: var(--space-sm) 0 var(--space-md) var(--space-lg); } .float-img img { @@ -824,8 +1018,8 @@ blockquote { .float-img .caption { font-size: 0.75rem; - color: #bbbbbb; - margin-top: 0.25rem; + color: var(--text-muted); + margin-top: var(--space-xs); } .clearfix::after { @@ -838,26 +1032,36 @@ blockquote { .float-img { float: none; max-width: 100%; - margin: 1rem 0; + margin: var(--space-md) 0; } } + +/* ============================================================================ + TECHNICAL SECTION + ============================================================================ */ + #technical { background-color: #f8f9fa; - color: #000; + color: var(--bg-black); } #technical .bg-white { - background-color: #ffffff !important; - color: #000 !important; + background-color: var(--border-white) !important; + color: var(--bg-black) !important; } #technical h3 { - color: #000; + color: var(--bg-black); } #technical p { - color: #000; + color: var(--bg-black); } + +/* ============================================================================ + DONOR LIST + ============================================================================ */ + .donor-list { list-style: none; padding-left: 0; @@ -868,93 +1072,75 @@ blockquote { font-size: 0.95em; color: #555; } + +/* ============================================================================ + NAVIGATION + ============================================================================ */ + .dropdown-header.nav-section-label { - font-size: 0.7rem; + font-size: var(--text-xs); text-transform: uppercase; - letter-spacing: 0.08em; - font-weight: 600; + letter-spacing: var(--letter-spacing-normal); + font-weight: var(--font-semibold); color: rgba(0,0,0,0.6); - padding: 0.5rem 1rem; -} -.dropdown-header.nav-section-label:not(:first-child) { - margin-top: 0.5rem; - border-top: 1px solid rgba(0,0,0,0.1); + padding: var(--space-sm) var(--space-md); } -.spl-autofit { - display: none !important; +.dropdown-header.nav-section-label:not(:first-child) { + margin-top: var(--space-sm); + border-top: var(--border-width) solid rgba(0,0,0,0.1); } + +/* ============================================================================ + SPOTLIGHT FIXES + ============================================================================ */ + +.spl-autofit { + display: none !important; +} + +/* ============================================================================ + IMAGE CONTAINERS + ============================================================================ */ + .image-container { - text-align: center; - max-width: 100%; - margin: 0 auto; + text-align: center; + max-width: 90%; + margin: 0 auto; } .image-container img { - width: 100%; - height: auto; + width: 100%; + height: auto; } .image-container figcaption { - font-size: 0.85rem; - width: 100%; - margin-top: 0.5rem; - text-align: center; -} -.footnotes { - overflow-x: hidden; - max-width: 100%; + font-size: 0.85rem; + width: 100%; + margin-top: var(--space-sm); + text-align: center; } -.footnotes p { - word-wrap: break-word; - word-break: break-all; +/* ============================================================================ + SEARCH SUGGESTIONS + ============================================================================ */ + +.suggestions-container { + position: absolute; + width: 100%; + max-height: 200px; + overflow-y: auto; + background-color: white; + border: var(--border-width) solid #ccc; + z-index: 100; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } -.footnotes a { - display: inline-block; - word-wrap: break-word; - overflow-wrap: break-word; - max-width: 100%; - text-overflow: ellipsis; +.suggestion-item { + padding: 8px; + cursor: pointer; } -@media (max-width: 768px) { - .footnotes p { - font-size: 14px; - } - - .footnotes a { - font-size: 12px; - } -} - -.modal-body img { - max-width: 100%; - height: auto; -} - -.modal-body p { - font-size: 1rem; - line-height: 1.6; - color: black; -} -#image-lightbox .modal-body #lightbox-caption { - color: black !important; -} - - - - - - - - - - - - - - - - +.suggestion-item:hover { + background-color: #f0f0f0; +} \ No newline at end of file diff --git a/pages/about.md b/pages/about.md index 63e3b69..a4d63d8 100644 --- a/pages/about.md +++ b/pages/about.md @@ -45,7 +45,7 @@ There is a damning need to be stewards of our own histories and protect them at Initially ideated as a series of research articles "liberating" Black queer materials from its local institutions and libraries, {B/qKC}'s mission has evolved into a full-fledged archive with **five core goals**.
-
+

"Plainly put, the far right is erasing Blackness from the fabrics of America, so historical collection can no longer be a passive process; it must be applied radically."

Nasir Anthony Montalvo, "Third Space: Queering Blackness from the Archival Fabrics of Middle America" (MdW Atlas, 2024)

@@ -76,11 +76,13 @@ We aim for Black queer stories to occupy public spaces physically and digitally ###### Nasir Anthony Montalvo, *Founder* -Nasir Anthony Montalvo (b. 1999) is an essayist and memory worker based in Kansas City, MO, and the Founder of {B/qKC}. Montalvo's work has been exhibited locally and nationally in coffee shops, book stores, community fairs and artist galleries. Their art and archival research has also been published in NPR, Syllabus, Sixty Inches From Center, The Advocate, Teen Vogue and KC Studio; along with being used in curricula at Johns Hopkins University, Columbia University and the North Kansas City School District. - -Montalvo holds a 2024-2026 studio residency at Charlotte Street; and has been awarded fellowships and artist grants with The Opportunity Agenda, Diaspora Solidarities Lab, Gray Area and ArtsKC. They earned their Bachelor of Science from Stevens Institute of Technology in 2021. - -Montalvo is queer, Afro-Borincane, and from Kissimmee, Florida. +
+

Nasir Anthony Montalvo (b. 1999) is an essayist and memory worker based in Kansas City, MO, and the Founder of {B/qKC}. Montalvo's work has been exhibited locally and nationally in coffee shops, book stores, community fairs and artist galleries. Their art and archival research has also been published in NPR, Syllabus, Sixty Inches From Center, The Advocate, Teen Vogue and KC Studio; along with being used in curricula at Johns Hopkins University, Columbia University and the North Kansas City School District.

+ +

Montalvo holds a 2024-2026 studio residency at Charlotte Street; and has been awarded fellowships and artist grants with The Opportunity Agenda, Diaspora Solidarities Lab, Gray Area and ArtsKC. They earned their Bachelor of Science from Stevens Institute of Technology in 2021.

+ +

Montalvo is queer, Afro-Borincane, and from Kissimmee, Florida.

+
+

Anevay Martz is a junior Sociology major at the University of Missouri–Kansas City, with a double minor in Communications and Race, Ethnic and Gender Studies. As {B/qKC}'s first Intern in 2025. Digitization Intern, Martz helped develop the archive’s Digital Asset Register (DAR) that is being used to power this website, alongside getting Soakie's listed as a historical landmark on Clio.

+
@@ -106,7 +110,9 @@ Anevay Martz is a junior Sociology major at the University of Missouri–Kansas ###### Eden Barnes, *Community Engagement Intern, Fall 2025* -Eden is a graduate of the University of Missouri Kansas City, with a BA in Sociology with an emphasis in Cultural Anthropology, and a minor in Race, Ethnic, and Gender Studies. As Community Engagement Intern, Eden aided {B/qKC} with day-to-day tasks and the launch of {B/qKC}'s new site. +
+

Eden is a graduate of the University of Missouri Kansas City, with a BA in Sociology with an emphasis in Cultural Anthropology, and a minor in Race, Ethnic, and Gender Studies. As Community Engagement Intern, Eden aided {B/qKC} with day-to-day tasks and the launch of {B/qKC}'s new site.

+
--- ## Our history @@ -135,6 +141,6 @@ Since 2022, {B/qKC} has launched at least two public exhibitions per year, and e {% include cb/credits.html %} -
+

Learn more about what's powering this site on "Our Data" page!

\ No newline at end of file diff --git a/pages/collections/collection-gary.html b/pages/collections/collection-gary.html index 7dcf306..fc7fb14 100644 --- a/pages/collections/collection-gary.html +++ b/pages/collections/collection-gary.html @@ -27,7 +27,7 @@ Gary Carrington (he/him/his) is referred to as a “pillar” in Kansas City’s {% if featured.identifier %}

- Identifier #: + Object ID #:

- Identifier #: + Object ID #:

- Identifier #: + Object ID #: +

If you have any questions, please contact us!

+
\ No newline at end of file diff --git a/pages/data.md b/pages/data.md index 4efd6f4..b30d740 100644 --- a/pages/data.md +++ b/pages/data.md @@ -20,7 +20,7 @@ In accordance with our [mission](/about/), {B/qKC} aims to be the true steward o Rather than relying on a third-party service like Google, DropBox, or Squarespace–with rising costs for usage, ethical concerns around our data and their damaging corporate practices–we've chosen to build this site using **open, decentralized and self-hosted infrastructure**. -
+

A very special thank you to Gray Area, TechSoup and FileCoin Foundation and their Cultural Memory Lab for teaching us a lot about DWeb technology and making this all possible. Learn more about the program on their website.

@@ -33,7 +33,7 @@ Need to share something online? You Tweet or Instagram it.
Need to store something? You upload them to an arbitrary "cloud."
-
+

“The platforms that host our networked public sphere and inform us about the world are unelected, unaccountable, and often impossible to audit or oversee.”

— Chelsea Barabas, Neha Narula, Ethan Zuckerman, "The Decentralized Web: Defending Internet Freedom through Decentralization: Back to the Future?" (2017)

@@ -142,7 +142,7 @@ This means no Amazon Web Services, no Google Cloud, no third-party entity quietl By choosing to host this website on our server, we get to control how this site operates, how data is handled, and stay accountable to the people whose stories live here. -
+

GOOD TO KNOW: {B/qKC} uses the 3-2-1-1-0 preservation strategy: meaning there are 3 copies of all our archival materials (2 of these on IPFS and our server), stored on 2 different types of media, with 1 copy off-site, 1-copy offline, and all with 0 backup errors.

diff --git a/pages/donate.md b/pages/donate.md index 7dcccc0..1f1ce21 100644 --- a/pages/donate.md +++ b/pages/donate.md @@ -98,9 +98,10 @@ $1,000
**Tintoretta Tattoo Studio**
**Charlotte Street**
---- +
+

Thank you to Astringent Press, Oddities Prints, Plot Twist Consulting, BLK + BRWN., PH Coffee, Waterbird Coffee, and Café Corazón who have offered in-kind support to this work!

+
-*Thank you to Astringent Press, Oddities Prints, Plot Twist Consulting, BLK + BRWN., PH Coffee, Waterbird Coffee, and Café Corazón who have offered in-kind support to this work!* --- diff --git a/pages/read/erasure.md b/pages/read/erasure.md index 689bcde..d8da07e 100644 --- a/pages/read/erasure.md +++ b/pages/read/erasure.md @@ -84,7 +84,7 @@ Kansas City's Pride Festival (now run by the Kansas City Community Pride Allianc In conjunction with loss of spaces, we also must examine how sexual desire has served in the oppression of Black queer Kansas Citians. -The Black gay male community of Kansas City, particularly, suffers from this sexual exploitation----as can be seen in the case of the organization, Black-White Men Together-Kansas City (BWMT-KC). Founded by Michael J. Smith in 1980, the National Association of Black and White Men Together (NABWMT) was expressely founded for white gay men to more easily find Black men to have sex with[^15](https://kansascitydefender.com/lgbtqia2/the-erasure-and-sexual-subjugation-of-black-queer-kansas-citians-a-brief-historical-look/#38315f38-0d39-4b4c-b736-a237630ff5dc)^. Smith was described by his peers to be an 'interracialist', believing that Black men were more well-endowed; he would face vitriol in the media for his comments and actions. Despite this, chapters of the organization opened across the nation, including in Kansas City. The local chapter was able to accomplish a great deal in pushing sex education and creating systems of support for gay men, at large----but part of the violence faced by Black queer men is sexual exploitation, which includes fetishization based on race.  +The Black gay male community of Kansas City, particularly, suffers from this sexual exploitation----as can be seen in the case of the organization, Black-White Men Together-Kansas City (BWMT-KC). Founded by Michael J. Smith in 1980, the National Association of Black and White Men Together (NABWMT) was expressely founded for white gay men to more easily find Black men to have sex with[^15]. Smith was described by his peers to be an 'interracialist', believing that Black men were more well-endowed; he would face vitriol in the media for his comments and actions. Despite this, chapters of the organization opened across the nation, including in Kansas City. The local chapter was able to accomplish a great deal in pushing sex education and creating systems of support for gay men, at large----but part of the violence faced by Black queer men is sexual exploitation, which includes fetishization based on race.  Similarly to the loss of Black queer space, this sexual violence and the need to feel desired limits access to new futures. Desirability ultimately creates a cycle that seeks not to end white supremacy, but to further it by developing unattainable standards (e.g. sexual endowment) and unwritten codes (e.g. hyper-masculinity) that create power structures amidst Black queer men in competition of the white male gaze. To end white supremacy is to put an end to this sexual desire; and to eradicate the tools by which white men use to subjugate Black queer men to (sexual) dependence. @@ -96,7 +96,7 @@ There exists a paradigm in Kansas City's queer community: wherein Black queer Ka *I encourage folks looking to create new Black queer futures to read more pedagogy (Frantz Fanon, Da'Shaun L. Harrison, James Baldwin), join local movements for abolition (such as the Reale Justice Network and the Kansas City Defender), and protest rainbow capitalism by holding your own Pride protests and, both, in-and-out of June. If you're not, both, Black and queer, I implore you to seek out Black queer folk, listen to them, and fulfill their needs: donate to gender-affirming surgery funds, bail out Black queer folk in jail, organize against criminalization of queerness, and create true systemic change--rainbow crosswalks will not save you nor I.* -
+

An abridged version of this essay, titled "The Unseen Struggles: Erasure and Racial Inequities in Kansas City's Queer Community," was originally published in the Urban League of Greater Kansas City's 2023 State of Black Kansas City | FROM REDLINING TO CHALK LINES: THE COSTS OF ECONOMIC INJUSTICE. The report can be found on their website.

diff --git a/pages/read/mact-kc.md b/pages/read/mact-kc.md index 11a3ee2..e0e9827 100644 --- a/pages/read/mact-kc.md +++ b/pages/read/mact-kc.md @@ -409,7 +409,7 @@ MACT-KC co-chairs ranging from 1987-1993 pose for a photo. From top left to top
-
+

“A very special thank you to UMKC's Gay-Lesbian Archives of Mid-America and its Director, Stuart Hinds, for helping gather information on Men of All Colors Together-Kansas City; and serving as a cornerstone for queer Kansas City history.”

diff --git a/pages/read/out-there.md b/pages/read/out-there.md index c3edba1..c835581 100644 --- a/pages/read/out-there.md +++ b/pages/read/out-there.md @@ -204,7 +204,7 @@ According to a July 11, 1994 article by AP News, however, [the Amendment Coaliti [Lea Hopkins](https://libweb.umkc.edu/GLAMA/oral-histories-moreinfo/38) has been an instrumental Black, Lesbian organizer in Kansas City for decades. Hopkins was behind the first Gay Pride Parade in Kansas City in 1979, and [43 years later was a Grand Marshall for Kansas City's Pride Alliance Parade earlier this year](https://www.instagram.com/reel/CjsbDmpDkrV/?utm_source=ig_web_copy_link). Because of her work, she has undoubtedly pushed acceptance for Black Queer people to once unthinkable heights in the Midwest. Hopkins' role on Out There was to serve as a spokesperson for GLAAD, presumably because of her extensive involvement with the organization. -
+

Listen to Lea Hopkins' interview with Austin R. Williams, as part of GLAMA's Oral History project, as she discusses her early days, moving to New York and becoming involved with Christopher Street, and organizing the first Gay Pride Parade in Kansas City.

diff --git a/pages/read/soakies.md b/pages/read/soakies.md index a7cbfcc..87ae6fc 100644 --- a/pages/read/soakies.md +++ b/pages/read/soakies.md @@ -89,7 +89,7 @@ If you are the copyright holder and feel for any reason that your work has been ## Vol_2 of {B/qKC}: Soakie's -
+

“After everything is said and done, Soakies was home.”

— Baby Boi, 2023

@@ -180,7 +180,7 @@ It was this same sentiment that would lead Colston and his good friend Eric Robi According to Colston and Robinson, Rinaldo was getting ready to close his shop around the same time Soakie's was becoming a pregame spot for Black queer people in the '90s. The three of them had established a friendly rapport in light of this. In fact, Robinson notes that Rinaldo treated him and the community with kindness and was extremely supportive. -
+

“We don't have nowhere to go.”

— Jerry Colston, 2023

@@ -273,7 +273,7 @@ Across 1308 Main Street was a large parking lot that became a hangout spot for B This would become an issue, though, as it drew away from the capital Soakie's owners were receiving, and was also the source of a lot of violence. -
+

† There are currently no photos available in the public domain, or as donated to {B/qKC}, that capture festivities in the parking lot across from Soakie's. If you are in possession of any relevant photographs or material and would like to contribute to this article (and archive, overall) please contact Nasir Montalvo.

@@ -302,7 +302,7 @@ It wouldn't be that long before Baby Boi became part of the view. Baby Boi would To my surprise, Baby Boi's DJing career didn't officially start until 2017–and it seems a perfect continuation from performing for, as Baby Boi puts it, "if [they] can give people a good time or experience, let's do it." -
+

‡Baby Boi references the late-haunted house, Main Street Morgue: located on 1325 Main Street from the 1970s to the early 00s. The business was shut down as part of the Power & Light Development.

§Descriptions of Kansas City's Ballrooms Scene are purposely meant to be ambiguous as to protect a well kept tradition of Kansas City's Black queer community.

@@ -331,7 +331,7 @@ Above all, though, Starla has been an instrumental support system for those arou It is with great honor that I welcome her collection to {B/qKC}. -
+

The "starla_carr_collection" is one of the inaugural collections digitized and donated to {B/qKC}. The collection consists of various photos from Carr's time as a seamstress, performer and go-er of Soakies in the early 2000s.

view the starla_carr_collection

@@ -360,7 +360,7 @@ Outside of Soakie's, Taylor has made a huge impact on the local Black LGBTQ+ sce It is with great honor that I welcome her collection to {B/qKC}. -
+

The “tisha_taylor_collection” is one of the inaugural collections digitized and donated to {B/qKC}. The collection consists of various photos from Taylor’s time at Soakie’s and Kansas City’s Black Pride in 1999.

view the tisha_taylor_collection

@@ -393,7 +393,7 @@ Similar to Taylor's sentiments, Carrington was not only instrumental in providin It is with great honor that I welcome his collection to {B/qKC}. -
+

The “gary_carrington_collection” is one of the inaugural collections digitized and donated to {B/qKC}. The collection consists of various photos from Carrington’s time at Soakie’s, as well as clippings from KC Exposures.

view the gary_carrington_collection