|
|
|
@ -45,19 +45,18 @@ body { |
|
|
|
flex-direction: column; |
|
|
|
flex-direction: column; |
|
|
|
margin: 0; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
padding: 0; |
|
|
|
padding-top: 80px; /* Space for fixed header */ |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Skip link for accessibility */ |
|
|
|
/* Skip link for accessibility */ |
|
|
|
.skip-link { |
|
|
|
.skip-link { |
|
|
|
position: fixed; |
|
|
|
position: absolute; |
|
|
|
top: -40px; |
|
|
|
top: -40px; |
|
|
|
left: 0; |
|
|
|
left: 0; |
|
|
|
background: var(--accent-color); |
|
|
|
background: var(--accent-color); |
|
|
|
color: var(--bg-primary); |
|
|
|
color: var(--bg-primary); |
|
|
|
padding: 8px; |
|
|
|
padding: 8px; |
|
|
|
text-decoration: none; |
|
|
|
text-decoration: none; |
|
|
|
z-index: 1001; /* Above fixed header */ |
|
|
|
z-index: 1001; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.skip-link:focus { |
|
|
|
.skip-link:focus { |
|
|
|
@ -68,16 +67,10 @@ body { |
|
|
|
header { |
|
|
|
header { |
|
|
|
background-color: var(--bg-secondary); |
|
|
|
background-color: var(--bg-secondary); |
|
|
|
border-bottom: 1px solid var(--border-color); |
|
|
|
border-bottom: 1px solid var(--border-color); |
|
|
|
position: fixed; |
|
|
|
|
|
|
|
top: 0; |
|
|
|
|
|
|
|
left: 0; |
|
|
|
|
|
|
|
right: 0; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
z-index: 1000; |
|
|
|
|
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
|
margin: 0; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
padding: 0; |
|
|
|
will-change: transform; /* Optimize for fixed positioning */ |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.navbar { |
|
|
|
.navbar { |
|
|
|
@ -130,6 +123,8 @@ header { |
|
|
|
margin: 0; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
padding: 0; |
|
|
|
list-style: none; |
|
|
|
list-style: none; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nav-menu a { |
|
|
|
.nav-menu a { |
|
|
|
@ -140,6 +135,7 @@ header { |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
gap: 0.5rem; |
|
|
|
gap: 0.5rem; |
|
|
|
padding: 0.5rem 0; |
|
|
|
padding: 0.5rem 0; |
|
|
|
|
|
|
|
line-height: 1.2; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nav-menu a:hover { |
|
|
|
.nav-menu a:hover { |
|
|
|
@ -357,12 +353,12 @@ a:focus { |
|
|
|
display: inline-block; |
|
|
|
display: inline-block; |
|
|
|
padding: 0.75rem 1.5rem; |
|
|
|
padding: 0.75rem 1.5rem; |
|
|
|
background: var(--accent-color); |
|
|
|
background: var(--accent-color); |
|
|
|
color: var(--bg-primary); |
|
|
|
color: #ffffff; |
|
|
|
border: none; |
|
|
|
border: none; |
|
|
|
border-radius: 4px; |
|
|
|
border-radius: 4px; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
text-decoration: none; |
|
|
|
text-decoration: none; |
|
|
|
font-weight: 500; |
|
|
|
font-weight: 600; |
|
|
|
transition: background 0.2s; |
|
|
|
transition: background 0.2s; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -384,6 +380,144 @@ a:focus { |
|
|
|
outline-offset: var(--focus-offset); |
|
|
|
outline-offset: var(--focus-offset); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Landing Page Styles */ |
|
|
|
|
|
|
|
.landing-page { |
|
|
|
|
|
|
|
max-width: 1200px; |
|
|
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
padding: 2rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.landing-page .hero { |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
margin-bottom: 3rem; |
|
|
|
|
|
|
|
padding: 2rem 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.landing-page .hero h1 { |
|
|
|
|
|
|
|
font-size: 2.5rem; |
|
|
|
|
|
|
|
margin-bottom: 1rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.landing-page .hero .lead { |
|
|
|
|
|
|
|
font-size: 1.25rem; |
|
|
|
|
|
|
|
color: var(--text-secondary); |
|
|
|
|
|
|
|
max-width: 600px; |
|
|
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.landing-page .feed-section { |
|
|
|
|
|
|
|
margin: 2rem 0; |
|
|
|
|
|
|
|
max-width: 100%; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.landing-page .feed-section .feed-container { |
|
|
|
|
|
|
|
max-width: 100%; |
|
|
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.landing-page .features { |
|
|
|
|
|
|
|
margin-top: 3rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.landing-page .features h2 { |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
margin-bottom: 2rem; |
|
|
|
|
|
|
|
font-size: 2rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feature-grid { |
|
|
|
|
|
|
|
display: grid; |
|
|
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
|
|
|
|
|
|
|
gap: 2rem; |
|
|
|
|
|
|
|
margin-top: 2rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feature-card { |
|
|
|
|
|
|
|
background: var(--bg-secondary); |
|
|
|
|
|
|
|
padding: 2rem; |
|
|
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
|
|
border: 1px solid var(--border-color); |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feature-card h3 { |
|
|
|
|
|
|
|
margin-bottom: 1rem; |
|
|
|
|
|
|
|
font-size: 1.25rem; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
gap: 0.5rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feature-card p { |
|
|
|
|
|
|
|
margin-bottom: 1.5rem; |
|
|
|
|
|
|
|
color: var(--text-secondary); |
|
|
|
|
|
|
|
flex-grow: 1; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feature-card ul { |
|
|
|
|
|
|
|
list-style: none; |
|
|
|
|
|
|
|
margin: 0; |
|
|
|
|
|
|
|
padding: 0; |
|
|
|
|
|
|
|
margin-bottom: 1.5rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feature-card ul li { |
|
|
|
|
|
|
|
margin-bottom: 0.5rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feature-card ul li a { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
gap: 0.5rem; |
|
|
|
|
|
|
|
color: var(--link-color); |
|
|
|
|
|
|
|
text-decoration: none; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feature-card ul li a:hover { |
|
|
|
|
|
|
|
color: var(--link-hover); |
|
|
|
|
|
|
|
text-decoration: underline; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Wiki Links Grid */ |
|
|
|
|
|
|
|
.feature-card .wiki-links { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
gap: 0.75rem; |
|
|
|
|
|
|
|
margin-bottom: 1.5rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feature-card .wiki-link { |
|
|
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
|
|
padding: 0.5rem 1rem; |
|
|
|
|
|
|
|
background: var(--bg-primary); |
|
|
|
|
|
|
|
color: var(--text-primary); |
|
|
|
|
|
|
|
text-decoration: none; |
|
|
|
|
|
|
|
border-radius: 6px; |
|
|
|
|
|
|
|
border: 1px solid var(--border-color); |
|
|
|
|
|
|
|
font-size: 0.9rem; |
|
|
|
|
|
|
|
transition: all 0.2s; |
|
|
|
|
|
|
|
white-space: nowrap; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feature-card .wiki-link:hover { |
|
|
|
|
|
|
|
background: var(--accent-color); |
|
|
|
|
|
|
|
color: #ffffff; |
|
|
|
|
|
|
|
border-color: var(--accent-color); |
|
|
|
|
|
|
|
transform: translateY(-1px); |
|
|
|
|
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feature-card .wiki-link:focus-visible { |
|
|
|
|
|
|
|
outline: var(--focus-outline); |
|
|
|
|
|
|
|
outline-offset: var(--focus-offset); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feature-card .btn { |
|
|
|
|
|
|
|
margin-top: auto; |
|
|
|
|
|
|
|
align-self: flex-start; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Articles and Pages */ |
|
|
|
/* Articles and Pages */ |
|
|
|
article { |
|
|
|
article { |
|
|
|
background: var(--bg-secondary); |
|
|
|
background: var(--bg-secondary); |
|
|
|
@ -818,6 +952,136 @@ textarea:focus-visible { |
|
|
|
padding: 2rem; |
|
|
|
padding: 2rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.contact-links { |
|
|
|
|
|
|
|
margin-bottom: 2rem; |
|
|
|
|
|
|
|
padding: 1rem; |
|
|
|
|
|
|
|
background: var(--bg-secondary); |
|
|
|
|
|
|
|
border: 1px solid var(--border-color); |
|
|
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.contact-links h2 { |
|
|
|
|
|
|
|
margin-top: 0; |
|
|
|
|
|
|
|
margin-bottom: 1rem; |
|
|
|
|
|
|
|
font-size: 1.2rem; |
|
|
|
|
|
|
|
color: var(--text-primary); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.contact-links ul { |
|
|
|
|
|
|
|
list-style: none; |
|
|
|
|
|
|
|
padding: 0; |
|
|
|
|
|
|
|
margin: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.contact-links li { |
|
|
|
|
|
|
|
margin-bottom: 0.5rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.contact-links a { |
|
|
|
|
|
|
|
color: var(--link-color); |
|
|
|
|
|
|
|
text-decoration: none; |
|
|
|
|
|
|
|
display: inline-flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
gap: 0.5rem; |
|
|
|
|
|
|
|
transition: color 0.2s; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.contact-links a:hover { |
|
|
|
|
|
|
|
color: var(--link-hover); |
|
|
|
|
|
|
|
text-decoration: underline; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.contact-links a:focus-visible { |
|
|
|
|
|
|
|
outline: var(--focus-outline); |
|
|
|
|
|
|
|
outline-offset: var(--focus-offset); |
|
|
|
|
|
|
|
border-radius: 2px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nostr-profile { |
|
|
|
|
|
|
|
margin-bottom: 2rem; |
|
|
|
|
|
|
|
padding: 1rem; |
|
|
|
|
|
|
|
background: var(--bg-secondary); |
|
|
|
|
|
|
|
border: 1px solid var(--border-color); |
|
|
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nostr-profile h2 { |
|
|
|
|
|
|
|
margin-top: 0; |
|
|
|
|
|
|
|
margin-bottom: 1rem; |
|
|
|
|
|
|
|
font-size: 1.2rem; |
|
|
|
|
|
|
|
color: var(--text-primary); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nostr-profile-content { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
gap: 1rem; |
|
|
|
|
|
|
|
align-items: flex-start; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nostr-profile-picture { |
|
|
|
|
|
|
|
width: 80px; |
|
|
|
|
|
|
|
height: 80px; |
|
|
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
|
|
object-fit: cover; |
|
|
|
|
|
|
|
border: 2px solid var(--border-color); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nostr-profile-info { |
|
|
|
|
|
|
|
flex: 1; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nostr-profile-info h3 { |
|
|
|
|
|
|
|
margin: 0 0 0.5rem 0; |
|
|
|
|
|
|
|
font-size: 1.1rem; |
|
|
|
|
|
|
|
color: var(--text-primary); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nostr-profile-name { |
|
|
|
|
|
|
|
margin: 0 0 0.5rem 0; |
|
|
|
|
|
|
|
color: var(--text-secondary); |
|
|
|
|
|
|
|
font-size: 0.9rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nostr-profile-about { |
|
|
|
|
|
|
|
margin: 0 0 0.5rem 0; |
|
|
|
|
|
|
|
color: var(--text-primary); |
|
|
|
|
|
|
|
white-space: pre-wrap; |
|
|
|
|
|
|
|
line-height: 1.6; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nostr-profile-website { |
|
|
|
|
|
|
|
margin: 0.5rem 0 0 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nostr-profile-website a { |
|
|
|
|
|
|
|
color: var(--link-color); |
|
|
|
|
|
|
|
text-decoration: none; |
|
|
|
|
|
|
|
display: inline-flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
gap: 0.5rem; |
|
|
|
|
|
|
|
transition: color 0.2s; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nostr-profile-website a:hover { |
|
|
|
|
|
|
|
color: var(--link-hover); |
|
|
|
|
|
|
|
text-decoration: underline; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nostr-profile-website a:focus-visible { |
|
|
|
|
|
|
|
outline: var(--focus-outline); |
|
|
|
|
|
|
|
outline-offset: var(--focus-offset); |
|
|
|
|
|
|
|
border-radius: 2px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nostr-profile-nip05 { |
|
|
|
|
|
|
|
margin: 0.5rem 0 0 0; |
|
|
|
|
|
|
|
color: var(--text-secondary); |
|
|
|
|
|
|
|
font-size: 0.9rem; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
gap: 0.5rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.contact-form { |
|
|
|
.contact-form { |
|
|
|
margin-top: 2rem; |
|
|
|
margin-top: 2rem; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -896,7 +1160,7 @@ textarea:focus-visible { |
|
|
|
|
|
|
|
|
|
|
|
.btn-primary { |
|
|
|
.btn-primary { |
|
|
|
background: var(--accent-color); |
|
|
|
background: var(--accent-color); |
|
|
|
color: var(--bg-primary); |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn-primary:hover { |
|
|
|
.btn-primary:hover { |
|
|
|
@ -1034,7 +1298,9 @@ textarea:focus-visible { |
|
|
|
|
|
|
|
|
|
|
|
/* Icon styles for Lucide icons */ |
|
|
|
/* Icon styles for Lucide icons */ |
|
|
|
.icon-inline { |
|
|
|
.icon-inline { |
|
|
|
display: inline-block; |
|
|
|
display: inline-flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
width: 1em; |
|
|
|
width: 1em; |
|
|
|
height: 1em; |
|
|
|
height: 1em; |
|
|
|
vertical-align: middle; |
|
|
|
vertical-align: middle; |
|
|
|
@ -1042,6 +1308,12 @@ textarea:focus-visible { |
|
|
|
flex-shrink: 0; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nav-menu .icon-inline { |
|
|
|
|
|
|
|
margin-right: 0; |
|
|
|
|
|
|
|
width: 1.2em; |
|
|
|
|
|
|
|
height: 1.2em; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* User Badge Styles */ |
|
|
|
/* User Badge Styles */ |
|
|
|
.user-badge { |
|
|
|
.user-badge { |
|
|
|
display: inline-flex; |
|
|
|
display: inline-flex; |
|
|
|
@ -1106,8 +1378,9 @@ p.icon-inline, h1.icon-inline, h2.icon-inline, h3.icon-inline, h4.icon-inline, h |
|
|
|
display: inline-flex; |
|
|
|
display: inline-flex; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Navigation links should be flex */ |
|
|
|
/* Navigation links should be flex with proper alignment */ |
|
|
|
.nav-menu a, .dropdown-menu a, .wiki-menu a { |
|
|
|
.nav-menu a, .dropdown-menu a, .wiki-menu a { |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
display: inline-flex; |
|
|
|
display: inline-flex; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
gap: 0.5rem; |
|
|
|
gap: 0.5rem; |
|
|
|
|