diff --git a/16-countries-page-from-api/src/main/resources/public/output.css b/16-countries-page-from-api/src/main/resources/public/output.css index 69b278e..4a374d7 100644 --- a/16-countries-page-from-api/src/main/resources/public/output.css +++ b/16-countries-page-from-api/src/main/resources/public/output.css @@ -522,34 +522,20 @@ video { --tw-backdrop-sepia: ; } -.absolute { - position: absolute; +.my-8 { + margin-top: 2rem; + margin-bottom: 2rem; } -.relative { - position: relative; -} - -.z-\[1000\] { - z-index: 1000; -} - -.float-left { - float: left; -} - -.m-0 { - margin: 0px; +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; } .mr-2 { margin-right: 0.5rem; } -.ml-2 { - margin-left: 0.5rem; -} - .mt-1 { margin-top: 0.25rem; } @@ -566,99 +552,50 @@ video { display: grid; } -.hidden { - display: none; -} - -.h-10 { - height: 2.5rem; -} - -.h-20 { - height: 5rem; -} - -.h-32 { - height: 8rem; -} - .h-12 { height: 3rem; } -.h-36 { - height: 9rem; -} - .h-14 { height: 3.5rem; } -.h-5 { - height: 1.25rem; -} - -.h-8 { - height: 2rem; -} - -.h-16 { - height: 4rem; -} - -.h-44 { - height: 11rem; +.h-20 { + height: 5rem; } .h-48 { height: 12rem; } -.h-60 { - height: 15rem; +.h-\[375px\] { + height: 375px; } -.h-52 { - height: 13rem; -} - -.w-10 { - width: 2.5rem; +.h-\[350px\] { + height: 350px; } .w-16 { width: 4rem; } -.w-2 { - width: 0.5rem; +.w-64 { + width: 16rem; } -.w-5 { - width: 1.25rem; +.w-\[275px\] { + width: 275px; } .w-full { width: 100%; } -.w-64 { - width: 16rem; -} - -.min-w-max { - min-width: -moz-max-content; - min-width: max-content; -} - .flex-grow { flex-grow: 1; } -.list-none { - list-style-type: none; -} - .appearance-none { -webkit-appearance: none; -moz-appearance: none; @@ -689,16 +626,30 @@ video { justify-content: space-around; } -.overflow-hidden { - overflow: hidden; +.gap-8 { + gap: 2rem; } -.whitespace-nowrap { - white-space: nowrap; +.gap-10 { + gap: 2.5rem; } -.rounded { - border-radius: 0.25rem; +.space-y-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + +.space-y-5 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.25rem * var(--tw-space-y-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)); } .rounded-lg { @@ -709,24 +660,15 @@ video { border-radius: 0.375rem; } +.rounded-t-lg { + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} + .border { border-width: 1px; } -.border-none { - border-style: none; -} - -.border-gray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} - -.bg-cyan-300 { - --tw-bg-opacity: 1; - background-color: rgb(103 232 249 / var(--tw-bg-opacity)); -} - .bg-very-light-gray { --tw-bg-opacity: 1; background-color: hsl(0 0% 98% / var(--tw-bg-opacity)); @@ -737,20 +679,8 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-transparent { - background-color: transparent; -} - -.bg-clip-padding { - background-clip: padding-box; -} - -.p-6 { - padding: 1.5rem; -} - -.p-4 { - padding: 1rem; +.p-8 { + padding: 2rem; } .px-4 { @@ -758,87 +688,29 @@ video { padding-right: 1rem; } +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} + .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; +.pb-8 { + padding-bottom: 2rem; } -.pb-2 { - padding-bottom: 0.5rem; -} - -.pt-2 { - padding-top: 0.5rem; -} - -.pt-2\.5 { - padding-top: 0.625rem; -} - -.text-left { - text-align: left; -} - -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} - -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.text-base { - font-size: 1rem; - line-height: 1.5rem; -} - -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; -} - -.text-xs { - font-size: 0.75rem; - line-height: 1rem; +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; } .font-bold { font-weight: 700; } -.font-medium { - font-weight: 500; -} - -.font-normal { - font-weight: 400; -} - -.uppercase { - text-transform: uppercase; -} - -.leading-normal { - line-height: 1.5; -} - -.text-neutral-700 { - --tw-text-opacity: 1; - color: rgb(64 64 64 / var(--tw-text-opacity)); -} - -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -857,34 +729,12 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.shadow-\[0_4px_9px_-4px_\#3b71ca\] { - --tw-shadow: 0 4px 9px -4px #3b71ca; - --tw-shadow-colored: 0 4px 9px -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); } -.transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -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-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.duration-150 { - transition-duration: 150ms; -} - -.ease-in-out { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - html { font-size: 14px; } @@ -925,125 +775,7 @@ html { font-style: normal; } -.hover\:bg-neutral-100:hover { - --tw-bg-opacity: 1; - background-color: rgb(245 245 245 / var(--tw-bg-opacity)); -} - -.hover\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.3\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.2\)\]:hover { - --tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.3),0 4px 18px 0 rgba(59,113,202,0.2); - --tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 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); -} - -.focus\:border-indigo-500:focus { - --tw-border-opacity: 1; - border-color: rgb(99 102 241 / var(--tw-border-opacity)); -} - -.focus\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.3\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.2\)\]:focus { - --tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.3),0 4px 18px 0 rgba(59,113,202,0.2); - --tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 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); -} - .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-indigo-200:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity)); -} - -.active\:text-neutral-800:active { - --tw-text-opacity: 1; - color: rgb(38 38 38 / var(--tw-text-opacity)); -} - -.active\:no-underline:active { - text-decoration-line: none; -} - -.active\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.3\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.2\)\]:active { - --tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.3),0 4px 18px 0 rgba(59,113,202,0.2); - --tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 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); -} - -.disabled\:pointer-events-none:disabled { - pointer-events: none; -} - -.disabled\:bg-transparent:disabled { - background-color: transparent; -} - -.disabled\:text-neutral-400:disabled { - --tw-text-opacity: 1; - color: rgb(163 163 163 / var(--tw-text-opacity)); -} - -@media (prefers-reduced-motion: reduce) { - .motion-reduce\:transition-none { - transition-property: none; - } -} - -@media (prefers-color-scheme: dark) { - .dark\:bg-neutral-700 { - --tw-bg-opacity: 1; - background-color: rgb(64 64 64 / var(--tw-bg-opacity)); - } - - .dark\:text-neutral-200 { - --tw-text-opacity: 1; - color: rgb(229 229 229 / var(--tw-text-opacity)); - } - - .dark\:shadow-\[0_4px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.5\)\] { - --tw-shadow: 0 4px 9px -4px rgba(59,113,202,0.5); - --tw-shadow-colored: 0 4px 9px -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); - } - - .dark\:hover\:bg-neutral-600:hover { - --tw-bg-opacity: 1; - background-color: rgb(82 82 82 / var(--tw-bg-opacity)); - } - - .dark\:hover\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.2\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.1\)\]:hover { - --tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.2),0 4px 18px 0 rgba(59,113,202,0.1); - --tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 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); - } - - .dark\:focus\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.2\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.1\)\]:focus { - --tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.2),0 4px 18px 0 rgba(59,113,202,0.1); - --tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 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); - } - - .dark\:active\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.2\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.1\)\]:active { - --tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.2),0 4px 18px 0 rgba(59,113,202,0.1); - --tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 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); - } -} - -.\[\&\[data-te-dropdown-show\]\]\:block[data-te-dropdown-show] { - display: block; -} diff --git a/16-countries-page-from-api/src/main/resources/templates/index.html b/16-countries-page-from-api/src/main/resources/templates/index.html index d703d86..7911ca2 100644 --- a/16-countries-page-from-api/src/main/resources/templates/index.html +++ b/16-countries-page-from-api/src/main/resources/templates/index.html @@ -19,39 +19,122 @@ your experience.

-
-
+

Where in the world?

+

Dark Mode

+
+ +
+
-

Where in the world?

-

Dark Mode

- - -
-

Hello!

+ flag of Germany +
+

Germany

+
+
+
Population:
+
81,771,900
+
+
+
Region:
+
Europe
+
+
+
Capital:
+
Berlin
+
+
+
+ +
+ flag of the USA +
+

United States of America

+
+
+
Population:
+
329,484,123
+
+
+
Region:
+
Americas
+
+
+
Capital:
+
Washington, D.C.
+
+
+
+
+ +
+ flag of Germany +
+

Brazil

+
+
+
Population:
+
212,559,409
+
+
+
Region:
+
Americas
+
+
+
Capital:
+
Brasília
+
+
+
+
+