kbe/hugo-mistergeek
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip tailwind theme

Browse Source
This commit is contained in:
kbe
2025-08-20 11:56:54 +02:00
parent 30a3080480
commit 248438ae8d
5 changed files with 602 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
assets/css/app.css
View File

@@ -1,10 +1,121 @@
@import "tailwindcss"; @import "tailwindcss";
@import "header.css"; @import "header.css";
body { /* Modern Design System */
background: #fdfdff; :root {
--primary-blue: #3b82f6;
--primary-blue-dark: #2563eb;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
} }
/* Base Styles */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #fdfdff;
color: var(--gray-800);
line-height: 1.6;
}
/* Gradient Backgrounds */
.gradient-bg {
background: linear-gradient(120deg, #f0f9ff 0%, #e0f2fe 100%);
}
.gradient-bg-dark {
background: linear-gradient(120deg, #1e293b 0%, #334155 100%);
}
/* Component Styles */
.article-card {
transition: all 0.3s ease;
transform: translateY(0);
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.featured-article {
transition: transform 0.3s ease;
}
.featured-article:hover {
transform: scale(1.02);
}
/* Tag Styles */
.tag {
transition: all 0.2s ease;
}
.tag:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Button Styles */
.btn-primary {
background: var(--primary-blue);
color: white;
transition: background-color 0.2s ease;
}
.btn-primary:hover {
background: var(--primary-blue-dark);
}
/* Responsive Typography */
@media (max-width: 768px) {
.text-hero {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
/* Newsletter Styles */
.newsletter-form {
max-width: 500px;
margin: 0 auto;
}
/* Footer Styles */
.footer-section {
background: var(--gray-900);
color: white;
}
.footer-link {
color: #9ca3af;
transition: color 0.2s ease;
}
.footer-link:hover {
color: white;
}
/* Mobile Menu Styles */
.mobile-menu {
transition: all 0.3s ease;
}
.mobile-menu-enter {
opacity: 0;
transform: translateY(-10px);
}
.mobile-menu-enter-active {
opacity: 1;
transform: translateY(0);
}
/* Breadcrumb Styles */ /* Breadcrumb Styles */
.breadcrumb-nav { .breadcrumb-nav {
width: 100%; width: 100%;
@@ -33,54 +144,34 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 0.875rem; font-size: 0.875rem;
color: #64748b; color: var(--gray-600);
} }
.breadcrumb-item a { .breadcrumb-item a {
color: #64748b; color: var(--gray-600);
text-decoration: none; text-decoration: none;
transition: color 0.2s ease; transition: color 0.2s ease;
display: flex;
align-items: center;
gap: 0.25rem;
} }
.breadcrumb-item a:hover { .breadcrumb-item a:hover {
color: #3b82f6; color: var(--primary-blue);
} }
.breadcrumb-item:not(:last-child)::after { .breadcrumb-item:not(:last-child)::after {
content: "/"; content: "/";
margin: 0 0.5rem; margin: 0 0.5rem;
color: #cbd5e1; color: var(--gray-300);
} }
.breadcrumb-item.active { .breadcrumb-item.active {
color: #3b82f6; color: var(--primary-blue);
font-weight: 500; font-weight: 500;
} }
.breadcrumb-item i { /* Responsive Utilities */
font-size: 0.75rem;
}
/* Responsive styles */
@media (max-width: 768px) { @media (max-width: 768px) {
.breadcrumb-list { .container {
padding: 0.5rem 0.75rem; padding-left: 1rem;
} padding-right: 1rem;
.breadcrumb-item {
font-size: 0.8125rem;
}
.breadcrumb-item:not(:last-child)::after {
margin: 0 0.25rem;
} }
} }
/* @media (max-width: 480px) {
.breadcrumb-item:nth-last-child(2):not(.active) {
display: none;
}
} */

50
layouts/_default/baseof.html
View File

@@ -6,37 +6,57 @@
<!-- SEO & Social Meta Tags --> <!-- SEO & Social Meta Tags -->
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }}</title> <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }}</title>
{{ partial "seo/seo-config.html" . }} <meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<meta name="keywords" content="{{ if .Keywords }}{{ delimit .Keywords ", " }}{{ else }}{{ .Site.Params.keywords }}{{ end }}">
<!-- CSS - Tailwind CSS --> <!-- Open Graph -->
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
<meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:site_name" content="{{ .Site.Title }}">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
<meta name="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Tailwind CSS -->
<link href="/builds/app.css" rel="stylesheet"> <link href="/builds/app.css" rel="stylesheet">
<!-- Icons --> <!-- Font Awesome -->
<!-- <link href="/assets/plugins/font-awesome/css/all.css" rel="stylesheet"> --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Custom Styles -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
</style>
</head> </head>
<body data-preloader="1"> <body class="bg-white text-gray-800 antialiased">
<!-- Header --> <!-- Header -->
{{ partial "header.html" . }} {{ partial "header.html" . }}
<!-- Breadcrumb --> <!-- Breadcrumb -->
{{ partial "breadcrumb.html" . }} {{ partial "breadcrumb.html" . }}
<main> <main>
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</main> </main>
<!-- Footer --> <!-- Footer -->
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
<!-- Scroll to top button --> <!-- Scroll to top button -->
<div class="scrolltotop icon-lg"> <div class="scrolltotop icon-lg">
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a> <a class="button-circle button-circle-md button-circle-dark" href="#"><i class="fas fa-arrow-up"></i></a>
</div> </div>
<!-- end Scroll to top button -->
<!-- JavaScript -->
<!-- ***** JAVASCRIPTS ***** -->
<script type="module" src="/builds/app.js"></script> <script type="module" src="/builds/app.js"></script>
<!-- <script src="/assets/js/header.js"></script> -->
</body> </body>
</html> </html>

259
layouts/index.html
View File

@@ -1,61 +1,218 @@
{{ define "main" }} {{ define "main" }}
<!-- Modern Homepage -->
<!-- layouts/index.html --> <div class="min-h-screen bg-white">
<div class="section-sm bg-gray-lighter">
<div class="container text-center"> <!-- Hero Section -->
<h1 class="font-family-playfair">{{ .Site.Title }}</h1> <section class="gradient-bg py-12 md:py-16 lg:py-20">
<p class="mt-3">{{ .Site.Params.seo.description }}</p> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
</div><!-- end container --> <div class="max-w-4xl mx-auto text-center">
</div> <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
{{ .Site.Title }}
<!-- Blog section --> </h1>
<div class="section"> <p class="text-xl text-gray-700 mb-8">
<div class="container"> {{ .Site.Params.description | default "Exploring technology's impact on work and life" }}
<div class="row g-4"> </p>
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
{{ $paginator := .Paginator 10 }} <!-- Tags -->
{{ range $paginator.Pages }} <div class="flex flex-wrap justify-center gap-3 mb-10">
<!-- Blog Post box --> {{ $categories := .Site.Taxonomies.categories }}
<div class="mb-5"> {{ if $categories }}
<div class="img-link-box"> {{ $categoryList := slice }}
<a href="{{ .Permalink }}"> {{ range $name, $taxonomy := $categories }}
{{ if .Params.featured_image }} {{ range $taxonomy }}
<img src="{{ .Params.featured_image }}" alt="{{ .Title }}"> {{ $categoryList = $categoryList | append . }}
{{ else }}
<img src="/assets/images/col-1.jpg" alt="{{ .Title }}">
{{ end }} {{ end }}
</a>
</div>
<div class="mt-4">
<div class="d-flex justify-content-between mb-2">
<!-- Display category -->
{{ partial "categories-first.html" . }}
<div class="d-inline-flex">
<span class="font-small">{{ .Date.Format "02/07/2006" }}</span>
</div>
</div>
<h2><a class="text-link-1" href="{{ .Permalink }}">{{ .Title }}</a></h2>
{{ if .Params.excerpt }}
<p>{{ .Params.excerpt }}</p>
{{ else if .Summary }}
<p>{{ .Summary }}</p>
{{ else }}
<p>{{ truncate 200 .Content }}</p>
{{ end }} {{ end }}
<div class="mt-3"> {{ range first 5 $categoryList }}
<a class="button-text-1" href="{{ .Permalink }}">Lire la suite</a> <span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">
{{ .Page.Title }}
</span>
{{ end }}
{{ else }}
<span class="tag bg-gray-100 text-gray-600 text-sm font-medium px-3 py-1 rounded-full">
General
</span>
{{ end }}
</div>
<!-- Newsletter Signup -->
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
<input type="email"
placeholder="Your email address"
class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button type="submit"
class="btn-primary px-6 py-3 rounded-lg font-medium">
Get Updates
</button>
</form>
</div>
</div>
</section>
<!-- Featured Articles -->
<section class="py-12 md:py-16">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Featured Articles</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
{{ range first 2 (where .Site.RegularPages "Params.featured" true) }}
<div class="bg-white rounded-xl overflow-hidden shadow-lg article-card">
<div class="featured-article">
{{ if .Params.featured_image }}
<img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-64 object-cover">
{{ else }}
<img src="https://images.unsplash.com/photo-1677442135135-416f8aa26a5b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="{{ .Title }}" class="w-full h-64 object-cover">
{{ end }}
</div>
<div class="p-6">
<div class="flex flex-wrap gap-2 mb-4">
{{ range first 2 (default (slice) .Params.categories) }}
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">{{ . }}</span>
{{ end }}
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">
<a href="{{ .Permalink }}" class="hover:text-blue-600">{{ .Title }}</a>
</h3>
<p class="text-gray-600 mb-4">{{ .Summary | truncate 150 }}</p>
<div class="flex items-center justify-between">
<div class="flex items-center text-sm text-gray-500">
<span>{{ .Params.author | default "Tech Team" }}</span>
<span class="mx-2">•</span>
<span>{{ .Date.Format "Jan 2, 2006" }}</span>
</div>
<a href="{{ .Permalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Read more →</a>
</div> </div>
</div> </div>
</div> </div>
<!-- End Blog Post box -->
{{ end }} {{ end }}
<!-- Pagination -->
{{ partial "pagination.html" . }}
</div> </div>
</div><!-- end row -->
</div><!-- end container --> <div class="text-center">
<a href="/articles" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
View all articles
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Latest Articles -->
<section class="py-12 md:py-16 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Latest Articles</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
{{ range first 6 .Paginator.Pages }}
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
{{ if .Params.featured_image }}
<img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-48 object-cover">
{{ else }}
<img src="https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="{{ .Title }}" class="w-full h-48 object-cover">
{{ end }}
<div class="p-6">
<div class="flex flex-wrap gap-2 mb-3">
{{ range first 1 (default (slice) .Params.categories) }}
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">{{ . }}</span>
{{ end }}
</div>
<h3 class="text-lg font-bold text-gray-900 mb-3">
<a href="{{ .Permalink }}" class="hover:text-blue-600">{{ .Title }}</a>
</h3>
<p class="text-gray-600 text-sm mb-4">{{ .Summary | truncate 100 }}</p>
<div class="flex items-center justify-between text-sm text-gray-500">
<span>{{ .Date.Format "Jan 2, 2006" }}</span>
<span>{{ .ReadingTime }} min read</span>
</div>
</div>
</div>
{{ end }}
</div>
<!-- Pagination -->
{{ if gt .Paginator.TotalPages 1 }}
<div class="text-center">
<nav class="flex justify-center items-center space-x-2">
{{ if .Paginator.HasPrev }}
<a href="{{ .Paginator.Prev.URL }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
Previous
</a>
{{ end }}
{{ range .Paginator.Pagers }}
{{ if eq . $.Paginator }}
<span class="px-4 py-2 bg-blue-600 text-white rounded-lg">{{ .PageNumber }}</span>
{{ else }}
<a href="{{ .URL }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">{{ .PageNumber }}</a>
{{ end }}
{{ end }}
{{ if .Paginator.HasNext }}
<a href="{{ .Paginator.Next.URL }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
Next
</a>
{{ end }}
</nav>
</div>
{{ end }}
</div>
</section>
<!-- Popular Topics -->
<section class="py-12 md:py-16">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Explore Topics</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12">
{{ $categories := .Site.Taxonomies.categories }}
{{ if $categories }}
{{ $categoryList := slice }}
{{ range $name, $taxonomy := $categories }}
{{ range $taxonomy }}
{{ $categoryList = $categoryList | append . }}
{{ end }}
{{ end }}
{{ range $categoryList }}
<a href="/{{ .Page.Slug }}" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
<i class="fas fa-tag text-blue-600 text-xl"></i>
</div>
<span class="text-sm font-medium text-gray-900">{{ .Page.Title }}</span>
</a>
{{ end }}
{{ else }}
<div class="col-span-full text-center py-8">
<p class="text-gray-500">No categories available yet.</p>
</div>
{{ end }}
</div>
<div class="text-center">
<a href="/topics" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
Browse all topics
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Newsletter Section -->
<section class="py-12 md:py-16 bg-blue-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Stay Updated</h2>
<p class="text-gray-700 mb-6">Join our newsletter and get the latest insights on technology and the future of work delivered to your inbox.</p>
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
<input type="email"
placeholder="Your email address"
class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button type="submit"
class="btn-primary px-6 py-3 rounded-lg font-medium">
Subscribe
</button>
</form>
<p class="text-sm text-gray-500 mt-4">No spam. Unsubscribe at any time.</p>
</div>
</div>
</section>
</div> </div>
<!-- end Blog section -->
{{ end }} {{ end }}

60
layouts/partials/header.html
View File

@@ -1,31 +1,31 @@
<!-- Header --> <!-- Modern Header -->
<header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-gray-200" x-data="{ mobileMenuOpen: false }"> <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-gray-200" x-data="{ mobileMenuOpen: false }">
<div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16"> <div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex items-center"> <div class="flex items-center">
<a href="/" class="text-xl font-bold text-gray-900">{{ .Site.Title }}</a> <a href="/" class="text-2xl font-bold text-gray-900">
{{ .Site.Title }}
</a>
</div> </div>
<!-- Desktop Navigation --> <!-- Desktop Navigation -->
<nav class="hidden md:flex items-center space-x-8"> <nav class="hidden md:flex items-center space-x-8">
<a href="/" class="text-gray-600 hover:text-blue-600 font-medium">Accueil</a> <a href="/" class="text-gray-600 hover:text-blue-600 font-medium transition-colors">Accueil</a>
<a href="/articles" class="text-gray-600 hover:text-blue-600 font-medium transition-colors">Articles</a>
<!-- Dynamic Categories from WordPress -->
{{ if .Site.Data.wordpress }} {{ if .Site.Data.wordpress }}
{{ $count := 0 }} {{ $count := 0 }}
{{ range $index, $element := .Site.Data.wordpress.categories }} {{ range $index, $element := .Site.Data.wordpress.categories }}
{{ if or (eq $element.name "Featured") (eq $element.name "Non classé") (eq $element.name "Uncategorized") }} {{ if or (eq $element.name "Featured") (eq $element.name "Non classé") }}
{{ continue }} {{ continue }}
{{ else if and (lt $count 5) (ne $element.name "Soirées et afterworks") (ne $element.name "Concerts") }} {{ else if lt $count 5 }}
<a href="/{{ $element.slug }}" <a href="/{{ $element.slug }}" class="text-gray-600 hover:text-blue-600 font-medium transition-colors">{{ $element.name }}</a>
class="text-gray-600 hover:text-blue-600 font-medium"> {{ $count = add $count 1 }}
{{ $element.name }} {{ else }}
</a> {{ break }}
{{ $count = add $count 1 }} {{ end }}
{{ end }} {{ end }}
{{ end }}
{{ end }} {{ end }}
</nav> </nav>
<!-- Mobile Menu Button --> <!-- Mobile Menu Button -->
@@ -55,25 +55,21 @@
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4"> <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<a href="/" class="text-gray-600 hover:text-blue-600 font-medium py-2">Accueil</a> <a href="/" class="text-gray-600 hover:text-blue-600 font-medium py-2">Accueil</a>
<a href="/articles" class="text-gray-600 hover:text-blue-600 font-medium py-2">Articles</a>
<!-- Dynamic Categories for Mobile -->
{{ if .Site.Data.wordpress }} {{ if .Site.Data.wordpress }}
{{ $count := 0 }} {{ $count := 0 }}
{{ range $index, $element := .Site.Data.wordpress.categories }} {{ range $index, $element := .Site.Data.wordpress.categories }}
{{ if or (eq $element.name "Featured") (eq $element.name "Non classé") (eq $element.name "Uncategorized") }} {{ if or (eq $element.name "Featured") (eq $element.name "Non classé") }}
{{ continue }} {{ continue }}
{{ else if and (lt $count 5) (ne $element.name "Soirées et afterworks") (ne $element.name "Concerts") }} {{ else if lt $count 5 }}
<a href="/{{ $element.slug }}" <a href="/{{ $element.slug }}" class="text-gray-600 hover:text-blue-600 font-medium py-2">{{ $element.name }}</a>
class="text-gray-600 hover:text-blue-600 font-medium py-2"> {{ $count = add $count 1 }}
{{ $element.name }} {{ else }}
</a> {{ break }}
{{ $count = add $count 1 }} {{ end }}
{{ end }} {{ end }}
{{ end }}
{{ end }} {{ end }}
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<!-- end Header -->

227
static/builds/app.css
View File

@@ -9,9 +9,11 @@
"Courier New", monospace; "Courier New", monospace;
--color-red-100: oklch(93.6% 0.032 17.717); --color-red-100: oklch(93.6% 0.032 17.717);
--color-red-200: oklch(88.5% 0.062 18.334); --color-red-200: oklch(88.5% 0.062 18.334);
--color-red-600: oklch(57.7% 0.245 27.325);
--color-red-800: oklch(44.4% 0.177 26.899); --color-red-800: oklch(44.4% 0.177 26.899);
--color-yellow-100: oklch(97.3% 0.071 103.193); --color-yellow-100: oklch(97.3% 0.071 103.193);
--color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-200: oklch(94.5% 0.129 101.54);
--color-yellow-600: oklch(68.1% 0.162 75.834);
--color-yellow-800: oklch(47.6% 0.114 61.907); --color-yellow-800: oklch(47.6% 0.114 61.907);
--color-green-100: oklch(96.2% 0.044 156.743); --color-green-100: oklch(96.2% 0.044 156.743);
--color-green-200: oklch(92.5% 0.084 155.995); --color-green-200: oklch(92.5% 0.084 155.995);
@@ -24,11 +26,14 @@
--color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-600: oklch(54.6% 0.245 262.881);
--color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-700: oklch(48.8% 0.243 264.376);
--color-blue-800: oklch(42.4% 0.199 265.638); --color-blue-800: oklch(42.4% 0.199 265.638);
--color-indigo-100: oklch(93% 0.034 272.788);
--color-indigo-600: oklch(51.1% 0.262 276.966);
--color-purple-100: oklch(94.6% 0.033 307.174); --color-purple-100: oklch(94.6% 0.033 307.174);
--color-purple-200: oklch(90.2% 0.063 306.703); --color-purple-200: oklch(90.2% 0.063 306.703);
--color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-600: oklch(55.8% 0.288 302.321);
--color-purple-800: oklch(43.8% 0.218 303.724); --color-purple-800: oklch(43.8% 0.218 303.724);
--color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-50: oklch(98.5% 0.002 247.839);
--color-gray-100: oklch(96.7% 0.003 264.542);
--color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-200: oklch(92.8% 0.006 264.531);
--color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-300: oklch(87.2% 0.01 258.338);
--color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-400: oklch(70.7% 0.022 261.325);
@@ -42,6 +47,9 @@
--spacing: 0.25rem; --spacing: 0.25rem;
--container-xl: 36rem; --container-xl: 36rem;
--container-3xl: 48rem; --container-3xl: 48rem;
--container-4xl: 56rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
--text-sm: 0.875rem; --text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875); --text-sm--line-height: calc(1.25 / 0.875);
--text-lg: 1.125rem; --text-lg: 1.125rem;
@@ -50,10 +58,14 @@
--text-xl--line-height: calc(1.75 / 1.25); --text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: 1.5rem; --text-2xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5); --text-2xl--line-height: calc(2 / 1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem; --text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25); --text-4xl--line-height: calc(2.5 / 2.25);
--text-5xl: 3rem; --text-5xl: 3rem;
--text-5xl--line-height: 1; --text-5xl--line-height: 1;
--text-6xl: 3.75rem;
--text-6xl--line-height: 1;
--font-weight-medium: 500; --font-weight-medium: 500;
--font-weight-semibold: 600; --font-weight-semibold: 600;
--font-weight-bold: 700; --font-weight-bold: 700;
@@ -419,6 +431,9 @@
.col-auto { .col-auto {
grid-column: auto; grid-column: auto;
} }
.col-span-full {
grid-column: 1 / -1;
}
.float-end { .float-end {
float: inline-end; float: inline-end;
} }
@@ -605,9 +620,18 @@
.mb-8 { .mb-8 {
margin-bottom: calc(var(--spacing) * 8); margin-bottom: calc(var(--spacing) * 8);
} }
.mb-10 {
margin-bottom: calc(var(--spacing) * 10);
}
.mb-12 {
margin-bottom: calc(var(--spacing) * 12);
}
.mb-auto { .mb-auto {
margin-bottom: auto; margin-bottom: auto;
} }
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.block { .block {
display: block; display: block;
} }
@@ -647,6 +671,9 @@
.h-6 { .h-6 {
height: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6);
} }
.h-12 {
height: calc(var(--spacing) * 12);
}
.h-16 { .h-16 {
height: calc(var(--spacing) * 16); height: calc(var(--spacing) * 16);
} }
@@ -662,6 +689,9 @@
.h-50 { .h-50 {
height: calc(var(--spacing) * 50); height: calc(var(--spacing) * 50);
} }
.h-64 {
height: calc(var(--spacing) * 64);
}
.h-75 { .h-75 {
height: calc(var(--spacing) * 75); height: calc(var(--spacing) * 75);
} }
@@ -671,9 +701,15 @@
.h-auto { .h-auto {
height: auto; height: auto;
} }
.min-h-screen {
min-height: 100vh;
}
.w-6 { .w-6 {
width: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6);
} }
.w-12 {
width: calc(var(--spacing) * 12);
}
.w-20 { .w-20 {
width: calc(var(--spacing) * 20); width: calc(var(--spacing) * 20);
} }
@@ -698,6 +734,9 @@
.max-w-3xl { .max-w-3xl {
max-width: var(--container-3xl); max-width: var(--container-3xl);
} }
.max-w-4xl {
max-width: var(--container-4xl);
}
.max-w-xl { .max-w-xl {
max-width: var(--container-xl); max-width: var(--container-xl);
} }
@@ -766,6 +805,9 @@
.grid-cols-1 { .grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr));
} }
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
@@ -982,12 +1024,21 @@
.bg-gray-50 { .bg-gray-50 {
background-color: var(--color-gray-50); background-color: var(--color-gray-50);
} }
.bg-gray-100 {
background-color: var(--color-gray-100);
}
.bg-gray-200 {
background-color: var(--color-gray-200);
}
.bg-gray-900 { .bg-gray-900 {
background-color: var(--color-gray-900); background-color: var(--color-gray-900);
} }
.bg-green-100 { .bg-green-100 {
background-color: var(--color-green-100); background-color: var(--color-green-100);
} }
.bg-indigo-100 {
background-color: var(--color-indigo-100);
}
.bg-purple-100 { .bg-purple-100 {
background-color: var(--color-purple-100); background-color: var(--color-purple-100);
} }
@@ -1190,6 +1241,10 @@
font-size: var(--text-2xl); font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height)); line-height: var(--tw-leading, var(--text-2xl--line-height));
} }
.text-3xl {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-4xl { .text-4xl {
font-size: var(--text-4xl); font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height)); line-height: var(--tw-leading, var(--text-4xl--line-height));
@@ -1206,6 +1261,10 @@
font-size: var(--text-xl); font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height)); line-height: var(--tw-leading, var(--text-xl--line-height));
} }
.text-xs {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.leading-relaxed { .leading-relaxed {
--tw-leading: var(--leading-relaxed); --tw-leading: var(--leading-relaxed);
line-height: var(--leading-relaxed); line-height: var(--leading-relaxed);
@@ -1261,18 +1320,27 @@
.text-green-800 { .text-green-800 {
color: var(--color-green-800); color: var(--color-green-800);
} }
.text-indigo-600 {
color: var(--color-indigo-600);
}
.text-purple-600 { .text-purple-600 {
color: var(--color-purple-600); color: var(--color-purple-600);
} }
.text-purple-800 { .text-purple-800 {
color: var(--color-purple-800); color: var(--color-purple-800);
} }
.text-red-600 {
color: var(--color-red-600);
}
.text-red-800 { .text-red-800 {
color: var(--color-red-800); color: var(--color-red-800);
} }
.text-white { .text-white {
color: var(--color-white); color: var(--color-white);
} }
.text-yellow-600 {
color: var(--color-yellow-600);
}
.text-yellow-800 { .text-yellow-800 {
color: var(--color-yellow-800); color: var(--color-yellow-800);
} }
@@ -1358,6 +1426,11 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: var(--tw-duration, var(--default-transition-duration));
} }
.transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-shadow { .transition-shadow {
transition-property: box-shadow; transition-property: box-shadow;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1400,6 +1473,13 @@
} }
} }
} }
.hover\:bg-gray-300 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-300);
}
}
}
.hover\:bg-green-200 { .hover\:bg-green-200 {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
@@ -1435,6 +1515,13 @@
} }
} }
} }
.hover\:text-blue-800 {
&:hover {
@media (hover: hover) {
color: var(--color-blue-800);
}
}
}
.hover\:text-white { .hover\:text-white {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
@@ -1492,6 +1579,11 @@
display: none; display: none;
} }
} }
.md\:grid-cols-2 {
@media (width >= 48rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.md\:grid-cols-3 { .md\:grid-cols-3 {
@media (width >= 48rem) { @media (width >= 48rem) {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1513,16 +1605,42 @@
line-height: var(--tw-leading, var(--text-5xl--line-height)); line-height: var(--tw-leading, var(--text-5xl--line-height));
} }
} }
.lg\:grid-cols-2 {
@media (width >= 64rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.lg\:grid-cols-3 {
@media (width >= 64rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.lg\:grid-cols-6 {
@media (width >= 64rem) {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.lg\:px-8 { .lg\:px-8 {
@media (width >= 64rem) { @media (width >= 64rem) {
padding-inline: calc(var(--spacing) * 8); padding-inline: calc(var(--spacing) * 8);
} }
} }
.lg\:py-20 {
@media (width >= 64rem) {
padding-block: calc(var(--spacing) * 20);
}
}
.lg\:py-24 { .lg\:py-24 {
@media (width >= 64rem) { @media (width >= 64rem) {
padding-block: calc(var(--spacing) * 24); padding-block: calc(var(--spacing) * 24);
} }
} }
.lg\:text-6xl {
@media (width >= 64rem) {
font-size: var(--text-6xl);
line-height: var(--tw-leading, var(--text-6xl--line-height));
}
}
} }
.cs-header { .cs-header {
position: relative; position: relative;
@@ -1663,8 +1781,90 @@
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
:root {
--primary-blue: #3b82f6;
--primary-blue-dark: #2563eb;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
}
body { body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #fdfdff; background: #fdfdff;
color: var(--gray-800);
line-height: 1.6;
}
.gradient-bg {
background: linear-gradient(120deg, #f0f9ff 0%, #e0f2fe 100%);
}
.gradient-bg-dark {
background: linear-gradient(120deg, #1e293b 0%, #334155 100%);
}
.article-card {
transition: all 0.3s ease;
transform: translateY(0);
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.featured-article {
transition: transform 0.3s ease;
}
.featured-article:hover {
transform: scale(1.02);
}
.tag {
transition: all 0.2s ease;
}
.tag:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.btn-primary {
background: var(--primary-blue);
color: white;
transition: background-color 0.2s ease;
}
.btn-primary:hover {
background: var(--primary-blue-dark);
}
@media (max-width: 768px) {
.text-hero {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
.newsletter-form {
max-width: 500px;
margin: 0 auto;
}
.footer-section {
background: var(--gray-900);
color: white;
}
.footer-link {
color: #9ca3af;
transition: color 0.2s ease;
}
.footer-link:hover {
color: white;
}
.mobile-menu {
transition: all 0.3s ease;
}
.mobile-menu-enter {
opacity: 0;
transform: translateY(-10px);
}
.mobile-menu-enter-active {
opacity: 1;
transform: translateY(0);
} }
.breadcrumb-nav { .breadcrumb-nav {
width: 100%; width: 100%;
@@ -1690,40 +1890,29 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 0.875rem; font-size: 0.875rem;
color: #64748b; color: var(--gray-600);
} }
.breadcrumb-item a { .breadcrumb-item a {
color: #64748b; color: var(--gray-600);
text-decoration: none; text-decoration: none;
transition: color 0.2s ease; transition: color 0.2s ease;
display: flex;
align-items: center;
gap: 0.25rem;
} }
.breadcrumb-item a:hover { .breadcrumb-item a:hover {
color: #3b82f6; color: var(--primary-blue);
} }
.breadcrumb-item:not(:last-child)::after { .breadcrumb-item:not(:last-child)::after {
content: "/"; content: "/";
margin: 0 0.5rem; margin: 0 0.5rem;
color: #cbd5e1; color: var(--gray-300);
} }
.breadcrumb-item.active { .breadcrumb-item.active {
color: #3b82f6; color: var(--primary-blue);
font-weight: 500; font-weight: 500;
} }
.breadcrumb-item i {
font-size: 0.75rem;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.breadcrumb-list { .container {
padding: 0.5rem 0.75rem; padding-left: 1rem;
} padding-right: 1rem;
.breadcrumb-item {
font-size: 0.8125rem;
}
.breadcrumb-item:not(:last-child)::after {
margin: 0 0.25rem;
} }
} }
@property --tw-translate-x { @property --tw-translate-x {