You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1275 lines
27 KiB
1275 lines
27 KiB
body { |
|
display: flex; |
|
flex-direction: column; |
|
min-height: 100vh; |
|
max-width: 100%; |
|
background-color: var(--color-bg); |
|
color: var(--color-text); |
|
font-family: var(--font-family), sans-serif; |
|
margin: 0; |
|
padding: 0; |
|
line-height: 1.6; |
|
} |
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
font-family: var(--heading-font), serif; |
|
font-weight: 600; |
|
line-height: 1.1; |
|
color: var(--color-primary); |
|
margin: 30px 0 10px; |
|
} |
|
|
|
h1 { |
|
font-size: 3.2rem; |
|
margin-top: 0.25em; |
|
font-weight: 300; |
|
} |
|
|
|
h1.brand { |
|
font-family: var(--brand-font), serif; |
|
font-size: 3.6rem; |
|
color: var(--brand-color); |
|
display: inline-flex; |
|
align-items: center; |
|
gap: 0.45em; |
|
line-height: 1.05; |
|
} |
|
|
|
|
|
|
|
h1.brand a, |
|
.publisher a { |
|
color: var(--brand-color); |
|
} |
|
|
|
h2 { |
|
font-size: 2.2rem; |
|
} |
|
|
|
h3 { |
|
font-size: 2rem; |
|
} |
|
|
|
h4 { |
|
font-size: 1.9rem; |
|
} |
|
|
|
h5 { |
|
font-size: 1.75rem; |
|
} |
|
|
|
h6 { |
|
font-size: 1.5rem; |
|
} |
|
|
|
p { |
|
margin: 0 0 15px; |
|
} |
|
|
|
aside h1 { |
|
font-size: 1.2rem; |
|
} |
|
|
|
aside h2 { |
|
font-size: 1.1rem; |
|
} |
|
|
|
aside p.lede { |
|
font-size: 1rem; |
|
} |
|
|
|
.lede { |
|
font-family: var(--main-body-font), serif; |
|
font-size: 1.6rem; |
|
word-wrap: break-word; |
|
font-weight: 300; |
|
} |
|
|
|
strong:not(>h2), .strong { |
|
color: var(--color-primary); |
|
} |
|
|
|
.hidden { |
|
display: none; |
|
} |
|
|
|
a { |
|
color: var(--color-secondary); |
|
text-decoration: none; |
|
} |
|
|
|
a:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
.card a:hover { |
|
text-decoration: none; |
|
color: var(--color-text); |
|
cursor: pointer; |
|
} |
|
|
|
.card a:hover h2 { |
|
color: var(--color-text); |
|
} |
|
|
|
img { |
|
max-width: 100%; |
|
height: auto; |
|
} |
|
|
|
svg.icon { |
|
width: 2em; |
|
height: 2em; |
|
} |
|
|
|
.divider { |
|
border: 2px solid var(--color-primary); |
|
margin: 20px 0; |
|
} |
|
|
|
.hashtag { |
|
color: var(--color-secondary); |
|
} |
|
|
|
.card { |
|
background-color: var(--color-bg); |
|
color: var(--color-text); |
|
padding: 0; |
|
margin: 0 0 50px 0; |
|
border-radius: 0; /* Sharp edges */ |
|
} |
|
|
|
/* Landing (home): clear hierarchy — section label / title / excerpt / spacing */ |
|
.home-body { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 3.5rem; |
|
} |
|
|
|
/* List pages: space header / form from content (same intent as .home-body gap) */ |
|
.search-page { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 2.5rem; |
|
} |
|
|
|
.category-page__header-card { |
|
margin-bottom: 2.5rem; |
|
} |
|
|
|
/* Author profile: space articles block below header+divider (header is multiple nodes; do not use flex+gap on .author-profile) */ |
|
.author-profile > .author-profile__divider { |
|
margin: 2.5rem 0; |
|
border: 0; |
|
border-top: 1px solid var(--color-border); |
|
} |
|
|
|
/* Home featured sections: column masonry (Pinterest-style wall) + per-tile category label */ |
|
.featured-list--wall { |
|
column-count: 1; |
|
column-gap: 1.15rem; |
|
column-fill: balance; |
|
} |
|
|
|
@media (min-width: 640px) { |
|
.featured-list--wall { |
|
column-count: 2; |
|
} |
|
} |
|
|
|
@media (min-width: 1100px) { |
|
.featured-list--wall { |
|
column-count: 3; |
|
} |
|
} |
|
|
|
.featured-tile { |
|
--tile-hue: 140; |
|
break-inside: avoid; |
|
display: block; |
|
width: 100%; |
|
margin: 0 0 1.15rem; |
|
box-sizing: border-box; |
|
min-width: 0; |
|
background: var(--color-bg); |
|
border: 1px solid var(--color-border); |
|
border-radius: 0.45rem; |
|
box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent); |
|
border-top: 3px solid hsl(var(--tile-hue) 38% 40%); |
|
overflow: hidden; |
|
transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; |
|
} |
|
|
|
/* Home masonry tiles: global `a:hover { text-decoration: underline }` would apply; cancel + lift card on hover / focus. */ |
|
.featured-tile:has(.featured-tile__link:hover), |
|
.featured-tile:has(.featured-tile__link:focus-visible) { |
|
box-shadow: |
|
0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent), |
|
0 10px 28px color-mix(in srgb, var(--color-text) 8%, transparent); |
|
border-color: color-mix(in srgb, var(--color-text-mid) 14%, var(--color-border) 86%); |
|
transform: translateY(-2px); |
|
} |
|
|
|
.featured-tile__link { |
|
display: block; |
|
color: inherit; |
|
text-decoration: none; |
|
} |
|
|
|
.featured-tile__link:hover, |
|
.featured-tile__link:hover .card-title, |
|
.featured-tile__link:hover .lede, |
|
.featured-tile__link:hover h2, |
|
.featured-tile__link:hover p { |
|
text-decoration: none; |
|
} |
|
|
|
.featured-tile__link:focus-visible { |
|
outline: 2px solid var(--color-focus-ring); |
|
outline-offset: 2px; |
|
border-radius: 0.35rem; |
|
} |
|
|
|
.featured-tile__head { |
|
padding: 0.4rem 0.75rem 0.45rem; |
|
background: color-mix(in srgb, hsl(var(--tile-hue) 34% 46%) 14%, var(--color-bg) 86%); |
|
border-bottom: 1px solid color-mix(in srgb, hsl(var(--tile-hue) 32% 38%) 24%, var(--color-border) 76%); |
|
} |
|
|
|
.featured-tile__cat { |
|
display: block; |
|
font-family: var(--font-family), sans-serif; |
|
font-size: 0.66rem; |
|
font-weight: 700; |
|
letter-spacing: 0.12em; |
|
text-transform: uppercase; |
|
color: hsl(var(--tile-hue) 26% 32%); |
|
line-height: 1.35; |
|
} |
|
|
|
.featured-tile__media { |
|
position: relative; |
|
margin: 0; |
|
width: 100%; |
|
overflow: hidden; |
|
background-color: var(--color-bg-light); |
|
} |
|
|
|
/* Vary aspect ratios for a more irregular “wall of blocks” rhythm */ |
|
.featured-tile__media--ar0 { |
|
aspect-ratio: 16 / 9; |
|
} |
|
|
|
.featured-tile__media--ar1 { |
|
aspect-ratio: 1 / 1; |
|
} |
|
|
|
.featured-tile__media--ar2 { |
|
aspect-ratio: 3 / 2; |
|
} |
|
|
|
.featured-tile__media--ar3 { |
|
aspect-ratio: 3 / 4; |
|
} |
|
|
|
.featured-tile__media img { |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
object-position: center; |
|
display: block; |
|
} |
|
|
|
/* Site logo fallback in wide frames */ |
|
.featured-tile__media img[src*="favicon-96x96"] { |
|
object-fit: contain; |
|
padding: 2.25rem; |
|
box-sizing: border-box; |
|
} |
|
|
|
/* Uniform text padding (home tiles + shared with list cards elsewhere) */ |
|
.featured-list .card-body { |
|
box-sizing: border-box; |
|
padding: 1rem 1.125rem 1.2rem; |
|
} |
|
|
|
/* List card titles + excerpts: home (featured), category, search, author */ |
|
.featured-list h2.card-title, |
|
.article-list h2.card-title { |
|
font-family: var(--heading-font), serif; |
|
font-size: 1.95rem; |
|
font-weight: 700; |
|
line-height: 1.18; |
|
color: var(--color-primary); |
|
margin: 0.15rem 0 0.55rem; |
|
} |
|
|
|
/* Home featured grid only: two-line title + two-line deck for even rhythm. */ |
|
.featured-list h2.card-title { |
|
display: -webkit-box; |
|
-webkit-box-orient: vertical; |
|
-webkit-line-clamp: 2; |
|
line-clamp: 2; |
|
overflow: hidden; |
|
min-height: 2.36em; |
|
margin-top: 0; |
|
margin-bottom: 0.4rem; |
|
} |
|
|
|
.featured-list p.lede, |
|
.article-list p.lede { |
|
font-family: var(--main-body-font), serif; |
|
font-size: 1.1rem; |
|
font-weight: 400; |
|
line-height: 1.55; |
|
color: var(--color-text-mid); |
|
margin-top: 0.15rem; |
|
} |
|
|
|
.featured-list p.lede.truncate { |
|
-webkit-line-clamp: 2; |
|
line-clamp: 2; |
|
} |
|
|
|
/* Masonry wall (home): smaller titles, more title + excerpt lines (must follow generic .featured-list rules) */ |
|
.featured-list.featured-list--wall h2.card-title { |
|
font-size: 1.35rem; |
|
font-weight: 600; |
|
line-height: 1.3; |
|
-webkit-line-clamp: 4; |
|
line-clamp: 4; |
|
min-height: 0; |
|
margin-bottom: 0.35rem; |
|
} |
|
|
|
.featured-list.featured-list--wall p.lede.truncate { |
|
-webkit-line-clamp: 10; |
|
line-clamp: 10; |
|
font-size: 1.02rem; |
|
line-height: 1.5; |
|
margin-top: 0.35rem; |
|
} |
|
|
|
.featured-list__meta { |
|
font-family: var(--font-family), sans-serif; |
|
font-size: 0.78rem; |
|
font-weight: 400; |
|
line-height: 1.35; |
|
color: color-mix(in srgb, var(--color-text-mid) 48%, var(--color-bg) 52%); |
|
margin: 0.15rem 0 0.45rem; |
|
} |
|
|
|
.featured-list__meta time { |
|
color: inherit; |
|
} |
|
|
|
/* Whole-card link: keep excerpt + date subdued on hover. */ |
|
.featured-tile__link:hover p.lede, |
|
.article-list .card a:hover p.lede { |
|
color: color-mix(in srgb, var(--color-text-mid) 88%, var(--color-text) 12%); |
|
text-decoration: none; |
|
} |
|
|
|
.featured-tile__link:hover .featured-list__meta { |
|
color: color-mix(in srgb, var(--color-text-mid) 58%, var(--color-text) 42%); |
|
} |
|
|
|
.article-list .metadata { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: center; |
|
gap: 0.75rem; |
|
min-width: 0; |
|
font-family: var(--font-family), sans-serif; |
|
font-size: 0.78rem; |
|
font-weight: 400; |
|
line-height: 1.35; |
|
color: color-mix(in srgb, var(--color-text-mid) 48%, var(--color-bg) 52%); |
|
} |
|
|
|
.article-list .metadata p { |
|
margin: 0; |
|
min-width: 0; |
|
color: inherit; |
|
} |
|
|
|
.article-list .metadata a { |
|
color: color-mix(in srgb, var(--color-text-mid) 72%, var(--color-text) 28%); |
|
text-decoration: none; |
|
} |
|
|
|
.article-list .metadata a:hover, |
|
.article-list .metadata a:focus-visible { |
|
color: var(--color-link-hover); |
|
text-decoration: underline; |
|
text-underline-offset: 2px; |
|
} |
|
|
|
/* List cards: same site-logo treatment when the hero is the default mark */ |
|
.article-list .card-header img[src*="favicon-96x96"] { |
|
object-fit: contain; |
|
padding: 1.25rem; |
|
box-sizing: border-box; |
|
background: var(--color-bg-light); |
|
} |
|
|
|
/* Optional category label above cover (see Molecules/Card) */ |
|
.article-list .card-header small { |
|
display: block; |
|
font-size: 0.72rem; |
|
font-weight: 600; |
|
letter-spacing: 0.05em; |
|
text-transform: uppercase; |
|
color: color-mix(in srgb, var(--color-text-mid) 55%, var(--color-bg) 45%); |
|
margin-bottom: 0.35rem; |
|
} |
|
|
|
.truncate { |
|
display: -webkit-box; |
|
-webkit-line-clamp: 3; /* limit to 3 lines */ |
|
line-clamp: 3; |
|
-webkit-box-orient: vertical; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
.card.bordered { |
|
border: 2px solid var(--color-border); |
|
} |
|
|
|
.card-header { |
|
margin: 10px 0; |
|
} |
|
|
|
.header__image { |
|
position: relative; |
|
width: 100%; |
|
overflow: hidden; /* Ensures any overflow is hidden */ |
|
} |
|
|
|
.header__image::before { |
|
content: ""; |
|
display: block; |
|
padding-top: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100 = 56.25%) */ |
|
} |
|
|
|
.header__image img { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; /* Ensures the image covers the entire area while maintaining its aspect ratio */ |
|
} |
|
|
|
.card-body { |
|
font-size: 1rem; |
|
} |
|
|
|
.card-footer { |
|
border-top: 1px solid var(--color-border); |
|
margin: 20px 0; |
|
} |
|
|
|
.header { |
|
text-align: center; |
|
z-index: 1000; /* Ensure it stays on top */ |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-around; |
|
align-items: center; |
|
background-color: var(--color-bg); /* Black background */ |
|
border-bottom: 1px solid var(--color-border); /* White bottom border */ |
|
} |
|
|
|
.header__categories ul { |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: center; |
|
align-items: center; |
|
gap: 0.4rem 0.6rem; |
|
padding: 0.35rem 0.5rem 0.5rem; |
|
margin: 0; |
|
} |
|
|
|
.header__categories li { |
|
list-style: none; |
|
} |
|
|
|
/* Top category row: current section + clear hover affordance (passive “clean” list → scannable) */ |
|
.header__cat-link { |
|
display: inline-flex; |
|
align-items: center; |
|
justify-content: center; |
|
box-sizing: border-box; |
|
padding: 0.4rem 0.75rem; |
|
font-family: var(--font-family), sans-serif; |
|
font-size: 0.82rem; |
|
font-weight: 600; |
|
letter-spacing: 0.04em; |
|
text-transform: uppercase; |
|
text-decoration: none; |
|
color: var(--color-text-mid); |
|
background: transparent; |
|
border: 1px solid transparent; |
|
border-radius: 5px; |
|
transition: |
|
color 0.16s ease, |
|
background-color 0.16s ease, |
|
border-color 0.16s ease, |
|
box-shadow 0.16s ease; |
|
} |
|
|
|
.header__cat-link:hover { |
|
text-decoration: none; |
|
color: var(--color-primary); |
|
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg) 92%); |
|
box-shadow: 0 2px 0 0 var(--color-secondary); |
|
} |
|
|
|
.header__cat-link:focus-visible { |
|
text-decoration: none; |
|
outline: 2px solid var(--color-focus-ring); |
|
outline-offset: 2px; |
|
} |
|
|
|
.header__cat-link--active { |
|
color: var(--color-primary); |
|
font-weight: 700; |
|
background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg) 86%); |
|
box-shadow: inset 0 -2px 0 0 var(--color-primary); |
|
} |
|
|
|
/* Strong CTA: “Latest Articles” (outline + fill when you’re on that list) */ |
|
.header__cat-link--cta { |
|
border-color: color-mix(in srgb, var(--color-secondary) 55%, var(--color-border) 45%); |
|
color: var(--color-secondary); |
|
background: color-mix(in srgb, var(--color-secondary) 7%, var(--color-bg) 93%); |
|
} |
|
|
|
.header__cat-link--cta:hover { |
|
color: var(--color-link-hover); |
|
background: color-mix(in srgb, var(--color-secondary) 14%, var(--color-bg) 86%); |
|
box-shadow: 0 2px 0 0 var(--color-secondary); |
|
} |
|
|
|
.header__cat-link--cta.header__cat-link--active { |
|
color: var(--color-text-contrast); |
|
background: var(--color-primary); |
|
border-color: var(--color-primary); |
|
font-weight: 700; |
|
box-shadow: none; |
|
} |
|
|
|
.header__logo h1 { |
|
font-weight: normal; |
|
margin: 0; |
|
} |
|
|
|
/* Long site name: one line with ellipsis on narrow viewports */ |
|
.brand__title { |
|
min-width: 0; |
|
} |
|
|
|
@media (max-width: 1024px) { |
|
.header__logo .brand { |
|
font-size: clamp(1rem, 4.2vw, 1.45rem); |
|
gap: 0.35rem; |
|
/* Tight line-height + overflow:hidden on .brand__title clip ascenders; keep room for type. */ |
|
line-height: 1.35; |
|
justify-content: flex-start; |
|
text-align: left; |
|
} |
|
|
|
.brand__title { |
|
flex: 1; |
|
min-width: 0; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
line-height: 1.35; |
|
/* Padding inside the clipping box so Lobster/serif caps aren’t sheared at the top */ |
|
padding: 0.2em 0 0.12em; |
|
} |
|
|
|
.header__logo-circle { |
|
width: 44px; |
|
height: 44px; |
|
} |
|
|
|
.hamburger { |
|
flex-shrink: 0; |
|
margin-left: 0; |
|
} |
|
|
|
.header__end { |
|
flex-shrink: 0; |
|
} |
|
} |
|
|
|
/* Fixed square + overflow clips to a true circle. Logo img is out-of-flow so |
|
global img { height: auto } cannot shrink the bitmap; object-fit fills the disc. |
|
Slight scale crops typical padding baked into square marketing PNGs. */ |
|
.header__logo-circle { |
|
display: inline-block; |
|
position: relative; |
|
width: 60px; |
|
height: 60px; |
|
flex-shrink: 0; |
|
border-radius: 50%; |
|
overflow: hidden; |
|
box-shadow: 0 0 0 1px var(--color-border); |
|
vertical-align: middle; |
|
} |
|
|
|
.header__logo-circle > img { |
|
position: absolute; |
|
inset: 0; |
|
width: 100%; |
|
height: 100%; |
|
max-width: none; |
|
object-fit: cover; |
|
object-position: center; |
|
display: block; |
|
transform: scale(1.18); |
|
transform-origin: center center; |
|
} |
|
|
|
.header__logo a:hover { |
|
text-decoration: none; |
|
} |
|
|
|
.header__user { |
|
position: relative; |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.header__avatar img { |
|
height: 40px; /* Adjust the avatar size as needed */ |
|
width: 40px; |
|
border-radius: 50%; |
|
cursor: pointer; |
|
} |
|
|
|
.header__dropdown { |
|
display: none; |
|
position: absolute; |
|
top: 50px; /* Adjust this depending on the header.html.twig height */ |
|
right: 0; |
|
background-color: var(--color-text); /* White dropdown */ |
|
border: 2px solid var(--color-bg); /* Black border */ |
|
list-style: none; |
|
padding: 10px 0; |
|
z-index: 1000; |
|
border-radius: 0; /* Sharp edges */ |
|
} |
|
|
|
.header__dropdown ul { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.header__dropdown li { |
|
padding: 10px 20px; |
|
} |
|
|
|
.header__dropdown li a { |
|
color: var(--color-bg); /* Black text */ |
|
text-decoration: none; |
|
} |
|
|
|
.header__dropdown li a:hover { |
|
background-color: var(--color-bg); /* Black background on hover */ |
|
color: var(--color-text); /* White text on hover */ |
|
display: block; |
|
} |
|
|
|
footer p { |
|
margin: 0; |
|
} |
|
|
|
footer a { |
|
color: var(--color-text-contrast); |
|
} |
|
|
|
/* Tags container */ |
|
.tags { |
|
margin: 10px 0; |
|
display: flex; |
|
flex-wrap: wrap; /* Allows tags to wrap to the next line if needed */ |
|
gap: 10px; /* Adds spacing between individual tags */ |
|
} |
|
|
|
/* Individual tag (spans on non-article pages, links on article body) */ |
|
a.tag, |
|
.tag { |
|
background-color: var(--color-bg-light); |
|
color: var(--color-text-mid); |
|
padding: 3px 6px; /* Padding around the tag text */ |
|
border-radius: 20px; /* Rounded corners (pill-shaped) */ |
|
font-size: 0.75em; /* Slightly smaller text */ |
|
cursor: pointer; /* Cursor turns to pointer for clickable tags */ |
|
text-decoration: none; /* Removes any text decoration (e.g., underline) */ |
|
display: inline-block; /* Makes sure each tag behaves like a block with padding */ |
|
transition: background-color 0.2s ease, color 0.2s ease; |
|
} |
|
|
|
a.tag:hover, |
|
a.tag:focus-visible { |
|
background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-light)); |
|
color: var(--color-primary); |
|
text-decoration: none; |
|
} |
|
|
|
/* Optional: Responsive adjustments for smaller screens */ |
|
@media (max-width: 768px) { |
|
.tag { |
|
font-size: 0.8em; /* Slightly smaller text for mobile */ |
|
} |
|
} |
|
|
|
.topic-page__title { |
|
font-size: 1.85rem; |
|
font-weight: 700; |
|
color: var(--color-primary); |
|
margin: 0 0 0.35rem; |
|
font-family: var(--heading-font), serif; |
|
} |
|
|
|
.topic-page__lede { |
|
margin: 0 0 1.5rem; |
|
font-size: 0.95rem; |
|
} |
|
|
|
|
|
|
|
.card.card__horizontal { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
h1 { |
|
font-size: 2rem; |
|
} |
|
|
|
.card-content { |
|
flex: 1; |
|
margin-right: 30px; |
|
padding: 0 8px; |
|
} |
|
|
|
.card-image img { |
|
width: 220px; |
|
max-height: 220px; |
|
object-fit: contain; |
|
} |
|
} |
|
|
|
.article__image img { |
|
margin: 1rem 0; |
|
width: 100%; |
|
} |
|
|
|
/* Author profile (/p/npub…): NIP-01 uses `picture`; large circular crop */ |
|
.author-profile { |
|
max-width: 40rem; |
|
margin: 0 auto; |
|
text-align: center; |
|
} |
|
|
|
.author-profile__avatar { |
|
position: relative; |
|
width: 8rem; |
|
height: 8rem; |
|
margin: 0 auto 1rem; |
|
border-radius: 50%; |
|
overflow: hidden; |
|
box-shadow: 0 0 0 2px var(--color-border); |
|
} |
|
|
|
.author-profile__avatar > img { |
|
position: absolute; |
|
inset: 0; |
|
width: 100%; |
|
height: 100%; |
|
max-width: none; |
|
object-fit: cover; |
|
object-position: center; |
|
display: block; |
|
} |
|
|
|
.author-profile__avatar--compact { |
|
width: 4rem; |
|
height: 4rem; |
|
margin-bottom: 0.75rem; |
|
} |
|
|
|
.author-profile__title { |
|
margin-top: 0.25em; |
|
font-family: var(--heading-font), serif; |
|
font-size: clamp(1.65rem, 3.2vw, 2.35rem); |
|
font-weight: 700; |
|
line-height: 1.12; |
|
color: var(--color-primary); |
|
} |
|
|
|
.author-profile__header-meta { |
|
margin-top: 0.5rem; |
|
max-width: min(100%, 40rem); |
|
width: 100%; |
|
margin-left: auto; |
|
margin-right: auto; |
|
text-align: left; |
|
} |
|
|
|
/* One main label (NIP-05, Payment) with values stacked in the next column */ |
|
.author-profile__section--label-value { |
|
display: grid; |
|
grid-template-columns: 7.5rem minmax(0, 1fr); |
|
column-gap: 0.5rem; |
|
align-items: start; |
|
margin-top: 0.5rem; |
|
} |
|
|
|
.author-profile__section-type { |
|
font-size: 0.72rem; |
|
font-weight: 600; |
|
text-transform: uppercase; |
|
letter-spacing: 0.04em; |
|
color: var(--color-text); |
|
opacity: 0.75; |
|
line-height: 1.35; |
|
padding-top: 0.15em; |
|
} |
|
|
|
.author-profile__value-stack { |
|
list-style: none; |
|
margin: 0; |
|
padding: 0; |
|
min-width: 0; |
|
} |
|
|
|
.author-profile__value-stack-line { |
|
margin: 0.35rem 0 0; |
|
} |
|
|
|
.author-profile__value-stack-line:first-child { |
|
margin-top: 0; |
|
} |
|
|
|
.author-profile__payments-nested { |
|
list-style: none; |
|
margin: 0; |
|
padding: 0; |
|
min-width: 0; |
|
} |
|
|
|
.author-profile__identity { |
|
list-style: none; |
|
margin: 0.5rem 0 0; |
|
padding: 0; |
|
} |
|
|
|
.author-profile__meta-line, |
|
.author-profile__identity-row, |
|
.author-profile__payment { |
|
display: grid; |
|
grid-template-columns: 7.5rem minmax(0, 1fr); |
|
column-gap: 0.5rem; |
|
align-items: center; |
|
margin: 0.35rem 0; |
|
font-size: 0.9rem; |
|
line-height: 1.35; |
|
} |
|
|
|
.author-profile__identity-type { |
|
font-size: 0.72rem; |
|
font-weight: 600; |
|
text-transform: uppercase; |
|
letter-spacing: 0.04em; |
|
color: var(--color-text); |
|
opacity: 0.75; |
|
} |
|
|
|
.author-profile__meta-value, |
|
.author-profile__identity-link, |
|
.author-profile__payment-addr { |
|
min-width: 0; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
} |
|
|
|
.author-profile__payment-value { |
|
display: flex; |
|
align-items: center; |
|
gap: 0.4rem; |
|
min-width: 0; |
|
max-width: 100%; |
|
} |
|
|
|
.author-profile__payment-addr { |
|
flex: 1 1 auto; |
|
color: inherit; |
|
text-decoration: none; |
|
} |
|
|
|
.author-profile__copy-btn { |
|
flex-shrink: 0; |
|
font-size: 0.75rem; |
|
padding: 0.2rem 0.5rem; |
|
line-height: 1.2; |
|
} |
|
|
|
/* NIP-05: ellipsis long addresses; keep ✓ immediately after the (truncated) text, not at the column edge. */ |
|
.author-profile__nip05-value { |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-start; |
|
flex-wrap: nowrap; |
|
gap: 0.25rem; |
|
min-width: 0; |
|
max-width: 100%; |
|
width: 100%; |
|
} |
|
|
|
.author-profile__nip05-link { |
|
flex: 0 1 auto; |
|
min-width: 0; |
|
/* reserve space for the checkmark on the same “line” of layout */ |
|
max-width: calc(100% - 1.4rem); |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
word-break: normal; |
|
} |
|
|
|
.author-profile__nip05-verified { |
|
color: #2e7d32; |
|
font-size: 0.88em; |
|
font-weight: 600; |
|
line-height: 1; |
|
opacity: 0.85; |
|
user-select: none; |
|
flex-shrink: 0; |
|
flex-grow: 0; |
|
} |
|
|
|
.author-profile__payment-type { |
|
font-size: 0.72rem; |
|
font-weight: 600; |
|
text-transform: uppercase; |
|
letter-spacing: 0.04em; |
|
color: var(--color-text); |
|
opacity: 0.75; |
|
} |
|
|
|
.author-profile__jumble { |
|
margin: 1rem 0 0; |
|
text-align: center; |
|
} |
|
|
|
.author-profile__about { |
|
text-align: left; |
|
margin-top: 1rem; |
|
} |
|
|
|
.author-profile__divider { |
|
margin: 2rem 0; |
|
} |
|
|
|
.badge { |
|
background-color: var(--color-primary); |
|
color: var(--color-bg); |
|
padding: 3px 8px; |
|
border-radius: 20px; |
|
font-family: var(--font-family), sans-serif; |
|
font-weight: bold; |
|
font-size: 0.65em; |
|
text-transform: uppercase; |
|
margin-right: 5px; |
|
vertical-align: super; |
|
} |
|
|
|
.badge.badge__secondary { |
|
background-color: var(--color-secondary); |
|
} |
|
|
|
/* Author link + small Nostr profile picture (NIP-01 `picture`) */ |
|
.user-badge { |
|
display: inline-flex; |
|
align-items: center; |
|
gap: 0.4em; |
|
vertical-align: middle; |
|
text-decoration: none; |
|
} |
|
|
|
.user-badge:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
.user-badge__avatar { |
|
display: inline-block; |
|
width: 1.75rem; |
|
height: 1.75rem; |
|
border-radius: 50%; |
|
overflow: hidden; |
|
flex-shrink: 0; |
|
box-shadow: 0 0 0 1px var(--color-border); |
|
} |
|
|
|
.user-badge__avatar--wrap { |
|
position: relative; |
|
vertical-align: middle; |
|
} |
|
|
|
.user-badge__avatar-img { |
|
position: relative; |
|
z-index: 1; |
|
width: 100%; |
|
height: 100%; |
|
max-width: 100%; |
|
max-height: 100%; |
|
object-fit: cover; |
|
object-position: center; |
|
display: block; |
|
border-radius: 50%; |
|
} |
|
|
|
.user-badge__avatar-img.is-broken { |
|
display: none; |
|
} |
|
|
|
.user-badge__avatar-fallback { |
|
position: absolute; |
|
inset: 0; |
|
z-index: 0; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border-radius: 50%; |
|
overflow: hidden; |
|
} |
|
|
|
.user-badge__avatar--generated .pubkey-avatar-svg, |
|
.user-badge__avatar-fallback .pubkey-avatar-svg { |
|
width: 100%; |
|
height: 100%; |
|
display: block; |
|
} |
|
|
|
.user-badge__name { |
|
line-height: 1.2; |
|
} |
|
|
|
.avatar { |
|
width: 24px; /* Adjust the size as needed */ |
|
height: 24px; /* Adjust the size as needed */ |
|
border-radius: 50%; /* Makes the image circular */ |
|
object-fit: cover; /* Ensures the image scales correctly */ |
|
display: inline-block; |
|
vertical-align: middle; |
|
} |
|
|
|
.alert { |
|
padding: 10px 20px; /* Padding around the text */ |
|
border-radius: 5px; /* Rounded corners */ |
|
margin: 20px 0; /* Spacing around the alert */ |
|
} |
|
|
|
.alert.alert-success { |
|
background-color: var(--color-secondary); |
|
color: var(--color-text-contrast); |
|
} |
|
|
|
/* Tabs Container */ |
|
.nav-tabs { |
|
display: flex; /* Arrange items in a row */ |
|
justify-content: center; |
|
padding: 0; /* Remove padding */ |
|
margin: 0; /* Remove margin */ |
|
list-style: none; /* Remove list item styling */ |
|
} |
|
|
|
/* Individual Tab Item */ |
|
.nav-tabs .nav-item { |
|
margin: 0; /* No margin around list items */ |
|
} |
|
|
|
/* NON-Active Tab */ |
|
.nav-tabs .nav-link { |
|
color: var(--color-text); |
|
background-color: transparent; |
|
border: none; |
|
} |
|
|
|
|
|
/* Active Tab */ |
|
.nav-tabs .nav-link.active { |
|
color: var(--color-text-contrast); |
|
background-color: var(--color-primary); |
|
font-weight: bold; |
|
} |
|
|
|
/* Content Container */ |
|
.tab-content { |
|
padding: 15px; /* Spacing inside the content */ |
|
border-top: none; /* Remove border overlap with active tab */ |
|
} |
|
|
|
/* Quill editor */ |
|
#editor { |
|
height: 400px; |
|
margin-bottom: 20px; |
|
} |
|
|
|
/* Search */ |
|
label.search { |
|
width: 100%; |
|
justify-content: center; |
|
margin-bottom: 15px; |
|
} |
|
|
|
/* Shared layout / theme utilities (replaces Bootstrap-only classes where removed) */ |
|
.text-subtle { |
|
color: var(--color-text-mid); |
|
} |
|
|
|
.text-muted { |
|
color: var(--color-text-mid); |
|
} |
|
|
|
.text-center { |
|
text-align: center; |
|
} |
|
|
|
.my-2 { |
|
margin-top: 0.5rem; |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
.mt-2 { |
|
margin-top: 0.5rem; |
|
} |
|
|
|
.ms-2 { |
|
margin-left: 0.5rem; |
|
} |
|
|
|
.nostr-card-header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
gap: 0.5rem; |
|
} |
|
|
|
.nostr-card-header__actions { |
|
display: inline-flex; |
|
align-items: center; |
|
gap: 0.4rem; |
|
flex-wrap: wrap; |
|
justify-content: flex-end; |
|
} |
|
|
|
.ui-badge { |
|
display: inline-block; |
|
padding: 0.2rem 0.55rem; |
|
font-size: 0.75rem; |
|
font-weight: 600; |
|
line-height: 1.2; |
|
border-radius: 4px; |
|
letter-spacing: 0.02em; |
|
} |
|
|
|
.ui-badge--brand { |
|
background-color: var(--brand-color); |
|
color: var(--color-text-contrast); |
|
} |
|
|
|
.ui-badge--primary { |
|
background-color: var(--color-primary); |
|
color: var(--color-text-contrast); |
|
} |
|
|
|
.ui-badge--secondary { |
|
background-color: var(--color-secondary); |
|
color: var(--color-text-contrast); |
|
} |
|
|
|
.ui-badge--neutral { |
|
background-color: var(--color-bg-light); |
|
color: var(--color-text); |
|
border: 1px solid var(--color-border); |
|
} |
|
|
|
.alert.alert-warning { |
|
background-color: var(--color-bg-light); |
|
color: var(--color-text); |
|
border: 1px solid var(--color-border); |
|
} |
|
|
|
a:focus-visible { |
|
outline: 2px solid var(--color-focus-ring); |
|
outline-offset: 2px; |
|
} |
|
|
|
@media (max-width: 600px) { |
|
.header__logo .brand { |
|
font-size: clamp(0.95rem, 4.8vw, 1.25rem); |
|
} |
|
|
|
.header__logo-circle { |
|
width: 40px; |
|
height: 40px; |
|
} |
|
} |
|
|
|
.pager { |
|
margin-top: 1.25rem; |
|
width: 100%; |
|
box-sizing: border-box; |
|
} |
|
|
|
.pager__inner { |
|
width: 100%; |
|
max-width: 100%; |
|
box-sizing: border-box; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
gap: 0.75rem; |
|
padding: 0.5rem 0.75rem; |
|
border: 1px solid var(--color-border); |
|
background: var(--color-bg-light); |
|
} |
|
|
|
.pager__status { |
|
flex: 1 1 auto; |
|
min-width: 0; |
|
text-align: center; |
|
} |
|
|
|
.pager__btn { |
|
min-width: 6.5rem; |
|
text-align: center; |
|
} |
|
|
|
.pager__btn.is-disabled { |
|
opacity: 0.55; |
|
pointer-events: none; |
|
} |
|
|
|
@media (max-width: 640px) { |
|
.pager__inner { |
|
gap: 0.5rem; |
|
} |
|
.pager__btn { |
|
min-width: 5.25rem; |
|
} |
|
.pager__status { |
|
font-size: 0.92rem; |
|
} |
|
}
|
|
|