Refactor CSS styles and update HTML structure for improved layout and responsiveness
- Updated padding values for sections in custom CSS files to enhance spacing. - Introduced new card styles with hover effects for better user interaction. - Added new gradient card layout in the chill theme for a visually appealing design. - Removed obsolete sector layout and replaced it with a more flexible gradient card layout. - Enhanced feature list layout with improved pagination and sidebar integration. - Created a new shortcode for gradient card sections to streamline feature presentation.
This commit is contained in:
Boris Waaub
@@ -56,7 +56,7 @@
|
||||
}
|
||||
|
||||
.section {
|
||||
@apply py-16 md:py-24;
|
||||
@apply py-8 md:py-16;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
{{ define "main" }}
|
||||
<div class="pt-2 {{ .Params.bgColor }}">
|
||||
<style>
|
||||
.gradient-bg {
|
||||
background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-color) 25%, white), white);
|
||||
}
|
||||
</style>
|
||||
<div class="absolute inset-x-0 top-0 h-full gradient-bg opacity-75"></div>
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<main>
|
||||
<article>
|
||||
<div class="relative isolate overflow-hidden">
|
||||
|
||||
<div class="text-center mb-16">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6">{{ .Params.title }}</h1>
|
||||
<p class="text-xl text-gray-600 mb-16">{{ .Params.description }}</p>
|
||||
<div class="max-w-3xl mx-auto bg-white rounded-xl shadow-sm p-8">
|
||||
<p class="text-xl text-gray-600 text-left">
|
||||
{{ .Params.card | markdownify }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -1,5 +0,0 @@
|
||||
{{ define "main" }}
|
||||
<article class="post">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
{{ end }}
|
||||
@@ -1,79 +1,81 @@
|
||||
{{ define "main" }}
|
||||
<div class="pt-2">
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="flex flex-col md:flex-row gap-6 items-start">
|
||||
<!-- Sidebar -->
|
||||
<div class="w-full md:w-1/4 lg:w-1/5 pt-1">
|
||||
{{ partial "features-sidebar.html" . }}
|
||||
</div>
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="flex flex-col md:flex-row gap-6 items-start">
|
||||
<!-- Sidebar -->
|
||||
<div class="w-full md:w-1/4 lg:w-1/5 pt-1">
|
||||
{{ partial "features-sidebar.html" . }}
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="w-full md:w-3/4 lg:w-4/5 pt-2">
|
||||
<article class="feature-page">
|
||||
<h1 class="text-4xl font-bold text-center mb-5">{{ .Title }}</h1>
|
||||
{{ with .Params.description }}
|
||||
<p class="text-center font-light text-gray-500 sm:text-xl">{{ . }}</p>
|
||||
{{ end }}
|
||||
<!-- Main Content -->
|
||||
<main class="w-full md:w-3/4 lg:w-4/5 pt-2">
|
||||
<article class="feature-page">
|
||||
<h1 class="text-4xl font-bold text-center mb-5">{{ .Title }}</h1>
|
||||
{{ with .Params.description }}
|
||||
<p class="text-center font-light text-gray-500 sm:text-xl">{{ . }}</p>
|
||||
{{ end }}
|
||||
|
||||
<!-- Main Content -->
|
||||
<!-- Main Content -->
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{{ $paginator := .Paginate (.Pages.ByWeight) }}
|
||||
{{ range $paginator.Pages }}
|
||||
{{ partial "feature-card.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{{ $paginator := .Paginate (.Pages.ByWeight) }}
|
||||
{{ range $paginator.Pages }}
|
||||
{{ partial "feature-card.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ $paginator := .Paginate .Pages }}
|
||||
{{ if gt $paginator.TotalPages 1 }}
|
||||
<nav class="mt-12 flex justify-between items-center">
|
||||
{{ if $paginator.HasPrev }}
|
||||
<a href="{{ $paginator.Prev.URL }}"
|
||||
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
||||
</svg>
|
||||
{{ i18n "previous" }}
|
||||
</a>
|
||||
{{ else }}
|
||||
<div></div>
|
||||
{{ end }}
|
||||
{{ $paginator := .Paginate .Pages }}
|
||||
{{ if gt $paginator.TotalPages 1 }}
|
||||
<nav class="mt-12 flex justify-between items-center">
|
||||
{{ if $paginator.HasPrev }}
|
||||
<a href="{{ $paginator.Prev.URL }}"
|
||||
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
||||
</svg>
|
||||
{{ i18n "previous" }}
|
||||
</a>
|
||||
{{ else }}
|
||||
<div></div>
|
||||
{{ end }}
|
||||
|
||||
<div class="flex space-x-2">
|
||||
{{ range $paginator.Pagers }}
|
||||
{{ if eq . $paginator }}
|
||||
<div class="flex space-x-2">
|
||||
{{ range $paginator.Pagers }}
|
||||
{{ if eq . $paginator }}
|
||||
<span class="px-4 py-2 bg-primary-400 text-white rounded-lg">
|
||||
{{ .PageNumber }}
|
||||
</span>
|
||||
{{ else }}
|
||||
<a href="{{ .URL }}"
|
||||
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
|
||||
{{ else }}
|
||||
<a href="{{ .URL }}"
|
||||
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
|
||||
{{ .PageNumber }}
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ if $paginator.HasNext }}
|
||||
<a href="{{ $paginator.Next.URL }}"
|
||||
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
|
||||
{{ i18n "next" }}
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
{{ else }}
|
||||
<div></div>
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ if $paginator.HasNext }}
|
||||
<a href="{{ $paginator.Next.URL }}"
|
||||
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
|
||||
{{ i18n "next" }}
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
{{ else }}
|
||||
<div></div>
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
<!-- Global CTA -->
|
||||
{{ partial "components/cta.html" . }}
|
||||
</article>
|
||||
</main>
|
||||
<!-- Global CTA -->
|
||||
{{ partial "components/cta.html" . }}
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
@@ -1,98 +1,102 @@
|
||||
{{ define "main" }}
|
||||
<div class="pt-2 feature-page badge-{{ .Params.badgeColor }}">
|
||||
<style>
|
||||
.badge {
|
||||
background-color: color-mix(in srgb, var(--badge-color) 40%, transparent);
|
||||
color: #222;
|
||||
}
|
||||
.gradient-bg {
|
||||
background-image: linear-gradient(180deg, color-mix(in srgb, var(--badge-color) 15%, white), white);
|
||||
}
|
||||
</style>
|
||||
<div class="absolute inset-x-0 top-0 h-96 gradient-bg opacity-75"></div>
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="flex flex-col md:flex-row gap-6 items-start">
|
||||
<!-- Sidebar -->
|
||||
<div class="w-full md:w-1/3 lg:w-1/4 pt-1">
|
||||
{{ partial "features-sidebar.html" . }}
|
||||
</div>
|
||||
<style>
|
||||
.badge {
|
||||
background-color: color-mix(in srgb, var(--badge-color) 40%, transparent);
|
||||
color: #222;
|
||||
}
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="w-full md:w-2/3 lg:w-4/5 pt-2">
|
||||
<article >
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden">
|
||||
|
||||
<div class="relative pt-16 pb-16 ">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
{{ with .Params.badge }}
|
||||
<div class="mb-6">
|
||||
<span class="badge inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium">
|
||||
{{ . }}
|
||||
</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">{{ .Title }}</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.gradient-bg {
|
||||
background-image: linear-gradient(180deg, color-mix(in srgb, var(--badge-color) 25%, white), white);
|
||||
}
|
||||
</style>
|
||||
<div class="absolute inset-x-0 top-0 h-96 gradient-bg opacity-75"></div>
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="flex flex-col md:flex-row gap-6 items-start">
|
||||
<!-- Sidebar -->
|
||||
<div class="w-full md:w-1/3 lg:w-1/4 pt-1">
|
||||
{{ partial "features-sidebar.html" . }}
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<!-- Key Features Grid -->
|
||||
{{ if .Params.features }}
|
||||
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||
<div class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2 xl:grid-cols-4">
|
||||
{{ range .Params.features }}
|
||||
<div class="flex flex-col bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 p-8">
|
||||
<dt class="text-lg font-semibold leading-7 text-gray-900">
|
||||
{{ .title }}
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
|
||||
<p class="flex-auto">{{ .description }}</p>
|
||||
</dd>
|
||||
<main class="w-full md:w-2/3 lg:w-4/5 pt-2">
|
||||
<article>
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden">
|
||||
|
||||
<div class="relative pt-16 pb-16 ">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
{{ with .Params.badge }}
|
||||
<div class="mb-6">
|
||||
<span
|
||||
class="badge inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium">
|
||||
{{ . }}
|
||||
</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">{{ .Title }}
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<!-- Key Features Grid -->
|
||||
{{ if .Params.features }}
|
||||
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||
<div
|
||||
class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2 xl:grid-cols-4">
|
||||
{{ range .Params.features }}
|
||||
<div class="flex flex-col bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 p-8">
|
||||
<dt class="text-lg font-semibold leading-7 text-gray-900">
|
||||
{{ .title }}
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
|
||||
<p class="flex-auto">{{ .description }}</p>
|
||||
</dd>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="prose prose-lg mx-auto mt-16 pb-24">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
<!-- Demo Section -->
|
||||
{{ if .Params.demo }}
|
||||
<div class="bg-gray-50 -mx-6 px-6 py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-2xl lg:text-center">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ i18n
|
||||
"seeItInAction" }}</h2>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Params.demo.description }}</p>
|
||||
</div>
|
||||
<div class="mt-16 flex justify-center">
|
||||
<div class="relative rounded-xl bg-white p-8 shadow-2xl ring-1 ring-gray-200">
|
||||
<div class="carousel">
|
||||
{{ range .Params.demo.images }}
|
||||
<div class="carousel-item">
|
||||
<img src="{{ . }}" alt="Demo" class="rounded-lg">
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="prose prose-lg mx-auto mt-16 pb-24">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
<!-- Demo Section -->
|
||||
{{ if .Params.demo }}
|
||||
<div class="bg-gray-50 -mx-6 px-6 py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-2xl lg:text-center">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ i18n "seeItInAction" }}</h2>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Params.demo.description }}</p>
|
||||
</div>
|
||||
<div class="mt-16 flex justify-center">
|
||||
<div class="relative rounded-xl bg-white p-8 shadow-2xl ring-1 ring-gray-200">
|
||||
<div class="carousel">
|
||||
{{ range .Params.demo.images }}
|
||||
<div class="carousel-item">
|
||||
<img src="{{ . }}" alt="Demo" class="rounded-lg">
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- Global CTA -->
|
||||
{{ partial "components/cta.html" . }}
|
||||
</article>
|
||||
</main>
|
||||
<!-- Global CTA -->
|
||||
{{ partial "components/cta.html" . }}
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
+2
-2
@@ -4,13 +4,13 @@
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
||||
<div class="text-center max-w-3xl mx-auto mb-8">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">{{ $title }}</h2>
|
||||
<p class="text-xl text-gray-600">{{ $description | markdownify }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Grid -->
|
||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
||||
<div class="text-center max-w-3xl mx-auto mb-8">
|
||||
{{ .Inner | safeHTML }}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user