From 7d63c506e629ee1598fffd2810582fad9b6ddb1a Mon Sep 17 00:00:00 2001 From: nusserstudios Date: Sat, 22 Jul 2023 09:55:23 -0500 Subject: [PATCH] Removed hugo mods in favor of AlpineJS CDN. Refactored homepage for testing on Netlify and Vercel. --- assets/css/style.css | 284 +++-- assets/images/global/sample-logo.svg | 73 +- assets/js/alpine.js | 4 - assets/js/cookies.js | 27 - go.mod | 5 - go.sum | 2 - hugo.yaml | 6 +- hugo.yaml.exampleSite | 4 +- layouts/index.html | 152 ++- layouts/partials/footer.html | 3 +- package.json | 6 +- pnpm-lock.yaml | 997 ++++++++++++++++++ static/images/sample-logo-white.svg | 36 - .../images/sample-logo.svg | 0 14 files changed, 1310 insertions(+), 289 deletions(-) delete mode 100644 assets/js/alpine.js delete mode 100644 assets/js/cookies.js delete mode 100644 go.mod delete mode 100644 go.sum create mode 100644 pnpm-lock.yaml delete mode 100644 static/images/sample-logo-white.svg rename assets/images/global/sample-logo-white.svg => static/images/sample-logo.svg (100%) diff --git a/assets/css/style.css b/assets/css/style.css index b3023a3..929d7e0 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,6 +1,6 @@ /* assets */ -/* ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com */ +/* ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) @@ -191,6 +191,10 @@ select, textarea { font-family: inherit; /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; @@ -341,6 +345,14 @@ menu { padding: 0; } +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + /* Prevent resizing textareas horizontally by default. */ @@ -2393,10 +2405,6 @@ video { margin-right: -0.75rem; } -.-mr-40 { - margin-right: -10rem; -} - .-mt-72 { margin-top: -18rem; } @@ -2457,6 +2465,10 @@ video { margin-top: 2rem; } +.-mr-40 { + margin-right: -10rem; +} + .block { display: block; } @@ -2529,6 +2541,22 @@ video { max-height: 3rem; } +.min-h-full { + min-height: 100%; +} + +.min-h-\[\] { + min-height: ; +} + +.min-h-\[120\] { + min-height: 120; +} + +.min-h-\[120rem\] { + min-height: 120rem; +} + .w-0 { width: 0px; } @@ -2569,10 +2597,32 @@ video { width: 100vw; } +.w-auto { + width: auto; +} + +.w-fit { + width: -moz-fit-content; + width: fit-content; +} + .min-w-0 { min-width: 0px; } +.min-w-max { + min-width: -moz-max-content; + min-width: max-content; +} + +.min-w-\[\] { + min-width: ; +} + +.min-w-\[60rem\] { + min-width: 60rem; +} + .max-w-2xl { max-width: 42rem; } @@ -2589,11 +2639,6 @@ video { max-width: 80rem; } -.max-w-fit { - max-width: -moz-fit-content; - max-width: fit-content; -} - .max-w-full { max-width: 100%; } @@ -2740,12 +2785,6 @@ video { margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); } -.space-x-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); -} - .space-x-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1.5rem * var(--tw-space-x-reverse)); @@ -2768,10 +2807,6 @@ video { overflow: hidden; } -.rounded { - border-radius: 0.25rem; -} - .rounded-2xl { border-radius: 1rem; } @@ -2788,11 +2823,6 @@ video { border-radius: 0.375rem; } -.rounded-l-3xl { - border-top-left-radius: 1.5rem; - border-bottom-left-radius: 1.5rem; -} - .rounded-r-3xl { border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem; @@ -2803,6 +2833,11 @@ video { border-top-right-radius: 0.5rem; } +.rounded-l-3xl { + border-top-left-radius: 1.5rem; + border-bottom-left-radius: 1.5rem; +} + .border { border-width: 1px; } @@ -2858,16 +2893,16 @@ video { background-color: rgb(17 24 39 / var(--tw-bg-opacity)); } +.bg-indigo-300 { + --tw-bg-opacity: 1; + background-color: rgb(165 180 252 / var(--tw-bg-opacity)); +} + .bg-indigo-600 { --tw-bg-opacity: 1; background-color: rgb(79 70 229 / var(--tw-bg-opacity)); } -.bg-primary-300 { - --tw-bg-opacity: 1; - background-color: rgb(174 175 248 / var(--tw-bg-opacity)); -} - .bg-primary-500 { --tw-bg-opacity: 1; background-color: rgb(99 102 241 / var(--tw-bg-opacity)); @@ -2896,9 +2931,9 @@ video { background-image: linear-gradient(to top, var(--tw-gradient-stops)); } -.from-primary-600 { - --tw-gradient-from: #3034EC var(--tw-gradient-from-position); - --tw-gradient-to: rgb(48 52 236 / 0) var(--tw-gradient-to-position); +.from-indigo-600 { + --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } @@ -2986,11 +3021,6 @@ video { padding-bottom: 0.125rem; } -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; @@ -3021,11 +3051,6 @@ video { padding-bottom: 0.75rem; } -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} - .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; @@ -3045,10 +3070,6 @@ video { padding-bottom: 2.5rem; } -.pb-12 { - padding-bottom: 3rem; -} - .pb-16 { padding-bottom: 4rem; } @@ -3061,8 +3082,8 @@ video { padding-bottom: 1rem; } -.pl-4 { - padding-left: 1rem; +.pb-6 { + padding-bottom: 1.5rem; } .pr-2 { @@ -3093,6 +3114,18 @@ video { padding-top: 2rem; } +.pl-4 { + padding-left: 1rem; +} + +.pb-12 { + padding-bottom: 3rem; +} + +.pt-9 { + padding-top: 2.25rem; +} + .text-left { text-align: left; } @@ -3198,6 +3231,18 @@ video { line-height: 1; } +.leading-normal { + line-height: 1.5; +} + +.leading-loose { + line-height: 2; +} + +.leading-tight { + line-height: 1.25; +} + .tracking-tight { letter-spacing: -0.025em; } @@ -3237,6 +3282,10 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } +.text-indigo-400\/30 { + color: rgb(129 140 248 / 0.3); +} + .text-primary-100 { --tw-text-opacity: 1; color: rgb(249 249 254 / var(--tw-text-opacity)); @@ -3247,10 +3296,6 @@ video { color: rgb(136 139 244 / var(--tw-text-opacity)); } -.text-primary-400\/30 { - color: rgb(136 139 244 / 0.3); -} - .text-primary-500 { --tw-text-opacity: 1; color: rgb(99 102 241 / var(--tw-text-opacity)); @@ -4149,6 +4194,11 @@ EmojiSymbols; --tw-ring-color: rgb(17 24 39 / 0.4); } +:is(.dark .dark\:invert) { + --tw-invert: invert(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + :is(.dark .dark\:hover\:bg-gray-700:hover) { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity)); @@ -4227,14 +4277,14 @@ EmojiSymbols; margin-top: 0px; } - .sm\:mt-12 { - margin-top: 3rem; - } - .sm\:mt-4 { margin-top: 1rem; } + .sm\:mt-12 { + margin-top: 3rem; + } + .sm\:block { display: block; } @@ -4243,10 +4293,6 @@ EmojiSymbols; display: flex; } - .sm\:inline-flex { - display: inline-flex; - } - .sm\:h-2\/3 { height: 66.666667%; } @@ -4315,14 +4361,32 @@ EmojiSymbols; line-height: 2.5rem; } + .sm\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } + .sm\:text-5xl { font-size: 3rem; line-height: 1; } - .sm\:text-xl { - font-size: 1.25rem; - line-height: 1.75rem; + .sm\:text-2xl { + font-size: 1.5rem; + line-height: 2rem; + } + + .sm\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } + + .sm\:text-\[2\.5rem\] { + font-size: 2.5rem; + } + + .sm\:text-\[\] { + color: ; } } @@ -4359,6 +4423,14 @@ EmojiSymbols; margin-top: 2rem; } + .md\:mt-9 { + margin-top: 2.25rem; + } + + .md\:mt-16 { + margin-top: 4rem; + } + .md\:inline { display: inline; } @@ -4367,10 +4439,6 @@ EmojiSymbols; display: flex; } - .md\:inline-flex { - display: inline-flex; - } - .md\:hidden { display: none; } @@ -4395,11 +4463,6 @@ EmojiSymbols; width: 100vw; } - .md\:min-w-fit { - min-width: -moz-fit-content; - min-width: fit-content; - } - .md\:max-w-3xl { max-width: 48rem; } @@ -4456,16 +4519,16 @@ EmojiSymbols; padding-right: 1.5rem; } - .md\:py-12 { - padding-top: 3rem; - padding-bottom: 3rem; - } - .md\:py-4 { padding-top: 1rem; padding-bottom: 1rem; } + .md\:py-12 { + padding-top: 3rem; + padding-bottom: 3rem; + } + .md\:pb-0 { padding-bottom: 0px; } @@ -4482,6 +4545,14 @@ EmojiSymbols; padding-top: 6rem; } + .md\:pt-8 { + padding-top: 2rem; + } + + .md\:pt-9 { + padding-top: 2.25rem; + } + .md\:text-left { text-align: left; } @@ -4524,10 +4595,6 @@ EmojiSymbols; left: 0px; } - .lg\:left-80 { - left: 20rem; - } - .lg\:left-auto { left: auto; } @@ -4540,10 +4607,18 @@ EmojiSymbols; right: 18rem; } + .lg\:right-auto { + right: auto; + } + .lg\:top-12 { top: 3rem; } + .lg\:left-80 { + left: 20rem; + } + .lg\:m-0 { margin: 0px; } @@ -4582,20 +4657,28 @@ EmojiSymbols; height: 100%; } + .lg\:h-auto { + height: auto; + } + .lg\:w-1\/2 { width: 50%; } + .lg\:w-screen { + width: 100vw; + } + .lg\:w-auto { width: auto; } - .lg\:w-full { - width: 100%; + .lg\:w-96 { + width: 24rem; } - .lg\:w-screen { - width: 100vw; + .lg\:w-full { + width: 100%; } .lg\:max-w-7xl { @@ -4606,6 +4689,22 @@ EmojiSymbols; max-width: none; } + .lg\:max-w-3xl { + max-width: 48rem; + } + + .lg\:max-w-lg { + max-width: 32rem; + } + + .lg\:max-w-2xl { + max-width: 42rem; + } + + .lg\:max-w-4xl { + max-width: 56rem; + } + .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } @@ -4639,6 +4738,11 @@ EmojiSymbols; padding-right: 0px; } + .lg\:px-20 { + padding-left: 5rem; + padding-right: 5rem; + } + .lg\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; @@ -4672,10 +4776,6 @@ EmojiSymbols; padding-bottom: 6rem; } - .lg\:pl-12 { - padding-left: 3rem; - } - .lg\:pt-12 { padding-top: 3rem; } @@ -4684,6 +4784,10 @@ EmojiSymbols; padding-top: 5rem; } + .lg\:pl-12 { + padding-left: 3rem; + } + .lg\:text-left { text-align: left; } diff --git a/assets/images/global/sample-logo.svg b/assets/images/global/sample-logo.svg index c0aea20..c015112 100644 --- a/assets/images/global/sample-logo.svg +++ b/assets/images/global/sample-logo.svg @@ -1,37 +1,36 @@ - - - - - - - - - - - - - - - - + + + +]> + + + + + + + + + + + + + + + + diff --git a/assets/js/alpine.js b/assets/js/alpine.js deleted file mode 100644 index 5f22eb6..0000000 --- a/assets/js/alpine.js +++ /dev/null @@ -1,4 +0,0 @@ -import Alpine from 'jslibs/alpinejs/v3/alpinejs/dist/module.esm.js'; - -window.Alpine = Alpine; -Alpine.start(); \ No newline at end of file diff --git a/assets/js/cookies.js b/assets/js/cookies.js deleted file mode 100644 index 9f144d5..0000000 --- a/assets/js/cookies.js +++ /dev/null @@ -1,27 +0,0 @@ -// Learn more on how to use the Modal object from Flowbite: https://flowbite.com/docs/components/modal/#javascript-behaviour - -const bannerEl = document.getElementById('banner'); -const banner = new Modal(bannerEl, { - placement: 'bottom-left' -}); - -banner.show(); - -const closeModalEl = document.getElementById('close-modal'); -closeModalEl.addEventListener('click', function() { - banner.hide(); -}); - -const acceptCookiesEl = document.getElementById('accept-cookies'); -acceptCookiesEl.addEventListener('click', function() { - // handle cookie accept - alert('cookies accepted'); - banner.hide(); -}); - -const blockCookiesEl = document.getElementById('block-cookies'); -blockCookiesEl.addEventListener('click', function() { - // handle cookie block - alert('cookies blocked'); - banner.hide(); -}); \ No newline at end of file diff --git a/go.mod b/go.mod deleted file mode 100644 index e24ae12..0000000 --- a/go.mod +++ /dev/null @@ -1,5 +0,0 @@ -module github.com/nusserstudios/tailbliss - -go 1.20 - -require github.com/gohugoio/hugo-mod-jslibs-dist/alpinejs/v3 v3.21000.20300 // indirect diff --git a/go.sum b/go.sum deleted file mode 100644 index 4a5ec5a..0000000 --- a/go.sum +++ /dev/null @@ -1,2 +0,0 @@ -github.com/gohugoio/hugo-mod-jslibs-dist/alpinejs/v3 v3.21000.20300 h1:NqEL3Y2QX4UYmuC0qDLR5XMpIQGHE5O4kuhG2ieYqmA= -github.com/gohugoio/hugo-mod-jslibs-dist/alpinejs/v3 v3.21000.20300/go.mod h1:WWQxcmPs5Xy3xDgi29ipkmZT6NKVb3bsqyCDTY3eYYY= diff --git a/hugo.yaml b/hugo.yaml index a61a04f..3af03ff 100644 --- a/hugo.yaml +++ b/hugo.yaml @@ -41,7 +41,7 @@ params: url: "#" logos: - identifier: a - image: "images/global/sample-logo-white.svg" + image: "images/global/sample-logo.svg" alt: "a" - identifier: b - identifier: c @@ -183,6 +183,4 @@ privacy: module: hugoVersion: extended: true - min: "0.104.0" - imports: - - path: "github.com/gohugoio/hugo-mod-jslibs-dist/alpinejs/v3" \ No newline at end of file + min: "0.104.0" \ No newline at end of file diff --git a/hugo.yaml.exampleSite b/hugo.yaml.exampleSite index 180dede..91a3701 100644 --- a/hugo.yaml.exampleSite +++ b/hugo.yaml.exampleSite @@ -5,7 +5,7 @@ DefaultContentLanguage: en enableEmoji: true enableGitInfo: true enableRobotsTXT: true -canonifyURLs: true +canonifyURLs: false paginate: 9 darkmode_js: - assets/js/darkmode.js @@ -41,7 +41,7 @@ params: url: "#" logos: - identifier: a - image: "images/global/sample-logo-white.svg" + image: "images/global/sample-logo.svg" alt: "a" - identifier: b - identifier: c diff --git a/layouts/index.html b/layouts/index.html index b6cf026..43efd6a 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -22,8 +22,7 @@ TailBliss Hero + {{- with $large.RelPermalink -}}, {{.}} 576w{{- end -}}" src="{{ $hero.RelPermalink }}" width="100%" height="" alt="TailBliss Hero" class="w-full max-w-xl mx-auto rounded-lg" /> @@ -36,99 +35,111 @@
+
{{ $p1image := resources.Get .Site.Params.P1.Image }} {{ with $p1image }} {{ with .Resize (printf "%dx%d webp q90" .Width .Height) }} - P1 + P1 {{ end }}> {{ end }} +
+
+
+
+ Workcation +
+
+
+

Tincidunt integer commodo, cursus etiam + aliquam neque, et. Consectetur pretium in volutpat, diam. + Montes, magna cursus nulla feugiat dignissim id lobortis + amet.

+
+
+

John Doe, CEO at TailBliss

+
+
+
-
-

{{ .Site.Params.P1.Heading }}

-
- {{ range .Site.Params.P1.Content }} -

- {{ .text }} -

- {{ end }} +
+
+ {{ range .Site.Params.P1.Content }} +

+ {{ .text }} +

+ {{ end }} +
- -
-
-
- -
-

- {{ .Site.Params.P2.Heading }} -

-
+ +
+
+
+
+
+

+ {{ .Site.Params.P2.Heading }} +

{{ range .Site.Params.P2.Content }} -

+

{{ .text }}

{{ end }} +

- -
- +
+
+ -
-
- {{ $p2image := resources.Get .Site.Params.P2.Image }} - {{ with $p2image }} - {{ with .Resize (printf "%dx%d webp q90" .Width .Height) }} - P2 - {{ end }}> - {{ end }} -
+
+ {{ $p2image := resources.Get .Site.Params.P2.Image }} + {{ with $p2image }} + {{ with .Resize (printf "%dx%d webp q90" .Width .Height) }} + p2 + {{ end }} + {{ end }} +
+
@@ -137,14 +148,10 @@
{{ if .image }} {{ $sponsor := resources.Get .image }} - {{ .alt }} + {{ .alt }} {{ else }} {{ $sponsor := resources.Get "images/global/sample-logo.svg" }} - {{ .alt }} + {{ .alt }} {{ end }}
{{ end }} @@ -176,8 +183,7 @@
-

+

{{ .Site.Params.P4.Heading }}

{{ range .Site.Params.P4.Content }} @@ -196,16 +202,14 @@ {{ with .Params.featured_image }} {{ with resources.Get . }} {{ $postimage := (.Resize "500x webp q90").RelPermalink }} - {{ .Title }} + {{ .Title }} {{ end }} {{ end }}
- + {{ .Title }}

@@ -216,8 +220,7 @@ Tags: {{ range $elem_index, $elem_val := (.GetTerms "tags") }} {{- if gt $elem_index 0 }}, {{ end -}} - {{ .LinkTitle }} + {{ .LinkTitle }} {{- end -}}

@@ -255,14 +258,11 @@
-
+
@@ -279,9 +279,7 @@
- +