Modals + Img Grid

2024-10-27 02:14:26 -07:00
parent b3426ec6d8
commit 3d8aa9e608
70 changed files with 258 additions and 151 deletions
--- a/layouts/partials/components/features.html
+++ b/layouts/partials/components/features.html
@@ -6,12 +6,12 @@
  {{ with .transition }}
  {{ if .start }}
  <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block {{ .start_class }}"
-    style="height: 100px;z-index:12;mask-image: url('{{ .start }}');background-color: {{ .start_color }};{{ .start_style | safeCSS }}">
+    style="height: 100px;z-index:5;mask-image: url('{{ .start }}');background-color: {{ .start_color }};{{ .start_style | safeCSS }}">
  </div>
  {{ end }}
  {{ if .start_dark }}
  <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden {{ .start_class }}"
-    style="height: 100px;z-index:12;mask-image: url('{{ .start_dark }}');background-color: {{ .start_dark_color }};{{ .start_style | safeCSS }}">
+    style="height: 100px;z-index:5;mask-image: url('{{ .start_dark }}');background-color: {{ .start_dark_color }};{{ .start_style | safeCSS }}">
  </div>
  {{ end }}
  {{ end }}
@@ -27,7 +27,7 @@
  {{ end }}
  {{ end }}

-  <div class="container relative mx-auto" style="z-index: 12;">
+  <div class="container relative mx-auto" style="z-index: 5;">
    <div class="row items-center justify-between">
      {{ if eq .side "center" }}
      <div class="mx-auto md:col-10 lg:col-10 {{ .content_class }}">
@@ -69,11 +69,6 @@
        {{ partial "components/testimonials.html" . }}
        {{ end }}
        <!-- testimonials -->
-        <!-- people_grid  -->
-        {{ if .img_grid }}
-        {{ partial "components/people_grid.html" . }}
-        {{ end }}
-        <!-- people_grid -->
        <!-- img_grid  -->
        {{ if .img_grid }}
        {{ partial "components/img_grid.html" . }}
@@ -174,12 +169,12 @@
  {{ with .transition }}
  {{ if .end }}
  <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block {{ .end_class }}"
-    style="height: 100px;z-index:12;mask-image: url('{{ .end }}');background-color: {{ .end_color }};{{ .end_style | safeCSS }}">
+    style="height: 100px;z-index:5;mask-image: url('{{ .end }}');background-color: {{ .end_color }};{{ .end_style | safeCSS }}">
  </div>
  {{ end }}
  {{ if .end_dark }}
  <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden {{ .end_class }}"
-    style="height: 100px;z-index:12;mask-image: url('{{ .end_dark }}');background-color: {{ .end_dark_color }};{{ .end_style | safeCSS }}">
+    style="height: 100px;z-index:5;mask-image: url('{{ .end_dark }}');background-color: {{ .end_dark_color }};{{ .end_style | safeCSS }}">
  </div>
  {{ end }}
  {{ end }}
--- a/layouts/partials/components/img_grid.html
+++ b/layouts/partials/components/img_grid.html
@@ -1,14 +1,25 @@
 {{ if .img_grid }}
-<div class="container relative mx-auto px-4">
+<div class="container relative mx-auto px-4 {{ .img_grid.section_class }} img_grid_container">
+  <p class="{{ .img_grid.title_class }}">{{ .img_grid.title }}</p>
  <div class="flex flex-wrap justify-center mx-auto lg:w-full md:w-5/6">
-    {{ range $i, $option := .img_grid }}
+    {{ range $i, $option := .img_grid.imgs }}
    <div class="w-1/2 md:w-1/3 p-2">
