mirror of
https://github.com/davila7/claude-code-templates.git
synced 2026-09-19 01:30:23 +08:00
Daniel Avila
109f09870f
* feat(blog): Add SVG cover and fix header/footer for security-hooks-secrets article - Create SVG cover image with black background, terminal on left, security shield on right - Rewrite blog HTML to use external CSS (styles.css, blog.css) instead of inline styles - Fix header to match other blogs (container, header-content, header-actions with SVG icons) - Fix footer to match other blogs (footer-left, footer-right, proper links with icons) - Add Google Analytics, Hotjar, favicon, structured data, and SEO metadata - Add CodeCopy and MarkdownCopier JavaScript functionality - Update blog-articles.json to reference new SVG cover https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5 * fix(blog): Add table styles for article content in blog CSS Tables inside .article-content-full had no styling since the blog uses external CSS. Added proper th/td padding, borders, and hover states. https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5 * fix(blog): Update info box text to clarify blog explains the hook The blog explains how the hook works, not manual setup instructions. Updated text to encourage direct CLI installation while reading on. https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5 * fix(blog): Sort articles newest first in blog listing and featured carousel Reverse default sort order from ascending to descending by order field, so the most recently published article appears first in both the main list and the featured posts carousel. https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5 * feat(agents): Add blog-writer agent for creating blog articles from components Agent follows a 6-step workflow: 1. Read the component file 2. Ask user to confirm title, tags, difficulty, category, cover style 3. Create SVG cover (black bg, terminal left, icon right, white title) 4. Create HTML article with proper header/footer structure 5. Update blog-articles.json with highest order number 6. Final verification checklist Encodes all blog creation knowledge: external CSS only, installation first, info-box wording, CodeCopy/MarkdownCopier scripts, table styling, OG metadata, structured data, and article ordering. https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5 --------- Co-authored-by: Claude <noreply@anthropic.com>
1149 lines
22 KiB
CSS
1149 lines
22 KiB
CSS
/* Blog Styles */
|
|
|
|
.blog-hero {
|
|
padding: 2rem 0 1rem;
|
|
}
|
|
|
|
/* Center Blog ASCII Header */
|
|
.ascii-art,
|
|
.ascii-title .ascii-art,
|
|
.terminal-header .ascii-art {
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
|
|
.ascii-title {
|
|
text-align: center;
|
|
}
|
|
|
|
.terminal-header {
|
|
text-align: center;
|
|
}
|
|
|
|
.blog-articles {
|
|
padding: 2rem 0 4rem;
|
|
}
|
|
|
|
.articles-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.article-card {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.article-card:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 4px 20px rgba(0, 255, 157, 0.1);
|
|
}
|
|
|
|
.article-link {
|
|
display: flex;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.article-image {
|
|
position: relative;
|
|
width: 280px;
|
|
height: 140px;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
margin: 1rem;
|
|
}
|
|
|
|
.article-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
object-position: center;
|
|
transition: transform 0.3s ease;
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.article-card:hover .article-image img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.article-category {
|
|
display: none;
|
|
}
|
|
|
|
.article-content {
|
|
padding: 1rem;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.article-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin: 0;
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.article-meta time {
|
|
color: var(--accent-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.read-time {
|
|
padding-left: 0.75rem;
|
|
border-left: 1px solid var(--border-color);
|
|
}
|
|
|
|
.article-content h2 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.article-content p {
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.article-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.tag {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 4px;
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
border: 1px solid var(--border-color);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.article-card:hover .tag {
|
|
border-color: var(--accent-color);
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
/* Article Page Styles */
|
|
.article-header {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.article-title {
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.article-subtitle {
|
|
font-size: 1.125rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.article-meta-full {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.article-meta-full time {
|
|
color: var(--accent-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.article-cover {
|
|
width: 100%;
|
|
max-height: 400px;
|
|
object-fit: cover;
|
|
border-radius: 12px;
|
|
margin: 2rem 0 3rem;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.article-body {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.article-content-full {
|
|
line-height: 1.7;
|
|
font-size: 1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.article-content-full h1 {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin: 3rem 0 1.5rem;
|
|
color: var(--text-primary);
|
|
position: relative;
|
|
}
|
|
|
|
.article-content-full h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin: 2.5rem 0 1rem;
|
|
color: var(--text-primary);
|
|
position: relative;
|
|
}
|
|
|
|
.article-content-full h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin: 2rem 0 1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.article-content-full p {
|
|
margin-bottom: 1.5rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.article-content-full img {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.article-content-full blockquote {
|
|
background: var(--bg-secondary);
|
|
border-left: 4px solid var(--accent-color);
|
|
padding: 1.5rem;
|
|
margin: 2rem 0;
|
|
border-radius: 0 8px 8px 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
.article-content-full ul, .article-content-full ol {
|
|
margin: 1.5rem 0;
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.article-content-full li {
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.article-content-full code {
|
|
background: var(--bg-tertiary);
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 4px;
|
|
font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Code Block Container */
|
|
.code-block {
|
|
position: relative;
|
|
margin: 2rem 0;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.code-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem 1rem;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.code-language {
|
|
font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.copy-button {
|
|
background: transparent;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.copy-button:hover {
|
|
background: var(--accent-color);
|
|
color: var(--bg-primary);
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.copy-button.copied {
|
|
background: #10b981;
|
|
color: white;
|
|
border-color: #10b981;
|
|
}
|
|
|
|
.article-content-full pre {
|
|
background: transparent;
|
|
padding: 1.5rem;
|
|
border-radius: 0;
|
|
border: none;
|
|
overflow-x: auto;
|
|
margin: 0;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.article-content-full pre code {
|
|
background: none;
|
|
padding: 0;
|
|
border: none;
|
|
font-size: inherit;
|
|
color: var(--text-primary);
|
|
font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
/* Syntax highlighting colors */
|
|
.code-block pre code .keyword { color: #ff79c6; }
|
|
.code-block pre code .string { color: #f1fa8c; }
|
|
.code-block pre code .comment { color: #6272a4; font-style: italic; }
|
|
.code-block pre code .number { color: #bd93f9; }
|
|
.code-block pre code .operator { color: #ff79c6; }
|
|
.code-block pre code .function { color: #50fa7b; }
|
|
|
|
/* Terminal-style code blocks */
|
|
.terminal-block {
|
|
background: #0f0f0f;
|
|
border-color: #333;
|
|
}
|
|
|
|
.terminal-block .code-header {
|
|
background: #1a1a1a;
|
|
border-bottom-color: #333;
|
|
}
|
|
|
|
.terminal-block .code-language {
|
|
color: #00ff9d;
|
|
}
|
|
|
|
.terminal-block pre {
|
|
color: #f8f8f2;
|
|
}
|
|
|
|
.terminal-block pre code .prompt {
|
|
color: #00ff9d;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.terminal-block pre code .command {
|
|
color: #f8f8f2;
|
|
}
|
|
|
|
.terminal-block pre code .output {
|
|
color: #6272a4;
|
|
}
|
|
|
|
/* Navigation */
|
|
.article-nav {
|
|
margin: 4rem 0 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.back-to-blog {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--accent-color);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
padding: 0.75rem 1.5rem;
|
|
border: 1px solid var(--accent-color);
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
}
|
|
|
|
.back-to-blog:hover {
|
|
background: var(--accent-color);
|
|
color: var(--bg-primary);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Article Links */
|
|
.article-content-full a {
|
|
color: var(--accent-color);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.article-content-full a:hover {
|
|
border-bottom-color: var(--accent-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Article Content Tables */
|
|
.article-content-full table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 1.5rem 0;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.article-content-full th {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
padding: 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.article-content-full td {
|
|
padding: 1rem;
|
|
color: var(--text-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.article-content-full tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.article-content-full tr:hover {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
/* Components Table */
|
|
.components-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 1.5rem 0;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.components-table th {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
padding: 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.components-table td {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.components-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.components-table tr:hover {
|
|
background: rgba(0, 255, 157, 0.05);
|
|
}
|
|
|
|
.components-table td:first-child {
|
|
font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
font-size: 0.9rem;
|
|
width: 35%;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.components-table td:last-child {
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.articles-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.article-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.article-content-full h1 {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.article-content-full h2 {
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.article-meta-full {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.components-table {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.components-table th,
|
|
.components-table td {
|
|
padding: 0.75rem 0.5rem;
|
|
}
|
|
|
|
.components-table td:first-child {
|
|
width: auto;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Responsive Article Cards */
|
|
.article-card {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
min-height: auto;
|
|
}
|
|
|
|
.article-link {
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.article-image {
|
|
width: 100%;
|
|
height: 140px;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.article-content {
|
|
padding: 1rem;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.article-content h2 {
|
|
font-size: 1rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.article-content p {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Mobile Image Optimization */
|
|
.article-cover {
|
|
margin: 1rem 0 !important;
|
|
max-height: 250px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.article-content-full img {
|
|
margin: 1rem 0 !important;
|
|
border-radius: 6px;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
/* Newsletter Section */
|
|
.newsletter-section {
|
|
padding: 2rem 0;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.newsletter-container {
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.newsletter-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.newsletter-header {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.newsletter-prompt {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
.input-group {
|
|
display: flex;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.input-group:focus-within {
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.newsletter-input {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0.6rem 0.75rem;
|
|
font-size: 0.9rem;
|
|
color: var(--text-primary);
|
|
font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
outline: none;
|
|
}
|
|
|
|
.newsletter-input::placeholder {
|
|
color: var(--text-secondary);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.newsletter-submit {
|
|
background: var(--accent-color);
|
|
color: var(--bg-primary);
|
|
border: none;
|
|
padding: 0.6rem 1rem;
|
|
font-size: 1.1rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 48px;
|
|
}
|
|
|
|
.newsletter-submit:hover {
|
|
background: #00e08c;
|
|
}
|
|
|
|
.newsletter-submit:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.newsletter-message {
|
|
display: none;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
margin-bottom: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.newsletter-message.show {
|
|
display: block;
|
|
}
|
|
|
|
.success-message {
|
|
background: rgba(16, 185, 129, 0.1);
|
|
color: #10b981;
|
|
border: 1px solid rgba(16, 185, 129, 0.2);
|
|
}
|
|
|
|
.error-message {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
color: #ef4444;
|
|
border: 1px solid rgba(239, 68, 68, 0.2);
|
|
}
|
|
|
|
/* Responsive Newsletter */
|
|
@media (max-width: 768px) {
|
|
.newsletter-section {
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
.newsletter-container {
|
|
max-width: 350px;
|
|
}
|
|
|
|
.newsletter-input {
|
|
font-size: 16px; /* Prevents zoom on iOS */
|
|
}
|
|
}
|
|
|
|
/* Newsletter CTA in Articles */
|
|
.newsletter-cta {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 1.5rem;
|
|
margin: 2.5rem 0;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.newsletter-cta::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: var(--accent-color);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.newsletter-cta-content h3 {
|
|
color: var(--text-primary);
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
.newsletter-cta-content p {
|
|
color: var(--text-secondary);
|
|
font-size: 0.85rem;
|
|
margin-bottom: 1rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.newsletter-cta .newsletter-form {
|
|
max-width: 300px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.newsletter-cta .input-group {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
/* Different styling for middle vs end */
|
|
.middle-newsletter {
|
|
background: rgba(0, 255, 157, 0.03);
|
|
border-color: rgba(0, 255, 157, 0.15);
|
|
}
|
|
|
|
.end-newsletter {
|
|
background: rgba(59, 130, 246, 0.03);
|
|
border-color: rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
.end-newsletter::before {
|
|
background: #3b82f6;
|
|
}
|
|
|
|
/* Copy Markdown Button */
|
|
.copy-markdown-button {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 2rem;
|
|
margin-left: auto;
|
|
width: fit-content;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.copy-markdown-button:hover {
|
|
background: var(--accent-color);
|
|
color: var(--bg-primary);
|
|
border-color: var(--accent-color);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0, 255, 157, 0.2);
|
|
}
|
|
|
|
.copy-markdown-button.copied {
|
|
background: #10b981;
|
|
color: white;
|
|
border-color: #10b981;
|
|
}
|
|
|
|
.copy-markdown-button svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Responsive CTA */
|
|
@media (max-width: 768px) {
|
|
.copy-markdown-button {
|
|
padding: 0.6rem 0.8rem;
|
|
font-size: 0.7rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.copy-markdown-button svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.newsletter-cta {
|
|
padding: 1rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.newsletter-cta-content h3 {
|
|
font-size: 1rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.newsletter-cta-content p {
|
|
font-size: 0.8rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.newsletter-cta .newsletter-form {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Featured Posts Carousel */
|
|
.featured-posts-section {
|
|
margin-bottom: 3rem;
|
|
padding-bottom: 2rem;
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
|
|
.featured-header {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.featured-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
.featured-title svg {
|
|
color: #fbbf24;
|
|
fill: #fbbf24;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.featured-carousel-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.featured-carousel {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
overflow-x: auto;
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.featured-carousel::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Featured Article Card (Compact Version) */
|
|
.featured-card {
|
|
background: var(--bg-secondary);
|
|
border: 2px solid var(--accent-color);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
min-width: 260px;
|
|
max-width: 260px;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 4px 12px rgba(0, 255, 157, 0.15);
|
|
}
|
|
|
|
.featured-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 24px rgba(0, 255, 157, 0.25);
|
|
border-color: #00e08c;
|
|
}
|
|
|
|
/* Featured Star Badge */
|
|
.featured-star {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
background: rgba(251, 191, 36, 0.95);
|
|
color: #0a0a0a;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
|
|
animation: pulse-star 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse-star {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 4px 16px rgba(251, 191, 36, 0.6);
|
|
}
|
|
}
|
|
|
|
.featured-star svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.featured-link {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.featured-image {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 130px;
|
|
overflow: hidden;
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.featured-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.featured-card:hover .featured-image img {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
.featured-content {
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.featured-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.7rem;
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
}
|
|
|
|
.featured-meta time {
|
|
color: var(--accent-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.featured-meta .read-time {
|
|
padding-left: 0.5rem;
|
|
border-left: 1px solid var(--border-color);
|
|
}
|
|
|
|
.featured-content h3 {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
color: var(--text-primary);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.featured-content p {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.4;
|
|
margin: 0;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.featured-tags {
|
|
display: none;
|
|
}
|
|
|
|
.featured-card .tag {
|
|
display: none;
|
|
}
|
|
|
|
/* Carousel Navigation Buttons */
|
|
.carousel-nav {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
flex-shrink: 0;
|
|
z-index: 5;
|
|
}
|
|
|
|
.carousel-nav:hover:not(:disabled) {
|
|
background: var(--accent-color);
|
|
border-color: var(--accent-color);
|
|
color: var(--bg-primary);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.carousel-nav:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.carousel-nav svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* Responsive Featured Carousel */
|
|
@media (max-width: 768px) {
|
|
.featured-posts-section {
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
.featured-title {
|
|
font-size: 1.25rem;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.featured-title svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.featured-carousel-wrapper {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.featured-card {
|
|
min-width: 240px;
|
|
max-width: 240px;
|
|
}
|
|
|
|
.featured-image {
|
|
height: 120px;
|
|
}
|
|
|
|
.featured-content {
|
|
padding: 0.85rem;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.featured-content h3 {
|
|
font-size: 0.85rem;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.featured-content p {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.featured-meta {
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
.carousel-nav {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.carousel-nav svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.featured-star {
|
|
width: 26px;
|
|
height: 26px;
|
|
top: 6px;
|
|
right: 6px;
|
|
}
|
|
|
|
.featured-star svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
} |