@asgerami/zemenay-blog/dist/styles.css

Plug-and-play blog system for Next.js - Get a fully functional blog running in minutes with zero configuration

/* Zemenay Blog - Core Styles */

/* Base styles */
.zemenay-blog-list {
  @apply space-y-6;
}

/* Blog Post Preview */
.blog-post-preview {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700;
  transition: all 0.3s ease;
}

.blog-post-preview:hover {
  @apply shadow-lg transform -translate-y-1;
}

.blog-post-preview.search-result {
  @apply border-blue-300 dark:border-blue-600;
}

/* Post Title */
.post-title {
  @apply text-2xl font-bold text-gray-900 dark:text-white mb-3 cursor-pointer;
  transition: color 0.2s ease;
}

.post-title:hover {
  @apply text-blue-600 dark:text-blue-400;
}

/* Post Meta */
.post-meta {
  @apply text-sm text-gray-500 dark:text-gray-400 mb-3;
}

/* Post Excerpt */
.post-excerpt {
  @apply text-gray-600 dark:text-gray-300 leading-relaxed;
}

/* Categories and Tags */
.category-badge {
  @apply inline-block px-3 py-1 text-xs font-medium rounded-full mr-2 mb-2;
  transition: all 0.2s ease;
}

.category-badge:hover {
  @apply transform scale-105;
}

.tag-badge {
  @apply inline-block px-2 py-1 text-xs font-medium rounded-full mr-2 mb-2;
  transition: all 0.2s ease;
}

.tag-badge:hover {
  @apply transform scale-105;
}

/* Search and Filters */
.search-container {
  @apply mb-6;
}

.search-input {
  @apply w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  @apply outline-none border-blue-500 dark:border-blue-400 ring-2 ring-blue-200 dark:ring-blue-800;
}

/* Filter Controls */
.filter-controls {
  @apply flex flex-wrap gap-2 mb-4;
}

.filter-button {
  @apply px-3 py-2 text-sm font-medium rounded-lg border transition-all duration-200;
}

.filter-button.active {
  @apply bg-blue-600 text-white border-blue-600;
}

.filter-button:not(.active) {
  @apply bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600;
}

.filter-button:hover:not(.active) {
  @apply bg-gray-50 dark:bg-gray-700;
}

/* Loading States */
.skeleton {
  @apply animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
}

.blog-post-skeleton {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
}

.blog-post-skeleton .skeleton-title {
  @apply h-8 bg-gray-200 dark:bg-gray-700 rounded mb-3;
}

.blog-post-skeleton .skeleton-meta {
  @apply h-4 bg-gray-200 dark:bg-gray-700 rounded mb-3 w-1/3;
}

.blog-post-skeleton .skeleton-excerpt {
  @apply h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2;
}

.blog-post-skeleton .skeleton-excerpt:last-child {
  @apply w-2/3;
}

/* Animations */
.stagger-animation {
  @apply space-y-6;
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.slide-in {
  animation: slideIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Empty States */
.empty {
  @apply text-center py-12 text-gray-500 dark:text-gray-400;
}

/* Error States */
.error {
  @apply text-center py-8 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded-lg;
}

/* Admin Panel Styles */
.admin-panel {
  @apply max-w-6xl mx-auto p-6;
}

.admin-header {
  @apply flex justify-between items-center mb-8;
}

.admin-title {
  @apply text-3xl font-bold text-gray-900 dark:text-white;
}

.new-post-button {
  @apply bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition-colors;
}

/* Rich Text Editor */
.rich-text-editor {
  @apply border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800;
}

.editor-toolbar {
  @apply border-b border-gray-300 dark:border-gray-600 p-2 flex flex-wrap gap-1;
}

.editor-content {
  @apply p-4 min-h-[300px] text-gray-900 dark:text-white;
}

/* Theme Toggle */
.theme-toggle {
  @apply p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors;
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-post-preview {
    @apply p-4;
  }

  .post-title {
    @apply text-xl;
  }

  .filter-controls {
    @apply flex-col;
  }

  .admin-header {
    @apply flex-col gap-4 items-start;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  /* Dark mode styles are handled by Tailwind classes */
}

/* Print styles */
@media print {
  .blog-post-preview {
    @apply shadow-none border-none;
  }

  .search-container,
  .filter-controls,
  .theme-toggle {
    @apply hidden;
  }
}