Compare commits
10 Commits
75d235c17e
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
0f1f5329d4 | ||
|
|
b00514f015 | ||
|
|
f9160e4b98 | ||
|
|
67fad13998 | ||
|
|
442440454a | ||
|
|
c2ea3a9a4f | ||
|
|
63e117a49a | ||
|
|
d4a151df9b | ||
|
|
f926c7fcf6 | ||
|
|
41805da339 |
@@ -1,6 +1,7 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
@import "tailwindcss";
|
||||
@import "header.css";
|
||||
@import "wordpress.css";
|
||||
|
||||
/* Modern Design System */
|
||||
:root {
|
||||
|
||||
289
assets/css/wordpress.css
Normal file
289
assets/css/wordpress.css
Normal file
@@ -0,0 +1,289 @@
|
||||
/* Wordpress Content Styles */
|
||||
|
||||
/* General Prose Styles (already in app.css, but can be extended here if needed) */
|
||||
.prose {
|
||||
/* max-width: none; */ /* Already handled by Tailwind's prose plugin or app.css */
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
.prose h1,
|
||||
.prose h2,
|
||||
.prose h3,
|
||||
.prose h4,
|
||||
.prose h5,
|
||||
.prose h6 {
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.prose h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
.prose h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.prose h3 {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
.prose h4 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.prose h5 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.prose h6 {
|
||||
font-size: 1em;
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
/* Paragraphs */
|
||||
.prose p {
|
||||
margin-bottom: 1.5em;
|
||||
line-height: 1.75;
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
.prose ul,
|
||||
.prose ol {
|
||||
margin-bottom: 1.5em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.prose ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.prose ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.prose li {
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.75;
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
.prose ul ul,
|
||||
.prose ol ol,
|
||||
.prose ul ol,
|
||||
.prose ol ul {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.prose a {
|
||||
color: var(--primary-blue);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--primary-blue);
|
||||
transition: color 0.2s ease, text-decoration-color 0.2s ease;
|
||||
}
|
||||
|
||||
.prose a:hover {
|
||||
color: var(--primary-blue-dark);
|
||||
text-decoration-color: var(--primary-blue-dark);
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.prose img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.prose figure {
|
||||
margin: 2em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.prose figcaption {
|
||||
font-size: 0.875em;
|
||||
color: var(--gray-600);
|
||||
margin-top: 0.5em;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.prose table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1.5em;
|
||||
border: 1px solid var(--gray-300);
|
||||
}
|
||||
|
||||
.prose th,
|
||||
.prose td {
|
||||
padding: 0.75em 1em;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--gray-300);
|
||||
}
|
||||
|
||||
.prose th {
|
||||
background-color: var(--gray-100);
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.prose tbody tr:nth-child(even) {
|
||||
background-color: var(--gray-50);
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
.prose blockquote {
|
||||
border-left: 4px solid var(--primary-blue);
|
||||
padding-left: 1.5rem;
|
||||
margin: 2em 0;
|
||||
font-style: italic;
|
||||
color: var(--gray-600);
|
||||
background-color: var(--gray-50);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.prose blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Code Blocks */
|
||||
.prose code {
|
||||
background-color: var(--gray-100);
|
||||
color: var(--gray-800);
|
||||
padding: 0.25em 0.5em;
|
||||
border-radius: 0.25rem;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
background-color: var(--gray-900);
|
||||
color: var(--gray-50);
|
||||
padding: 1.5em;
|
||||
border-radius: 0.5rem;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5em;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.prose pre code {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Embeds */
|
||||
.prose iframe,
|
||||
.prose video,
|
||||
.prose audio {
|
||||
max-width: 100%;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.prose .wp-block-embed {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
/* Separators */
|
||||
.prose hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: var(--gray-300);
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
/* WordPress Specific Classes */
|
||||
.prose .wp-caption {
|
||||
background-color: var(--gray-50);
|
||||
border: 1px solid var(--gray-200);
|
||||
padding: 1em;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.prose .wp-caption-text {
|
||||
font-size: 0.875em;
|
||||
color: var(--gray-600);
|
||||
margin-top: 0.5em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.prose .alignleft {
|
||||
float: left;
|
||||
margin: 0.5em 1.5em 0.5em 0;
|
||||
}
|
||||
|
||||
.prose .alignright {
|
||||
float: right;
|
||||
margin: 0.5em 0 0.5em 1.5em;
|
||||
}
|
||||
|
||||
.prose .aligncenter {
|
||||
display: block;
|
||||
margin: 1.5em auto;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for images */
|
||||
@media (max-width: 768px) {
|
||||
.prose .alignleft,
|
||||
.prose .alignright {
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 1.5em auto;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/* WordPress Gutenberg Block Styles */
|
||||
.prose .wp-block-gallery {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.prose .wp-block-gallery .blocks-gallery-item {
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.prose .wp-block-quote {
|
||||
border-left: 4px solid var(--primary-blue);
|
||||
padding-left: 1.5rem;
|
||||
margin: 2em 0;
|
||||
font-style: italic;
|
||||
color: var(--gray-600);
|
||||
background-color: var(--gray-50);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.prose .wp-block-pullquote {
|
||||
border-top: 4px solid var(--primary-blue);
|
||||
border-bottom: 4px solid var(--primary-blue);
|
||||
padding: 2em;
|
||||
margin: 2em 0;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
.prose .wp-block-code {
|
||||
background-color: var(--gray-900);
|
||||
color: var(--gray-50);
|
||||
padding: 1.5em;
|
||||
border-radius: 0.5rem;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5em;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
@@ -16,7 +16,7 @@ enableRobotsTXT = true
|
||||
|
||||
# SEO Configuration
|
||||
[params.seo]
|
||||
description = "Mistergeek - Tutoriels et guides en informatique et technologie en français"
|
||||
description = "Tutoriels et guides en informatique et technologie en français"
|
||||
keywords = ["tutoriel informatique", "guide technologie", "solutions informatiques", "développement web", "technologies", "innovation", "mistergeek"]
|
||||
author = "Mistergeek"
|
||||
theme_color = "#007bff"
|
||||
|
||||
@@ -1,63 +1,83 @@
|
||||
{{ define "main" }}
|
||||
|
||||
<!-- layouts/_default/list.html -->
|
||||
<div class="section-sm bg-gray-lighter">
|
||||
<div class="container text-center">
|
||||
<h1 class="font-family-playfair">{{ .Site.Title }}</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="min-h-screen bg-white">
|
||||
|
||||
<!-- Blog section -->
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
|
||||
{{ $paginationLimit := 10 }}
|
||||
{{ if .Site.Params.paginationLimit }}{{ $paginationLimit = .Site.Params.paginationLimit }}{{ end }}
|
||||
{{ $paginator := .Paginator $paginationLimit }}
|
||||
<!-- Hero Section with Category Title -->
|
||||
<section class="gradient-bg py-12 md:py-16 lg:py-20">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
|
||||
{{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}
|
||||
</h1>
|
||||
{{ if .Description }}
|
||||
<p class="text-xl text-gray-700 mb-8">{{ .Description }}</p>
|
||||
{{ else if and (eq .Kind "taxonomy") .Data.Term }}
|
||||
<p class="text-xl text-gray-700 mb-8">{{ .Data.Term | humanize }}</p>
|
||||
{{ else if .Site.Params.seo.description }}
|
||||
<!-- <p class="text-xl text-gray-700 mb-8">{{ .Site.Params.seo.description }}</p> -->
|
||||
{{ end }}
|
||||
|
||||
<!-- Category tags if this is a taxonomy page -->
|
||||
{{ if eq .Kind "taxonomy" }}
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
<span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">{{ .Title }}</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Latest Articles Section -->
|
||||
<section id="latest-articles" 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">Articles</h2>
|
||||
|
||||
{{ $paginator := .Paginate .Pages 9 }}
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
||||
{{ range $paginator.Pages }}
|
||||
<!-- Blog Post box -->
|
||||
<div class="mb-5">
|
||||
<div class="img-link-box">
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
|
||||
<a href="{{ .RelPermalink }}">
|
||||
{{ if .Params.featured_image }}
|
||||
<img src="{{ .Params.featured_image }}" alt="{{ .Title }}">
|
||||
<img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-48 object-cover">
|
||||
{{ else }}
|
||||
<img src="/assets/images/col-1.jpg" alt="{{ .Title }}">
|
||||
<img src="/assets/images/col-1.jpg" alt="{{ .Title }}" class="w-full h-48 object-cover">
|
||||
{{ end }}
|
||||
</a>
|
||||
<div class="p-6">
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
{{ if .Params.categories }}
|
||||
{{ range first 1 .Params.categories }}
|
||||
<a href="/categories/{{ . | urlize }}" class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded hover:underline">{{ . }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</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="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
||||
<p class="text-gray-600 text-sm mb-4">
|
||||
{{ if .Params.excerpt }}
|
||||
<p>{{ .Params.excerpt }}</p>
|
||||
{{ .Params.excerpt }}
|
||||
{{ else if .Summary }}
|
||||
<p>{{ .Summary }}</p>
|
||||
{{ .Summary }}
|
||||
{{ else }}
|
||||
<p>{{ truncate 200 .Content }}</p>
|
||||
{{ truncate 200 .Content }}
|
||||
{{ end }}
|
||||
<div class="mt-3">
|
||||
<a class="button-text-1" href="{{ .RelPermalink }}">Lire la suite</a>
|
||||
</p>
|
||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||||
<span>{{ .Date | time.Format "2 Jan 2006" }}</span>
|
||||
<a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Lire la suite →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Blog Post box -->
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{{ partial "pagination.html" (dict "Paginator" .Paginator "Page" .) }}
|
||||
<div class="flex justify-center mt-12">
|
||||
{{ if gt .Paginator.TotalPages 1 }}
|
||||
{{ partial "pagination-tailwind.html" .Paginator }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- end Blog section -->
|
||||
{{ end }}
|
||||
|
||||
|
||||
@@ -11,20 +11,14 @@
|
||||
{{ end }}
|
||||
</div>
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">{{ .Title }}</h1>
|
||||
<p class="text-xl text-gray-700 mb-8">{{ .Summary }}</p>
|
||||
<div class="flex items-center justify-center space-x-4 text-gray-600">
|
||||
<div class="flex items-center">
|
||||
{{ if .Params.author_image }}
|
||||
<img src="{{ .Params.author_image }}" alt="Author" class="rounded-full mr-2 w-10 h-10">
|
||||
{{ else }}
|
||||
<img src="https://i.pravatar.cc/40?img=5" alt="Author" class="rounded-full mr-2 w-10 h-10">
|
||||
{{ end }}
|
||||
<span>{{ .Params.author | default "Author Name" }}</span>
|
||||
<a href="/author/{{ .Params.author | urlize }}" class="text-blue-600 hover:text-blue-800 underline decoration-blue-600 hover:decoration-blue-800 transition-colors">{{ .Params.author | default "Auteur" }}</a>
|
||||
</div>
|
||||
<span>•</span>
|
||||
<span>{{ .Date.Format "October 16, 2024" }}</span>
|
||||
<span>{{ .Date.Format "2 janvier 2006" }}</span>
|
||||
<span>•</span>
|
||||
<span>{{ .ReadingTime }} min read</span>
|
||||
<span>{{ .ReadingTime }} min de lecture</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -33,100 +27,29 @@
|
||||
<!-- Article Content -->
|
||||
<article class="py-12 md:py-16">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto prose">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
{{ if .Params.featured_image }}
|
||||
<img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-auto rounded-lg mb-8">
|
||||
{{ end }}
|
||||
<div class="prose">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Tags Section -->
|
||||
<div class="py-8 border-t border-gray-200">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Topics:</h3>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
{{ with .Params.tags }}
|
||||
{{ range . }}
|
||||
<a href="#" class="tag bg-blue-100 text-blue-800 hover:bg-blue-200 px-4 py-2 rounded-full font-medium">{{ . }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Author Bio -->
|
||||
<div class="py-12 bg-gray-50">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex items-start space-x-6">
|
||||
{{ if .Params.author_image }}
|
||||
<img src="{{ .Params.author_image }}" alt="Author" class="rounded-full w-20 h-20">
|
||||
{{ else }}
|
||||
<img src="https://i.pravatar.cc/100?img=5" alt="Author" class="rounded-full w-20 h-20">
|
||||
{{ end }}
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-gray-900">{{ .Params.author | default "Author Name" }}</h3>
|
||||
<p class="text-blue-600 font-medium mb-4">Technology Writer & Future of Work Researcher</p>
|
||||
<p class="text-gray-700">{{ .Params.author_bio | default "Author bio goes here." }}</p>
|
||||
<div class="flex space-x-4 mt-4">
|
||||
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-linkedin"></i></a>
|
||||
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-medium"></i></a>
|
||||
</div>
|
||||
<span class="text-2xl">Article rédigé par {{ .Params.author | default "Auteur" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related Articles -->
|
||||
<div class="py-12">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">Related Articles</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{{ range first 3 (where .Site.RegularPages "Type" "post") }}
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
|
||||
{{ if .Params.featured_image }}
|
||||
<img src="{{ .Params.featured_image }}" alt="Article" class="w-full h-48 object-cover">
|
||||
{{ else }}
|
||||
<img src="https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Article" class="w-full h-48 object-cover">
|
||||
{{ end }}
|
||||
<div class="p-6">
|
||||
<span class="text-sm font-medium text-blue-600">
|
||||
{{ with .Params.categories }}
|
||||
{{ range first 1 . }}
|
||||
{{ . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</span>
|
||||
<h3 class="text-xl font-semibold mt-2 mb-3">
|
||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</h3>
|
||||
<p class="text-gray-600">{{ .Summary | truncate 100 }}</p>
|
||||
<div class="flex items-center mt-4 text-sm text-gray-500">
|
||||
<span>{{ .Date.Format "Jan 2, 2006" }}</span>
|
||||
<span class="mx-2">•</span>
|
||||
<span>{{ .ReadingTime }} min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter -->
|
||||
<div class="py-12 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-2xl font-bold text-gray-900 mb-4">Join the Newsletter</h2>
|
||||
<p class="text-gray-700 mb-6">Stay updated with the latest insights on technology and the future of work.</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="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Subscribe</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,49 +1,87 @@
|
||||
{{ define "main" }}
|
||||
{{ $authors := site.Data.wordpress.authors }}
|
||||
<!-- layouts/author/list.html - Author posts listing -->
|
||||
<div class="min-h-screen bg-white">
|
||||
|
||||
<div class="section-sm bg-gray-lighter">
|
||||
<div class="container text-center">
|
||||
<h3 class="font-family-playfair">{{ .Title }}</h3>
|
||||
<p class="mt-2">Liste de tous les auteurs</p>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="author-list">
|
||||
<div class="row">
|
||||
{{ range $author := $authors }}
|
||||
<div class="col-md-6 mb-4">
|
||||
<article class="author-card-item h-100 card" data-author-name="{{ $author.name }}">
|
||||
<div class="row g-0 align-items-center">
|
||||
<div class="author-card-image col-md-4 p-2">
|
||||
{{ with index $author.avatar_urls "96" }}
|
||||
<img decoding="async" src="{{ . }}" alt="{{ $author.name }}" class="author-image img-fluid" loading="lazy">
|
||||
{{ else }}
|
||||
<img decoding="async" src="/assets/images/img-avatar-md@2x.jpg" alt="{{ $author.name }}" class="author-image img-fluid" loading="lazy">
|
||||
{{ end }}
|
||||
<!-- Hero Section with Author Title -->
|
||||
<section class="gradient-bg py-12 md:py-16 lg:py-20">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">Tous les auteurs</h1>
|
||||
</div>
|
||||
<div class="author-card-info col-md-8">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title author-card-name">{{ $author.name }}</h5>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Author Bio Section -->
|
||||
{{ if .Data.Term }}
|
||||
{{ $authorSlug := .Data.Term }}
|
||||
{{ $authors := site.Data.wordpress.authors }}
|
||||
{{ $author := index $authors $authorSlug }}
|
||||
|
||||
{{ if $author }}
|
||||
<section class="py-12 bg-gray-50">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex items-start space-x-6">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-2xl font-semibold text-gray-900">{{ $author.name }}</h3>
|
||||
{{ with $author.description }}
|
||||
<p class="card-text author-card-title">
|
||||
<small class="text-muted author-card-title-text">{{ . }}</small>
|
||||
<p class="text-gray-700 mt-2">{{ . }}</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Author's Articles Section -->
|
||||
<section id="latest-articles" class="py-12 md:py-16">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{{ $paginator := .Paginate .Pages 9 }}
|
||||
|
||||
{{ if gt (len $paginator.Pages) 0 }}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
||||
{{ range $paginator.Pages }}
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
|
||||
<div class="p-6">
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
{{ if .Params.categories }}
|
||||
{{ range first 1 .Params.categories }}
|
||||
<a href="/categories/{{ . | urlize }}" class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded hover:underline">{{ . }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
||||
<p class="text-gray-600 text-sm mb-4">
|
||||
{{ if .Params.excerpt }}
|
||||
{{ .Params.excerpt }}
|
||||
{{ else if .Summary }}
|
||||
{{ .Summary }}
|
||||
{{ else }}
|
||||
{{ truncate 200 .Content }}
|
||||
{{ end }}
|
||||
</p>
|
||||
{{ end }}
|
||||
<div class="author-card-buttons mt-3">
|
||||
<div class="author-card-button">
|
||||
<a href="/author/{{ $author.slug | anchorize }}" class="author-button-link" aria-label="Voir les articles de {{ $author.name }}">Voir les articles<svg class="uikit-icon" style="width: 1em;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="var(--c-svg, currentColor)" d="M7.5 4.5V6h9.442L4.5 18.442 5.558 19.5 18 7.058V16.5h1.5v-12z"></path></svg></a>
|
||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||||
<a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Lire la suite →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex justify-center mt-12">
|
||||
{{ if gt .Paginator.TotalPages 1 }}
|
||||
{{ partial "pagination-tailwind.html" .Paginator }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
{{ else }}
|
||||
<div class="text-center py-12">
|
||||
<p class="text-xl text-gray-600">Aucun article trouvé pour cet auteur.</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
{{ define "main" }}
|
||||
{{ $defaultCategory := "General" }}
|
||||
{{ if .Site.Params.defaultCategory }}{{ $defaultCategory = .Site.Params.defaultCategory }}{{ end }}
|
||||
|
||||
<div class="section-sm bg-gray-lighter">
|
||||
<div class="container text-center">
|
||||
<h1 class="font-family-playfair">{{ .Title }}</h1>
|
||||
<p class="mt-3">Cette page répertorie toutes les catégories de notre site, offrant une vue d'ensemble structurée de notre contenu.</p>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Blog section -->
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
|
||||
{{ range $.Site.Data.wordpress.categories }}
|
||||
<div class="mb-5">
|
||||
<div class="mt-4">
|
||||
<h2><a class="text-link-1" href="{{ .link | relURL }}">{{ .name }}</a></h2>
|
||||
<p>{{ .description | safeHTML }}</p>
|
||||
<div class="mt-3">
|
||||
<a class="button-text-1" href="{{ .link | relURL }}">Voir la catégorie</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ if not .IsLast }}<hr class="my-5">{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Blog section -->
|
||||
{{ end }}
|
||||
@@ -6,19 +6,21 @@
|
||||
<section class="gradient-bg py-12 md:py-16 lg:py-20">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">Exploring Technology's Impact on Work & Life</h1>
|
||||
<p class="text-xl text-gray-700 mb-8">Insights, analysis and trends about how technology is shaping our future</p>
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">{{ .Site.Title }}</h1>
|
||||
<p class="text-xl text-gray-700 mb-8">{{ .Site.Params.seo.description }}</p>
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
<span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">AI</span>
|
||||
<span class="tag bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full">Remote Work</span>
|
||||
<span class="tag bg-purple-100 text-purple-800 text-sm font-medium px-3 py-1 rounded-full">Productivity</span>
|
||||
<span class="tag bg-yellow-100 text-yellow-800 text-sm font-medium px-3 py-1 rounded-full">Innovation</span>
|
||||
<span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">IA</span>
|
||||
<span class="tag bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full">Programmation</span>
|
||||
<span class="tag bg-purple-100 text-purple-800 text-sm font-medium px-3 py-1 rounded-full">Photo</span>
|
||||
<span class="tag bg-yellow-100 text-yellow-800 text-sm font-medium px-3 py-1 rounded-full">Vidéo</span>
|
||||
<span class="tag bg-red-100 text-red-800 text-sm font-medium px-3 py-1 rounded-full">Web3</span>
|
||||
</div>
|
||||
{{/*
|
||||
<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="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Get Updates</button>
|
||||
<input type="email" placeholder="Votre adresse email" 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="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Recevoir les mises à jour</button>
|
||||
</form>
|
||||
*/}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -26,10 +28,10 @@
|
||||
<!-- 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>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Articles en Vedette</h2>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
||||
{{ range first 2 $.Site.RegularPages }}
|
||||
{{ range first 2 (where $.Site.RegularPages "Params.categories" "intersect" (slice "Featured")) }}
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-lg article-card">
|
||||
<div class="featured-article">
|
||||
<a href="{{ .RelPermalink }}">
|
||||
@@ -60,10 +62,10 @@
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<img src="https://i.pravatar.cc/24" alt="{{ .Params.author }}" class="w-6 h-6 rounded-full mr-2">
|
||||
{{/* <img src="https://i.pravatar.cc/24" alt="{{ .Params.author }}" class="w-6 h-6 rounded-full mr-2"> */}}
|
||||
<a href="/author/{{ .Params.author | urlize }}" class="hover:underline">{{ .Params.author }}</a>
|
||||
<span class="mx-2">•</span>
|
||||
<span>{{ .Date | time.Format "Jan 2, 2006" }}</span>
|
||||
<span>{{ .Date | time.Format "2 Jan 2006" }}</span>
|
||||
</div>
|
||||
<a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Lire la suite →</a>
|
||||
</div>
|
||||
@@ -73,21 +75,26 @@
|
||||
</div>
|
||||
|
||||
<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 href="#latest-articles" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
|
||||
Voir plus d'articles
|
||||
<i class="fas fa-arrow-down ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Latest Articles -->
|
||||
<section class="py-12 md:py-16 bg-gray-50">
|
||||
<section id="latest-articles" 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>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Derniers Articles</h2>
|
||||
|
||||
{{ $featuredPosts := where $.Site.RegularPages "Params.categories" "intersect" (slice "Featured") }}
|
||||
{{ $regularPosts := where $.Site.RegularPages "Type" "!=" "page" }}
|
||||
{{ $nonFeaturedPosts := complement $featuredPosts $regularPosts }}
|
||||
{{ $paginator := .Paginate $nonFeaturedPosts 9 }}
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
||||
{{ range first 6 (after 2 $.Site.RegularPages) }}
|
||||
{{ range $paginator.Pages }}
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
|
||||
<a href="{{ .RelPermalink }}">
|
||||
{{ if .Params.featured_image }}
|
||||
@@ -98,11 +105,13 @@
|
||||
</a>
|
||||
<div class="p-6">
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
{{ if .Params.categories }}
|
||||
{{ range first 1 .Params.categories }}
|
||||
<a href="/categories/{{ . | urlize }}" class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded hover:underline">{{ . }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3">{{ .Title }}</h3>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
||||
<p class="text-gray-600 text-sm mb-4">
|
||||
{{ if .Params.excerpt }}
|
||||
{{ .Params.excerpt }}
|
||||
@@ -113,48 +122,49 @@
|
||||
{{ end }}
|
||||
</p>
|
||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||||
<span>{{ .Date | time.Format "Jan 2, 2006" }}</span>
|
||||
<a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Read more →</a>
|
||||
<span>{{ .Date | time.Format "2 Jan 2006" }}</span>
|
||||
<a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Lire la suite →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- Pagination -->
|
||||
<div class="flex justify-center mt-12">
|
||||
{{ if gt .Paginator.TotalPages 1 }}
|
||||
{{ partial "pagination-tailwind.html" .Paginator }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</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>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Explorer les Thèmes</h2>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12">
|
||||
<a href="#" 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-robot text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">AI</span>
|
||||
<span class="text-sm font-medium text-gray-900">IA</span>
|
||||
</a>
|
||||
|
||||
<a href="#" 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-green-100 rounded-lg flex items-center justify-center mb-3">
|
||||
<i class="fas fa-laptop-house text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">Remote Work</span>
|
||||
<span class="text-sm font-medium text-gray-900">Télétravail</span>
|
||||
</a>
|
||||
|
||||
<a href="#" 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-purple-100 rounded-lg flex items-center justify-center mb-3">
|
||||
<i class="fas fa-tachometer-alt text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">Productivity</span>
|
||||
<span class="text-sm font-medium text-gray-900">Productivité</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
@@ -168,7 +178,7 @@
|
||||
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-3">
|
||||
<i class="fas fa-code text-red-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">Development</span>
|
||||
<span class="text-sm font-medium text-gray-900">Développement</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
@@ -181,31 +191,35 @@
|
||||
|
||||
<div class="text-center">
|
||||
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
|
||||
Browse all topics
|
||||
Parcourir tous les thèmes
|
||||
<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>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-4">Restez Informé</h2>
|
||||
<p class="text-gray-700 mb-6">Rejoignez notre newsletter et recevez les dernières perspectives sur la technologie et l'avenir du travail directement dans votre boîte mail.</p>
|
||||
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
|
||||
<input type="email"
|
||||
placeholder="Your email address"
|
||||
placeholder="Votre adresse email"
|
||||
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="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">
|
||||
Subscribe
|
||||
S'abonner
|
||||
</button>
|
||||
</form>
|
||||
<p class="text-sm text-gray-500 mt-4">No spam. Unsubscribe at any time.</p>
|
||||
<p class="text-sm text-gray-500 mt-4">Pas de spam. Désabonnez-vous à tout moment.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
*/}}
|
||||
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
{{ define "main" }}
|
||||
{{ $authorName := .Params.author }}
|
||||
{{ $authorSlug := .Params.author_slug }}
|
||||
{{ $authorPosts := where .Site.RegularPages "Params.author" $authorName }}
|
||||
|
||||
<div class="section-sm bg-gray-lighter">
|
||||
<div class="container text-center">
|
||||
<h1 class="font-family-playfair">{{ .Title }}</h1>
|
||||
<p class="mt-2">Retrouvez toutes les pages utiles du site ici.</p>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Blog section -->
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
|
||||
{{ $paginationLimit := 10 }}
|
||||
{{ if .Site.Params.paginationLimit }}{{ $paginationLimit = .Site.Params.paginationLimit }}{{ end }}
|
||||
{{ $paginator := .Paginate $authorPosts $paginationLimit }}
|
||||
|
||||
{{ if gt (len $authorPosts) 0 }}
|
||||
{{ range $paginator.Pages }}
|
||||
<!-- Blog Post box -->
|
||||
<div class="mb-5">
|
||||
<div class="mt-4">
|
||||
<h2><a class="text-link-1" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||
{{ if .Params.excerpt }}
|
||||
<p>{{ .Params.excerpt }}</p>
|
||||
{{ else if .Summary }}
|
||||
<p>{{ .Summary }}</p>
|
||||
{{ else }}
|
||||
<p>{{ truncate 200 .Content }}</p>
|
||||
{{ end }}
|
||||
<div class="mt-3">
|
||||
<a class="button-text-1" href="{{ .RelPermalink }}">Lire la suite</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Blog Post box -->
|
||||
{{ end }}
|
||||
|
||||
<!-- Pagination -->
|
||||
{{ partial "pagination.html" (dict "Paginator" .Paginator "Page" .) }}
|
||||
{{ else }}
|
||||
<div class="text-center py-5">
|
||||
<h4>Aucun article trouvé</h4>
|
||||
<p>Aucun article n'a été trouvé pour cet auteur.</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Blog section -->
|
||||
{{ end }}
|
||||
@@ -1,40 +1,58 @@
|
||||
<footer class="bg-gray-900 text-white py-12">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4">TechInsights</h3>
|
||||
<p class="text-gray-400">Exploring the future of work and technology through thoughtful analysis and commentary.</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div class="col-span-1">
|
||||
<h3 class="uppercase tracking-wider text-xl font-bold">{{ .Site.Title }}</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Explore</h4>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">Articles</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">Topics</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
|
||||
|
||||
<div class="col-span-1">
|
||||
<h6 class="text-sm font-medium uppercase mb-4">Pages</h6>
|
||||
<ul class="list-none space-y-2">
|
||||
<li><a href="/" class="text-gray-400 hover:text-white">Accueil</a></li>
|
||||
{{ if .Site.Data.wordpress }}
|
||||
{{ range $index, $element := .Site.Data.wordpress.navigation }}
|
||||
<li>
|
||||
<a href="/pages/{{ $element.slug }}" class="text-gray-400 hover:text-white">{{ $element.title }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Topics</h4>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">AI</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">Remote Work</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">Productivity</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">Web3</a></li>
|
||||
|
||||
<div class="col-span-1">
|
||||
<h6 class="text-sm font-medium uppercase mb-4">Toutes les catégories</h6>
|
||||
<ul class="list-none space-y-2">
|
||||
{{ if .Site.Data.wordpress }}
|
||||
{{ range $index, $element := .Site.Data.wordpress.categories }}
|
||||
{{ if and (ne $element.name "Featured") (gt $element.count 0) }}
|
||||
<li>
|
||||
<a class="text-gray-400 hover:text-white" href="/{{ $element.slug }}">{{ $element.name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Connect</h4>
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
|
||||
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin text-xl"></i></a>
|
||||
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a>
|
||||
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github text-xl"></i></a>
|
||||
|
||||
|
||||
|
||||
</div><!-- end grid -->
|
||||
</div><!-- end container -->
|
||||
<div class="bg-black py-4 mt-8">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-2 lg:gap-3">
|
||||
<div class="text-center md:text-start">
|
||||
<p class="text-gray-400">© {{ now.Format "2006" }} {{ .Site.Title }}, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="text-center md:text-end">
|
||||
<ul class="flex justify-center md:justify-end space-x-4">
|
||||
<li><a class="w-8 h-8 rounded-full flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white" href="https://www.facebook.com/mistergeekfrance"><i class="bi bi-facebook"></i></a></li>
|
||||
<!-- <li><a class="w-8 h-8 rounded-full flex items-center justify-center bg-blue-400 hover:bg-blue-500 text-white" href="#"><i class="bi bi-twitter-x"></i></a></li> -->
|
||||
<!-- <li><a class="w-8 h-8 rounded-full flex items-center justify-center bg-red-600 hover:bg-red-700 text-white" href="#"><i class="bi bi-pinterest"></i></a></li> -->
|
||||
<!-- <li><a class="w-8 h-8 rounded-full flex items-center justify-center bg-pink-600 hover:bg-pink-700 text-white" href="#"><i class="bi bi-instagram"></i></a></li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
||||
<p>© {{ now.Format "2006" }} TechInsights. All rights reserved.</p>
|
||||
</div>
|
||||
</div><!-- end flex -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -32,9 +32,6 @@
|
||||
<i class="fas text-xl transition-transform duration-300 ease-in-out"
|
||||
:class="mobileMenuOpen ? 'fa-times' : 'fa-bars'"></i>
|
||||
</button>
|
||||
<button class="hidden md:block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
13
layouts/partials/newsletter.html
Normal file
13
layouts/partials/newsletter.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!-- Newsletter -->
|
||||
<div class="py-12 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-2xl font-bold text-gray-900 mb-4">Rejoignez la newsletter</h2>
|
||||
<p class="text-gray-700 mb-6">Restez informé des dernières actualités sur la technologie et le futur du travail.</p>
|
||||
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
|
||||
<input type="email" placeholder="Votre adresse email" 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="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-colors">S'abonner</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
89
layouts/partials/pagination-tailwind.html
Normal file
89
layouts/partials/pagination-tailwind.html
Normal file
@@ -0,0 +1,89 @@
|
||||
{{ $paginator := . }}
|
||||
{{ $currentPage := .PageNumber }}
|
||||
{{ $totalPages := .TotalPages }}
|
||||
|
||||
{{ if gt $totalPages 1 }}
|
||||
<nav aria-label="Pagination" class="bg-white shadow-lg rounded-lg p-6 sm:p-8 my-4">
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="flex items-center space-x-2 sm:space-x-3">
|
||||
<!-- Previous Button -->
|
||||
{{ if .HasPrev }}
|
||||
<a href="{{ .Prev.URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg bg-gray-100 text-sm font-medium text-gray-700 hover:bg-gray-200 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150">
|
||||
<span class="sr-only">Précédent</span>
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="ml-1 hidden sm:inline">Précédent</span>
|
||||
</a>
|
||||
{{ else }}
|
||||
<span class="relative inline-flex items-center px-4 py-2 rounded-lg bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="ml-1 hidden sm:inline">Précédent</span>
|
||||
</span>
|
||||
{{ end }}
|
||||
|
||||
<!-- First Page -->
|
||||
{{ if gt $totalPages 1 }}
|
||||
<a href="{{ .First.URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg {{ if eq $currentPage 1 }}bg-blue-600 text-white shadow-sm{{ else }}bg-gray-100 text-gray-700 hover:bg-gray-200{{ end }} text-sm font-medium transition-colors duration-150">
|
||||
1
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
<!-- Ellipsis after first page if current page > 4 -->
|
||||
{{ if gt $currentPage 4 }}
|
||||
<span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-500">
|
||||
...
|
||||
</span>
|
||||
{{ end }}
|
||||
|
||||
<!-- Pages around current page -->
|
||||
{{ range .Pagers }}
|
||||
{{ $pageNumber := .PageNumber }}
|
||||
{{ if and (gt $pageNumber 1) (lt $pageNumber $totalPages) (ge $pageNumber (sub $currentPage 1)) (le $pageNumber (add $currentPage 1)) }}
|
||||
{{ if ne $pageNumber 1 }}
|
||||
{{ if ne $pageNumber $totalPages }}
|
||||
<a href="{{ .URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg {{ if eq $pageNumber $currentPage }}bg-blue-600 text-white shadow-sm{{ else }}bg-gray-100 text-gray-700 hover:bg-gray-200{{ end }} text-sm font-medium transition-colors duration-150">
|
||||
{{ $pageNumber }}
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Ellipsis before last page if current page < totalPages - 3 -->
|
||||
{{ if lt $currentPage (sub $totalPages 3) }}
|
||||
<span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-500">
|
||||
...
|
||||
</span>
|
||||
{{ end }}
|
||||
|
||||
<!-- Last Page -->
|
||||
{{ if gt $totalPages 1 }}
|
||||
<a href="{{ .Last.URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg {{ if eq $currentPage $totalPages }}bg-blue-600 text-white shadow-sm{{ else }}bg-gray-100 text-gray-700 hover:bg-gray-200{{ end }} text-sm font-medium transition-colors duration-150">
|
||||
{{ $totalPages }}
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
<!-- Next Button -->
|
||||
{{ if .HasNext }}
|
||||
<a href="{{ .Next.URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg bg-gray-100 text-sm font-medium text-gray-700 hover:bg-gray-200 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150">
|
||||
<span class="mr-1 hidden sm:inline">Suivant</span>
|
||||
<span class="sr-only">Suivant</span>
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
{{ else }}
|
||||
<span class="relative inline-flex items-center px-4 py-2 rounded-lg bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
|
||||
<span class="mr-1 hidden sm:inline">Suivant</span>
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{{ end }}
|
||||
35
layouts/partials/related-posts.html
Normal file
35
layouts/partials/related-posts.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!-- Related Articles -->
|
||||
<div class="py-12">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">Articles connexes</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{{ range first 3 (where .Site.RegularPages "Type" "post") }}
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
|
||||
{{ if .Params.featured_image }}
|
||||
<img src="{{ .Params.featured_image }}" alt="Article" class="w-full h-48 object-cover">
|
||||
{{ else }}
|
||||
<img src="https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Article" class="w-full h-48 object-cover">
|
||||
{{ end }}
|
||||
<div class="p-6">
|
||||
<span class="text-sm font-medium text-blue-600">
|
||||
{{ with .Params.categories }}
|
||||
{{ range first 1 . }}
|
||||
{{ . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</span>
|
||||
<h3 class="text-xl font-semibold mt-2 mb-3">
|
||||
<a href="{{ .Permalink }}" class="text-gray-900 hover:text-blue-600 transition-colors">{{ .Title }}</a>
|
||||
</h3>
|
||||
<p class="text-gray-600">{{ .Summary | truncate 100 }}</p>
|
||||
<div class="flex items-center mt-4 text-sm text-gray-500">
|
||||
<span>{{ .Date.Format "2 janvier 2006" }}</span>
|
||||
<span class="mx-2">•</span>
|
||||
<span>{{ .ReadingTime }} min de lecture</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -4,7 +4,7 @@
|
||||
"description": "Hugo static site with WordPress content",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"fetch-data": "node scripts/fetch-wordpress.js",
|
||||
"fetch-data": "node scripts/fetch-data.js",
|
||||
"generate-content": "node scripts/generate-content.js",
|
||||
"prebuild": "npm run fetch-data && npm run generate-content",
|
||||
"build": "npm run build:css && npm run build:js",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# Crontab file for updating the website
|
||||
|
||||
# Run the update script every day at 2:00 AM
|
||||
0 2 * * * /home/acid/Documents/mistergeek/scripts/update-website.sh >> /home/acid/Documents/mistergeek/logs/update-website.log 2>&1
|
||||
0 2 * * * /home/srv/files/content/mistergeek.net/scripts/update-website.sh >> /home/srv/files/content/mistergeek.net/logs/update-website.log 2>&1
|
||||
|
||||
# Alternatively, run the update script every 6 hours
|
||||
# 0 */6 * * * /home/acid/Documents/mistergeek/scripts/update-website.sh >> /home/acid/Documents/mistergeek/logs/update-website.log 2>&1
|
||||
|
||||
@@ -13,7 +13,7 @@ cd "$(dirname "$0")/.."
|
||||
echo "Checking for Docker image..."
|
||||
if ! docker compose ls | grep -q "builder"; then
|
||||
echo "Docker image not found. Building image..."
|
||||
docker compose build
|
||||
docker compose build builder
|
||||
fi
|
||||
|
||||
# Start the builder container
|
||||
|
||||
@@ -49,6 +49,7 @@
|
||||
--color-white: #fff;
|
||||
--spacing: 0.25rem;
|
||||
--container-xl: 36rem;
|
||||
--container-2xl: 42rem;
|
||||
--container-3xl: 48rem;
|
||||
--container-4xl: 56rem;
|
||||
--text-xs: 0.75rem;
|
||||
@@ -75,6 +76,7 @@
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--leading-relaxed: 1.625;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
@@ -368,6 +370,9 @@
|
||||
.mt-8 {
|
||||
margin-top: calc(var(--spacing) * 8);
|
||||
}
|
||||
.mt-12 {
|
||||
margin-top: calc(var(--spacing) * 12);
|
||||
}
|
||||
.mr-1 {
|
||||
margin-right: calc(var(--spacing) * 1);
|
||||
}
|
||||
@@ -428,6 +433,12 @@
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.h-5 {
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
.h-6 {
|
||||
height: calc(var(--spacing) * 6);
|
||||
}
|
||||
.h-10 {
|
||||
height: calc(var(--spacing) * 10);
|
||||
}
|
||||
@@ -458,6 +469,15 @@
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
.w-0 {
|
||||
width: calc(var(--spacing) * 0);
|
||||
}
|
||||
.w-5 {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
.w-6 {
|
||||
width: calc(var(--spacing) * 6);
|
||||
}
|
||||
.w-10 {
|
||||
width: calc(var(--spacing) * 10);
|
||||
}
|
||||
@@ -470,6 +490,9 @@
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.max-w-2xl {
|
||||
max-width: var(--container-2xl);
|
||||
}
|
||||
.max-w-3xl {
|
||||
max-width: var(--container-3xl);
|
||||
}
|
||||
@@ -485,6 +508,9 @@
|
||||
.max-w-xl {
|
||||
max-width: var(--container-xl);
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -505,6 +531,9 @@
|
||||
.transform {
|
||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
||||
}
|
||||
.cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.list-inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
@@ -538,6 +567,9 @@
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.gap-2 {
|
||||
gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
@@ -616,6 +648,9 @@
|
||||
.rounded-lg {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
.rounded-md {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.rounded-xl {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
@@ -852,6 +887,12 @@
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.decoration-blue-600 {
|
||||
text-decoration-color: var(--color-blue-600);
|
||||
}
|
||||
.antialiased {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@@ -898,6 +939,11 @@
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-transform {
|
||||
transition-property: transform, translate, scale, rotate;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.duration-150 {
|
||||
--tw-duration: 150ms;
|
||||
transition-duration: 150ms;
|
||||
@@ -906,6 +952,10 @@
|
||||
--tw-duration: 200ms;
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
.duration-300 {
|
||||
--tw-duration: 300ms;
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.ease-in {
|
||||
--tw-ease: var(--ease-in);
|
||||
transition-timing-function: var(--ease-in);
|
||||
@@ -995,6 +1045,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:underline {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:decoration-blue-800 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
text-decoration-color: var(--color-blue-800);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:shadow-lg {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -1315,6 +1379,235 @@
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.prose h1,
|
||||
.prose h2,
|
||||
.prose h3,
|
||||
.prose h4,
|
||||
.prose h5,
|
||||
.prose h6 {
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
.prose h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.prose h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
.prose h3 {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
.prose h4 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.prose h5 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.prose h6 {
|
||||
font-size: 1em;
|
||||
color: var(--gray-600);
|
||||
}
|
||||
.prose p {
|
||||
margin-bottom: 1.5em;
|
||||
line-height: 1.75;
|
||||
color: var(--gray-700);
|
||||
}
|
||||
.prose ul,
|
||||
.prose ol {
|
||||
margin-bottom: 1.5em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
.prose ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.prose ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
.prose li {
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.75;
|
||||
color: var(--gray-700);
|
||||
}
|
||||
.prose ul ul,
|
||||
.prose ol ol,
|
||||
.prose ul ol,
|
||||
.prose ol ul {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.prose a {
|
||||
color: var(--primary-blue);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--primary-blue);
|
||||
transition: color 0.2s ease, text-decoration-color 0.2s ease;
|
||||
}
|
||||
.prose a:hover {
|
||||
color: var(--primary-blue-dark);
|
||||
text-decoration-color: var(--primary-blue-dark);
|
||||
}
|
||||
.prose img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.prose figure {
|
||||
margin: 2em 0;
|
||||
text-align: center;
|
||||
}
|
||||
.prose figcaption {
|
||||
font-size: 0.875em;
|
||||
color: var(--gray-600);
|
||||
margin-top: 0.5em;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
.prose table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1.5em;
|
||||
border: 1px solid var(--gray-300);
|
||||
}
|
||||
.prose th,
|
||||
.prose td {
|
||||
padding: 0.75em 1em;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--gray-300);
|
||||
}
|
||||
.prose th {
|
||||
background-color: var(--gray-100);
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
.prose tbody tr:nth-child(even) {
|
||||
background-color: var(--gray-50);
|
||||
}
|
||||
.prose blockquote {
|
||||
border-left: 4px solid var(--primary-blue);
|
||||
padding-left: 1.5rem;
|
||||
margin: 2em 0;
|
||||
font-style: italic;
|
||||
color: var(--gray-600);
|
||||
background-color: var(--gray-50);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.prose blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.prose code {
|
||||
background-color: var(--gray-100);
|
||||
color: var(--gray-800);
|
||||
padding: 0.25em 0.5em;
|
||||
border-radius: 0.25rem;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.prose pre {
|
||||
background-color: var(--gray-900);
|
||||
color: var(--gray-50);
|
||||
padding: 1.5em;
|
||||
border-radius: 0.5rem;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5em;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.prose pre code {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.prose iframe,
|
||||
.prose video,
|
||||
.prose audio {
|
||||
max-width: 100%;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.prose .wp-block-embed {
|
||||
margin: 2em 0;
|
||||
}
|
||||
.prose hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: var(--gray-300);
|
||||
margin: 2em 0;
|
||||
}
|
||||
.prose .wp-caption {
|
||||
background-color: var(--gray-50);
|
||||
border: 1px solid var(--gray-200);
|
||||
padding: 1em;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.prose .wp-caption-text {
|
||||
font-size: 0.875em;
|
||||
color: var(--gray-600);
|
||||
margin-top: 0.5em;
|
||||
font-style: italic;
|
||||
}
|
||||
.prose .alignleft {
|
||||
float: left;
|
||||
margin: 0.5em 1.5em 0.5em 0;
|
||||
}
|
||||
.prose .alignright {
|
||||
float: right;
|
||||
margin: 0.5em 0 0.5em 1.5em;
|
||||
}
|
||||
.prose .aligncenter {
|
||||
display: block;
|
||||
margin: 1.5em auto;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.prose .alignleft,
|
||||
.prose .alignright {
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 1.5em auto;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.prose .wp-block-gallery {
|
||||
margin: 2em 0;
|
||||
}
|
||||
.prose .wp-block-gallery .blocks-gallery-item {
|
||||
margin: 0.5em;
|
||||
}
|
||||
.prose .wp-block-quote {
|
||||
border-left: 4px solid var(--primary-blue);
|
||||
padding-left: 1.5rem;
|
||||
margin: 2em 0;
|
||||
font-style: italic;
|
||||
color: var(--gray-600);
|
||||
background-color: var(--gray-50);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.prose .wp-block-pullquote {
|
||||
border-top: 4px solid var(--primary-blue);
|
||||
border-bottom: 4px solid var(--primary-blue);
|
||||
padding: 2em;
|
||||
margin: 2em 0;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
color: var(--gray-700);
|
||||
}
|
||||
.prose .wp-block-code {
|
||||
background-color: var(--gray-900);
|
||||
color: var(--gray-50);
|
||||
padding: 1.5em;
|
||||
border-radius: 0.5rem;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5em;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
:root {
|
||||
--primary-blue: #3b82f6;
|
||||
--primary-blue-dark: #2563eb;
|
||||
|
||||
@@ -472,9 +472,9 @@
|
||||
"@tailwindcss/oxide-win32-arm64-msvc" "4.1.12"
|
||||
"@tailwindcss/oxide-win32-x64-msvc" "4.1.12"
|
||||
|
||||
"@tailwindcss/postcss@^4.1.12":
|
||||
"@tailwindcss/postcss@^4.1.4":
|
||||
version "4.1.12"
|
||||
resolved "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.12.tgz"
|
||||
resolved "https://registry.yarnpkg.com/@tailwindcss/postcss/-/postcss-4.1.12.tgz#ac2423c3cc69d673e2965c6d1413504a6398e415"
|
||||
integrity sha512-5PpLYhCAwf9SJEeIsSmCDLgyVfdBhdBpzX1OJ87anT9IVR0Z9pjM0FNixCAUAHGnMBGB8K99SwAheXrT0Kh6QQ==
|
||||
dependencies:
|
||||
"@alloc/quick-lru" "^5.2.0"
|
||||
|
||||
Reference in New Issue
Block a user