Add complete CKE Project implementation with news management system
This commit is contained in:
albivkt
254
app/globals.css
254
app/globals.css
@ -99,3 +99,257 @@ html :target {
|
||||
.animate-loading-bar {
|
||||
animation: loading-bar 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Анимация появления для карточек новостей */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Плавающие анимации для фона */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float-delayed {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-30px) rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float-slow {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px) rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-float-delayed {
|
||||
animation: float-delayed 8s ease-in-out infinite;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.animate-float-slow {
|
||||
animation: float-slow 10s ease-in-out infinite;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
/* Градиентная анимация */
|
||||
@keyframes gradient-shift {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-gradient {
|
||||
background-size: 200% 200%;
|
||||
animation: gradient-shift 3s ease infinite;
|
||||
}
|
||||
|
||||
/* Пульсирующий эффект */
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse-glow {
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Эффект появления текста */
|
||||
@keyframes typewriter {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-typewriter {
|
||||
overflow: hidden;
|
||||
border-right: 2px solid;
|
||||
white-space: nowrap;
|
||||
animation: typewriter 3s steps(40, end);
|
||||
}
|
||||
|
||||
/* Эффект мерцания */
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
/* Стили для обрезки текста */
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Стили для контента новостей */
|
||||
.prose {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.prose h3 {
|
||||
@apply text-xl font-semibold text-gray-900 mt-6 mb-3;
|
||||
}
|
||||
|
||||
.prose p {
|
||||
@apply mb-4 text-gray-700 leading-relaxed;
|
||||
}
|
||||
|
||||
.prose ul {
|
||||
@apply list-disc list-inside mb-4 text-gray-700;
|
||||
}
|
||||
|
||||
.prose li {
|
||||
@apply mb-2;
|
||||
}
|
||||
|
||||
/* Стили для контента статей */
|
||||
.article-content {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.8;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.article-content h1,
|
||||
.article-content h2,
|
||||
.article-content h3,
|
||||
.article-content h4,
|
||||
.article-content h5,
|
||||
.article-content h6 {
|
||||
color: #111827;
|
||||
font-weight: 700;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.article-content h1 { font-size: 2.5rem; }
|
||||
.article-content h2 { font-size: 2rem; }
|
||||
.article-content h3 { font-size: 1.75rem; }
|
||||
.article-content h4 { font-size: 1.5rem; }
|
||||
|
||||
.article-content p {
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.article-content strong {
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-content a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #93c5fd;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.article-content a:hover {
|
||||
color: #1d4ed8;
|
||||
border-bottom-color: #1d4ed8;
|
||||
}
|
||||
|
||||
.article-content ul,
|
||||
.article-content ol {
|
||||
margin: 2rem 0;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.article-content li {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.article-content blockquote {
|
||||
border-left: 4px solid #3b82f6;
|
||||
padding-left: 2rem;
|
||||
margin: 3rem 0;
|
||||
font-style: italic;
|
||||
color: #4b5563;
|
||||
font-size: 1.125rem;
|
||||
background: #f8fafc;
|
||||
padding: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.article-content img {
|
||||
border-radius: 1rem;
|
||||
margin: 3rem 0;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.article-content pre {
|
||||
background: #1f2937;
|
||||
color: #f9fafb;
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
overflow-x: auto;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.article-content code {
|
||||
background: #f3f4f6;
|
||||
color: #1f2937;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.article-content pre code {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user