From 248438ae8d328370d66f7f78e43c9d01b6293143 Mon Sep 17 00:00:00 2001 From: kbe Date: Wed, 20 Aug 2025 11:56:54 +0200 Subject: [PATCH] wip tailwind theme --- assets/css/app.css | 155 ++++++++++++++++----- layouts/_default/baseof.html | 50 +++++-- layouts/index.html | 259 ++++++++++++++++++++++++++++------- layouts/partials/header.html | 60 ++++---- static/builds/app.css | 227 +++++++++++++++++++++++++++--- 5 files changed, 602 insertions(+), 149 deletions(-) diff --git a/assets/css/app.css b/assets/css/app.css index 55987c8..a0cacd2 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -1,10 +1,121 @@ @import "tailwindcss"; - @import "header.css"; -body { - background: #fdfdff; +/* Modern Design System */ +: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-nav { width: 100%; @@ -33,54 +144,34 @@ body { display: flex; align-items: center; font-size: 0.875rem; - color: #64748b; + color: var(--gray-600); } .breadcrumb-item a { - color: #64748b; + color: var(--gray-600); text-decoration: none; transition: color 0.2s ease; - display: flex; - align-items: center; - gap: 0.25rem; } .breadcrumb-item a:hover { - color: #3b82f6; + color: var(--primary-blue); } .breadcrumb-item:not(:last-child)::after { content: "/"; margin: 0 0.5rem; - color: #cbd5e1; + color: var(--gray-300); } .breadcrumb-item.active { - color: #3b82f6; + color: var(--primary-blue); font-weight: 500; } -.breadcrumb-item i { - font-size: 0.75rem; -} - -/* Responsive styles */ +/* Responsive Utilities */ @media (max-width: 768px) { - .breadcrumb-list { - padding: 0.5rem 0.75rem; - } - - .breadcrumb-item { - font-size: 0.8125rem; - } - - .breadcrumb-item:not(:last-child)::after { - margin: 0 0.25rem; + .container { + padding-left: 1rem; + padding-right: 1rem; } } - -/* @media (max-width: 480px) { - .breadcrumb-item:nth-last-child(2):not(.active) { - display: none; - } -} */ diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 7389a7b..15efced 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,37 +6,57 @@ {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }} - {{ partial "seo/seo-config.html" . }} + + - + + + + + + + + + + + + + + + + + - - + + + + + - - + + {{ partial "header.html" . }} - + {{ partial "breadcrumb.html" . }} - +
{{ block "main" . }}{{ end }}
- + {{ partial "footer.html" . }} - +
- +
- - - + + - diff --git a/layouts/index.html b/layouts/index.html index 7e940df..796c88c 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,61 +1,218 @@ {{ define "main" }} - - -
-
-

{{ .Site.Title }}

-

{{ .Site.Params.seo.description }}

-
-
- - -
-
-
-
- {{ $paginator := .Paginator 10 }} - {{ range $paginator.Pages }} - -
-
- - {{ if .Params.featured_image }} - {{ .Title }} - {{ else }} - {{ .Title }} + +
+ + +
+
+
+

+ {{ .Site.Title }} +

+

+ {{ .Site.Params.description | default "Exploring technology's impact on work and life" }} +

+ + +
+ {{ $categories := .Site.Taxonomies.categories }} + {{ if $categories }} + {{ $categoryList := slice }} + {{ range $name, $taxonomy := $categories }} + {{ range $taxonomy }} + {{ $categoryList = $categoryList | append . }} {{ end }} - -
-
-
- - {{ partial "categories-first.html" . }} - -
- {{ .Date.Format "02/07/2006" }} -
-
-

{{ .Title }}

- {{ if .Params.excerpt }} -

{{ .Params.excerpt }}

- {{ else if .Summary }} -

{{ .Summary }}

- {{ else }} -

{{ truncate 200 .Content }}

{{ end }} -
- Lire la suite + {{ range first 5 $categoryList }} + + {{ .Page.Title }} + + {{ end }} + {{ else }} + + General + + {{ end }} +
+ + +
+ + +
+
+
+
+ + +
+
+

Featured Articles

+ +
+ {{ range first 2 (where .Site.RegularPages "Params.featured" true) }} +
+
+ {{ if .Params.featured_image }} + {{ .Title }} + {{ else }} + {{ .Title }} + {{ end }} +
+
+
+ {{ range first 2 (default (slice) .Params.categories) }} + {{ . }} + {{ end }} +
+

+ {{ .Title }} +

+

{{ .Summary | truncate 150 }}

+
+
+ {{ .Params.author | default "Tech Team" }} + • + {{ .Date.Format "Jan 2, 2006" }} +
+ Read more →
- {{ end }} - - - {{ partial "pagination.html" . }}
-
-
+ +
+ + View all articles + + +
+
+ + + +
+
+

Latest Articles

+ +
+ {{ range first 6 .Paginator.Pages }} +
+ {{ if .Params.featured_image }} + {{ .Title }} + {{ else }} + {{ .Title }} + {{ end }} +
+
+ {{ range first 1 (default (slice) .Params.categories) }} + {{ . }} + {{ end }} +
+

+ {{ .Title }} +

+

{{ .Summary | truncate 100 }}

+
+ {{ .Date.Format "Jan 2, 2006" }} + {{ .ReadingTime }} min read +
+
+
+ {{ end }} +
+ + + {{ if gt .Paginator.TotalPages 1 }} +
+ +
+ {{ end }} +
+
+ + +
+
+

Explore Topics

+ +
+ {{ $categories := .Site.Taxonomies.categories }} + {{ if $categories }} + {{ $categoryList := slice }} + {{ range $name, $taxonomy := $categories }} + {{ range $taxonomy }} + {{ $categoryList = $categoryList | append . }} + {{ end }} + {{ end }} + {{ range $categoryList }} + +
+ +
+ {{ .Page.Title }} + + {{ end }} + {{ else }} +
+

No categories available yet.

+
+ {{ end }} +
+ +
+ + Browse all topics + + +
+
+
+ + +
+
+
+

Stay Updated

+

Join our newsletter and get the latest insights on technology and the future of work delivered to your inbox.

+
+ + +
+

No spam. Unsubscribe at any time.

+
+
+
- {{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 6d1165a..a6aaa05 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,31 +1,31 @@ - +
+
- {{ .Site.Title }} + + {{ .Site.Title }} +
@@ -55,25 +55,21 @@
Accueil - - + Articles {{ 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") }} - - {{ $element.name }} - - {{ $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 }} + {{ $element.name }} + {{ $count = add $count 1 }} + {{ else }} + {{ break }} + {{ end }} {{ end }} - {{ end }} {{ end }} -
- diff --git a/static/builds/app.css b/static/builds/app.css index d984469..f3c5c74 100644 --- a/static/builds/app.css +++ b/static/builds/app.css @@ -9,9 +9,11 @@ "Courier New", monospace; --color-red-100: oklch(93.6% 0.032 17.717); --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-yellow-100: oklch(97.3% 0.071 103.193); --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-green-100: oklch(96.2% 0.044 156.743); --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-700: oklch(48.8% 0.243 264.376); --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-200: oklch(90.2% 0.063 306.703); --color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-800: oklch(43.8% 0.218 303.724); --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-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); @@ -42,6 +47,9 @@ --spacing: 0.25rem; --container-xl: 36rem; --container-3xl: 48rem; + --container-4xl: 56rem; + --text-xs: 0.75rem; + --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-lg: 1.125rem; @@ -50,10 +58,14 @@ --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --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--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; + --text-6xl: 3.75rem; + --text-6xl--line-height: 1; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; @@ -419,6 +431,9 @@ .col-auto { grid-column: auto; } + .col-span-full { + grid-column: 1 / -1; + } .float-end { float: inline-end; } @@ -605,9 +620,18 @@ .mb-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 { margin-bottom: auto; } + .ml-2 { + margin-left: calc(var(--spacing) * 2); + } .block { display: block; } @@ -647,6 +671,9 @@ .h-6 { height: calc(var(--spacing) * 6); } + .h-12 { + height: calc(var(--spacing) * 12); + } .h-16 { height: calc(var(--spacing) * 16); } @@ -662,6 +689,9 @@ .h-50 { height: calc(var(--spacing) * 50); } + .h-64 { + height: calc(var(--spacing) * 64); + } .h-75 { height: calc(var(--spacing) * 75); } @@ -671,9 +701,15 @@ .h-auto { height: auto; } + .min-h-screen { + min-height: 100vh; + } .w-6 { width: calc(var(--spacing) * 6); } + .w-12 { + width: calc(var(--spacing) * 12); + } .w-20 { width: calc(var(--spacing) * 20); } @@ -698,6 +734,9 @@ .max-w-3xl { max-width: var(--container-3xl); } + .max-w-4xl { + max-width: var(--container-4xl); + } .max-w-xl { max-width: var(--container-xl); } @@ -766,6 +805,9 @@ .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } .flex-col { flex-direction: column; } @@ -982,12 +1024,21 @@ .bg-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 { background-color: var(--color-gray-900); } .bg-green-100 { background-color: var(--color-green-100); } + .bg-indigo-100 { + background-color: var(--color-indigo-100); + } .bg-purple-100 { background-color: var(--color-purple-100); } @@ -1190,6 +1241,10 @@ font-size: var(--text-2xl); 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 { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); @@ -1206,6 +1261,10 @@ font-size: var(--text-xl); 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 { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); @@ -1261,18 +1320,27 @@ .text-green-800 { color: var(--color-green-800); } + .text-indigo-600 { + color: var(--color-indigo-600); + } .text-purple-600 { color: var(--color-purple-600); } .text-purple-800 { color: var(--color-purple-800); } + .text-red-600 { + color: var(--color-red-600); + } .text-red-800 { color: var(--color-red-800); } .text-white { color: var(--color-white); } + .text-yellow-600 { + color: var(--color-yellow-600); + } .text-yellow-800 { color: var(--color-yellow-800); } @@ -1358,6 +1426,11 @@ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 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-property: box-shadow; 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 { @media (hover: hover) { @@ -1435,6 +1515,13 @@ } } } + .hover\:text-blue-800 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-800); + } + } + } .hover\:text-white { &:hover { @media (hover: hover) { @@ -1492,6 +1579,11 @@ display: none; } } + .md\:grid-cols-2 { + @media (width >= 48rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } .md\:grid-cols-3 { @media (width >= 48rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); @@ -1513,16 +1605,42 @@ 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 { @media (width >= 64rem) { padding-inline: calc(var(--spacing) * 8); } } + .lg\:py-20 { + @media (width >= 64rem) { + padding-block: calc(var(--spacing) * 20); + } + } .lg\:py-24 { @media (width >= 64rem) { 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 { position: relative; @@ -1663,8 +1781,90 @@ border-radius: 4px; 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 { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 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 { width: 100%; @@ -1690,40 +1890,29 @@ body { display: flex; align-items: center; font-size: 0.875rem; - color: #64748b; + color: var(--gray-600); } .breadcrumb-item a { - color: #64748b; + color: var(--gray-600); text-decoration: none; transition: color 0.2s ease; - display: flex; - align-items: center; - gap: 0.25rem; } .breadcrumb-item a:hover { - color: #3b82f6; + color: var(--primary-blue); } .breadcrumb-item:not(:last-child)::after { content: "/"; margin: 0 0.5rem; - color: #cbd5e1; + color: var(--gray-300); } .breadcrumb-item.active { - color: #3b82f6; + color: var(--primary-blue); font-weight: 500; } -.breadcrumb-item i { - font-size: 0.75rem; -} @media (max-width: 768px) { - .breadcrumb-list { - padding: 0.5rem 0.75rem; - } - .breadcrumb-item { - font-size: 0.8125rem; - } - .breadcrumb-item:not(:last-child)::after { - margin: 0 0.25rem; + .container { + padding-left: 1rem; + padding-right: 1rem; } } @property --tw-translate-x {