From 4ed2c083e9372a71025ba6781b85c040a52b9084 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fre=CC=81de=CC=81ric=20Blanc?= Date: Mon, 15 Aug 2022 21:56:37 +0200 Subject: [PATCH 1/7] Include all js files --- src/TyphoonServiceProvider.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TyphoonServiceProvider.php b/src/TyphoonServiceProvider.php index b7d5612..6b04e15 100644 --- a/src/TyphoonServiceProvider.php +++ b/src/TyphoonServiceProvider.php @@ -61,7 +61,7 @@ public function boot() // publish prism js $this->publishes([ - __DIR__ . '/../public/js/prism.js' => public_path('js/prism.js'), + __DIR__ . '/../public/js/' => public_path('js/'), ], 'typhoon-js'); // Install typhoon command From c8025f2e7e7c71b71faf77cf7d7984786e5ae805 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fre=CC=81de=CC=81ric=20Blanc?= Date: Mon, 15 Aug 2022 21:58:35 +0200 Subject: [PATCH 2/7] Remove tw-elements. this one only serve for the menu. Better solution find with no dependencies ! --- resources/views/default/layouts/default.blade.php | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/resources/views/default/layouts/default.blade.php b/resources/views/default/layouts/default.blade.php index 5f59171..7a668a0 100644 --- a/resources/views/default/layouts/default.blade.php +++ b/resources/views/default/layouts/default.blade.php @@ -9,14 +9,6 @@ - - {{-- Tailwind-Elements PART 1 --}} - {{-- https://tailwind-elements.com/quick-start/ --}} - - - - - {{-- Tailwind-Elements PART 1 --> END --}} @@ -43,10 +35,6 @@ @include('typhoon::' . config('typhoon.template') . '.partials.footer') - {{-- Tailwind-Elements PART 2 --}} - - {{-- Tailwind-Elements PART 2 --> END --}} - {{-- Tips from https://css-tricks.com/fluid-width-video/ --}} @@ -87,7 +75,9 @@ })(window, document); + @livewireScripts + From 2b97958355d6dc48e688f63db2bdc8b2aa52ac59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fre=CC=81de=CC=81ric=20Blanc?= Date: Mon, 15 Aug 2022 21:59:29 +0200 Subject: [PATCH 3/7] Optimize tailwind config file and discover that it is more powerful that I thought --- tailwind.config.js | 64 +++++----------------------------------------- 1 file changed, 6 insertions(+), 58 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index b9b9569..0005b19 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,11 +1,11 @@ module.exports = { content: [ - "./resources/views/**/*.blade.php", - "./src/App/Filament/Resources/**/*.php", - "typhoon::*", - "./vendor/happytodev/typhoon/resources/views/**/*.blade.php", - "./vendor/happytodev/filament-comments/resources/views/**/*.blade.php", - "./vendor/happytodev/filament-social-networks/resources/views/**/*.blade.php", + "./resources/**/*.blade.php", + "./resources/**/*.js", + "./src/**/*.php", + // "typhoon::*", + "./vendor/happytodev/filament-comments/resources/**/*.blade.php", + "./vendor/happytodev/filament-social-networks/resources/**/*.blade.php", ], theme: { extend: {}, @@ -14,57 +14,5 @@ module.exports = { require("@tailwindcss/typography") ], safelist: [ - "text-amber-300", - "text-blue-300", - "text-green-300", - "text-indigo-300", - "text-lime-300", - "text-orange-300", - "text-yellow-300", - "bg-amber-100", - "bg-amber-300", - "bg-amber-600", - "bg-blue-100", - "bg-blue-300", - "bg-blue-500", - "bg-blue-600", - "bg-blue-700", - "bg-blue-900", - "bg-gray-500", - "bg-gray-700", - "bg-gray-900", - "bg-green-100", - "bg-green-300", - "bg-green-500", - "bg-green-600", - "bg-green-700", - "bg-green-900", - "bg-indigo-100", - "bg-indigo-300", - "bg-indigo-500", - "bg-indigo-600", - "bg-indigo-700", - "bg-indigo-900", - "bg-lime-100", - "bg-lime-300", - "bg-lime-600", - "bg-orange-100", - "bg-orange-300", - "bg-orange-600", - "bg-pink-500", - "bg-pink-700", - "bg-pink-900", - "bg-purple-500", - "bg-purple-700", - "bg-purple-900", - "bg-red-500", - "bg-red-700", - "bg-red-900", - "bg-yellow-100", - "bg-yellow-300", - "bg-yellow-500", - "bg-yellow-600", - "bg-yellow-700", - "bg-yellow-900", ], }; From e23f63133612b6facbbfb91a47d833ccb86bfd01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fre=CC=81de=CC=81ric=20Blanc?= Date: Mon, 15 Aug 2022 22:04:59 +0200 Subject: [PATCH 4/7] Add some css for menu management --- resources/css/app.css | 124 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 123 insertions(+), 1 deletion(-) diff --git a/resources/css/app.css b/resources/css/app.css index 9a0e4ba..2a9cc0a 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -25,4 +25,126 @@ left: 0; width: 100%; height: 100%; -} \ No newline at end of file +} + + +/* From https://caffeinecreations.ca/blog/accessible-dropdown-navigation-with-tailwind-css-and-alpine-js/ + and https://codepen.io/createsean/pen/VwppLGG?editors=1000*/ +a.skip-main { + position: absolute; + top: 40px; + height: 1px; + width: 1px; + overflow: hidden; + left: -999px; + z-index: -999; + background: #2d2828; +} +a.skip-main:focus, a.skip-main:active { + left: 5px; + top: 50px; + z-index: 999; + margin-top: 10px; + margin-bottom: 10px; + margin-left: 5px; + margin-right: 5px; + min-width: 200px; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgba(0, 0, 0, var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgba(45, 40, 40, var(--tw-bg-opacity)); + padding: 10px; + text-align: center; + font-size: 1rem; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgba(255, 255, 255, var(--tw-text-opacity)); + text-decoration: none; +} +/* Nav */ +nav li { + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + } +nav li:hover, nav li:focus-within { + cursor: pointer; +} +nav ul li ul { + width: 100%; + --tw-bg-opacity: 1; + background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); + --tw-bg-opacity: 1; + background-color: rgba(156, 163, 175, var(--tw-bg-opacity)); + padding-left: 0px; + padding-right: 0px; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 2rem; +} +@media (min-width: 1024px) { + + nav ul li ul { + position: absolute; + } + + nav ul li ul { + left: 0px; + } + + nav ul li ul { + width: 180px; + } + + nav ul li ul { + min-width: 180px; + } + + nav ul li ul { + max-width: 180px; + } + + nav ul li ul { + padding-left: 0px; + } + + nav ul li ul { + --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } +} +nav ul li ul { + z-index:9999; + -webkit-transition: all 0.5s ease; + transition: all 0.5s ease; + right: -20px; + } +nav ul li a { + display: block; + background-color: transparent; +} +.group:hover nav ul li a { + --tw-bg-opacity: 1; + background-color: rgba(156, 163, 175, var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgba(255, 255, 255, var(--tw-text-opacity)); +} +nav ul li:hover > a { + --tw-text-opacity: 1; + color: rgba(17, 24, 39, var(--tw-text-opacity)); +} +nav ul li ul ul { + top: 0px; + right: -180px; + left:auto; +} +/* nav ul li ul li { + width: 100%; + } */ +nav ul li img { + position: absolute; + right: 10px; + top: calc(50% - 4px); +} +/* end nav */ \ No newline at end of file From 3ab9252a0fe71e28886064abf3b4622f290118eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fre=CC=81de=CC=81ric=20Blanc?= Date: Mon, 15 Aug 2022 22:05:22 +0200 Subject: [PATCH 5/7] A better solution to manage menu thant tw-elements. Found here : https://caffeinecreations.ca/blog/accessible-dropdown-navigation-with-tailwind-css-and-alpine-js/ Alllow accessible dropdown navigation. Currently there is 2 levels of dropdown but it's a limitation from Typhoon. --- .../components/typhoon/layout/menu.blade.php | 256 ++++++++---------- 1 file changed, 116 insertions(+), 140 deletions(-) diff --git a/resources/views/components/typhoon/layout/menu.blade.php b/resources/views/components/typhoon/layout/menu.blade.php index 3a566c3..050e442 100644 --- a/resources/views/components/typhoon/layout/menu.blade.php +++ b/resources/views/components/typhoon/layout/menu.blade.php @@ -1,151 +1,127 @@ - - + \ No newline at end of file From fcaf9a698771a1e6775ce74169628f85e1e13215 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fre=CC=81de=CC=81ric=20Blanc?= Date: Mon, 15 Aug 2022 22:05:41 +0200 Subject: [PATCH 6/7] New generated css file --- public/css/app.css | 1492 ++++++++++++++++---------------------------- 1 file changed, 549 insertions(+), 943 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index bd7781b..9375134 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -1,5 +1,5 @@ /* -! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com +! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com */ /* @@ -187,8 +187,6 @@ textarea { /* 1 */ font-size: 100%; /* 1 */ - font-weight: inherit; - /* 1 */ line-height: inherit; /* 1 */ color: inherit; @@ -355,6 +353,13 @@ input::-moz-placeholder, textarea::-moz-placeholder { /* 2 */ } +input:-ms-input-placeholder, textarea:-ms-input-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + input::placeholder, textarea::placeholder { opacity: 1; @@ -410,103 +415,15 @@ video { height: auto; } -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} +/* +Ensure the default browser behavior of the `hidden` attribute. +*/ -::-webkit-backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; +[hidden] { + display: none; } -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; +*, ::before, ::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -609,22 +526,8 @@ video { font-weight: 600; } -.prose :where(a strong):not(:where([class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(blockquote strong):not(:where([class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(thead th strong):not(:where([class~="not-prose"] *)) { - color: inherit; -} - .prose :where(ol):not(:where([class~="not-prose"] *)) { list-style-type: decimal; - margin-top: 1.25em; - margin-bottom: 1.25em; padding-left: 1.625em; } @@ -666,8 +569,6 @@ video { .prose :where(ul):not(:where([class~="not-prose"] *)) { list-style-type: disc; - margin-top: 1.25em; - margin-bottom: 1.25em; padding-left: 1.625em; } @@ -718,7 +619,6 @@ video { .prose :where(h1 strong):not(:where([class~="not-prose"] *)) { font-weight: 900; - color: inherit; } .prose :where(h2):not(:where([class~="not-prose"] *)) { @@ -732,7 +632,6 @@ video { .prose :where(h2 strong):not(:where([class~="not-prose"] *)) { font-weight: 800; - color: inherit; } .prose :where(h3):not(:where([class~="not-prose"] *)) { @@ -746,7 +645,6 @@ video { .prose :where(h3 strong):not(:where([class~="not-prose"] *)) { font-weight: 700; - color: inherit; } .prose :where(h4):not(:where([class~="not-prose"] *)) { @@ -759,12 +657,6 @@ video { .prose :where(h4 strong):not(:where([class~="not-prose"] *)) { font-weight: 700; - color: inherit; -} - -.prose :where(img):not(:where([class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; } .prose :where(figure > *):not(:where([class~="not-prose"] *)) { @@ -794,33 +686,7 @@ video { } .prose :where(a code):not(:where([class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(h1 code):not(:where([class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(h2 code):not(:where([class~="not-prose"] *)) { - color: inherit; - font-size: 0.875em; -} - -.prose :where(h3 code):not(:where([class~="not-prose"] *)) { - color: inherit; - font-size: 0.9em; -} - -.prose :where(h4 code):not(:where([class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(blockquote code):not(:where([class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(thead th code):not(:where([class~="not-prose"] *)) { - color: inherit; + color: var(--tw-prose-links); } .prose :where(pre):not(:where([class~="not-prose"] *)) { @@ -894,15 +760,10 @@ video { .prose :where(tbody td):not(:where([class~="not-prose"] *)) { vertical-align: baseline; -} - -.prose :where(tfoot):not(:where([class~="not-prose"] *)) { - border-top-width: 1px; - border-top-color: var(--tw-prose-th-borders); -} - -.prose :where(tfoot td):not(:where([class~="not-prose"] *)) { - vertical-align: top; + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; } .prose { @@ -947,6 +808,11 @@ video { margin-bottom: 1.25em; } +.prose :where(img):not(:where([class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; +} + .prose :where(video):not(:where([class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; @@ -957,6 +823,14 @@ video { margin-bottom: 2em; } +.prose :where(h2 code):not(:where([class~="not-prose"] *)) { + font-size: 0.875em; +} + +.prose :where(h3 code):not(:where([class~="not-prose"] *)) { + font-size: 0.9em; +} + .prose :where(li):not(:where([class~="not-prose"] *)) { margin-top: 0.5em; margin-bottom: 0.5em; @@ -970,24 +844,24 @@ video { padding-left: 0.375em; } -.prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { +.prose > :where(ul > li p):not(:where([class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } -.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.25em; } -.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.25em; } -.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.25em; } -.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.25em; } @@ -1020,26 +894,19 @@ video { padding-right: 0; } -.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) { - padding-top: 0.5714286em; - padding-right: 0.5714286em; - padding-bottom: 0.5714286em; - padding-left: 0.5714286em; -} - -.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) { +.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)) { padding-left: 0; } -.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) { +.prose :where(tbody td:last-child):not(:where([class~="not-prose"] *)) { padding-right: 0; } -.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { +.prose > :where(:first-child):not(:where([class~="not-prose"] *)) { margin-top: 0; } -.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { +.prose > :where(:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 0; } @@ -1144,14 +1011,10 @@ video { } .prose-sm :where(ol):not(:where([class~="not-prose"] *)) { - margin-top: 1.1428571em; - margin-bottom: 1.1428571em; padding-left: 1.5714286em; } .prose-sm :where(ul):not(:where([class~="not-prose"] *)) { - margin-top: 1.1428571em; - margin-bottom: 1.1428571em; padding-left: 1.5714286em; } @@ -1168,24 +1031,24 @@ video { padding-left: 0.4285714em; } -.prose-sm :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { +.prose-sm > :where(ul > li p):not(:where([class~="not-prose"] *)) { margin-top: 0.5714286em; margin-bottom: 0.5714286em; } -.prose-sm :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose-sm > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.1428571em; } -.prose-sm :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose-sm > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.1428571em; } -.prose-sm :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose-sm > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.1428571em; } -.prose-sm :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose-sm > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.1428571em; } @@ -1234,303 +1097,171 @@ video { padding-right: 0; } -.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) { +.prose-sm :where(tbody td):not(:where([class~="not-prose"] *)) { padding-top: 0.6666667em; padding-right: 1em; padding-bottom: 0.6666667em; padding-left: 1em; } -.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) { +.prose-sm :where(tbody td:first-child):not(:where([class~="not-prose"] *)) { padding-left: 0; } -.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) { +.prose-sm :where(tbody td:last-child):not(:where([class~="not-prose"] *)) { padding-right: 0; } -.prose-sm :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { +.prose-sm > :where(:first-child):not(:where([class~="not-prose"] *)) { margin-top: 0; } -.prose-sm :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { +.prose-sm > :where(:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 0; } -.prose-base :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { - margin-top: 0.75em; - margin-bottom: 0.75em; +.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; } -.prose-base :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { - margin-top: 1.25em; +.visible { + visibility: visible; } -.prose-base :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 1.25em; +.static { + position: static; } -.prose-base :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { - margin-top: 1.25em; +.fixed { + position: fixed; } -.prose-base :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 1.25em; +.absolute { + position: absolute; } -.prose-base :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { - margin-top: 0; +.relative { + position: relative; } -.prose-base :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 0; +.inset-x-0 { + left: 0px; + right: 0px; } -.prose-lg :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { - margin-top: 0.8888889em; - margin-bottom: 0.8888889em; +.bottom-3 { + bottom: 0.75rem; } -.prose-lg :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { - margin-top: 1.3333333em; +.right-3 { + right: 0.75rem; } -.prose-lg :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 1.3333333em; +.top-0 { + top: 0px; } -.prose-lg :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { - margin-top: 1.3333333em; +.right-0 { + right: 0px; } -.prose-lg :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 1.3333333em; +.top-\[10px\] { + top: 10px; } -.prose-lg :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { - margin-top: 0; +.order-last { + order: 9999; } -.prose-lg :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 0; +.col-span-12 { + grid-column: span 12 / span 12; } -.prose-xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { - margin-top: 0.8em; - margin-bottom: 0.8em; +.col-span-9 { + grid-column: span 9 / span 9; } -.prose-xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { - margin-top: 1.2em; +.col-span-3 { + grid-column: span 3 / span 3; } -.prose-xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 1.2em; +.col-span-full { + grid-column: 1 / -1; } -.prose-xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { - margin-top: 1.2em; +.m-0 { + margin: 0px; } -.prose-xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 1.2em; +.m-4 { + margin: 1rem; } -.prose-xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { - margin-top: 0; +.mx-auto { + margin-left: auto; + margin-right: auto; } -.prose-xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 0; +.my-8 { + margin-top: 2rem; + margin-bottom: 2rem; } -.prose-2xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { - margin-top: 0.8333333em; - margin-bottom: 0.8333333em; +.my-10 { + margin-top: 2.5rem; + margin-bottom: 2.5rem; } -.prose-2xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { - margin-top: 1.3333333em; +.mx-0 { + margin-left: 0px; + margin-right: 0px; } -.prose-2xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 1.3333333em; +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; } -.prose-2xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { - margin-top: 1.3333333em; -} - -.prose-2xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 1.3333333em; -} - -.prose-2xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { - margin-top: 0; -} - -.prose-2xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 0; -} - -.visible { - visibility: visible; -} - -.fixed { - position: fixed; -} - -.absolute { - position: absolute; -} - -.relative { - position: relative; -} - -.inset-x-0 { - left: 0px; - right: 0px; -} - -.top-0 { - top: 0px; -} - -.right-0 { - right: 0px; -} - -.bottom-3 { - bottom: 0.75rem; -} - -.right-3 { - right: 0.75rem; -} - -.left-auto { - left: auto; -} - -.z-50 { - z-index: 50; -} - -.order-last { - order: 9999; -} - -.order-first { - order: -9999; -} - -.col-span-12 { - grid-column: span 12 / span 12; -} - -.col-span-3 { - grid-column: span 3 / span 3; -} - -.col-span-9 { - grid-column: span 9 / span 9; -} - -.col-span-full { - grid-column: 1 / -1; -} - -.float-left { - float: left; -} - -.m-0 { - margin: 0px; -} - -.m-4 { - margin: 1rem; -} - -.mx-auto { - margin-left: auto; - margin-right: auto; -} - -.my-8 { - margin-top: 2rem; - margin-bottom: 2rem; -} - -.my-10 { - margin-top: 2.5rem; - margin-bottom: 2.5rem; +.mb-16 { + margin-bottom: 4rem; } -.mx-0 { - margin-left: 0px; - margin-right: 0px; +.mb-4 { + margin-bottom: 1rem; } -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; +.-mt-4 { + margin-top: -1rem; } -.ml-1 { - margin-left: 0.25rem; +.ml-4 { + margin-left: 1rem; } -.mt-2 { - margin-top: 0.5rem; +.mb-6 { + margin-bottom: 1.5rem; } .mr-2 { margin-right: 0.5rem; } -.ml-2 { - margin-left: 0.5rem; +.mt-2 { + margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } -.ml-4 { - margin-left: 1rem; -} - -.mt-8 { - margin-top: 2rem; -} - -.ml-12 { - margin-left: 3rem; -} - -.-mt-px { - margin-top: -1px; -} - -.mb-16 { - margin-bottom: 4rem; -} - -.mb-4 { - margin-bottom: 1rem; -} - -.-mt-4 { - margin-top: -1rem; -} - -.mb-6 { - margin-bottom: 1.5rem; -} - .mb-2 { margin-bottom: 0.5rem; } @@ -1543,6 +1274,10 @@ video { margin-top: 2.5rem; } +.ml-2 { + margin-left: 0.5rem; +} + .mr-1 { margin-right: 0.25rem; } @@ -1571,40 +1306,24 @@ video { margin-top: 0.75rem; } -.mt-12 { - margin-top: 3rem; -} - -.-mr-1 { - margin-right: -0.25rem; -} - -.mr-auto { - margin-right: auto; -} - -.mr-4 { - margin-right: 1rem; +.mt-8 { + margin-top: 2rem; } -.mt-1 { - margin-top: 0.25rem; +.mt-12 { + margin-top: 3rem; } .ml-3 { margin-left: 0.75rem; } -.-mt-2\.5 { - margin-top: -0.625rem; +.mr-8 { + margin-right: 2rem; } -.-mt-2 { - margin-top: -0.5rem; -} - -.mt-5 { - margin-top: 1.25rem; +.-mr-1 { + margin-right: -0.25rem; } .block { @@ -1619,24 +1338,20 @@ video { display: inline-flex; } -.grid { - display: grid; +.table { + display: table; } -.hidden { - display: none; -} - -.h-5 { - height: 1.25rem; +.grid { + display: grid; } -.h-8 { - height: 2rem; +.contents { + display: contents; } -.h-16 { - height: 4rem; +.hidden { + display: none; } .h-64 { @@ -1675,10 +1390,22 @@ video { height: 6rem; } +.h-6 { + height: 1.5rem; +} + +.h-screen { + height: 100vh; +} + .h-12 { height: 3rem; } +.h-5 { + height: 1.25rem; +} + .min-h-screen { min-height: 100vh; } @@ -1689,18 +1416,6 @@ video { min-height: fit-content; } -.w-5 { - width: 1.25rem; -} - -.w-8 { - width: 2rem; -} - -.w-auto { - width: auto; -} - .w-5\/6 { width: 83.333333%; } @@ -1737,48 +1452,39 @@ video { width: 6rem; } -.w-10\/12 { - width: 83.333333%; -} - .w-6 { width: 1.5rem; } -.w-1\/2 { - width: 50%; -} - -.w-2 { - width: 0.5rem; -} - -.min-w-max { - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; +.w-10\/12 { + width: 83.333333%; } -.max-w-6xl { - max-width: 72rem; +.w-5 { + width: 1.25rem; } .max-w-screen-2xl { max-width: 1536px; } -.max-w-md { - max-width: 28rem; -} - .max-w-none { max-width: none; } +.flex-grow { + flex-grow: 1; +} + .grow-0 { flex-grow: 0; } +.rotate-90 { + --tw-rotate: 90deg; + 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)); } @@ -1787,14 +1493,6 @@ video { resize: none; } -.list-none { - list-style-type: none; -} - -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} - .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -1803,12 +1501,12 @@ video { grid-template-columns: repeat(12, minmax(0, 1fr)); } -.flex-row { - flex-direction: row; +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); } -.flex-row-reverse { - flex-direction: row-reverse; +.flex-row { + flex-direction: row; } .flex-col { @@ -1835,10 +1533,6 @@ video { justify-content: space-between; } -.justify-items-end { - justify-items: end; -} - .gap-4 { gap: 1rem; } @@ -1857,28 +1551,10 @@ video { margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); } -.space-y-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} - -.justify-self-end { - justify-self: end; -} - .overflow-hidden { overflow: hidden; } -.whitespace-nowrap { - white-space: nowrap; -} - -.rounded-lg { - border-radius: 0.5rem; -} - .rounded-xl { border-radius: 0.75rem; } @@ -1895,8 +1571,8 @@ video { border-radius: 9999px; } -.rounded-md { - border-radius: 0.375rem; +.rounded-lg { + border-radius: 0.5rem; } .rounded-t-3xl { @@ -1928,10 +1604,6 @@ video { border-style: dotted; } -.border-none { - border-style: none; -} - .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); @@ -1942,6 +1614,11 @@ video { border-color: rgb(209 213 219 / var(--tw-border-opacity)); } +.border-white { + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); +} + .border-gray-400 { --tw-border-opacity: 1; border-color: rgb(156 163 175 / var(--tw-border-opacity)); @@ -1952,14 +1629,8 @@ video { border-color: rgb(37 99 235 / var(--tw-border-opacity)); } -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +.border-opacity-\[0\.2\] { + --tw-border-opacity: 0.2; } .bg-blue-500 { @@ -1972,6 +1643,11 @@ video { background-color: rgb(99 102 241 / var(--tw-bg-opacity)); } +.bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + .bg-blue-200 { --tw-bg-opacity: 1; background-color: rgb(191 219 254 / var(--tw-bg-opacity)); @@ -2012,6 +1688,11 @@ video { background-color: rgb(249 250 251 / var(--tw-bg-opacity)); } +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + .bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); @@ -2027,43 +1708,48 @@ video { background-color: rgb(96 165 250 / var(--tw-bg-opacity)); } -.bg-blue-100 { +.bg-gray-600 { --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity)); + background-color: rgb(75 85 99 / var(--tw-bg-opacity)); } .bg-transparent { background-color: transparent; } -.bg-red-700 { +.bg-green-200 { --tw-bg-opacity: 1; - background-color: rgb(185 28 28 / var(--tw-bg-opacity)); + background-color: rgb(187 247 208 / var(--tw-bg-opacity)); } -.bg-blue-700 { +.bg-amber-100 { + --tw-bg-opacity: 1; + background-color: rgb(254 243 199 / var(--tw-bg-opacity)); +} + +.bg-blue-100 { --tw-bg-opacity: 1; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)); + background-color: rgb(219 234 254 / var(--tw-bg-opacity)); } -.bg-amber-100 { +.bg-green-100 { --tw-bg-opacity: 1; - background-color: rgb(254 243 199 / var(--tw-bg-opacity)); + background-color: rgb(220 252 231 / var(--tw-bg-opacity)); } -.bg-amber-600 { +.bg-lime-100 { --tw-bg-opacity: 1; - background-color: rgb(217 119 6 / var(--tw-bg-opacity)); + background-color: rgb(236 252 203 / var(--tw-bg-opacity)); } -.bg-blue-600 { +.bg-orange-100 { --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); + background-color: rgb(255 237 213 / var(--tw-bg-opacity)); } -.bg-blue-900 { +.bg-yellow-100 { --tw-bg-opacity: 1; - background-color: rgb(30 58 138 / var(--tw-bg-opacity)); + background-color: rgb(254 249 195 / var(--tw-bg-opacity)); } .bg-gray-500 { @@ -2076,84 +1762,84 @@ video { background-color: rgb(17 24 39 / var(--tw-bg-opacity)); } -.bg-green-100 { +.bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(220 252 231 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } -.bg-green-300 { +.bg-red-700 { --tw-bg-opacity: 1; - background-color: rgb(134 239 172 / var(--tw-bg-opacity)); + background-color: rgb(185 28 28 / var(--tw-bg-opacity)); } -.bg-green-500 { +.bg-red-900 { --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + background-color: rgb(127 29 29 / var(--tw-bg-opacity)); } -.bg-green-600 { +.bg-yellow-500 { --tw-bg-opacity: 1; - background-color: rgb(22 163 74 / var(--tw-bg-opacity)); + background-color: rgb(234 179 8 / var(--tw-bg-opacity)); } -.bg-green-700 { +.bg-yellow-700 { --tw-bg-opacity: 1; - background-color: rgb(21 128 61 / var(--tw-bg-opacity)); + background-color: rgb(161 98 7 / var(--tw-bg-opacity)); } -.bg-green-900 { +.bg-yellow-900 { --tw-bg-opacity: 1; - background-color: rgb(20 83 45 / var(--tw-bg-opacity)); + background-color: rgb(113 63 18 / var(--tw-bg-opacity)); } -.bg-indigo-300 { +.bg-green-500 { --tw-bg-opacity: 1; - background-color: rgb(165 180 252 / var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); } -.bg-indigo-600 { +.bg-green-700 { --tw-bg-opacity: 1; - background-color: rgb(79 70 229 / var(--tw-bg-opacity)); + background-color: rgb(21 128 61 / var(--tw-bg-opacity)); } -.bg-indigo-700 { +.bg-green-900 { --tw-bg-opacity: 1; - background-color: rgb(67 56 202 / var(--tw-bg-opacity)); + background-color: rgb(20 83 45 / var(--tw-bg-opacity)); } -.bg-indigo-900 { +.bg-blue-700 { --tw-bg-opacity: 1; - background-color: rgb(49 46 129 / var(--tw-bg-opacity)); + background-color: rgb(29 78 216 / var(--tw-bg-opacity)); } -.bg-lime-100 { +.bg-blue-900 { --tw-bg-opacity: 1; - background-color: rgb(236 252 203 / var(--tw-bg-opacity)); + background-color: rgb(30 58 138 / var(--tw-bg-opacity)); } -.bg-lime-300 { +.bg-indigo-700 { --tw-bg-opacity: 1; - background-color: rgb(190 242 100 / var(--tw-bg-opacity)); + background-color: rgb(67 56 202 / var(--tw-bg-opacity)); } -.bg-lime-600 { +.bg-indigo-900 { --tw-bg-opacity: 1; - background-color: rgb(101 163 13 / var(--tw-bg-opacity)); + background-color: rgb(49 46 129 / var(--tw-bg-opacity)); } -.bg-orange-100 { +.bg-purple-500 { --tw-bg-opacity: 1; - background-color: rgb(255 237 213 / var(--tw-bg-opacity)); + background-color: rgb(168 85 247 / var(--tw-bg-opacity)); } -.bg-orange-300 { +.bg-purple-700 { --tw-bg-opacity: 1; - background-color: rgb(253 186 116 / var(--tw-bg-opacity)); + background-color: rgb(126 34 206 / var(--tw-bg-opacity)); } -.bg-orange-600 { +.bg-purple-900 { --tw-bg-opacity: 1; - background-color: rgb(234 88 12 / var(--tw-bg-opacity)); + background-color: rgb(88 28 135 / var(--tw-bg-opacity)); } .bg-pink-500 { @@ -2171,68 +1857,68 @@ video { background-color: rgb(131 24 67 / var(--tw-bg-opacity)); } -.bg-purple-500 { +.bg-amber-600 { --tw-bg-opacity: 1; - background-color: rgb(168 85 247 / var(--tw-bg-opacity)); + background-color: rgb(217 119 6 / var(--tw-bg-opacity)); } -.bg-purple-700 { +.bg-blue-600 { --tw-bg-opacity: 1; - background-color: rgb(126 34 206 / var(--tw-bg-opacity)); + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); } -.bg-purple-900 { +.bg-green-300 { --tw-bg-opacity: 1; - background-color: rgb(88 28 135 / var(--tw-bg-opacity)); + background-color: rgb(134 239 172 / var(--tw-bg-opacity)); } -.bg-red-500 { +.bg-green-600 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(22 163 74 / var(--tw-bg-opacity)); } -.bg-red-900 { +.bg-indigo-300 { --tw-bg-opacity: 1; - background-color: rgb(127 29 29 / var(--tw-bg-opacity)); + background-color: rgb(165 180 252 / var(--tw-bg-opacity)); } -.bg-yellow-100 { +.bg-indigo-600 { --tw-bg-opacity: 1; - background-color: rgb(254 249 195 / var(--tw-bg-opacity)); + background-color: rgb(79 70 229 / var(--tw-bg-opacity)); } -.bg-yellow-300 { +.bg-lime-300 { --tw-bg-opacity: 1; - background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + background-color: rgb(190 242 100 / var(--tw-bg-opacity)); } -.bg-yellow-500 { +.bg-lime-600 { --tw-bg-opacity: 1; - background-color: rgb(234 179 8 / var(--tw-bg-opacity)); + background-color: rgb(101 163 13 / var(--tw-bg-opacity)); } -.bg-yellow-600 { +.bg-orange-300 { --tw-bg-opacity: 1; - background-color: rgb(202 138 4 / var(--tw-bg-opacity)); + background-color: rgb(253 186 116 / var(--tw-bg-opacity)); } -.bg-yellow-700 { +.bg-orange-600 { --tw-bg-opacity: 1; - background-color: rgb(161 98 7 / var(--tw-bg-opacity)); + background-color: rgb(234 88 12 / var(--tw-bg-opacity)); } -.bg-yellow-900 { +.bg-yellow-300 { --tw-bg-opacity: 1; - background-color: rgb(113 63 18 / var(--tw-bg-opacity)); + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); } -.bg-clip-padding { - background-clip: padding-box; +.bg-yellow-600 { + --tw-bg-opacity: 1; + background-color: rgb(202 138 4 / var(--tw-bg-opacity)); } -.object-contain { - -o-object-fit: contain; - object-fit: contain; +.fill-white { + fill: #fff; } .object-cover { @@ -2245,14 +1931,14 @@ video { object-position: center; } -.p-6 { - padding: 1.5rem; -} - .p-4 { padding: 1rem; } +.p-6 { + padding: 1.5rem; +} + .p-1 { padding: 0.25rem; } @@ -2265,18 +1951,8 @@ video { padding: 0.5rem; } -.p-0 { - padding: 0px; -} - -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; +.p-3 { + padding: 0.75rem; } .py-2 { @@ -2299,6 +1975,11 @@ video { padding-bottom: 4rem; } +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; @@ -2319,6 +2000,11 @@ video { padding-bottom: 0.25rem; } +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} + .py-24 { padding-top: 6rem; padding-bottom: 6rem; @@ -2329,35 +2015,11 @@ video { padding-right: 2rem; } -.px-2\.5 { - padding-left: 0.625rem; - padding-right: 0.625rem; -} - -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.px-1\.5 { - padding-left: 0.375rem; - padding-right: 0.375rem; -} - -.px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; -} - .py-8 { padding-top: 2rem; padding-bottom: 2rem; } -.pt-8 { - padding-top: 2rem; -} - .pb-6 { padding-bottom: 1.5rem; } @@ -2374,6 +2036,14 @@ video { padding-bottom: 3rem; } +.pb-4 { + padding-bottom: 1rem; +} + +.pl-0 { + padding-left: 0px; +} + .pt-2 { padding-top: 0.5rem; } @@ -2390,14 +2060,6 @@ video { padding-left: 1rem; } -.pl-0 { - padding-left: 0px; -} - -.text-left { - text-align: left; -} - .text-center { text-align: center; } @@ -2415,16 +2077,16 @@ video { line-height: 1.25rem; } -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + .text-xs { font-size: 0.75rem; line-height: 1rem; @@ -2450,8 +2112,14 @@ video { line-height: 2.5rem; } -.font-semibold { - font-weight: 600; +.text-6xl { + font-size: 3.75rem; + line-height: 1; +} + +.text-5xl { + font-size: 3rem; + line-height: 1; } .font-medium { @@ -2482,6 +2150,10 @@ video { font-weight: 300; } +.font-semibold { + font-weight: 600; +} + .uppercase { text-transform: uppercase; } @@ -2494,10 +2166,6 @@ video { font-style: italic; } -.leading-7 { - line-height: 1.75rem; -} - .leading-relaxed { line-height: 1.625; } @@ -2518,34 +2186,19 @@ video { letter-spacing: 0.025em; } -.text-gray-200 { - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); -} - -.text-gray-300 { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -.text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -.text-gray-500 { +.text-white { --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-gray-600 { +.text-gray-700 { --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity)); } -.text-gray-700 { +.text-black { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity)); } .text-gray-900 { @@ -2553,44 +2206,44 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } -.text-white { +.text-blue-700 { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(29 78 216 / var(--tw-text-opacity)); } -.text-black { +.text-gray-200 { --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(229 231 235 / var(--tw-text-opacity)); } -.text-blue-700 { +.text-red-600 { --tw-text-opacity: 1; - color: rgb(29 78 216 / var(--tw-text-opacity)); + color: rgb(220 38 38 / var(--tw-text-opacity)); } -.text-red-600 { +.text-gray-500 { --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity)); } -.text-amber-200 { +.text-gray-600 { --tw-text-opacity: 1; - color: rgb(253 230 138 / var(--tw-text-opacity)); + color: rgb(75 85 99 / var(--tw-text-opacity)); } -.text-indigo-500 { +.text-amber-200 { --tw-text-opacity: 1; - color: rgb(99 102 241 / var(--tw-text-opacity)); + color: rgb(253 230 138 / var(--tw-text-opacity)); } -.text-gray-800 { +.text-gray-400 { --tw-text-opacity: 1; - color: rgb(31 41 55 / var(--tw-text-opacity)); + color: rgb(156 163 175 / var(--tw-text-opacity)); } -.text-blue-600 { +.text-indigo-500 { --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity)); + color: rgb(99 102 241 / var(--tw-text-opacity)); } .text-amber-300 { @@ -2628,9 +2281,14 @@ video { color: rgb(253 224 71 / var(--tw-text-opacity)); } -.underline { - -webkit-text-decoration-line: underline; - text-decoration-line: underline; +.text-gray-800 { + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} + +.text-blue-600 { + --tw-text-opacity: 1; + color: rgb(37 99 235 / var(--tw-text-opacity)); } .no-underline { @@ -2648,6 +2306,11 @@ video { color: rgb(55 65 81 / var(--tw-placeholder-opacity)); } +.placeholder-gray-700:-ms-input-placeholder { + --tw-placeholder-opacity: 1; + color: rgb(55 65 81 / var(--tw-placeholder-opacity)); +} + .placeholder-gray-700::placeholder { --tw-placeholder-opacity: 1; color: rgb(55 65 81 / var(--tw-placeholder-opacity)); @@ -2659,18 +2322,18 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.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-2xl { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px 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-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); +} + .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; @@ -2679,14 +2342,6 @@ video { transition-duration: 150ms; } -.transition-colors { - transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - .delay-150 { transition-delay: 150ms; } @@ -2695,10 +2350,6 @@ video { transition-duration: 300ms; } -.duration-200 { - transition-duration: 200ms; -} - .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @@ -2730,6 +2381,119 @@ video { height: 100%; } +/* From https://caffeinecreations.ca/blog/accessible-dropdown-navigation-with-tailwind-css-and-alpine-js/ + and https://codepen.io/createsean/pen/VwppLGG?editors=1000*/ + +a.skip-main { + position: absolute; + top: 40px; + height: 1px; + width: 1px; + overflow: hidden; + left: -999px; + z-index: -999; + background: #2d2828; +} + +a.skip-main:focus, a.skip-main:active { + left: 5px; + top: 50px; + z-index: 999; + margin-top: 10px; + margin-bottom: 10px; + margin-left: 5px; + margin-right: 5px; + min-width: 200px; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgba(0, 0, 0, var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgba(45, 40, 40, var(--tw-bg-opacity)); + padding: 10px; + text-align: center; + font-size: 1rem; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgba(255, 255, 255, var(--tw-text-opacity)); + text-decoration: none; +} + +/* Nav */ + +nav li { + transition-duration: 0.5s; +} + +nav li:hover, nav li:focus-within { + cursor: pointer; +} + +nav ul li ul { + width: 100%; + background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); + --tw-bg-opacity: 1; + background-color: rgba(156, 163, 175, var(--tw-bg-opacity)); + padding-left: 0px; + padding-right: 0px; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 2rem; +} + +@media (min-width: 1024px) { + nav ul li ul { + position: absolute; + left: 0px; + width: 180px; + min-width: 180px; + max-width: 180px; + padding-left: 0px; + --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } +} + +nav ul li ul { + z-index:9999; + transition: all 0.5s ease; + right: -20px; +} + +nav ul li a { + display: block; + background-color: transparent; +} + +.group:hover nav ul li a { + --tw-bg-opacity: 1; + background-color: rgba(156, 163, 175, var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgba(255, 255, 255, var(--tw-text-opacity)); +} + +nav ul li:hover > a { + --tw-text-opacity: 1; + color: rgba(17, 24, 39, var(--tw-text-opacity)); +} + +nav ul li ul ul { + top: 0px; + right: -180px; + left:auto; +} + +/* nav ul li ul li { + width: 100%; + } */ + +nav ul li img { + position: absolute; + right: 10px; + top: calc(50% - 4px); +} + +/* end nav */ + .hover\:-translate-y-1:hover { --tw-translate-y: -0.25rem; 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)); @@ -2776,19 +2540,9 @@ video { background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } -.hover\:bg-blue-600:hover { - --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); -} - -.hover\:text-gray-700:hover { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.hover\:text-gray-900:hover { +.hover\:text-gray-100:hover { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(243 244 246 / var(--tw-text-opacity)); } .hover\:underline:hover { @@ -2796,157 +2550,38 @@ video { text-decoration-line: underline; } -.hover\:no-underline:hover { - -webkit-text-decoration-line: none; - text-decoration-line: none; -} - .hover\:shadow-lg:hover { --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); } -.hover\:shadow-none:hover { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.focus\:border-blue-400:focus { - --tw-border-opacity: 1; - border-color: rgb(96 165 250 / var(--tw-border-opacity)); -} - .focus\:bg-white:focus { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.focus\:bg-blue-600:focus { - --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); -} - -.focus\:text-gray-700:focus { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.focus\:text-gray-900:focus { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .focus\:underline:focus { -webkit-text-decoration-line: underline; text-decoration-line: underline; } -.focus\:no-underline:focus { - -webkit-text-decoration-line: none; - text-decoration-line: none; -} - -.focus\:shadow-none:focus { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; } -.focus\:ring-0: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(0px + 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: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(3px + 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-blue-300:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity)); -} - -.focus\:ring-opacity-40:focus { - --tw-ring-opacity: 0.4; +.group:hover .group-hover\:bg-gray-400 { + --tw-bg-opacity: 1; + background-color: rgb(156 163 175 / var(--tw-bg-opacity)); } -@media (prefers-color-scheme: dark) { - .dark\:border-gray-700 { - --tw-border-opacity: 1; - border-color: rgb(55 65 81 / var(--tw-border-opacity)); - } - - .dark\:border-gray-600 { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); - } - - .dark\:bg-gray-900 { - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); - } - - .dark\:bg-gray-800 { - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); - } - - .dark\:text-gray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); - } - - .dark\:text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); - } - - .dark\:text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); - } - - .dark\:text-gray-100 { - --tw-text-opacity: 1; - color: rgb(243 244 246 / var(--tw-text-opacity)); - } - - .dark\:text-gray-300 { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); - } - - .dark\:focus\:border-blue-300:focus { - --tw-border-opacity: 1; - border-color: rgb(147 197 253 / var(--tw-border-opacity)); - } +.group:hover .group-hover\:text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); } @media (min-width: 640px) { - .sm\:-mx-2 { - margin-left: -0.5rem; - margin-right: -0.5rem; - } - - .sm\:mx-2 { - margin-left: 0.5rem; - margin-right: 0.5rem; - } - - .sm\:ml-0 { - margin-left: 0px; - } - .sm\:mt-0 { margin-top: 0px; } @@ -2959,14 +2594,6 @@ video { margin-left: auto; } - .sm\:block { - display: block; - } - - .sm\:h-20 { - height: 5rem; - } - .sm\:w-1\/4 { width: 25%; } @@ -2979,32 +2606,10 @@ video { flex-direction: row; } - .sm\:items-center { - align-items: center; - } - .sm\:justify-start { justify-content: flex-start; } - .sm\:justify-center { - justify-content: center; - } - - .sm\:justify-between { - justify-content: space-between; - } - - .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0px * var(--tw-space-y-reverse)); - } - - .sm\:rounded-lg { - border-radius: 0.5rem; - } - .sm\:border-l { border-left-width: 1px; } @@ -3022,11 +2627,6 @@ video { border-color: rgb(229 231 235 / var(--tw-border-opacity)); } - .sm\:px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; - } - .sm\:py-8 { padding-top: 2rem; padding-bottom: 2rem; @@ -3037,10 +2637,6 @@ video { padding-bottom: 0.5rem; } - .sm\:pt-0 { - padding-top: 0px; - } - .sm\:pr-8 { padding-right: 2rem; } @@ -3057,10 +2653,6 @@ video { text-align: left; } - .sm\:text-right { - text-align: right; - } - .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; @@ -3077,6 +2669,14 @@ video { order: -9999; } + .md\:col-span-6 { + grid-column: span 6 / span 6; + } + + .md\:col-span-3 { + grid-column: span 3 / span 3; + } + .md\:mx-24 { margin-left: 6rem; margin-right: 6rem; @@ -3095,12 +2695,12 @@ video { margin-top: 0px; } - .md\:ml-16 { - margin-left: 4rem; + .md\:mr-12 { + margin-right: 3rem; } - .md\:block { - display: block; + .md\:ml-16 { + margin-left: 4rem; } .md\:h-48 { @@ -3119,14 +2719,6 @@ video { width: 100%; } - .md\:w-4\/12 { - width: 33.333333%; - } - - .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -3151,14 +2743,6 @@ video { justify-content: center; } - .md\:border-t-0 { - border-top-width: 0px; - } - - .md\:border-l { - border-left-width: 1px; - } - .md\:p-16 { padding: 4rem; } @@ -3301,14 +2885,10 @@ video { } .lg\:prose-xl :where(ol):not(:where([class~="not-prose"] *)) { - margin-top: 1.2em; - margin-bottom: 1.2em; padding-left: 1.6em; } .lg\:prose-xl :where(ul):not(:where([class~="not-prose"] *)) { - margin-top: 1.2em; - margin-bottom: 1.2em; padding-left: 1.6em; } @@ -3325,24 +2905,24 @@ video { padding-left: 0.4em; } - .lg\:prose-xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + .lg\:prose-xl > :where(ul > li p):not(:where([class~="not-prose"] *)) { margin-top: 0.8em; margin-bottom: 0.8em; } - .lg\:prose-xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-xl > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.2em; } - .lg\:prose-xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-xl > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.2em; } - .lg\:prose-xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-xl > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.2em; } - .lg\:prose-xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-xl > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.2em; } @@ -3391,26 +2971,26 @@ video { padding-right: 0; } - .lg\:prose-xl :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) { + .lg\:prose-xl :where(tbody td):not(:where([class~="not-prose"] *)) { padding-top: 0.8888889em; padding-right: 0.6666667em; padding-bottom: 0.8888889em; padding-left: 0.6666667em; } - .lg\:prose-xl :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-xl :where(tbody td:first-child):not(:where([class~="not-prose"] *)) { padding-left: 0; } - .lg\:prose-xl :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-xl :where(tbody td:last-child):not(:where([class~="not-prose"] *)) { padding-right: 0; } - .lg\:prose-xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-xl > :where(:first-child):not(:where([class~="not-prose"] *)) { margin-top: 0; } - .lg\:prose-xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-xl > :where(:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 0; } @@ -3515,14 +3095,10 @@ video { } .lg\:prose-2xl :where(ol):not(:where([class~="not-prose"] *)) { - margin-top: 1.3333333em; - margin-bottom: 1.3333333em; padding-left: 1.5833333em; } .lg\:prose-2xl :where(ul):not(:where([class~="not-prose"] *)) { - margin-top: 1.3333333em; - margin-bottom: 1.3333333em; padding-left: 1.5833333em; } @@ -3539,24 +3115,24 @@ video { padding-left: 0.4166667em; } - .lg\:prose-2xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + .lg\:prose-2xl > :where(ul > li p):not(:where([class~="not-prose"] *)) { margin-top: 0.8333333em; margin-bottom: 0.8333333em; } - .lg\:prose-2xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-2xl > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.3333333em; } - .lg\:prose-2xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-2xl > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.3333333em; } - .lg\:prose-2xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-2xl > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.3333333em; } - .lg\:prose-2xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-2xl > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.3333333em; } @@ -3605,33 +3181,29 @@ video { padding-right: 0; } - .lg\:prose-2xl :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) { + .lg\:prose-2xl :where(tbody td):not(:where([class~="not-prose"] *)) { padding-top: 0.8em; padding-right: 0.6em; padding-bottom: 0.8em; padding-left: 0.6em; } - .lg\:prose-2xl :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-2xl :where(tbody td:first-child):not(:where([class~="not-prose"] *)) { padding-left: 0; } - .lg\:prose-2xl :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-2xl :where(tbody td:last-child):not(:where([class~="not-prose"] *)) { padding-right: 0; } - .lg\:prose-2xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-2xl > :where(:first-child):not(:where([class~="not-prose"] *)) { margin-top: 0; } - .lg\:prose-2xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + .lg\:prose-2xl > :where(:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 0; } - .lg\:order-none { - order: 0; - } - .lg\:col-span-6 { grid-column: span 6 / span 6; } @@ -3664,6 +3236,18 @@ video { display: inline-block; } + .lg\:flex { + display: flex; + } + + .lg\:hidden { + display: none; + } + + .lg\:h-auto { + height: auto; + } + .lg\:h-24 { height: 6rem; } @@ -3688,10 +3272,6 @@ video { width: 5rem; } - .lg\:w-1\/5 { - width: 20%; - } - .lg\:max-w-lg { max-width: 32rem; } @@ -3700,17 +3280,24 @@ video { flex-grow: 1; } + .lg\:flex-row { + flex-direction: row; + } + + .lg\:flex-row-reverse { + flex-direction: row-reverse; + } + .lg\:items-center { align-items: center; } - .lg\:justify-center { - justify-content: center; + .lg\:justify-start { + justify-content: flex-start; } - .lg\:px-8 { - padding-left: 2rem; - padding-right: 2rem; + .lg\:justify-center { + justify-content: center; } .lg\:px-0 { @@ -3733,6 +3320,11 @@ video { padding-bottom: 2rem; } + .lg\:px-8 { + padding-left: 2rem; + padding-right: 2rem; + } + .lg\:pr-24 { padding-right: 6rem; } @@ -3745,6 +3337,15 @@ video { padding-bottom: 4rem; } + .lg\:pb-0 { + padding-bottom: 0px; + } + + .lg\:text-sm { + font-size: 0.875rem; + line-height: 1.25rem; + } + .lg\:text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -3765,6 +3366,11 @@ video { .xl\:w-1\/4 { width: 25%; } + + .xl\:px-0 { + padding-left: 0px; + padding-right: 0px; + } } @media (min-width: 1536px) { From 8b1cce3138ac05398c98c5bab6684edb765513a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fre=CC=81de=CC=81ric=20Blanc?= Date: Mon, 15 Aug 2022 22:11:31 +0200 Subject: [PATCH 7/7] v0.5.6 --- CHANGELOG.md | 6 ++++++ config/typhoon.php | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3789886..6e729c0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to `typhoon` will be documented in this file. +## v0.5.6 - 2022-08-15 +- remove tw-elements +- add a new menu responsive with accessible navigation adapted from [this article](https://caffeinecreations.ca/blog/accessible-dropdown-navigation-with-tailwind-css-and-alpine-js/) +- now a menu can have 2 sub-levels +- some cleaning in the code + ## v0.5.5 - 2022-08-15 ### Try to optimize SEO score by lazy loading images diff --git a/config/typhoon.php b/config/typhoon.php index ae4419e..a34a608 100644 --- a/config/typhoon.php +++ b/config/typhoon.php @@ -44,7 +44,7 @@ | Possibles values are the main colours of tailwindcss. | */ - 'version' => 'v0.5.5', + 'version' => 'v0.5.6', /* |--------------------------------------------------------------------------