-      <div class="flex justify-center items-center w-full">
-        <a href="{{ $option.link }}" class="relative align-center" target="_blank" rel="noopener noreferrer"
-          title="{{ $option.name }}">
-          {{ $imgres := .resources.Get $option.icon }}
-          <img class="max-w-24 align-center" src="{{ $option.icon }}" alt="{{ .Item.Name }}">
+      <div class="flex justify-center align-items-center items-center w-full justify-items-center row"
+      {{ if .modal_target }} data-modal-show="{{ .modal_target }}" {{ end }}>
+      {{ $imgres := .resources.Get $option.img }}
+      {{ if $option.link}}
+        <a href="{{ $option.link }}">
+      {{ end }}
+        <img class="w-10/12 rounded-lg mx-auto col-12" src="{{ $option.img }}" alt="{{ $option.title }}">
+        {{ if $option.title }}
+        <p class="{{ $option.title_class }} {{ .img_grid.img_title_class }} col-12">{{ $option.title | markdownify }}</p>
+        {{ end }}
+        {{ if $option.subtitle }}
+        <p class="{{ $option.subtitle_class }} {{ .img_grid.img_subtitle_class }} col-12">{{ $option.subtitle | markdownify }}</p>
+        {{ end }}
+      {{ if $option.link}}
        </a>
+      {{ end }}
      </div>
    </div>
    {{ end }}
--- a/layouts/partials/components/modals.html
+++ b/layouts/partials/components/modals.html
@@ -0,0 +1,47 @@
+<!-- modal container -->
+{{ if .Params.modals }}
+<div class="modal_container z-100">
+  {{ range $i, $option := .Params.modals }}
+  {{ if .active }}
+  <!-- modal -->
+  <div id="{{ .id }}" tabindex="-1" aria-hidden="true"
+    class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%)] max-h-full flex bg-[rgba(0,0,0,0.5)] modal-bg">
+    <div class="relative p-4 w-full max-w-2xl max-h-full">
+      <!-- Modal content -->
+      <div class="relative bg-white rounded-lg shadow dark:bg-[#150e31]">
+        <!-- Modal header -->
+        <div class="flex items-center justify-between p-4 md:p-5 rounded-t">
+          <button type="button"
+            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+            data-modal-hide="{{ .id }}">
+            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+            </svg>
+            <span class="sr-only">Close modal</span>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div class="p-4 md:p-6 pb-8 md:pb-12 space-y-4">
+          {{ if $option.img }}
+            <img src="{{ $option.img }}" class="w-full max-h-48 object-contain {{ if $option.img_dark }}dark:hidden {{ end }}" />
+          {{ end }}
+          {{ if $option.img_dark }}
+          <img src="{{ $option.img_dark }}" class="w-full max-h-48 object-contain hidden dark:block" />
+          {{ end }}
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+            {{ $option.title | markdownify }}
+          </h3>
+          <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+            {{ $option.content | markdownify }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /modal -->
+  {{ end }}
+  {{ end }}
+</div>
+<!-- /modal container -->
+{{ end }}
--- a/layouts/partials/components/people_grid.html
+++ b/layouts/partials/components/people_grid.html
@@ -1,17 +0,0 @@
-{{ if .people_grid }}
-<div class="container relative mx-auto px-4">
-  <div class="flex flex-wrap justify-center mx-auto lg:w-full md:w-5/6">
-    {{ range $i, $option := .people_grid.people }}
-    <div class="w-1/2 md:w-1/3 p-2">
-      <div class="flex justify-center items-center w-full">
-        <a href="{{ $option.link }}" class="relative align-center" target="_blank" rel="noopener noreferrer"
-          title="{{ $option.name }}">
-          {{ $imgres := .resources.Get $option.icon }}
-          <img class="max-w-24 align-center" src="{{ $option.icon }}" alt="{{ .Item.Name }}">
-        </a>
-      </div>
-    </div>
-    {{ end }}
-  </div>
-</div>
-{{ end }}
--- a/layouts/partials/components/text_sidepanel.html
+++ b/layouts/partials/components/text_sidepanel.html
@@ -0,0 +1,8 @@
+{{ with .Params.text_sidepanel }}
+{{ if .active }}
+<div class="mb-8 {{ .section_class }}">
+  <h5 class="{{ .title_class }}">{{ .title }}</h5>
+  <p class="{{ .text_class }}">{{ .text | markdownify }}</p>
+</div>
+{{ end }}
+{{ end }}