Nuša Pukšič
3 months ago
44 changed files with 1613 additions and 703 deletions
@ -0,0 +1,13 @@ |
|||||||
|
/** |
||||||
|
* Base Reset |
||||||
|
* Minimal reset and base element styles |
||||||
|
*/ |
||||||
|
|
||||||
|
* { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
/** |
||||||
|
* Spacing System |
||||||
|
* Define consistent spacing variables based on an 8px base unit |
||||||
|
* This creates a predictable rhythm across the entire application |
||||||
|
*/ |
||||||
|
|
||||||
|
:root { |
||||||
|
/* Base spacing unit: 8px */ |
||||||
|
--spacing-base: 0.5rem; /* 8px */ |
||||||
|
|
||||||
|
/* Spacing scale (multiples of base unit) */ |
||||||
|
--spacing-0: 0; |
||||||
|
--spacing-1: 0.25rem; /* 4px - micro spacing */ |
||||||
|
--spacing-2: 0.5rem; /* 8px - small spacing */ |
||||||
|
--spacing-3: 1rem; /* 16px - medium spacing */ |
||||||
|
--spacing-4: 1.5rem; /* 24px - large spacing */ |
||||||
|
--spacing-5: 2rem; /* 32px - xl spacing */ |
||||||
|
--spacing-6: 3rem; /* 48px - xxl spacing */ |
||||||
|
--spacing-7: 4rem; /* 64px - huge spacing */ |
||||||
|
--spacing-8: 6rem; /* 96px - massive spacing */ |
||||||
|
|
||||||
|
/* Common use-case aliases */ |
||||||
|
--spacing-xs: var(--spacing-1); |
||||||
|
--spacing-sm: var(--spacing-2); |
||||||
|
--spacing-md: var(--spacing-3); |
||||||
|
--spacing-lg: var(--spacing-4); |
||||||
|
--spacing-xl: var(--spacing-5); |
||||||
|
--spacing-2xl: var(--spacing-6); |
||||||
|
--spacing-3xl: var(--spacing-7); |
||||||
|
--spacing-4xl: var(--spacing-8); |
||||||
|
|
||||||
|
/* Component-specific spacing */ |
||||||
|
--button-padding-y: var(--spacing-2); |
||||||
|
--button-padding-x: var(--spacing-4); |
||||||
|
--card-padding: var(--spacing-4); |
||||||
|
--input-padding: var(--spacing-2); |
||||||
|
--section-spacing: var(--spacing-6); |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,145 @@ |
|||||||
|
/** |
||||||
|
* Typography Styles |
||||||
|
* Base typography including headings, paragraphs, links, and text utilities |
||||||
|
*/ |
||||||
|
|
||||||
|
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; |
||||||
|
} |
||||||
|
|
||||||
|
/* Headings */ |
||||||
|
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; |
||||||
|
color: var(--color-primary); |
||||||
|
font-size: 3.2rem; |
||||||
|
} |
||||||
|
|
||||||
|
h1.brand a { |
||||||
|
color: var(--brand-color); |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
h1.brand a:hover { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
h1:not(.brand) > a:hover { |
||||||
|
text-decoration: none; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
font-size: 2.2rem; |
||||||
|
} |
||||||
|
|
||||||
|
h2.brand { |
||||||
|
font-family: var(--brand-font), serif; |
||||||
|
color: var(--color-primary); |
||||||
|
} |
||||||
|
|
||||||
|
h3 { |
||||||
|
font-size: 2rem; |
||||||
|
} |
||||||
|
|
||||||
|
h4 { |
||||||
|
font-size: 1.9rem; |
||||||
|
} |
||||||
|
|
||||||
|
h5 { |
||||||
|
font-size: 1.75rem; |
||||||
|
} |
||||||
|
|
||||||
|
h6 { |
||||||
|
font-size: 1.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
/* Sidebar heading overrides */ |
||||||
|
aside h1 { |
||||||
|
font-size: 1.2rem; |
||||||
|
} |
||||||
|
|
||||||
|
aside h2 { |
||||||
|
font-size: 1.1rem; |
||||||
|
} |
||||||
|
|
||||||
|
aside p.lede { |
||||||
|
font-size: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
/* Paragraphs and text */ |
||||||
|
p { |
||||||
|
margin: 0 0 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.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); |
||||||
|
} |
||||||
|
|
||||||
|
/* Links */ |
||||||
|
a { |
||||||
|
color: var(--color-secondary); |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
a:hover { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
/* Images and icons */ |
||||||
|
img { |
||||||
|
max-width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
svg.icon { |
||||||
|
width: 2em; |
||||||
|
height: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
/* Utility classes */ |
||||||
|
.hidden { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.divider { |
||||||
|
border: 2px solid var(--color-primary); |
||||||
|
margin: 20px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.truncate { |
||||||
|
display: -webkit-box; |
||||||
|
-webkit-line-clamp: 3; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
@ -0,0 +1,175 @@ |
|||||||
|
/** |
||||||
|
* Header Component |
||||||
|
* Main site header with navigation categories |
||||||
|
*/ |
||||||
|
|
||||||
|
.header { |
||||||
|
text-align: center; |
||||||
|
z-index: 1000; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
background-color: var(--color-bg); |
||||||
|
border-bottom: 1px solid var(--color-border); |
||||||
|
} |
||||||
|
|
||||||
|
.header .container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.header__categories ul { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: center; |
||||||
|
gap: 20px; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.header__categories li { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.header__categories li a:hover { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
/** |
||||||
|
* Shared Card Styles |
||||||
|
* Styles that are used across different card types in the app |
||||||
|
*/ |
||||||
|
|
||||||
|
.card { |
||||||
|
background-color: var(--color-bg); |
||||||
|
color: var(--color-text); |
||||||
|
padding: 0; |
||||||
|
margin: 0 0 2rem 0; |
||||||
|
border-radius: 0; /* Sharp edges */ |
||||||
|
} |
||||||
|
|
||||||
|
.card a:hover { |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text); |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.card a:hover h2 { |
||||||
|
color: var(--color-text); |
||||||
|
} |
||||||
|
|
||||||
|
.card.bordered { |
||||||
|
border: 2px solid var(--color-border); |
||||||
|
} |
||||||
|
|
||||||
|
.card-header { |
||||||
|
margin: 10px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.header__image { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.header__image::before { |
||||||
|
content: ""; |
||||||
|
display: block; |
||||||
|
padding-top: 56.25%; /* 16:9 aspect ratio */ |
||||||
|
} |
||||||
|
|
||||||
|
.header__image img { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
|
||||||
|
.card-body { |
||||||
|
font-size: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.card-footer { |
||||||
|
border-top: 1px solid var(--color-border); |
||||||
|
margin: 20px 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* Featured cards layout */ |
||||||
|
.featured-cat { |
||||||
|
border-bottom: 2px solid var(--color-border); |
||||||
|
padding-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.featured-list { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.featured-list > * { |
||||||
|
box-sizing: border-box; |
||||||
|
margin-bottom: 10px; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
div:nth-child(odd) .featured-list { |
||||||
|
flex-direction: row-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
.featured-list div:first-child { |
||||||
|
flex: 0 0 66%; |
||||||
|
} |
||||||
|
|
||||||
|
.featured-list div:last-child { |
||||||
|
flex: 0 0 34%; |
||||||
|
} |
||||||
|
|
||||||
|
.featured-list h2.card-title { |
||||||
|
font-size: 1.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
.featured-list p.lede { |
||||||
|
font-size: 1.4rem; |
||||||
|
} |
||||||
|
|
||||||
|
.featured-list .card { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.featured-list .card:not(:last-child) { |
||||||
|
border-bottom: 1px solid var(--color-border); |
||||||
|
} |
||||||
|
|
||||||
|
/* Article list cards */ |
||||||
|
.article-list .metadata { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: baseline; |
||||||
|
} |
||||||
|
|
||||||
|
.article-list .metadata p { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* Responsive adjustments */ |
||||||
|
@media (max-width: 1024px) { |
||||||
|
.featured-list { |
||||||
|
flex-direction: column !important; |
||||||
|
} |
||||||
|
|
||||||
|
.featured-list .card-header { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.featured-list .card { |
||||||
|
border-bottom: 1px solid var(--color-border) !important; |
||||||
|
} |
||||||
|
|
||||||
|
.featured-list > * { |
||||||
|
margin-bottom: 10px; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -1,9 +1,13 @@ |
|||||||
|
/** |
||||||
|
* Button Component |
||||||
|
* Primary button styles and variants |
||||||
|
*/ |
||||||
|
|
||||||
button, .btn, a.btn { |
button, .btn, a.btn { |
||||||
background-color: var(--color-primary); |
background-color: var(--color-primary); |
||||||
color: var(--color-text-contrast); |
color: var(--color-text-contrast); |
||||||
border: 2px solid var(--color-primary); |
border: 2px solid var(--color-primary); |
||||||
padding: 10px 20px; |
padding: var(--button-padding-y) var(--button-padding-x); |
||||||
text-transform: uppercase; |
text-transform: uppercase; |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
/* Image Upload Dialog Styles */ |
||||||
|
.iu-dialog { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.iu-dialog.active { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.iu-backdrop { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||||
|
z-index: 1000; |
||||||
|
} |
||||||
|
|
||||||
|
.iu-modal { |
||||||
|
position: fixed; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
background-color: var(--color-bg, #fff); |
||||||
|
border-radius: 0.5rem; |
||||||
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); |
||||||
|
max-width: 90%; |
||||||
|
width: 500px; |
||||||
|
max-height: 90vh; |
||||||
|
overflow-y: auto; |
||||||
|
z-index: 1001; |
||||||
|
} |
||||||
|
|
||||||
|
.iu-modal .modal-header { |
||||||
|
padding: var(--spacing-3); |
||||||
|
border-bottom: 1px solid var(--color-border, #dee2e6); |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.iu-modal .modal-header h5 { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.iu-modal .modal-header .close { |
||||||
|
background: none; |
||||||
|
border: none; |
||||||
|
font-size: 1.5rem; |
||||||
|
cursor: pointer; |
||||||
|
color: var(--color-text); |
||||||
|
} |
||||||
|
|
||||||
|
.iu-modal .modal-body { |
||||||
|
padding: var(--spacing-3); |
||||||
|
} |
||||||
|
|
||||||
|
.iu-modal .modal-body > div { |
||||||
|
margin-bottom: var(--spacing-3); |
||||||
|
} |
||||||
|
|
||||||
|
.upload-area { |
||||||
|
border: 2px dashed #ccc; |
||||||
|
padding: var(--spacing-5); |
||||||
|
text-align: center; |
||||||
|
cursor: pointer; |
||||||
|
min-height: 4em; |
||||||
|
border-radius: 0.25rem; |
||||||
|
transition: border-color 0.2s; |
||||||
|
} |
||||||
|
|
||||||
|
.upload-area:hover { |
||||||
|
border-color: var(--color-primary, #007bff); |
||||||
|
} |
||||||
|
|
||||||
|
.upload-area input[type="file"] { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.upload-progress { |
||||||
|
display: none; |
||||||
|
margin-top: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
.upload-progress.active { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.upload-error { |
||||||
|
color: red; |
||||||
|
margin-top: 1em; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.upload-error.active { |
||||||
|
display: block; |
||||||
|
} |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
/** |
||||||
|
* Nostr Previews Component |
||||||
|
* Styles for Nostr event and profile preview cards |
||||||
|
* Converted from SCSS to plain CSS |
||||||
|
*/ |
||||||
|
|
||||||
|
.nostr-preview { |
||||||
|
margin-top: var(--spacing-2); |
||||||
|
} |
||||||
|
|
||||||
|
.nostr-preview .nostr-event-preview, |
||||||
|
.nostr-preview .nostr-profile-preview { |
||||||
|
border-left: 3px solid #6c5ce7; |
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
||||||
|
} |
||||||
|
|
||||||
|
.nostr-preview .nostr-profile-preview { |
||||||
|
border-left-color: #00b894; |
||||||
|
} |
||||||
|
|
||||||
|
.nostr-preview .card-title { |
||||||
|
margin-bottom: var(--spacing-2); |
||||||
|
font-size: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.nostr-preview .card-text { |
||||||
|
font-size: 0.9rem; |
||||||
|
} |
||||||
|
|
||||||
|
.nostr-preview .card-footer { |
||||||
|
padding: var(--spacing-2) var(--spacing-3); |
||||||
|
} |
||||||
|
|
||||||
|
.nostr-previews h6 { |
||||||
|
font-size: 0.9rem; |
||||||
|
margin-bottom: var(--spacing-3); |
||||||
|
} |
||||||
|
|
||||||
|
.nostr-previews .preview-container { |
||||||
|
max-height: 500px; |
||||||
|
overflow-y: auto; |
||||||
|
padding-right: var(--spacing-2); |
||||||
|
} |
||||||
|
|
||||||
|
/* Style for nostr links in text */ |
||||||
|
.nostr-link { |
||||||
|
color: #6c5ce7; |
||||||
|
background-color: rgba(108, 92, 231, 0.1); |
||||||
|
padding: 0 var(--spacing-1); |
||||||
|
border-radius: 3px; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.nostr-link:hover { |
||||||
|
background-color: rgba(108, 92, 231, 0.2); |
||||||
|
} |
||||||
@ -1,7 +1,7 @@ |
|||||||
.notice { |
.notice { |
||||||
padding: 10px; /* Padding around the content */ |
padding: var(--spacing-2); /* Padding around the content */ |
||||||
border-radius: 5px; /* Rounded corners */ |
border-radius: 5px; /* Rounded corners */ |
||||||
margin: 10px 0; /* Margin above and below the notice */ |
margin: var(--spacing-2) 0; /* Margin above and below the notice */ |
||||||
} |
} |
||||||
|
|
||||||
.notice p { |
.notice p { |
||||||
@ -1,7 +1,7 @@ |
|||||||
.og-preview-card { |
.og-preview-card { |
||||||
max-width: 100%; |
max-width: 100%; |
||||||
padding: 20px; |
padding: var(--spacing-4); |
||||||
margin: 10px 0; |
margin: var(--spacing-2) 0; |
||||||
background-color: var(--color-bg); |
background-color: var(--color-bg); |
||||||
} |
} |
||||||
|
|
||||||
@ -0,0 +1,21 @@ |
|||||||
|
/* Search Component Styles */ |
||||||
|
.search-component { |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.search-credits { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
.search-credits .help-text { |
||||||
|
font-size: 0.875rem; |
||||||
|
} |
||||||
|
|
||||||
|
.search-loading { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.search form { |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,193 @@ |
|||||||
|
/* Admin Panel Styles */ |
||||||
|
|
||||||
|
/* Analytics */ |
||||||
|
.analytics-container { |
||||||
|
padding: var(--spacing-3); |
||||||
|
} |
||||||
|
|
||||||
|
.analytics-card { |
||||||
|
margin-bottom: var(--spacing-5); |
||||||
|
padding: var(--spacing-3); |
||||||
|
background-color: var(--color-card-bg, #f8f9fa); |
||||||
|
border-radius: 0.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
.analytics-stats { |
||||||
|
list-style: none; |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.analytics-stats li { |
||||||
|
padding: var(--spacing-2) 0; |
||||||
|
} |
||||||
|
|
||||||
|
.analytics-table { |
||||||
|
width: 100%; |
||||||
|
border-collapse: collapse; |
||||||
|
} |
||||||
|
|
||||||
|
.analytics-table th { |
||||||
|
padding: var(--spacing-3); |
||||||
|
text-align: left; |
||||||
|
border-bottom: 2px solid var(--color-border, #dee2e6); |
||||||
|
} |
||||||
|
|
||||||
|
.analytics-table th.text-right, |
||||||
|
.analytics-table th[style*="text-align: right"] { |
||||||
|
min-width: 100px; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
.analytics-table td { |
||||||
|
padding: var(--spacing-3); |
||||||
|
border-bottom: 1px solid var(--color-border, #dee2e6); |
||||||
|
} |
||||||
|
|
||||||
|
.analytics-table td.text-right { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
.analytics-info { |
||||||
|
padding: var(--spacing-3); |
||||||
|
background-color: var(--color-info-bg, #e9f5ff); |
||||||
|
border-radius: 0.25rem; |
||||||
|
} |
||||||
|
|
||||||
|
/* Articles Table */ |
||||||
|
.admin-articles-table { |
||||||
|
width: 100%; |
||||||
|
border-collapse: collapse; |
||||||
|
} |
||||||
|
|
||||||
|
.admin-articles-table tr { |
||||||
|
padding-bottom: var(--spacing-1); |
||||||
|
} |
||||||
|
|
||||||
|
.admin-articles-table td { |
||||||
|
padding: var(--spacing-2); |
||||||
|
vertical-align: top; |
||||||
|
} |
||||||
|
|
||||||
|
.admin-articles-table button { |
||||||
|
margin-left: var(--spacing-2); |
||||||
|
} |
||||||
|
|
||||||
|
.admin-articles-table form { |
||||||
|
display: inline; |
||||||
|
} |
||||||
|
|
||||||
|
/* Magazine Editor */ |
||||||
|
.magazine-editor-layout { |
||||||
|
display: flex; |
||||||
|
gap: var(--spacing-4); |
||||||
|
} |
||||||
|
|
||||||
|
.magazine-editor-section { |
||||||
|
flex: 1; |
||||||
|
min-width: 320px; |
||||||
|
} |
||||||
|
|
||||||
|
.magazine-search-form { |
||||||
|
margin-bottom: var(--spacing-3); |
||||||
|
display: flex; |
||||||
|
gap: var(--spacing-2); |
||||||
|
} |
||||||
|
|
||||||
|
.magazine-search-form input[type="text"] { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.magazine-table { |
||||||
|
width: 100%; |
||||||
|
border-collapse: collapse; |
||||||
|
} |
||||||
|
|
||||||
|
.magazine-table th { |
||||||
|
padding: 0.25rem 0.5rem; |
||||||
|
text-align: left; |
||||||
|
border-bottom: 1px solid var(--color-border, #dee2e6); |
||||||
|
} |
||||||
|
|
||||||
|
.magazine-table td { |
||||||
|
padding: 0.25rem 0.5rem; |
||||||
|
vertical-align: top; |
||||||
|
} |
||||||
|
|
||||||
|
.magazine-table td.actions { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
.magazine-table td.author { |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
/* NIP-68 Picture Event Styles */ |
||||||
|
.picture-event { |
||||||
|
margin: 1rem 0; |
||||||
|
} |
||||||
|
|
||||||
|
.picture-title { |
||||||
|
font-size: 1.5rem; |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.content-warning { |
||||||
|
padding: 1rem; |
||||||
|
background-color: var(--color-warning-bg, #fff3cd); |
||||||
|
border: 1px solid var(--color-warning-border, #ffc107); |
||||||
|
border-radius: 0.25rem; |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-show-nsfw { |
||||||
|
margin-left: 0.5rem; |
||||||
|
padding: 0.25rem 0.5rem; |
||||||
|
background-color: var(--color-primary); |
||||||
|
color: white; |
||||||
|
border: none; |
||||||
|
border-radius: 0.25rem; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-show-nsfw:hover { |
||||||
|
opacity: 0.9; |
||||||
|
} |
||||||
|
|
||||||
|
.picture-gallery { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.picture-gallery.hidden { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.picture-item { |
||||||
|
position: relative; |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.picture-image { |
||||||
|
max-width: 100%; |
||||||
|
height: auto; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.annotated-users { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.user-tag { |
||||||
|
position: absolute; |
||||||
|
background-color: rgba(0, 0, 0, 0.7); |
||||||
|
color: white; |
||||||
|
padding: 0.25rem 0.5rem; |
||||||
|
border-radius: 0.25rem; |
||||||
|
font-size: 0.875rem; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.picture-alt { |
||||||
|
margin-top: 0.5rem; |
||||||
|
font-style: italic; |
||||||
|
color: var(--color-text-muted, #6c757d); |
||||||
|
} |
||||||
@ -0,0 +1,123 @@ |
|||||||
|
.profile-tabs { |
||||||
|
display: flex; |
||||||
|
gap: 1rem; |
||||||
|
margin: 1.5rem 0; |
||||||
|
border-bottom: 2px solid #e0e0e0; |
||||||
|
} |
||||||
|
|
||||||
|
.tab-link { |
||||||
|
padding: 0.75rem 1.5rem; |
||||||
|
text-decoration: none; |
||||||
|
color: #666; |
||||||
|
border-bottom: 3px solid transparent; |
||||||
|
margin-bottom: -2px; |
||||||
|
transition: all 0.3s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.tab-link:hover { |
||||||
|
color: #333; |
||||||
|
border-bottom-color: #ccc; |
||||||
|
} |
||||||
|
|
||||||
|
.tab-link.active { |
||||||
|
color: #0066cc; |
||||||
|
border-bottom-color: #0066cc; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.masonry-grid { |
||||||
|
column-count: 3; |
||||||
|
column-gap: 1.5rem; |
||||||
|
margin: 2rem 0; |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 1200px) { |
||||||
|
.masonry-grid { |
||||||
|
column-count: 2; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 768px) { |
||||||
|
.masonry-grid { |
||||||
|
column-count: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.masonry-item { |
||||||
|
break-inside: avoid; |
||||||
|
margin-bottom: 1.5rem; |
||||||
|
background: #fff; |
||||||
|
border-radius: 8px; |
||||||
|
overflow: hidden; |
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.masonry-item:hover { |
||||||
|
transform: translateY(-4px); |
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); |
||||||
|
} |
||||||
|
|
||||||
|
.masonry-link, .masonry-link:hover { |
||||||
|
display: block; |
||||||
|
text-decoration: none; |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.masonry-image-container { |
||||||
|
width: 100%; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #f5f5f5; |
||||||
|
} |
||||||
|
|
||||||
|
.masonry-image { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: block; |
||||||
|
transition: transform 0.3s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.masonry-item:hover .masonry-image { |
||||||
|
transform: scale(1.05); |
||||||
|
} |
||||||
|
|
||||||
|
.masonry-caption { |
||||||
|
padding: 1rem 1rem 0.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
.masonry-caption h3 { |
||||||
|
margin: 0; |
||||||
|
font-size: 1.1rem; |
||||||
|
font-weight: 600; |
||||||
|
color: #333; |
||||||
|
line-height: 1.4; |
||||||
|
} |
||||||
|
|
||||||
|
.masonry-description { |
||||||
|
padding: 0 1rem; |
||||||
|
font-size: 0.9rem; |
||||||
|
color: #666; |
||||||
|
line-height: 1.5; |
||||||
|
} |
||||||
|
|
||||||
|
.masonry-meta { |
||||||
|
padding: 0.75rem 1rem; |
||||||
|
border-top: 1px solid #f0f0f0; |
||||||
|
margin-top: 0.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
.event-date { |
||||||
|
font-size: 0.85rem; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
|
||||||
|
.no-media { |
||||||
|
text-align: center; |
||||||
|
padding: 3rem 1rem; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
.no-media p { |
||||||
|
font-size: 1.1rem; |
||||||
|
} |
||||||
|
|
||||||
@ -1,520 +0,0 @@ |
|||||||
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; |
|
||||||
color: var(--color-primary); |
|
||||||
font-size: 3.2rem; |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (max-width: 600px) { |
|
||||||
h1.brand { |
|
||||||
font-size: 2.3rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
h1.brand a { |
|
||||||
color: var(--brand-color); |
|
||||||
} |
|
||||||
|
|
||||||
h1:not(.brand) > a:hover { |
|
||||||
text-decoration: none; |
|
||||||
font-weight: 500; |
|
||||||
} |
|
||||||
|
|
||||||
h2 { |
|
||||||
font-size: 2.2rem; |
|
||||||
} |
|
||||||
|
|
||||||
h2.brand { |
|
||||||
font-family: var(--brand-font), serif; |
|
||||||
color: var(--color-primary); |
|
||||||
} |
|
||||||
|
|
||||||
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 2rem 0; |
|
||||||
border-radius: 0; /* Sharp edges */ |
|
||||||
} |
|
||||||
|
|
||||||
.featured-cat { |
|
||||||
border-bottom: 2px solid var(--color-border); |
|
||||||
padding-left: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.featured-list { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
flex-wrap: wrap; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.featured-list > * { |
|
||||||
box-sizing: border-box; /* so padding/border don't break the layout */ |
|
||||||
margin-bottom: 10px; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
@media (max-width: 1024px) { |
|
||||||
.featured-list { |
|
||||||
flex-direction: column !important; |
|
||||||
} |
|
||||||
|
|
||||||
.featured-list .card-header { |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.featured-list .card { |
|
||||||
border-bottom: 1px solid var(--color-border) !important; |
|
||||||
} |
|
||||||
|
|
||||||
.featured-list > * { |
|
||||||
margin-bottom: 10px; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
div:nth-child(odd) .featured-list { |
|
||||||
flex-direction: row-reverse; |
|
||||||
} |
|
||||||
|
|
||||||
.featured-list div:first-child { |
|
||||||
flex: 0 0 66%; /* each item takes up 50% width = 2 columns */ |
|
||||||
} |
|
||||||
|
|
||||||
.featured-list div:last-child { |
|
||||||
flex: 0 0 34%; /* each item takes up 50% width = 2 columns */ |
|
||||||
} |
|
||||||
|
|
||||||
.featured-list h2.card-title { |
|
||||||
font-size: 1.5rem; |
|
||||||
} |
|
||||||
|
|
||||||
.featured-list p.lede { |
|
||||||
font-size: 1.4rem; |
|
||||||
} |
|
||||||
|
|
||||||
.featured-list .card { |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.featured-list .card:not(:last-child) { |
|
||||||
border-bottom: 1px solid var(--color-border); |
|
||||||
} |
|
||||||
|
|
||||||
.article-list .metadata { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: baseline; |
|
||||||
} |
|
||||||
|
|
||||||
.article-list .metadata p { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.truncate { |
|
||||||
display: -webkit-box; |
|
||||||
-webkit-line-clamp: 3; /* limit to 3 lines */ |
|
||||||
-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-between; |
|
||||||
align-items: center; |
|
||||||
background-color: var(--color-bg); /* Black background */ |
|
||||||
border-bottom: 1px solid var(--color-border); |
|
||||||
} |
|
||||||
|
|
||||||
.header .container { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
.header__categories ul { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: center; |
|
||||||
gap: 20px; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.header__categories li { |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
|
|
||||||
.header__categories li a:hover { |
|
||||||
text-decoration: none; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
.header__categories a.active { |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
.header__logo h1 { |
|
||||||
font-weight: normal; |
|
||||||
} |
|
||||||
|
|
||||||
.header__logo img { |
|
||||||
height: 40px; /* Adjust the height as needed */ |
|
||||||
} |
|
||||||
|
|
||||||
.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 */ |
|
||||||
.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.3s ease; /* Smooth hover effect */ |
|
||||||
} |
|
||||||
|
|
||||||
/*!* Hover effect for tags *!*/ |
|
||||||
/*.tag:hover {*/ |
|
||||||
/* color: var(--color-text-contrast);*/ |
|
||||||
/*}*/ |
|
||||||
|
|
||||||
/* Optional: Responsive adjustments for smaller screens */ |
|
||||||
@media (max-width: 768px) { |
|
||||||
.tag { |
|
||||||
font-size: 0.8em; /* Slightly smaller text for mobile */ |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.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%; |
|
||||||
} |
|
||||||
|
|
||||||
.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); |
|
||||||
} |
|
||||||
|
|
||||||
.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; |
|
||||||
} |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
// ...existing code... |
|
||||||
@import "components/nostr_previews"; |
|
||||||
// ...existing code... |
|
||||||
@ -1,52 +0,0 @@ |
|||||||
.nostr-preview { |
|
||||||
margin-top: 0.5rem; |
|
||||||
|
|
||||||
.nostr-event-preview, .nostr-profile-preview { |
|
||||||
border-left: 3px solid #6c5ce7; |
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
||||||
} |
|
||||||
|
|
||||||
.nostr-profile-preview { |
|
||||||
border-left-color: #00b894; |
|
||||||
} |
|
||||||
|
|
||||||
.card-title { |
|
||||||
margin-bottom: 0.5rem; |
|
||||||
font-size: 1rem; |
|
||||||
} |
|
||||||
|
|
||||||
.card-text { |
|
||||||
font-size: 0.9rem; |
|
||||||
} |
|
||||||
|
|
||||||
.card-footer { |
|
||||||
padding: 0.5rem 1rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.nostr-previews { |
|
||||||
h6 { |
|
||||||
font-size: 0.9rem; |
|
||||||
margin-bottom: 1rem; |
|
||||||
} |
|
||||||
|
|
||||||
.preview-container { |
|
||||||
// For multiple previews |
|
||||||
max-height: 500px; |
|
||||||
overflow-y: auto; |
|
||||||
padding-right: 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Style for nostr links in text |
|
||||||
.nostr-link { |
|
||||||
color: #6c5ce7; |
|
||||||
background-color: rgba(108, 92, 231, 0.1); |
|
||||||
padding: 0 3px; |
|
||||||
border-radius: 3px; |
|
||||||
text-decoration: none; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
background-color: rgba(108, 92, 231, 0.2); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,92 @@ |
|||||||
|
{% extends 'layout.html.twig' %} |
||||||
|
|
||||||
|
{% block body %} |
||||||
|
|
||||||
|
{% if author.image is defined %} |
||||||
|
<img src="{{ author.image }}" class="avatar" alt="{{ author.name }}" onerror="this.style.display = 'none'" /> |
||||||
|
{% endif %} |
||||||
|
|
||||||
|
<h1><twig:Atoms:NameOrNpub :author="author" :npub="npub"></twig:Atoms:NameOrNpub></h1> |
||||||
|
<div> |
||||||
|
{% if author.about is defined %} |
||||||
|
{{ author.about|markdown_to_html|mentionify|linkify }} |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="profile-tabs"> |
||||||
|
<a href="{{ path('author-profile', {'npub': npub}) }}" class="tab-link">Articles</a> |
||||||
|
<a href="{{ path('author-media', {'npub': npub}) }}" class="tab-link active">Media</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
<hr /> |
||||||
|
|
||||||
|
<div class="w-container"> |
||||||
|
{% if pictureEvents|length > 0 %} |
||||||
|
<div class="masonry-grid"> |
||||||
|
{% for event in pictureEvents %} |
||||||
|
<div class="masonry-item"> |
||||||
|
{# Extract title #} |
||||||
|
{% set title = null %} |
||||||
|
{% for tag in event.tags %} |
||||||
|
{% if tag[0] == 'title' %} |
||||||
|
{% set title = tag[1] %} |
||||||
|
{% endif %} |
||||||
|
{% endfor %} |
||||||
|
|
||||||
|
{# Extract first image from imeta tags #} |
||||||
|
{% set firstImageUrl = null %} |
||||||
|
{% set imageAlt = null %} |
||||||
|
{% for tag in event.tags %} |
||||||
|
{% if tag[0] == 'imeta' and firstImageUrl is null %} |
||||||
|
{% for i in 1..(tag|length - 1) %} |
||||||
|
{% set param = tag[i] %} |
||||||
|
{% if param starts with 'url ' and firstImageUrl is null %} |
||||||
|
{% set firstImageUrl = param[4:] %} |
||||||
|
{% elseif param starts with 'alt ' %} |
||||||
|
{% set imageAlt = param[4:] %} |
||||||
|
{% endif %} |
||||||
|
{% endfor %} |
||||||
|
{% endif %} |
||||||
|
{% endfor %} |
||||||
|
|
||||||
|
{# Generate nevent for linking #} |
||||||
|
{% set eventId = event.id %} |
||||||
|
{% set noteId = event.noteId %} |
||||||
|
|
||||||
|
<a href="/e/{{ noteId }}" class="masonry-link"> |
||||||
|
{% if firstImageUrl %} |
||||||
|
<div class="masonry-image-container"> |
||||||
|
<img src="{{ firstImageUrl }}" |
||||||
|
alt="{{ imageAlt|default(title|default('Picture')) }}" |
||||||
|
class="masonry-image" |
||||||
|
loading="lazy" /> |
||||||
|
</div> |
||||||
|
{% endif %} |
||||||
|
|
||||||
|
{% if title %} |
||||||
|
<div class="masonry-caption"> |
||||||
|
<h3>{{ title }}</h3> |
||||||
|
</div> |
||||||
|
{% endif %} |
||||||
|
|
||||||
|
{% if event.content %} |
||||||
|
<div class="masonry-description mt-1"> |
||||||
|
{{ event.content|length > 100 ? event.content[:100] ~ '...' : event.content }} |
||||||
|
</div> |
||||||
|
{% endif %} |
||||||
|
|
||||||
|
<div class="masonry-meta"> |
||||||
|
<span class="event-date">{{ event.created_at|date('M j, Y') }}</span> |
||||||
|
</div> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
{% endfor %} |
||||||
|
</div> |
||||||
|
{% else %} |
||||||
|
<div class="no-media"> |
||||||
|
<p>No media found for this author.</p> |
||||||
|
</div> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
{% endblock %} |
||||||
|
|
||||||
Loading…
Reference in new issue