From 929d1ab5e7002f8dc34d88a0151718f07eea70e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= Date: Sat, 10 Sep 2022 22:58:50 +0100 Subject: [PATCH] changing header --- assets/css/compiled/main.css | 430 ++++++++++++++++++++++++++++- layouts/partials/footer.html | 24 +- layouts/partials/head.html | 4 + layouts/partials/header/basic.html | 266 ++++++++++++++---- package.json | 11 +- tailwind.config.js | 7 +- 6 files changed, 649 insertions(+), 93 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 4eb8ad62..c30c9b7b 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -410,6 +410,175 @@ video { height: auto; } +[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + border-radius: 0px; + padding-top: 0.5rem; + padding-right: 0.75rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-shadow: 0 0 #0000; +} + +[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + border-color: #2563eb; +} + +input::-moz-placeholder, textarea::-moz-placeholder { + color: #6b7280; + opacity: 1; +} + +input::placeholder,textarea::placeholder { + color: #6b7280; + opacity: 1; +} + +::-webkit-datetime-edit-fields-wrapper { + padding: 0; +} + +::-webkit-date-and-time-value { + min-height: 1.5em; +} + +::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { + padding-top: 0; + padding-bottom: 0; +} + +select { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; + -webkit-print-color-adjust: exact; + color-adjust: exact; + print-color-adjust: exact; +} + +[multiple] { + background-image: initial; + background-position: initial; + background-repeat: unset; + background-size: initial; + padding-right: 0.75rem; + -webkit-print-color-adjust: unset; + color-adjust: unset; + print-color-adjust: unset; +} + +[type='checkbox'],[type='radio'] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + -webkit-print-color-adjust: exact; + color-adjust: exact; + print-color-adjust: exact; + display: inline-block; + vertical-align: middle; + background-origin: border-box; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + flex-shrink: 0; + height: 1rem; + width: 1rem; + color: #2563eb; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + --tw-shadow: 0 0 #0000; +} + +[type='checkbox'] { + border-radius: 0px; +} + +[type='radio'] { + border-radius: 100%; +} + +[type='checkbox']:focus,[type='radio']:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} + +[type='checkbox']:checked,[type='radio']:checked { + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +[type='checkbox']:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); +} + +[type='radio']:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); +} + +[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus { + border-color: transparent; + background-color: currentColor; +} + +[type='checkbox']:indeterminate { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { + border-color: transparent; + background-color: currentColor; +} + +[type='file'] { + background: unset; + border-color: inherit; + border-width: 0; + border-radius: 0; + padding: 0; + font-size: unset; + line-height: inherit; +} + +[type='file']:focus { + outline: 1px solid ButtonText; + outline: 1px auto -webkit-focus-ring-color; +} + *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; @@ -566,7 +735,7 @@ video { .prose :where(a):not(:where([class~="not-prose"] *)) { color: var(--tw-prose-links); - text-decoration: underline; + text-decoration: none; font-weight: 500; -webkit-text-decoration-color: rgba(var(--color-primary-300), 1); text-decoration-color: rgba(var(--color-primary-300), 1); @@ -1178,6 +1347,18 @@ video { margin-bottom: 0; } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + .pointer-events-none { pointer-events: none; } @@ -1214,6 +1395,11 @@ video { left: 0px; } +.inset-x-0 { + left: 0px; + right: 0px; +} + .top-\[100vh\] { top: 100vh; } @@ -1262,6 +1448,10 @@ video { margin: 0.25rem; } +.-m-3 { + margin: -0.75rem; +} + .-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; @@ -1292,6 +1482,11 @@ video { margin-bottom: 0px; } +.-my-2 { + margin-top: -0.5rem; + margin-bottom: -0.5rem; +} + .mb-3 { margin-bottom: 0.75rem; } @@ -1364,6 +1559,14 @@ video { margin-bottom: 2.25rem !important; } +.-mr-2 { + margin-right: -0.5rem; +} + +.ml-4 { + margin-left: 1rem; +} + .mt-1 { margin-top: 0.25rem; } @@ -1388,6 +1591,14 @@ video { display: flex; } +.inline-flex { + display: inline-flex; +} + +.grid { + display: grid; +} + .hidden { display: none; } @@ -1408,6 +1619,14 @@ video { height: 2rem; } +.h-6 { + height: 1.5rem; +} + +.h-10 { + height: 2.5rem; +} + .h-full { height: 100%; } @@ -1420,6 +1639,10 @@ video { max-height: 10rem; } +.max-h-\[5rem\] { + max-height: 5rem; +} + .min-h-0 { min-height: 0px; } @@ -1452,6 +1675,14 @@ video { width: 1.5rem; } +.w-auto { + width: auto; +} + +.w-10 { + width: 2.5rem; +} + .min-w-0 { min-width: 0px; } @@ -1484,6 +1715,10 @@ video { max-width: 10rem; } +.max-w-\[5rem\] { + max-width: 5rem; +} + .flex-none { flex: none; } @@ -1492,15 +1727,39 @@ video { flex: 1 1 auto; } +.flex-shrink-0 { + flex-shrink: 0; +} + .grow { flex-grow: 1; } +.origin-top-right { + transform-origin: top right; +} + .-translate-y-8 { --tw-translate-y: -2rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.scale-95 { + --tw-scale-x: .95; + --tw-scale-y: .95; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.scale-100 { + --tw-scale-x: 1; + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .cursor-default { cursor: default; } @@ -1519,6 +1778,10 @@ video { appearance: none; } +.grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + .flex-row { flex-direction: row; } @@ -1543,6 +1806,32 @@ video { justify-content: space-between; } +.gap-6 { + gap: 1.5rem; +} + +.gap-4 { + gap: 1rem; +} + +.space-x-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +} + +.space-x-5 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1.25rem * var(--tw-space-x-reverse)); + margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse))); +} + +.divide-y-2 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(2px * var(--tw-divide-y-reverse)); +} + .place-self-center { place-self: center; } @@ -1624,6 +1913,10 @@ video { border-color: rgba(var(--color-primary-400), var(--tw-border-opacity)); } +.border-transparent { + border-color: transparent; +} + .bg-neutral { --tw-bg-opacity: 1; background-color: rgba(var(--color-neutral), var(--tw-bg-opacity)); @@ -1688,6 +1981,14 @@ video { padding: 0.25rem; } +.p-2 { + padding: 0.5rem; +} + +.p-3 { + padding: 0.75rem; +} + .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; @@ -1753,6 +2054,11 @@ video { padding-bottom: 1.5rem; } +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + .pt-8 { padding-top: 2rem; } @@ -1773,6 +2079,14 @@ video { padding-top: 1rem; } +.pt-5 { + padding-top: 1.25rem; +} + +.pb-6 { + padding-bottom: 1.5rem; +} + .text-center { text-align: center; } @@ -1937,12 +2251,32 @@ video { opacity: 0; } +.opacity-100 { + opacity: 1; +} + .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.ring-1 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.ring-opacity-5 { + --tw-ring-opacity: 0.05; +} + .backdrop-blur { --tw-backdrop-blur: blur(8px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -1961,6 +2295,30 @@ video { transition-duration: 150ms; } +.transition { + transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.duration-200 { + transition-duration: 200ms; +} + +.duration-100 { + transition-duration: 100ms; +} + +.ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); +} + +.ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + body a, body button { transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; @@ -2726,6 +3084,11 @@ body:has(#menu-controller:checked) { background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); } +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + .focus\:outline-dotted:focus { outline-style: dotted; } @@ -2738,6 +3101,16 @@ body:has(#menu-controller:checked) { outline-color: transparent; } +.focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-inset:focus { + --tw-ring-inset: inset; +} + .group:hover .group-hover\:text-primary-600 { --tw-text-opacity: 1; color: rgba(var(--color-primary-600), var(--tw-text-opacity)); @@ -2782,14 +3155,14 @@ body:has(#menu-controller:checked) { margin-left: 0.25rem; } -[dir="ltr"] .ltr\:mr-14 { - margin-right: 3.5rem; -} - [dir="ltr"] .ltr\:-ml-5 { margin-left: -1.25rem; } +[dir="ltr"] .ltr\:mr-14 { + margin-right: 3.5rem; +} + [dir="ltr"] .ltr\:block { display: block; } @@ -2842,14 +3215,14 @@ body:has(#menu-controller:checked) { margin-right: 0.25rem; } -[dir="rtl"] .rtl\:ml-14 { - margin-left: 3.5rem; -} - [dir="rtl"] .rtl\:-mr-5 { margin-right: -1.25rem; } +[dir="rtl"] .rtl\:ml-14 { + margin-left: 3.5rem; +} + [dir="rtl"] .rtl\:block { display: block; } @@ -3089,6 +3462,11 @@ body:has(#menu-controller:checked) { padding-bottom: 2.5rem; } + .sm\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + .sm\:pt-10 { padding-top: 2.5rem; } @@ -3116,10 +3494,44 @@ body:has(#menu-controller:checked) { } @media (min-width: 768px) { + .md\:ml-12 { + margin-left: 3rem; + } + + .md\:flex { + display: flex; + } + + .md\:hidden { + display: none; + } + .md\:w-1\/3 { width: 33.333333%; } + .md\:flex-1 { + flex: 1 1 0%; + } + + .md\:items-center { + align-items: center; + } + + .md\:justify-start { + justify-content: flex-start; + } + + .md\:justify-between { + justify-content: space-between; + } + + .md\:space-x-10 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(2.5rem * var(--tw-space-x-reverse)); + margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse))); + } + .md\:p-\[10vh\] { padding: 10vh; } diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index dbf2e703..3280b4b6 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -43,29 +43,7 @@

{{ end }} - {{/* Appearance switch */}} - {{ if .Site.Params.footer.showAppearanceSwitcher | default false }} -
- -
- {{ end }} + {{/* Extend footer - eg. for extra scripts, etc. */}} {{ if templates.Exists "partials/extend-footer.html" }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index d36cda4f..a769bcad 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -50,6 +50,9 @@ href="{{ $bundleCSS.RelPermalink }}" integrity="{{ $bundleCSS.Data.Integrity }}" /> + {{ $jsMain := resources.Get "js/main.js" }} + {{ $jsMain = $jsMain | resources.Minify | resources.Fingerprint "sha512" }} + {{ $jsAppearance := resources.Get "js/appearance.js" }} {{ $jsAppearance = $jsAppearance | resources.Minify | resources.Fingerprint "sha512" }} @@ -112,4 +115,5 @@ {{ if templates.Exists "partials/extend-head.html" }} {{ partialCached "extend-head.html" .Site }} {{ end }} + diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html index 422a380c..2d966140 100644 --- a/layouts/partials/header/basic.html +++ b/layouts/partials/header/basic.html @@ -1,57 +1,211 @@ -
- -
+ + + + + +
+
+
+
+
+ Your Company +
+
+ +
+
+
+ +
+
+
+
+ Pricing + + Docs + + Enterprise + + Help Center + + Guides + + Events + + Security +
+
+ Sign + up +

+ Existing customer? + Sign in +

+
+
+
+
+ \ No newline at end of file diff --git a/package.json b/package.json index 947a6cec..1d6052c3 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,8 @@ "assets": "rimraf assets/vendor && vendor-copy", "dev": "NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit -w", "build": "NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit", - "example": "hugo server --source exampleSite --themesDir ../.. --buildDrafts -b http://localhost/blowfish/ -p 8008", - "examplePersonal": "hugo server --source exampleSitePersonal --themesDir ../.. --buildDrafts -b http://localhost/blowfish/ -p 8008", + "example": "hugo server --source exampleSite --themesDir ../.. --buildDrafts -b http://localhost/ -p 8008", + "examplePersonal": "hugo server --source exampleSitePersonal --themesDir ../.. --buildDrafts -b http://localhost/ -p 8008", "lighthouse": "lhci autorun" }, "repository": { @@ -71,5 +71,10 @@ "from": "node_modules/fuse.js/dist/fuse.min.js", "to": "assets/lib/fuse/fuse.min.js" } - ] + ], + "dependencies": { + "@headlessui/react": "^1.7.0", + "@heroicons/react": "^2.0.10", + "@tailwindcss/forms": "^0.5.3" + } } diff --git a/tailwind.config.js b/tailwind.config.js index 9c01a46c..22e2b313 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -84,7 +84,7 @@ module.exports = { "--tw-prose-invert-th-borders": theme("colors.neutral.500 / 1"), "--tw-prose-invert-td-borders": theme("colors.neutral.700 / 1"), a: { - textDecoration: "underline", + textDecoration: "none", textDecorationColor: theme("colors.primary.300 / 1"), fontWeight: "500", "&:hover": { @@ -129,5 +129,8 @@ module.exports = { }), }, }, - plugins: [require("@tailwindcss/typography")], + plugins: [ + require("@tailwindcss/typography"), + require('@tailwindcss/forms') + ], };