claude-code-templates 1.21.13 → 1.21.14

package/docs/css/blog.css

@@ -818,4 +818,296 @@
     .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;
+    }
 }