Created
November 25, 2022 21:05
-
-
Save ZackDeRose/231b985deeed6d4bbe99c88d3b161642 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("https://use.typekit.net/rcr1opg.css"); | |
| /* | |
| ! tailwindcss v3.2.2 | MIT License | https://tailwindcss.com | |
| */ | |
| /* | |
| 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) | |
| 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) | |
| */ | |
| *, | |
| ::before, | |
| ::after { | |
| box-sizing: border-box; | |
| /* 1 */ | |
| border-width: 0; | |
| /* 2 */ | |
| border-style: solid; | |
| /* 2 */ | |
| border-color: #e5e7eb; | |
| /* 2 */ | |
| } | |
| ::before, | |
| ::after { | |
| --tw-content: ''; | |
| } | |
| /* | |
| 1. Use a consistent sensible line-height in all browsers. | |
| 2. Prevent adjustments of font size after orientation changes in iOS. | |
| 3. Use a more readable tab size. | |
| 4. Use the user's configured `sans` font-family by default. | |
| 5. Use the user's configured `sans` font-feature-settings by default. | |
| */ | |
| html { | |
| line-height: 1.5; | |
| /* 1 */ | |
| -webkit-text-size-adjust: 100%; | |
| /* 2 */ | |
| -moz-tab-size: 4; | |
| /* 3 */ | |
| -o-tab-size: 4; | |
| tab-size: 4; | |
| /* 3 */ | |
| font-family: sofia-pro, sans-serif; | |
| /* 4 */ | |
| font-feature-settings: normal; | |
| /* 5 */ | |
| } | |
| /* | |
| 1. Remove the margin in all browsers. | |
| 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. | |
| */ | |
| body { | |
| margin: 0; | |
| /* 1 */ | |
| line-height: inherit; | |
| /* 2 */ | |
| } | |
| /* | |
| 1. Add the correct height in Firefox. | |
| 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) | |
| 3. Ensure horizontal rules are visible by default. | |
| */ | |
| hr { | |
| height: 0; | |
| /* 1 */ | |
| color: inherit; | |
| /* 2 */ | |
| border-top-width: 1px; | |
| /* 3 */ | |
| } | |
| /* | |
| Add the correct text decoration in Chrome, Edge, and Safari. | |
| */ | |
| abbr:where([title]) { | |
| -webkit-text-decoration: underline dotted; | |
| text-decoration: underline dotted; | |
| } | |
| /* | |
| Remove the default font size and weight for headings. | |
| */ | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-size: inherit; | |
| font-weight: inherit; | |
| } | |
| /* | |
| Reset links to optimize for opt-in styling instead of opt-out. | |
| */ | |
| a { | |
| color: inherit; | |
| text-decoration: inherit; | |
| } | |
| /* | |
| Add the correct font weight in Edge and Safari. | |
| */ | |
| b, | |
| strong { | |
| font-weight: bolder; | |
| } | |
| /* | |
| 1. Use the user's configured `mono` font family by default. | |
| 2. Correct the odd `em` font sizing in all browsers. | |
| */ | |
| code, | |
| kbd, | |
| samp, | |
| pre { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | |
| /* 1 */ | |
| font-size: 1em; | |
| /* 2 */ | |
| } | |
| /* | |
| Add the correct font size in all browsers. | |
| */ | |
| small { | |
| font-size: 80%; | |
| } | |
| /* | |
| Prevent `sub` and `sup` elements from affecting the line height in all browsers. | |
| */ | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| /* | |
| 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) | |
| 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) | |
| 3. Remove gaps between table borders by default. | |
| */ | |
| table { | |
| text-indent: 0; | |
| /* 1 */ | |
| border-color: inherit; | |
| /* 2 */ | |
| border-collapse: collapse; | |
| /* 3 */ | |
| } | |
| /* | |
| 1. Change the font styles in all browsers. | |
| 2. Remove the margin in Firefox and Safari. | |
| 3. Remove default padding in all browsers. | |
| */ | |
| button, | |
| input, | |
| optgroup, | |
| select, | |
| textarea { | |
| font-family: inherit; | |
| /* 1 */ | |
| font-size: 100%; | |
| /* 1 */ | |
| font-weight: inherit; | |
| /* 1 */ | |
| line-height: inherit; | |
| /* 1 */ | |
| color: inherit; | |
| /* 1 */ | |
| margin: 0; | |
| /* 2 */ | |
| padding: 0; | |
| /* 3 */ | |
| } | |
| /* | |
| Remove the inheritance of text transform in Edge and Firefox. | |
| */ | |
| button, | |
| select { | |
| text-transform: none; | |
| } | |
| /* | |
| 1. Correct the inability to style clickable types in iOS and Safari. | |
| 2. Remove default button styles. | |
| */ | |
| button, | |
| [type='button'], | |
| [type='reset'], | |
| [type='submit'] { | |
| -webkit-appearance: button; | |
| /* 1 */ | |
| background-color: transparent; | |
| /* 2 */ | |
| background-image: none; | |
| /* 2 */ | |
| } | |
| /* | |
| Use the modern Firefox focus style for all focusable elements. | |
| */ | |
| :-moz-focusring { | |
| outline: auto; | |
| } | |
| /* | |
| Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) | |
| */ | |
| :-moz-ui-invalid { | |
| box-shadow: none; | |
| } | |
| /* | |
| Add the correct vertical alignment in Chrome and Firefox. | |
| */ | |
| progress { | |
| vertical-align: baseline; | |
| } | |
| /* | |
| Correct the cursor style of increment and decrement buttons in Safari. | |
| */ | |
| ::-webkit-inner-spin-button, | |
| ::-webkit-outer-spin-button { | |
| height: auto; | |
| } | |
| /* | |
| 1. Correct the odd appearance in Chrome and Safari. | |
| 2. Correct the outline style in Safari. | |
| */ | |
| [type='search'] { | |
| -webkit-appearance: textfield; | |
| /* 1 */ | |
| outline-offset: -2px; | |
| /* 2 */ | |
| } | |
| /* | |
| Remove the inner padding in Chrome and Safari on macOS. | |
| */ | |
| ::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| /* | |
| 1. Correct the inability to style clickable types in iOS and Safari. | |
| 2. Change font properties to `inherit` in Safari. | |
| */ | |
| ::-webkit-file-upload-button { | |
| -webkit-appearance: button; | |
| /* 1 */ | |
| font: inherit; | |
| /* 2 */ | |
| } | |
| /* | |
| Add the correct display in Chrome and Safari. | |
| */ | |
| summary { | |
| display: list-item; | |
| } | |
| /* | |
| Removes the default spacing and border for appropriate elements. | |
| */ | |
| blockquote, | |
| dl, | |
| dd, | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| hr, | |
| figure, | |
| p, | |
| pre { | |
| margin: 0; | |
| } | |
| fieldset { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| legend { | |
| padding: 0; | |
| } | |
| ol, | |
| ul, | |
| menu { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* | |
| Prevent resizing textareas horizontally by default. | |
| */ | |
| textarea { | |
| resize: vertical; | |
| } | |
| /* | |
| 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) | |
| 2. Set the default placeholder color to the user's configured gray 400 color. | |
| */ | |
| input::-moz-placeholder, textarea::-moz-placeholder { | |
| opacity: 1; | |
| /* 1 */ | |
| color: #9ca3af; | |
| /* 2 */ | |
| } | |
| input::placeholder, | |
| textarea::placeholder { | |
| opacity: 1; | |
| /* 1 */ | |
| color: #9ca3af; | |
| /* 2 */ | |
| } | |
| /* | |
| Set the default cursor for buttons. | |
| */ | |
| button, | |
| [role="button"] { | |
| cursor: pointer; | |
| } | |
| /* | |
| Make sure disabled buttons don't get the pointer cursor. | |
| */ | |
| :disabled { | |
| cursor: default; | |
| } | |
| /* | |
| 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) | |
| 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) | |
| This can trigger a poorly considered lint error in some tools but is included by design. | |
| */ | |
| img, | |
| svg, | |
| video, | |
| canvas, | |
| audio, | |
| iframe, | |
| embed, | |
| object { | |
| display: block; | |
| /* 1 */ | |
| vertical-align: middle; | |
| /* 2 */ | |
| } | |
| /* | |
| Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) | |
| */ | |
| img, | |
| video { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| /* Make elements with the HTML hidden attribute stay hidden by default */ | |
| [hidden] { | |
| display: none; | |
| } | |
| *, ::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: ; | |
| } | |
| ::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: ; | |
| } | |
| .container{ | |
| width: 100%; | |
| } | |
| @media (min-width: 640px){ | |
| .container{ | |
| max-width: 640px; | |
| } | |
| } | |
| @media (min-width: 768px){ | |
| .container{ | |
| max-width: 768px; | |
| } | |
| } | |
| @media (min-width: 1024px){ | |
| .container{ | |
| max-width: 1024px; | |
| } | |
| } | |
| @media (min-width: 1280px){ | |
| .container{ | |
| max-width: 1280px; | |
| } | |
| } | |
| @media (min-width: 1536px){ | |
| .container{ | |
| max-width: 1536px; | |
| } | |
| } | |
| .prose-invert{ | |
| --tw-prose-body: var(--tw-prose-invert-body); | |
| --tw-prose-headings: var(--tw-prose-invert-headings); | |
| --tw-prose-lead: var(--tw-prose-invert-lead); | |
| --tw-prose-links: var(--tw-prose-invert-links); | |
| --tw-prose-bold: var(--tw-prose-invert-bold); | |
| --tw-prose-counters: var(--tw-prose-invert-counters); | |
| --tw-prose-bullets: var(--tw-prose-invert-bullets); | |
| --tw-prose-hr: var(--tw-prose-invert-hr); | |
| --tw-prose-quotes: var(--tw-prose-invert-quotes); | |
| --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders); | |
| --tw-prose-captions: var(--tw-prose-invert-captions); | |
| --tw-prose-code: var(--tw-prose-invert-code); | |
| --tw-prose-pre-code: var(--tw-prose-invert-pre-code); | |
| --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg); | |
| --tw-prose-th-borders: var(--tw-prose-invert-th-borders); | |
| --tw-prose-td-borders: var(--tw-prose-invert-td-borders); | |
| } | |
| .visible{ | |
| visibility: visible !important; | |
| } | |
| .static{ | |
| position: static !important; | |
| } | |
| .fixed{ | |
| position: fixed !important; | |
| } | |
| .absolute{ | |
| position: absolute !important; | |
| } | |
| .relative{ | |
| position: relative !important; | |
| } | |
| .inset-0{ | |
| top: 0px !important; | |
| right: 0px !important; | |
| bottom: 0px !important; | |
| left: 0px !important; | |
| } | |
| .isolate{ | |
| isolation: isolate !important; | |
| } | |
| .z-50{ | |
| z-index: 50 !important; | |
| } | |
| .z-40{ | |
| z-index: 40 !important; | |
| } | |
| .float-right{ | |
| float: right !important; | |
| } | |
| .float-left{ | |
| float: left !important; | |
| } | |
| .m-1{ | |
| margin: 0.25rem !important; | |
| } | |
| .m-2{ | |
| margin: 0.5rem !important; | |
| } | |
| .m-3{ | |
| margin: 0.75rem !important; | |
| } | |
| .m-4{ | |
| margin: 1rem !important; | |
| } | |
| .m-5{ | |
| margin: 1.25rem !important; | |
| } | |
| .my-1{ | |
| margin-top: 0.25rem !important; | |
| margin-bottom: 0.25rem !important; | |
| } | |
| .mx-1{ | |
| margin-left: 0.25rem !important; | |
| margin-right: 0.25rem !important; | |
| } | |
| .mx-2{ | |
| margin-left: 0.5rem !important; | |
| margin-right: 0.5rem !important; | |
| } | |
| .mx-3{ | |
| margin-left: 0.75rem !important; | |
| margin-right: 0.75rem !important; | |
| } | |
| .mx-4{ | |
| margin-left: 1rem !important; | |
| margin-right: 1rem !important; | |
| } | |
| .mx-5{ | |
| margin-left: 1.25rem !important; | |
| margin-right: 1.25rem !important; | |
| } | |
| .my-2{ | |
| margin-top: 0.5rem !important; | |
| margin-bottom: 0.5rem !important; | |
| } | |
| .my-3{ | |
| margin-top: 0.75rem !important; | |
| margin-bottom: 0.75rem !important; | |
| } | |
| .my-4{ | |
| margin-top: 1rem !important; | |
| margin-bottom: 1rem !important; | |
| } | |
| .my-5{ | |
| margin-top: 1.25rem !important; | |
| margin-bottom: 1.25rem !important; | |
| } | |
| .mx-auto{ | |
| margin-left: auto !important; | |
| margin-right: auto !important; | |
| } | |
| .my-6{ | |
| margin-top: 1.5rem !important; | |
| margin-bottom: 1.5rem !important; | |
| } | |
| .my-12{ | |
| margin-top: 3rem !important; | |
| margin-bottom: 3rem !important; | |
| } | |
| .ml-2{ | |
| margin-left: 0.5rem !important; | |
| } | |
| .mr-2{ | |
| margin-right: 0.5rem !important; | |
| } | |
| .mt-1{ | |
| margin-top: 0.25rem !important; | |
| } | |
| .mt-2{ | |
| margin-top: 0.5rem !important; | |
| } | |
| .mt-3{ | |
| margin-top: 0.75rem !important; | |
| } | |
| .mt-4{ | |
| margin-top: 1rem !important; | |
| } | |
| .mt-5{ | |
| margin-top: 1.25rem !important; | |
| } | |
| .mr-1{ | |
| margin-right: 0.25rem !important; | |
| } | |
| .mr-3{ | |
| margin-right: 0.75rem !important; | |
| } | |
| .mr-4{ | |
| margin-right: 1rem !important; | |
| } | |
| .mr-5{ | |
| margin-right: 1.25rem !important; | |
| } | |
| .mb-1{ | |
| margin-bottom: 0.25rem !important; | |
| } | |
| .mb-2{ | |
| margin-bottom: 0.5rem !important; | |
| } | |
| .mb-3{ | |
| margin-bottom: 0.75rem !important; | |
| } | |
| .mb-4{ | |
| margin-bottom: 1rem !important; | |
| } | |
| .mb-5{ | |
| margin-bottom: 1.25rem !important; | |
| } | |
| .ml-1{ | |
| margin-left: 0.25rem !important; | |
| } | |
| .ml-3{ | |
| margin-left: 0.75rem !important; | |
| } | |
| .ml-4{ | |
| margin-left: 1rem !important; | |
| } | |
| .ml-5{ | |
| margin-left: 1.25rem !important; | |
| } | |
| .mr-12{ | |
| margin-right: 3rem !important; | |
| } | |
| .mr-6{ | |
| margin-right: 1.5rem !important; | |
| } | |
| .ml-auto{ | |
| margin-left: auto !important; | |
| } | |
| .block{ | |
| display: block !important; | |
| } | |
| .inline-block{ | |
| display: inline-block !important; | |
| } | |
| .inline{ | |
| display: inline !important; | |
| } | |
| .flex{ | |
| display: flex !important; | |
| } | |
| .table{ | |
| display: table !important; | |
| } | |
| .grid{ | |
| display: grid !important; | |
| } | |
| .contents{ | |
| display: contents !important; | |
| } | |
| .hidden{ | |
| display: none !important; | |
| } | |
| .h-12{ | |
| height: 3rem !important; | |
| } | |
| .h-6{ | |
| height: 1.5rem !important; | |
| } | |
| .h-1{ | |
| height: 0.25rem !important; | |
| } | |
| .w-12{ | |
| width: 3rem !important; | |
| } | |
| .w-4{ | |
| width: 1rem !important; | |
| } | |
| .w-6{ | |
| width: 1.5rem !important; | |
| } | |
| .w-auto{ | |
| width: auto !important; | |
| } | |
| .w-full{ | |
| width: 100% !important; | |
| } | |
| .w-24{ | |
| width: 6rem !important; | |
| } | |
| .max-w-screen-2xl{ | |
| max-width: 1536px !important; | |
| } | |
| .max-w-3xl{ | |
| max-width: 48rem !important; | |
| } | |
| .flex-auto{ | |
| flex: 1 1 auto !important; | |
| } | |
| .origin-center{ | |
| transform-origin: center !important; | |
| } | |
| .rotate-180{ | |
| --tw-rotate: 180deg !important; | |
| 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)) !important; | |
| } | |
| .resize{ | |
| resize: both !important; | |
| } | |
| .grid-cols-1{ | |
| grid-template-columns: repeat(1, minmax(0, 1fr)) !important; | |
| } | |
| .flex-col{ | |
| flex-direction: column !important; | |
| } | |
| .place-content-center{ | |
| place-content: center !important; | |
| } | |
| .place-items-center{ | |
| place-items: center !important; | |
| } | |
| .items-start{ | |
| align-items: flex-start !important; | |
| } | |
| .items-center{ | |
| align-items: center !important; | |
| } | |
| .justify-end{ | |
| justify-content: flex-end !important; | |
| } | |
| .justify-center{ | |
| justify-content: center !important; | |
| } | |
| .justify-between{ | |
| justify-content: space-between !important; | |
| } | |
| .gap-2{ | |
| gap: 0.5rem !important; | |
| } | |
| .overflow-y-auto{ | |
| overflow-y: auto !important; | |
| } | |
| .overflow-x-hidden{ | |
| overflow-x: hidden !important; | |
| } | |
| .rounded-md{ | |
| border-radius: 0.375rem !important; | |
| } | |
| .rounded{ | |
| border-radius: 0.25rem !important; | |
| } | |
| .rounded-lg{ | |
| border-radius: 0.5rem !important; | |
| } | |
| .rounded-full{ | |
| border-radius: 9999px !important; | |
| } | |
| .rounded-t{ | |
| border-top-left-radius: 0.25rem !important; | |
| border-top-right-radius: 0.25rem !important; | |
| } | |
| .rounded-b{ | |
| border-bottom-right-radius: 0.25rem !important; | |
| border-bottom-left-radius: 0.25rem !important; | |
| } | |
| .border{ | |
| border-width: 1px !important; | |
| } | |
| .border-0{ | |
| border-width: 0px !important; | |
| } | |
| .border-b{ | |
| border-bottom-width: 1px !important; | |
| } | |
| .border-t{ | |
| border-top-width: 1px !important; | |
| } | |
| .border-solid{ | |
| border-style: solid !important; | |
| } | |
| .border-green-400{ | |
| --tw-border-opacity: 1 !important; | |
| border-color: rgb(74 222 128 / var(--tw-border-opacity)) !important; | |
| } | |
| .border-gray4{ | |
| --tw-border-opacity: 1 !important; | |
| border-color: rgb(108 121 131 / var(--tw-border-opacity)) !important; | |
| } | |
| .bg-gray7{ | |
| --tw-bg-opacity: 1 !important; | |
| background-color: rgb(18 24 27 / var(--tw-bg-opacity)) !important; | |
| } | |
| .bg-white{ | |
| --tw-bg-opacity: 1 !important; | |
| background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important; | |
| } | |
| .bg-pink-500{ | |
| --tw-bg-opacity: 1 !important; | |
| background-color: rgb(236 72 153 / var(--tw-bg-opacity)) !important; | |
| } | |
| .bg-transparent{ | |
| background-color: transparent !important; | |
| } | |
| .bg-black{ | |
| --tw-bg-opacity: 1 !important; | |
| background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important; | |
| } | |
| .bg-opacity-10{ | |
| --tw-bg-opacity: 0.1 !important; | |
| } | |
| .bg-gradient-to-r{ | |
| background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important; | |
| } | |
| .from-gray5{ | |
| --tw-gradient-from: #454e56 !important; | |
| --tw-gradient-to: rgb(69 78 86 / 0) !important; | |
| --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; | |
| } | |
| .to-gray4{ | |
| --tw-gradient-to: #6c7983 !important; | |
| } | |
| .fill-green-400{ | |
| fill: #4ade80 !important; | |
| } | |
| .fill-red-400{ | |
| fill: #f87171 !important; | |
| } | |
| .fill-white{ | |
| fill: #ffffff !important; | |
| } | |
| .object-contain{ | |
| -o-object-fit: contain !important; | |
| object-fit: contain !important; | |
| } | |
| .p-1{ | |
| padding: 0.25rem !important; | |
| } | |
| .p-2{ | |
| padding: 0.5rem !important; | |
| } | |
| .p-3{ | |
| padding: 0.75rem !important; | |
| } | |
| .p-4{ | |
| padding: 1rem !important; | |
| } | |
| .p-5{ | |
| padding: 1.25rem !important; | |
| } | |
| .p-6{ | |
| padding: 1.5rem !important; | |
| } | |
| .p-8{ | |
| padding: 2rem !important; | |
| } | |
| .px-4{ | |
| padding-left: 1rem !important; | |
| padding-right: 1rem !important; | |
| } | |
| .px-1{ | |
| padding-left: 0.25rem !important; | |
| padding-right: 0.25rem !important; | |
| } | |
| .px-2{ | |
| padding-left: 0.5rem !important; | |
| padding-right: 0.5rem !important; | |
| } | |
| .px-3{ | |
| padding-left: 0.75rem !important; | |
| padding-right: 0.75rem !important; | |
| } | |
| .px-5{ | |
| padding-left: 1.25rem !important; | |
| padding-right: 1.25rem !important; | |
| } | |
| .py-1{ | |
| padding-top: 0.25rem !important; | |
| padding-bottom: 0.25rem !important; | |
| } | |
| .py-2{ | |
| padding-top: 0.5rem !important; | |
| padding-bottom: 0.5rem !important; | |
| } | |
| .py-3{ | |
| padding-top: 0.75rem !important; | |
| padding-bottom: 0.75rem !important; | |
| } | |
| .py-4{ | |
| padding-top: 1rem !important; | |
| padding-bottom: 1rem !important; | |
| } | |
| .py-5{ | |
| padding-top: 1.25rem !important; | |
| padding-bottom: 1.25rem !important; | |
| } | |
| .px-6{ | |
| padding-left: 1.5rem !important; | |
| padding-right: 1.5rem !important; | |
| } | |
| .pt-3{ | |
| padding-top: 0.75rem !important; | |
| } | |
| .pl-2{ | |
| padding-left: 0.5rem !important; | |
| } | |
| .pb-4{ | |
| padding-bottom: 1rem !important; | |
| } | |
| .pt-1{ | |
| padding-top: 0.25rem !important; | |
| } | |
| .pt-2{ | |
| padding-top: 0.5rem !important; | |
| } | |
| .pt-4{ | |
| padding-top: 1rem !important; | |
| } | |
| .pt-5{ | |
| padding-top: 1.25rem !important; | |
| } | |
| .pr-1{ | |
| padding-right: 0.25rem !important; | |
| } | |
| .pr-2{ | |
| padding-right: 0.5rem !important; | |
| } | |
| .pr-3{ | |
| padding-right: 0.75rem !important; | |
| } | |
| .pr-4{ | |
| padding-right: 1rem !important; | |
| } | |
| .pr-5{ | |
| padding-right: 1.25rem !important; | |
| } | |
| .pb-1{ | |
| padding-bottom: 0.25rem !important; | |
| } | |
| .pb-2{ | |
| padding-bottom: 0.5rem !important; | |
| } | |
| .pb-3{ | |
| padding-bottom: 0.75rem !important; | |
| } | |
| .pb-5{ | |
| padding-bottom: 1.25rem !important; | |
| } | |
| .pl-1{ | |
| padding-left: 0.25rem !important; | |
| } | |
| .pl-3{ | |
| padding-left: 0.75rem !important; | |
| } | |
| .pl-4{ | |
| padding-left: 1rem !important; | |
| } | |
| .pl-5{ | |
| padding-left: 1.25rem !important; | |
| } | |
| .pt-10{ | |
| padding-top: 2.5rem !important; | |
| } | |
| .text-center{ | |
| text-align: center !important; | |
| } | |
| .font-display{ | |
| font-family: cubano, sans-serif !important; | |
| } | |
| .font-sans{ | |
| font-family: sofia-pro, sans-serif !important; | |
| } | |
| .text-2xl{ | |
| font-size: 1.5rem !important; | |
| line-height: 2rem !important; | |
| } | |
| .text-base{ | |
| font-size: 1rem !important; | |
| line-height: 1.5rem !important; | |
| } | |
| .text-xl{ | |
| font-size: 1.25rem !important; | |
| line-height: 1.75rem !important; | |
| } | |
| .text-xs{ | |
| font-size: 0.75rem !important; | |
| line-height: 1rem !important; | |
| } | |
| .text-sm{ | |
| font-size: 0.875rem !important; | |
| line-height: 1.25rem !important; | |
| } | |
| .text-3xl{ | |
| font-size: 1.875rem !important; | |
| line-height: 2.25rem !important; | |
| } | |
| .text-lg{ | |
| font-size: 1.125rem !important; | |
| line-height: 1.75rem !important; | |
| } | |
| .font-normal{ | |
| font-weight: 400 !important; | |
| } | |
| .font-bold{ | |
| font-weight: 700 !important; | |
| } | |
| .font-semibold{ | |
| font-weight: 600 !important; | |
| } | |
| .uppercase{ | |
| text-transform: uppercase !important; | |
| } | |
| .leading-none{ | |
| line-height: 1 !important; | |
| } | |
| .leading-relaxed{ | |
| line-height: 1.625 !important; | |
| } | |
| .text-gray1{ | |
| --tw-text-opacity: 1 !important; | |
| color: rgb(248 248 248 / var(--tw-text-opacity)) !important; | |
| } | |
| .text-green-500{ | |
| --tw-text-opacity: 1 !important; | |
| color: rgb(34 197 94 / var(--tw-text-opacity)) !important; | |
| } | |
| .text-gray2{ | |
| --tw-text-opacity: 1 !important; | |
| color: rgb(219 225 232 / var(--tw-text-opacity)) !important; | |
| } | |
| .text-black{ | |
| --tw-text-opacity: 1 !important; | |
| color: rgb(0 0 0 / var(--tw-text-opacity)) !important; | |
| } | |
| .text-white{ | |
| --tw-text-opacity: 1 !important; | |
| color: rgb(255 255 255 / var(--tw-text-opacity)) !important; | |
| } | |
| .text-red-500{ | |
| --tw-text-opacity: 1 !important; | |
| color: rgb(239 68 68 / var(--tw-text-opacity)) !important; | |
| } | |
| .text-blue-500{ | |
| --tw-text-opacity: 1 !important; | |
| color: rgb(59 130 246 / var(--tw-text-opacity)) !important; | |
| } | |
| .underline{ | |
| text-decoration-line: underline !important; | |
| } | |
| .opacity-50{ | |
| opacity: 0.5 !important; | |
| } | |
| .opacity-5{ | |
| opacity: 0.05 !important; | |
| } | |
| .opacity-25{ | |
| opacity: 0.25 !important; | |
| } | |
| .shadow-xl{ | |
| --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important; | |
| --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color) !important; | |
| box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; | |
| } | |
| .shadow{ | |
| --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important; | |
| --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important; | |
| box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; | |
| } | |
| .shadow-lg{ | |
| --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important; | |
| --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important; | |
| box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; | |
| } | |
| .outline-none{ | |
| outline: 2px solid transparent !important; | |
| outline-offset: 2px !important; | |
| } | |
| .blur{ | |
| --tw-blur: blur(8px) !important; | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; | |
| } | |
| .drop-shadow-\[6px_6px_0_black\]{ | |
| --tw-drop-shadow: drop-shadow(6px 6px 0 black) !important; | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; | |
| } | |
| .filter{ | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; | |
| } | |
| .transition{ | |
| transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter !important; | |
| transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important; | |
| transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter !important; | |
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; | |
| transition-duration: 150ms !important; | |
| } | |
| .transition-transform{ | |
| transition-property: transform !important; | |
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; | |
| transition-duration: 150ms !important; | |
| } | |
| .transition-all{ | |
| transition-property: all !important; | |
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; | |
| transition-duration: 150ms !important; | |
| } | |
| .duration-300{ | |
| transition-duration: 300ms !important; | |
| } | |
| .duration-150{ | |
| transition-duration: 150ms !important; | |
| } | |
| .ease-linear{ | |
| transition-timing-function: linear !important; | |
| } | |
| html { | |
| display: block; | |
| font-size: 13px; | |
| @media (min-width: 1024px) { | |
| font-size: 16px; | |
| } | |
| } | |
| body{ | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(55 65 81 / var(--tw-bg-opacity)); | |
| --tw-text-opacity: 1; | |
| color: rgb(243 244 246 / var(--tw-text-opacity)); | |
| background: linear-gradient( | |
| 176deg, | |
| rgba(18, 24, 27, 1) 50%, | |
| rgba(32, 39, 55, 1) 100% | |
| ); | |
| min-height: 100vh; | |
| background-attachment: fixed; | |
| @include scrollbar; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6{ | |
| font-family: cubano, sans-serif; | |
| font-size: 1.5rem; | |
| line-height: 2rem; | |
| font-weight: 400; | |
| --tw-text-opacity: 1; | |
| color: rgb(255 255 255 / var(--tw-text-opacity)); | |
| } | |
| p{ | |
| font-family: cubano, sans-serif; | |
| font-weight: 400; | |
| --tw-text-opacity: 1; | |
| color: rgb(255 255 255 / var(--tw-text-opacity)); | |
| } | |
| svg { | |
| width: auto; | |
| } | |
| .container{ | |
| margin-left: auto; | |
| margin-right: auto; | |
| max-width: 1536px; | |
| padding-left: 0.75rem; | |
| padding-right: 0.75rem; | |
| } | |
| @media (min-width: 768px){ | |
| .container{ | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| } | |
| } | |
| .grid-list{ | |
| display: grid; | |
| list-style-type: none; | |
| grid-auto-columns: max-content; | |
| grid-template-columns: repeat(1, minmax(0, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| @media (min-width: 768px){ | |
| .grid-list{ | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| @media (min-width: 1024px){ | |
| .grid-list{ | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| } | |
| } | |
| @media (min-width: 1280px){ | |
| .grid-list{ | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| } | |
| } | |
| /* AllPosts component styles */ | |
| .posts-container{ | |
| display: grid; | |
| grid-template-columns: repeat(1, minmax(0, 1fr)); | |
| } | |
| .post-container{ | |
| margin: 1rem; | |
| display: flex; | |
| border-radius: 0.25rem; | |
| border-width: 2px; | |
| --tw-text-opacity: 1; | |
| color: rgb(255 255 255 / var(--tw-text-opacity)); | |
| } | |
| .post-upvote-container{ | |
| margin-right: 1rem; | |
| display: grid; | |
| flex: none; | |
| grid-template-columns: repeat(1, minmax(0, 1fr)); | |
| place-content: center; | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(31 41 55 / var(--tw-bg-opacity)); | |
| padding: 0.5rem; | |
| } | |
| /* CreatePost component styles */ | |
| .create-post-form{ | |
| margin-left: 1rem; | |
| margin-bottom: 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| gap: 1rem; | |
| border-radius: 0.25rem; | |
| border-width: 2px; | |
| padding: 1rem; | |
| } | |
| .create-post-title-input{ | |
| border-radius: 0.25rem; | |
| padding: 0.5rem; | |
| font-size: 1.25rem; | |
| line-height: 1.75rem; | |
| --tw-text-opacity: 1; | |
| color: rgb(31 41 55 / var(--tw-text-opacity)); | |
| } | |
| .create-post-content-input{ | |
| height: 6rem; | |
| border-radius: 0.25rem; | |
| padding: 1rem; | |
| --tw-text-opacity: 1; | |
| color: rgb(31 41 55 / var(--tw-text-opacity)); | |
| } | |
| .create-post-submit-button{ | |
| border-radius: 0.25rem; | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(74 222 128 / var(--tw-bg-opacity)); | |
| padding: 0.5rem; | |
| font-family: cubano, sans-serif; | |
| font-size: 1.125rem; | |
| line-height: 1.75rem; | |
| } | |
| /* Dialog component styles */ | |
| .dialog-container{ | |
| position: fixed; | |
| top: 0px; | |
| right: 0px; | |
| bottom: 0px; | |
| left: 0px; | |
| z-index: 40; | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(0 0 0 / var(--tw-bg-opacity)); | |
| opacity: 0.75; | |
| } | |
| .dialog-backdrop{ | |
| position: fixed; | |
| top: 0px; | |
| right: 0px; | |
| bottom: 0px; | |
| left: 0px; | |
| z-index: 50; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| outline: 2px solid transparent; | |
| outline-offset: 2px; | |
| } | |
| .dialog-backdrop:focus{ | |
| outline: 2px solid transparent; | |
| outline-offset: 2px; | |
| } | |
| .dialog-placement{ | |
| position: relative; | |
| margin-top: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: auto; | |
| width: 32rem; | |
| } | |
| .dialog-accent-border{ | |
| position: absolute; | |
| top: -0.125rem; | |
| right: -0.125rem; | |
| bottom: -0.125rem; | |
| left: -0.125rem; | |
| border-radius: 0.5rem; | |
| background-image: linear-gradient(to right, var(--tw-gradient-stops)); | |
| --tw-gradient-from: #bbf7d0; | |
| --tw-gradient-to: rgb(187 247 208 / 0); | |
| --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); | |
| --tw-gradient-to: #16a34a; | |
| opacity: 0.25; | |
| --tw-blur: blur(16px); | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); | |
| 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: 1000ms; | |
| } | |
| .dialog-content-container{ | |
| position: relative; | |
| display: grid; | |
| place-content: center; | |
| border-radius: 0.5rem; | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(0 0 0 / var(--tw-bg-opacity)); | |
| padding: 1.5rem; | |
| } | |
| /* Home component styles */ | |
| .home-container{ | |
| display: grid; | |
| width: 100%; | |
| place-content: center; | |
| justify-content: center; | |
| } | |
| .home-header{ | |
| margin: 1rem; | |
| text-align: center; | |
| font-size: 3rem; | |
| line-height: 1; | |
| --tw-text-opacity: 1; | |
| color: rgb(74 222 128 / var(--tw-text-opacity)); | |
| --tw-drop-shadow: drop-shadow(0 0 9px rgba(34,197,94,0.9)); | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); | |
| } | |
| /* Login component styles */ | |
| .login-button{ | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(255 255 255 / var(--tw-bg-opacity)); | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| padding-top: 0.5rem; | |
| padding-bottom: 0.5rem; | |
| font-family: cubano, sans-serif; | |
| font-size: 1.25rem; | |
| line-height: 1.75rem; | |
| --tw-text-opacity: 1; | |
| color: rgb(0 0 0 / var(--tw-text-opacity)); | |
| --tw-drop-shadow: drop-shadow(6px 6px 0 black); | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); | |
| transition-property: all; | |
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
| transition-duration: 300ms; | |
| } | |
| .login-button:hover{ | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(147 51 234 / var(--tw-bg-opacity)); | |
| --tw-text-opacity: 1; | |
| color: rgb(255 255 255 / var(--tw-text-opacity)); | |
| --tw-drop-shadow: drop-shadow(0 0 7px rgba(168,85,247,0.5)); | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); | |
| } | |
| @media (min-width: 768px){ | |
| .login-button{ | |
| display: inline-block; | |
| } | |
| } | |
| .login-form-container{ | |
| display: grid !important; | |
| grid-template-columns: repeat(1, minmax(0, 1fr)) !important; | |
| place-content: center !important; | |
| } | |
| .login-form-label{ | |
| font-family: cubano, sans-serif !important; | |
| font-size: 1.25rem !important; | |
| line-height: 1.75rem !important; | |
| --tw-text-opacity: 1 !important; | |
| color: rgb(255 255 255 / var(--tw-text-opacity)) !important; | |
| } | |
| .login-form-button{ | |
| font-family: cubano, sans-serif !important; | |
| font-size: 1.25rem !important; | |
| line-height: 1.75rem !important; | |
| --tw-text-opacity: 1 !important; | |
| color: rgb(0 0 0 / var(--tw-text-opacity)) !important; | |
| } | |
| .login-form-input{ | |
| margin: 1rem !important; | |
| border-radius: 0.25rem !important; | |
| border-width: 2px !important; | |
| --tw-border-opacity: 1 !important; | |
| border-color: rgb(74 222 128 / var(--tw-border-opacity)) !important; | |
| --tw-bg-opacity: 1 !important; | |
| background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important; | |
| padding: 0.5rem !important; | |
| text-align: center !important; | |
| font-family: cubano, sans-serif !important; | |
| font-size: 1.5rem !important; | |
| line-height: 2rem !important; | |
| font-weight: 400 !important; | |
| --tw-text-opacity: 1 !important; | |
| color: rgb(74 222 128 / var(--tw-text-opacity)) !important; | |
| --tw-drop-shadow: drop-shadow(0 0 9px rgba(34,197,94,0.9)) !important; | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; | |
| } | |
| /* MessageBoard component styles */ | |
| .message-board-container{ | |
| display: flex; | |
| width: 100%; | |
| flex-direction: column; | |
| place-content: center; | |
| } | |
| .message-board-header-link{ | |
| margin-bottom: 0.25rem; | |
| text-align: center; | |
| font-size: 3rem; | |
| line-height: 1; | |
| } | |
| .message-board-login-message{ | |
| margin: 1.5rem; | |
| display: flex; | |
| place-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| } | |
| /* NavBar component styles */ | |
| .nav-bar{ | |
| margin-left: auto; | |
| margin-right: auto; | |
| display: flex; | |
| width: 100%; | |
| max-width: 1536px; | |
| justify-content: space-between; | |
| padding: 1.5rem; | |
| padding-left: 0.75rem; | |
| padding-right: 0.75rem; | |
| --tw-text-opacity: 1; | |
| color: rgb(248 248 248 / var(--tw-text-opacity)); | |
| } | |
| @media (min-width: 768px){ | |
| .nav-bar{ | |
| padding: 2rem; | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| } | |
| } | |
| .nav-logo-link{ | |
| visibility: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| } | |
| @media (min-width: 768px){ | |
| .nav-logo-link{ | |
| visibility: visible; | |
| } | |
| } | |
| .nav-logo{ | |
| margin-top: 1rem; | |
| width: 0px; | |
| 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; | |
| } | |
| .nav-logo:hover{ | |
| --tw-scale-x: 1.25; | |
| --tw-scale-y: 1.25; | |
| 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)); | |
| --tw-drop-shadow: drop-shadow(0 0 9px rgba(34,197,94,0.9)); | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); | |
| } | |
| @media (min-width: 768px){ | |
| .nav-logo{ | |
| width: 16rem; | |
| } | |
| } | |
| .nav-right-list{ | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .nav-message-board-list-item{ | |
| margin-left: 0.5rem; | |
| margin-right: 0.5rem; | |
| transition-property: transform; | |
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
| transition-duration: 150ms; | |
| } | |
| .nav-message-board-list-item:hover{ | |
| --tw-scale-x: 1.05; | |
| --tw-scale-y: 1.05; | |
| 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)); | |
| } | |
| @media (min-width: 768px){ | |
| .nav-message-board-list-item{ | |
| margin-left: 1rem; | |
| margin-right: 1rem; | |
| } | |
| } | |
| .nav-message-board-link{ | |
| font-family: sofia-pro, sans-serif; | |
| font-size: 1.25rem; | |
| line-height: 1.75rem; | |
| font-weight: 700; | |
| line-height: 1; | |
| --tw-text-opacity: 1; | |
| color: rgb(219 225 232 / var(--tw-text-opacity)); | |
| } | |
| .nav-auth-item{ | |
| position: relative; | |
| margin-left: 0.5rem; | |
| margin-right: 1.5rem; | |
| } | |
| /* Post component styles */ | |
| .post-detail-outer-container{ | |
| display: flex; | |
| flex-direction: column; | |
| place-content: center; | |
| } | |
| .post-detail-inner-container{ | |
| margin-top: 1rem; | |
| margin-bottom: 1rem; | |
| margin-left: 1rem; | |
| display: flex; | |
| flex-grow: 1; | |
| border-radius: 0.25rem; | |
| border-left-width: 2px; | |
| --tw-text-opacity: 1; | |
| color: rgb(255 255 255 / var(--tw-text-opacity)); | |
| } | |
| .post-detail-upvote-container{ | |
| display: flex; | |
| height: 100%; | |
| flex-direction: column; | |
| border-radius: 0.25rem; | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(31 41 55 / var(--tw-bg-opacity)); | |
| padding: 0.5rem; | |
| } | |
| .post-detail-body{ | |
| margin: 0.5rem; | |
| display: grid; | |
| width: 100%; | |
| } | |
| .post-detail-content{ | |
| margin: 1rem; | |
| border-radius: 0.25rem; | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(75 85 99 / var(--tw-bg-opacity)); | |
| padding: 1rem; | |
| font-family: sofia-pro, sans-serif; | |
| } | |
| .post-detail-comment-container{ | |
| margin-top: 1rem; | |
| margin-bottom: 1rem; | |
| margin-left: 1rem; | |
| display: flex; | |
| border-radius: 0.25rem; | |
| border-left-width: 2px; | |
| --tw-text-opacity: 1; | |
| color: rgb(255 255 255 / var(--tw-text-opacity)); | |
| } | |
| .post-detail-comment-inner-container{ | |
| display: flex; | |
| width: 100%; | |
| flex-grow: 1; | |
| } | |
| .post-detail-comment-upvote-container{ | |
| display: flex; | |
| height: 100%; | |
| flex-grow: 0; | |
| flex-direction: column; | |
| border-radius: 0.25rem; | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(31 41 55 / var(--tw-bg-opacity)); | |
| padding: 0.5rem; | |
| } | |
| .post-detail-comment-body{ | |
| margin-top: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| margin-left: 0.5rem; | |
| display: grid; | |
| width: 100%; | |
| grid-template-columns: repeat(1, minmax(0, 1fr)); | |
| } | |
| .post-detail-comment-content{ | |
| margin: 1rem; | |
| border-radius: 0.25rem; | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(75 85 99 / var(--tw-bg-opacity)); | |
| padding: 1rem; | |
| font-family: sofia-pro, sans-serif; | |
| } | |
| .post-detail-create-comment-form{ | |
| margin-left: 1rem; | |
| margin-right: 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| gap: 1rem; | |
| border-radius: 0.25rem; | |
| border-width: 2px; | |
| padding: 1rem; | |
| } | |
| .post-detail-create-comment-form-content{ | |
| border-radius: 0.25rem; | |
| padding: 1rem; | |
| --tw-text-opacity: 1; | |
| color: rgb(31 41 55 / var(--tw-text-opacity)); | |
| } | |
| .post-detail-create-comment-form-submit-button{ | |
| border-radius: 0.25rem; | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(74 222 128 / var(--tw-bg-opacity)); | |
| padding: 0.5rem; | |
| font-family: cubano, sans-serif; | |
| font-size: 1.125rem; | |
| line-height: 1.75rem; | |
| } | |
| .post-detail-create-comment-form-cancel-button{ | |
| border-radius: 0.25rem; | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(156 163 175 / var(--tw-bg-opacity)); | |
| padding: 0.5rem; | |
| font-family: cubano, sans-serif; | |
| font-size: 1.125rem; | |
| line-height: 1.75rem; | |
| } | |
| /* UserMenu component styles */ | |
| .user-menu-logout-button{ | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(255 255 255 / var(--tw-bg-opacity)); | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| padding-top: 0.5rem; | |
| padding-bottom: 0.5rem; | |
| font-family: cubano, sans-serif; | |
| font-size: 1.25rem; | |
| line-height: 1.75rem; | |
| --tw-text-opacity: 1; | |
| color: rgb(0 0 0 / var(--tw-text-opacity)); | |
| --tw-drop-shadow: drop-shadow(6px 6px 0 black); | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); | |
| transition-property: all; | |
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
| transition-duration: 300ms; | |
| } | |
| .user-menu-logout-button:hover{ | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(147 51 234 / var(--tw-bg-opacity)); | |
| --tw-text-opacity: 1; | |
| color: rgb(255 255 255 / var(--tw-text-opacity)); | |
| --tw-drop-shadow: drop-shadow(0 0 7px rgba(168,85,247,0.5)); | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); | |
| } | |
| @media (min-width: 768px){ | |
| .user-menu-logout-button{ | |
| display: inline-block; | |
| } | |
| } | |
| /* Welcome component styles */ | |
| .welcome-header{ | |
| margin: 1rem; | |
| text-align: center; | |
| font-size: 1.875rem; | |
| line-height: 2.25rem; | |
| --tw-text-opacity: 1; | |
| color: rgb(74 222 128 / var(--tw-text-opacity)); | |
| --tw-drop-shadow: drop-shadow(0 0 9px rgba(34,197,94,0.9)); | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); | |
| } | |
| .welcome-name-form{ | |
| display: grid; | |
| grid-template-columns: repeat(1, minmax(0, 1fr)); | |
| place-items: center; | |
| } | |
| .welcome-name-input{ | |
| margin: 1rem; | |
| border-radius: 0.25rem; | |
| border-width: 2px; | |
| --tw-border-opacity: 1; | |
| border-color: rgb(74 222 128 / var(--tw-border-opacity)); | |
| padding: 0.5rem; | |
| text-align: center; | |
| font-family: cubano, sans-serif; | |
| font-size: 1.875rem; | |
| line-height: 2.25rem; | |
| --tw-text-opacity: 1; | |
| color: rgb(74 222 128 / var(--tw-text-opacity)); | |
| --tw-drop-shadow: drop-shadow(0 0 9px rgba(34,197,94,0.9)); | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); | |
| } | |
| .welcome-form-error-message{ | |
| text-align: center; | |
| --tw-text-opacity: 1; | |
| color: rgb(248 113 113 / var(--tw-text-opacity)); | |
| } | |
| .welcome-form-submit-button{ | |
| margin: 0.5rem; | |
| margin-bottom: 2rem; | |
| border-radius: 0.25rem; | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(74 222 128 / var(--tw-bg-opacity)); | |
| padding: 0.5rem; | |
| text-align: center; | |
| font-family: cubano, sans-serif; | |
| font-size: 1.5rem; | |
| line-height: 2rem; | |
| } | |
| .hover\:scale-105:hover{ | |
| --tw-scale-x: 1.05 !important; | |
| --tw-scale-y: 1.05 !important; | |
| 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)) !important; | |
| } | |
| .hover\:border-purple-500:hover{ | |
| --tw-border-opacity: 1 !important; | |
| border-color: rgb(168 85 247 / var(--tw-border-opacity)) !important; | |
| } | |
| .hover\:bg-purple-600:hover{ | |
| --tw-bg-opacity: 1 !important; | |
| background-color: rgb(147 51 234 / var(--tw-bg-opacity)) !important; | |
| } | |
| .hover\:bg-opacity-20:hover{ | |
| --tw-bg-opacity: 0.2 !important; | |
| } | |
| .hover\:text-white:hover{ | |
| --tw-text-opacity: 1 !important; | |
| color: rgb(255 255 255 / var(--tw-text-opacity)) !important; | |
| } | |
| .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) !important; | |
| --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important; | |
| box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; | |
| } | |
| .hover\:drop-shadow-\[0_0_9px_rgba\(34\2c 197\2c 94\2c 0\.9\)\]:hover{ | |
| --tw-drop-shadow: drop-shadow(0 0 9px rgba(34,197,94,0.9)) !important; | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; | |
| } | |
| .hover\:drop-shadow-\[0_0_7px_rgba\(168\2c 85\2c 247\2c 0\.5\)\]:hover{ | |
| --tw-drop-shadow: drop-shadow(0 0 7px rgba(168,85,247,0.5)) !important; | |
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; | |
| } | |
| .focus\:outline-none:focus{ | |
| outline: 2px solid transparent !important; | |
| outline-offset: 2px !important; | |
| } | |
| .active\:bg-pink-600:active{ | |
| --tw-bg-opacity: 1 !important; | |
| background-color: rgb(219 39 119 / var(--tw-bg-opacity)) !important; | |
| } | |
| .group:hover .group-hover\:opacity-100{ | |
| opacity: 1 !important; | |
| } | |
| @media (min-width: 768px){ | |
| .md\:mx-4{ | |
| margin-left: 1rem !important; | |
| margin-right: 1rem !important; | |
| } | |
| .md\:inline-block{ | |
| display: inline-block !important; | |
| } | |
| .md\:flex{ | |
| display: flex !important; | |
| } | |
| .md\:hidden{ | |
| display: none !important; | |
| } | |
| .md\:p-8{ | |
| padding: 2rem !important; | |
| } | |
| .md\:px-8{ | |
| padding-left: 2rem !important; | |
| padding-right: 2rem !important; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment