d-bis/miracles_in_motion
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add brand kit, #/brand page, and responsive logo marks

Browse Source 
Export script generates PNG/WebP/favicons/ZIP and OG image; nav uses symbol on mobile and horizontal lockup on desktop; press kit at #/brand with download links and print-friendly guidelines.

Co-authored-by: Cursor <[email protected]>
This commit is contained in:
defiQUG
2026-05-26 20:53:37 -07:00
co-authored by Cursor
parent 2019f56f27
commit 33aab0d3de
48 changed files with 569 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+35 -23
View File
@@ -71,7 +71,7 @@
}
@layer components {
/* Official logo (public/logo.png) */
/* Brand logos: /brand/logo-symbol.svg, logo-horizontal.png, logo-square.png */
.logo-mark {
display: inline-flex;
align-items: center;
@@ -83,72 +83,75 @@
.logo-mark__img {
display: block;
object-fit: contain;
object-position: left center;
}
/* Mobile-first; scale up on tablet/desktop (square asset: height drives width) */
/* Nav: symbol (square) on mobile, horizontal lockup on md+ */
.logo-mark--nav {
height: 2.25rem;
height: 2.5rem;
}
.logo-mark--nav .logo-mark__img {
.logo-mark--nav .logo-mark__img--symbol {
height: 100%;
width: auto;
max-width: 9rem;
object-position: center;
max-width: 2.75rem;
}
@media (min-width: 640px) {
@media (min-width: 768px) {
.logo-mark--nav {
height: 3rem;
height: 3.25rem;
}
.logo-mark--nav .logo-mark__img {
max-width: 11rem;
.logo-mark--nav .logo-mark__img--horizontal {
height: 100%;
width: auto;
max-width: min(14rem, 42vw);
}
}
@media (min-width: 1024px) {
.logo-mark--nav {
height: 4rem;
height: 3.5rem;
}
.logo-mark--nav .logo-mark__img {
max-width: 14rem;
.logo-mark--nav .logo-mark__img--horizontal {
max-width: 15rem;
}
}
@media (min-width: 1280px) {
.logo-mark--nav {
height: 4.25rem;
height: 3.75rem;
}
.logo-mark--nav .logo-mark__img {
max-width: 15.5rem;
.logo-mark--nav .logo-mark__img--horizontal {
max-width: 16.5rem;
}
}
/* Footer: always horizontal */
.logo-mark--footer {
height: 2.75rem;
}
.logo-mark--footer .logo-mark__img {
.logo-mark--footer .logo-mark__img--horizontal {
height: 100%;
width: auto;
max-width: 10rem;
max-width: min(12rem, 80vw);
}
@media (min-width: 640px) {
.logo-mark--footer {
height: 3.25rem;
}
.logo-mark--footer .logo-mark__img {
max-width: 12rem;
.logo-mark--footer .logo-mark__img--horizontal {
max-width: 14rem;
}
}
@media (min-width: 1024px) {
.logo-mark--footer {
height: 3.75rem;
height: 3.5rem;
}
.logo-mark--footer .logo-mark__img {
max-width: 14rem;
.logo-mark--footer .logo-mark__img--horizontal {
max-width: 16rem;
}
}
@@ -569,6 +572,15 @@
}
@media print {
.no-print,
header,
footer,
.sticky-donate,
[class*="MimChat"],
dialog {
display: none !important;
}
.no-print {
display: none !important;
}