wip tailwind theme
This commit is contained in:
kbe
@@ -6,37 +6,57 @@
|
||||
|
||||
<!-- SEO & Social Meta Tags -->
|
||||
<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">
|
||||
|
||||
<!-- Icons -->
|
||||
<!-- <link href="/assets/plugins/font-awesome/css/all.css" rel="stylesheet"> -->
|
||||
<!-- Font Awesome -->
|
||||
<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>
|
||||
<body data-preloader="1">
|
||||
|
||||
<body class="bg-white text-gray-800 antialiased">
|
||||
|
||||
<!-- Header -->
|
||||
{{ partial "header.html" . }}
|
||||
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
|
||||
|
||||
<main>
|
||||
{{ block "main" . }}{{ end }}
|
||||
</main>
|
||||
|
||||
|
||||
<!-- Footer -->
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<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>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script type="module" src="/builds/app.js"></script>
|
||||
<!-- <script src="/assets/js/header.js"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,61 +1,218 @@
|
||||
{{ define "main" }}
|
||||
|
||||
<!-- layouts/index.html -->
|
||||
<div class="section-sm bg-gray-lighter">
|
||||
<div class="container text-center">
|
||||
<h1 class="font-family-playfair">{{ .Site.Title }}</h1>
|
||||
<p class="mt-3">{{ .Site.Params.seo.description }}</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">
|
||||
{{ $paginator := .Paginator 10 }}
|
||||
{{ range $paginator.Pages }}
|
||||
<!-- Blog Post box -->
|
||||
<div class="mb-5">
|
||||
<div class="img-link-box">
|
||||
<a href="{{ .Permalink }}">
|
||||
{{ if .Params.featured_image }}
|
||||
<img src="{{ .Params.featured_image }}" alt="{{ .Title }}">
|
||||
{{ else }}
|
||||
<img src="/assets/images/col-1.jpg" alt="{{ .Title }}">
|
||||
<!-- Modern Homepage -->
|
||||
<div class="min-h-screen bg-white">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<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">
|
||||
{{ .Site.Title }}
|
||||
</h1>
|
||||
<p class="text-xl text-gray-700 mb-8">
|
||||
{{ .Site.Params.description | default "Exploring technology's impact on work and life" }}
|
||||
</p>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
{{ $categories := .Site.Taxonomies.categories }}
|
||||
{{ if $categories }}
|
||||
{{ $categoryList := slice }}
|
||||
{{ range $name, $taxonomy := $categories }}
|
||||
{{ range $taxonomy }}
|
||||
{{ $categoryList = $categoryList | append . }}
|
||||
{{ 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 }}
|
||||
<div class="mt-3">
|
||||
<a class="button-text-1" href="{{ .Permalink }}">Lire la suite</a>
|
||||
{{ range first 5 $categoryList }}
|
||||
<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>
|
||||
<!-- End Blog Post box -->
|
||||
{{ end }}
|
||||
|
||||
<!-- Pagination -->
|
||||
{{ partial "pagination.html" . }}
|
||||
</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>
|
||||
<!-- end Blog section -->
|
||||
{{ end }}
|
||||
|
||||
@@ -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 }">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
<!-- Logo -->
|
||||
<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>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="hidden md:flex items-center space-x-8">
|
||||
<a href="/" class="text-gray-600 hover:text-blue-600 font-medium">Accueil</a>
|
||||
|
||||
<!-- Dynamic Categories from WordPress -->
|
||||
<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>
|
||||
{{ if .Site.Data.wordpress }}
|
||||
{{ $count := 0 }}
|
||||
{{ range $index, $element := .Site.Data.wordpress.categories }}
|
||||
{{ if or (eq $element.name "Featured") (eq $element.name "Non classé") (eq $element.name "Uncategorized") }}
|
||||
{{ continue }}
|
||||
{{ else if and (lt $count 5) (ne $element.name "Soirées et afterworks") (ne $element.name "Concerts") }}
|
||||
<a href="/{{ $element.slug }}"
|
||||
class="text-gray-600 hover:text-blue-600 font-medium">
|
||||
{{ $element.name }}
|
||||
</a>
|
||||
{{ $count = add $count 1 }}
|
||||
{{ $count := 0 }}
|
||||
{{ range $index, $element := .Site.Data.wordpress.categories }}
|
||||
{{ if or (eq $element.name "Featured") (eq $element.name "Non classé") }}
|
||||
{{ continue }}
|
||||
{{ else if lt $count 5 }}
|
||||
<a href="/{{ $element.slug }}" class="text-gray-600 hover:text-blue-600 font-medium transition-colors">{{ $element.name }}</a>
|
||||
{{ $count = add $count 1 }}
|
||||
{{ else }}
|
||||
{{ break }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
@@ -55,25 +55,21 @@
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-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>
|
||||
|
||||
<!-- Dynamic Categories for Mobile -->
|
||||
<a href="/articles" class="text-gray-600 hover:text-blue-600 font-medium py-2">Articles</a>
|
||||
{{ if .Site.Data.wordpress }}
|
||||
{{ $count := 0 }}
|
||||
{{ range $index, $element := .Site.Data.wordpress.categories }}
|
||||
{{ if or (eq $element.name "Featured") (eq $element.name "Non classé") (eq $element.name "Uncategorized") }}
|
||||
{{ continue }}
|
||||
{{ else if and (lt $count 5) (ne $element.name "Soirées et afterworks") (ne $element.name "Concerts") }}
|
||||
<a href="/{{ $element.slug }}"
|
||||
class="text-gray-600 hover:text-blue-600 font-medium py-2">
|
||||
{{ $element.name }}
|
||||
</a>
|
||||
{{ $count = add $count 1 }}
|
||||
{{ $count := 0 }}
|
||||
{{ range $index, $element := .Site.Data.wordpress.categories }}
|
||||
{{ if or (eq $element.name "Featured") (eq $element.name "Non classé") }}
|
||||
{{ continue }}
|
||||
{{ else if lt $count 5 }}
|
||||
<a href="/{{ $element.slug }}" class="text-gray-600 hover:text-blue-600 font-medium py-2">{{ $element.name }}</a>
|
||||
{{ $count = add $count 1 }}
|
||||
{{ else }}
|
||||
{{ break }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- end Header -->
|
||||
|
||||
Reference in New Issue
Block a user