diff options
| author | Mitja Felicijan <mitja.felicijan@gmail.com> | 2022-11-03 21:36:58 +0100 |
|---|---|---|
| committer | Mitja Felicijan <mitja.felicijan@gmail.com> | 2022-11-03 21:36:58 +0100 |
| commit | f718ba2411b7caa18872724d5d3edb95e844337d (patch) | |
| tree | 99a68c133c136944d979e9bb7f78ef2df5584e98 /static/general | |
| parent | 45b7443aa8f5da1585868213728687364e99831a (diff) | |
| download | mitjafelicijan.com-f718ba2411b7caa18872724d5d3edb95e844337d.tar.gz | |
Unify some of the styles
Diffstat (limited to 'static/general')
| -rw-r--r-- | static/general/index.css | 1198 |
1 files changed, 1 insertions, 1197 deletions
diff --git a/static/general/index.css b/static/general/index.css index 9c47e94..dea9213 100644 --- a/static/general/index.css +++ b/static/general/index.css | |||
| @@ -1,1197 +1 @@ | |||
| 1 | /* | /*! tailwindcss v3.2.1 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--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:#3b82f680;--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:#3b82f680;--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: }.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-6{margin-bottom:1.5rem}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-5{margin-bottom:1.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.ml-6{margin-left:1.5rem}.block{display:block}.flex{display:flex}.hidden{display:none}.h-full{height:100%}.w-full{width:100%}.flex-grow{flex-grow:1}.list-disc{list-style-type:disc}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-1{gap:.25rem}.rounded{border-radius:.25rem}.border-2{border-width:2px}.border-0{border-width:0}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.bg-orange-600{--tw-bg-opacity:1;background-color:rgb(234 88 12/var(--tw-bg-opacity))}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.pb-12{padding-bottom:3rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-extrabold{font-weight:800}.leading-tight{line-height:1.25}.leading-relaxed{line-height:1.625}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.container-blog{max-width:700px}::selection{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}::-moz-selection{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}article.single h2{margin-bottom:1rem;margin-top:2rem;font-size:1.5rem;line-height:2rem;font-weight:700}article.single h3{font-size:1.25rem}article.single h3,article.single h4{margin-bottom:1rem;margin-top:2rem;line-height:1.75rem;font-weight:700}article.single h4{font-size:1.125rem}article.single p{margin-bottom:1.25rem}article.single a{text-decoration-line:underline}article.single a:hover{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity))}article.single blockquote{background-image:url(/general/alert-light.svg);background-size:30px 30px;background-repeat:no-repeat;background-position:0 5px;margin-top:2rem;margin-bottom:2rem;padding-left:3rem}article.single img{margin-top:2rem;margin-bottom:2rem}article.single img,article.single video{width:100%;border-radius:.25rem;--tw-bg-opacity:1!important;background-color:rgb(249 250 251/var(--tw-bg-opacity))!important}article.single audio{margin-bottom:1.5rem;width:100%}article.single code{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity));padding:.25rem .5rem;font-weight:500}article.single code,article.single pre{border-radius:.25rem;font-size:.75rem;line-height:1rem}article.single pre{margin-bottom:1.5rem;overflow-x:auto;--tw-bg-opacity:1!important;background-color:rgb(249 250 251/var(--tw-bg-opacity))!important;padding:1rem}article.single pre code{background:unset;padding:unset;line-height:1.625}article.single table{margin-bottom:1rem;width:100%;border-collapse:collapse;border-width:1px;--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}article.single table td,article.single table th,article.single table tr{border-width:1px;padding:.5rem 1rem;text-align:left}article.single ul{margin-bottom:1.5rem;list-style-type:disc;padding-left:1.5rem}@media (min-width:768px){article.single ul{padding-left:2.5rem}}article.single ol{list-style-type:decimal;padding-left:2rem}@media (min-width:768px){article.single ol{padding-left:2.5rem}}article.single .katex-display{margin-top:2.5rem;margin-bottom:2.5rem}article.single .ll-iframe{border-radius:.25rem;--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}article.single .ll-iframe:before{display:flex;height:100%}@keyframes pulse{50%{opacity:.5}}article.single .ll-iframe:before{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;border-width:2px;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity));font-size:.875rem;line-height:1.25rem;font-weight:500;content:"Click here to load resource…"}article.single .ll-iframe.empty:before{content:none}.comments img{max-width:auto!important;max-width:unset!important;max-width:inherit!important}.cactus-container .cactus-editor-textarea{height:8rem}.cactus-container .cactus-editor-name input,.cactus-container .cactus-editor-textarea{margin-bottom:.5rem;width:100%;border-radius:.25rem;border-width:1px;padding:.5rem .75rem;outline:2px solid #0000;outline-offset:2px}.cactus-container .cactus-editor-name{margin-bottom:.25rem}.cactus-editor-buttons{display:flex;gap:.5rem}.cactus-container .cactus-button{border-radius:.25rem;--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity));padding:.5rem 1.5rem;font-size:1rem;line-height:1.5rem;font-weight:500}.cactus-container .cactus-button:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.cactus-container .cactus-editor{margin-bottom:2.5rem}.cactus-container .cactus-comments-list{display:flex;flex-direction:column;gap:2rem}.cactus-container .cactus-comment{display:flex;gap:1rem}.cactus-container .cactus-comment .cactus-comment-avatar img{height:2rem;width:2rem;border-radius:9999px}.cactus-container .cactus-comment .cactus-comment-avatar-placeholder{height:2rem;width:2rem;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.cactus-container .cactus-comment .cactus-comment-header{display:flex;align-items:center;gap:.5rem}.cactus-container .cactus-comment .cactus-comment-header .cactus-comment-displayname{font-weight:600}.cactus-container .cactus-comment .cactus-comment-header .cactus-comment-time{font-size:.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.cactus-container .cactus-comment .cactus-message-text code{border-radius:.25rem;--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500}.cactus-container .cactus-comment .cactus-message-text ul{list-style-type:disc;padding-left:.5rem}@media (min-width:768px){.cactus-container .cactus-comment .cactus-message-text ul{padding-left:1.5rem}}.cactus-container .cactus-comment .cactus-message-text ol{list-style-type:decimal;padding-left:.5rem}@media (min-width:768px){.cactus-container .cactus-comment .cactus-message-text ol{padding-left:1.5rem}}.cactus-container .cactus-login-form-wrapper{position:relative;margin-bottom:1.5rem;border-radius:.25rem;border-width:1px;padding:.75rem}.cactus-container .cactus-login-form .cactus-login-close{position:absolute;right:.75rem;top:.75rem;height:1rem;width:1rem}.cactus-container .cactus-login-form .cactus-login-title{margin-bottom:1rem;margin-top:0;padding-top:0;font-weight:700}.cactus-container .cactus-login-form .cactus-login-client{margin-bottom:1.5rem}.cactus-container .cactus-login-form .cactus-login-client-title{margin-bottom:.5rem;font-weight:600}.cactus-container .cactus-login-form .cactus-login-credentials-title{margin-bottom:.25rem;font-weight:600}.cactus-container .cactus-login-form .cactus-login-field{margin-bottom:.5rem;display:flex;align-items:center;gap:1rem}.cactus-container .cactus-login-form .cactus-login-label{width:5rem}.cactus-container .cactus-login-form input{border-radius:.25rem;border-width:1px;padding:.25rem .5rem}.hover\:bg-yellow-100:hover{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity))}.hover\:text-gray-800:hover{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}@media (min-width:768px){.md\:mb-0{margin-bottom:0}.md\:block{display:block}.md\:flex-row{flex-direction:row}.md\:p-0{padding:0}} \ No newline at end of file | |
| 2 | ! tailwindcss v3.2.1 | MIT License | https://tailwindcss.com | ||
| 3 | */ | ||
| 4 | |||
| 5 | /* | ||
| 6 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) | ||
| 7 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) | ||
| 8 | */ | ||
| 9 | |||
| 10 | *, | ||
| 11 | ::before, | ||
| 12 | ::after { | ||
| 13 | box-sizing: border-box; | ||
| 14 | /* 1 */ | ||
| 15 | border-width: 0; | ||
| 16 | /* 2 */ | ||
| 17 | border-style: solid; | ||
| 18 | /* 2 */ | ||
| 19 | border-color: #e5e7eb; | ||
| 20 | /* 2 */ | ||
| 21 | } | ||
| 22 | |||
| 23 | ::before, | ||
| 24 | ::after { | ||
| 25 | --tw-content: ''; | ||
| 26 | } | ||
| 27 | |||
| 28 | /* | ||
| 29 | 1. Use a consistent sensible line-height in all browsers. | ||
| 30 | 2. Prevent adjustments of font size after orientation changes in iOS. | ||
| 31 | 3. Use a more readable tab size. | ||
| 32 | 4. Use the user's configured `sans` font-family by default. | ||
| 33 | */ | ||
| 34 | |||
| 35 | html { | ||
| 36 | line-height: 1.5; | ||
| 37 | /* 1 */ | ||
| 38 | -webkit-text-size-adjust: 100%; | ||
| 39 | /* 2 */ | ||
| 40 | -moz-tab-size: 4; | ||
| 41 | /* 3 */ | ||
| 42 | -o-tab-size: 4; | ||
| 43 | tab-size: 4; | ||
| 44 | /* 3 */ | ||
| 45 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | ||
| 46 | /* 4 */ | ||
| 47 | } | ||
| 48 | |||
| 49 | /* | ||
| 50 | 1. Remove the margin in all browsers. | ||
| 51 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. | ||
| 52 | */ | ||
| 53 | |||
| 54 | body { | ||
| 55 | margin: 0; | ||
| 56 | /* 1 */ | ||
| 57 | line-height: inherit; | ||
| 58 | /* 2 */ | ||
| 59 | } | ||
| 60 | |||
| 61 | /* | ||
| 62 | 1. Add the correct height in Firefox. | ||
| 63 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) | ||
| 64 | 3. Ensure horizontal rules are visible by default. | ||
| 65 | */ | ||
| 66 | |||
| 67 | hr { | ||
| 68 | height: 0; | ||
| 69 | /* 1 */ | ||
| 70 | color: inherit; | ||
| 71 | /* 2 */ | ||
| 72 | border-top-width: 1px; | ||
| 73 | /* 3 */ | ||
| 74 | } | ||
| 75 | |||
| 76 | /* | ||
| 77 | Add the correct text decoration in Chrome, Edge, and Safari. | ||
| 78 | */ | ||
| 79 | |||
| 80 | abbr:where([title]) { | ||
| 81 | -webkit-text-decoration: underline dotted; | ||
| 82 | text-decoration: underline dotted; | ||
| 83 | } | ||
| 84 | |||
| 85 | /* | ||
| 86 | Remove the default font size and weight for headings. | ||
| 87 | */ | ||
| 88 | |||
| 89 | h1, | ||
| 90 | h2, | ||
| 91 | h3, | ||
| 92 | h4, | ||
| 93 | h5, | ||
| 94 | h6 { | ||
| 95 | font-size: inherit; | ||
| 96 | font-weight: inherit; | ||
| 97 | } | ||
| 98 | |||
| 99 | /* | ||
| 100 | Reset links to optimize for opt-in styling instead of opt-out. | ||
| 101 | */ | ||
| 102 | |||
| 103 | a { | ||
| 104 | color: inherit; | ||
| 105 | text-decoration: inherit; | ||
| 106 | } | ||
| 107 | |||
| 108 | /* | ||
| 109 | Add the correct font weight in Edge and Safari. | ||
| 110 | */ | ||
| 111 | |||
| 112 | b, | ||
| 113 | strong { | ||
| 114 | font-weight: bolder; | ||
| 115 | } | ||
| 116 | |||
| 117 | /* | ||
| 118 | 1. Use the user's configured `mono` font family by default. | ||
| 119 | 2. Correct the odd `em` font sizing in all browsers. | ||
| 120 | */ | ||
| 121 | |||
| 122 | code, | ||
| 123 | kbd, | ||
| 124 | samp, | ||
| 125 | pre { | ||
| 126 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | ||
| 127 | /* 1 */ | ||
| 128 | font-size: 1em; | ||
| 129 | /* 2 */ | ||
| 130 | } | ||
| 131 | |||
| 132 | /* | ||
| 133 | Add the correct font size in all browsers. | ||
| 134 | */ | ||
| 135 | |||
| 136 | small { | ||
| 137 | font-size: 80%; | ||
| 138 | } | ||
| 139 | |||
| 140 | /* | ||
| 141 | Prevent `sub` and `sup` elements from affecting the line height in all browsers. | ||
| 142 | */ | ||
| 143 | |||
| 144 | sub, | ||
| 145 | sup { | ||
| 146 | font-size: 75%; | ||
| 147 | line-height: 0; | ||
| 148 | position: relative; | ||
| 149 | vertical-align: baseline; | ||
| 150 | } | ||
| 151 | |||
| 152 | sub { | ||
| 153 | bottom: -0.25em; | ||
| 154 | } | ||
| 155 | |||
| 156 | sup { | ||
| 157 | top: -0.5em; | ||
| 158 | } | ||
| 159 | |||
| 160 | /* | ||
| 161 | 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) | ||
| 162 | 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) | ||
| 163 | 3. Remove gaps between table borders by default. | ||
| 164 | */ | ||
| 165 | |||
| 166 | table { | ||
| 167 | text-indent: 0; | ||
| 168 | /* 1 */ | ||
| 169 | border-color: inherit; | ||
| 170 | /* 2 */ | ||
| 171 | border-collapse: collapse; | ||
| 172 | /* 3 */ | ||
| 173 | } | ||
| 174 | |||
| 175 | /* | ||
| 176 | 1. Change the font styles in all browsers. | ||
| 177 | 2. Remove the margin in Firefox and Safari. | ||
| 178 | 3. Remove default padding in all browsers. | ||
| 179 | */ | ||
| 180 | |||
| 181 | button, | ||
| 182 | input, | ||
| 183 | optgroup, | ||
| 184 | select, | ||
| 185 | textarea { | ||
| 186 | font-family: inherit; | ||
| 187 | /* 1 */ | ||
| 188 | font-size: 100%; | ||
| 189 | /* 1 */ | ||
| 190 | font-weight: inherit; | ||
| 191 | /* 1 */ | ||
| 192 | line-height: inherit; | ||
| 193 | /* 1 */ | ||
| 194 | color: inherit; | ||
| 195 | /* 1 */ | ||
| 196 | margin: 0; | ||
| 197 | /* 2 */ | ||
| 198 | padding: 0; | ||
| 199 | /* 3 */ | ||
| 200 | } | ||
| 201 | |||
| 202 | /* | ||
| 203 | Remove the inheritance of text transform in Edge and Firefox. | ||
| 204 | */ | ||
| 205 | |||
| 206 | button, | ||
| 207 | select { | ||
| 208 | text-transform: none; | ||
| 209 | } | ||
| 210 | |||
| 211 | /* | ||
| 212 | 1. Correct the inability to style clickable types in iOS and Safari. | ||
| 213 | 2. Remove default button styles. | ||
| 214 | */ | ||
| 215 | |||
| 216 | button, | ||
| 217 | [type='button'], | ||
| 218 | [type='reset'], | ||
| 219 | [type='submit'] { | ||
| 220 | -webkit-appearance: button; | ||
| 221 | /* 1 */ | ||
| 222 | background-color: transparent; | ||
| 223 | /* 2 */ | ||
| 224 | background-image: none; | ||
| 225 | /* 2 */ | ||
| 226 | } | ||
| 227 | |||
| 228 | /* | ||
| 229 | Use the modern Firefox focus style for all focusable elements. | ||
| 230 | */ | ||
| 231 | |||
| 232 | :-moz-focusring { | ||
| 233 | outline: auto; | ||
| 234 | } | ||
| 235 | |||
| 236 | /* | ||
| 237 | Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) | ||
| 238 | */ | ||
| 239 | |||
| 240 | :-moz-ui-invalid { | ||
| 241 | box-shadow: none; | ||
| 242 | } | ||
| 243 | |||
| 244 | /* | ||
| 245 | Add the correct vertical alignment in Chrome and Firefox. | ||
| 246 | */ | ||
| 247 | |||
| 248 | progress { | ||
| 249 | vertical-align: baseline; | ||
| 250 | } | ||
| 251 | |||
| 252 | /* | ||
| 253 | Correct the cursor style of increment and decrement buttons in Safari. | ||
| 254 | */ | ||
| 255 | |||
| 256 | ::-webkit-inner-spin-button, | ||
| 257 | ::-webkit-outer-spin-button { | ||
| 258 | height: auto; | ||
| 259 | } | ||
| 260 | |||
| 261 | /* | ||
| 262 | 1. Correct the odd appearance in Chrome and Safari. | ||
| 263 | 2. Correct the outline style in Safari. | ||
| 264 | */ | ||
| 265 | |||
| 266 | [type='search'] { | ||
| 267 | -webkit-appearance: textfield; | ||
| 268 | /* 1 */ | ||
| 269 | outline-offset: -2px; | ||
| 270 | /* 2 */ | ||
| 271 | } | ||
| 272 | |||
| 273 | /* | ||
| 274 | Remove the inner padding in Chrome and Safari on macOS. | ||
| 275 | */ | ||
| 276 | |||
| 277 | ::-webkit-search-decoration { | ||
| 278 | -webkit-appearance: none; | ||
| 279 | } | ||
| 280 | |||
| 281 | /* | ||
| 282 | 1. Correct the inability to style clickable types in iOS and Safari. | ||
| 283 | 2. Change font properties to `inherit` in Safari. | ||
| 284 | */ | ||
| 285 | |||
| 286 | ::-webkit-file-upload-button { | ||
| 287 | -webkit-appearance: button; | ||
| 288 | /* 1 */ | ||
| 289 | font: inherit; | ||
| 290 | /* 2 */ | ||
| 291 | } | ||
| 292 | |||
| 293 | /* | ||
| 294 | Add the correct display in Chrome and Safari. | ||
| 295 | */ | ||
| 296 | |||
| 297 | summary { | ||
| 298 | display: list-item; | ||
| 299 | } | ||
| 300 | |||
| 301 | /* | ||
| 302 | Removes the default spacing and border for appropriate elements. | ||
| 303 | */ | ||
| 304 | |||
| 305 | blockquote, | ||
| 306 | dl, | ||
| 307 | dd, | ||
| 308 | h1, | ||
| 309 | h2, | ||
| 310 | h3, | ||
| 311 | h4, | ||
| 312 | h5, | ||
| 313 | h6, | ||
| 314 | hr, | ||
| 315 | figure, | ||
| 316 | p, | ||
| 317 | pre { | ||
| 318 | margin: 0; | ||
| 319 | } | ||
| 320 | |||
| 321 | fieldset { | ||
| 322 | margin: 0; | ||
| 323 | padding: 0; | ||
| 324 | } | ||
| 325 | |||
| 326 | legend { | ||
| 327 | padding: 0; | ||
| 328 | } | ||
| 329 | |||
| 330 | ol, | ||
| 331 | ul, | ||
| 332 | menu { | ||
| 333 | list-style: none; | ||
| 334 | margin: 0; | ||
| 335 | padding: 0; | ||
| 336 | } | ||
| 337 | |||
| 338 | /* | ||
| 339 | Prevent resizing textareas horizontally by default. | ||
| 340 | */ | ||
| 341 | |||
| 342 | textarea { | ||
| 343 | resize: vertical; | ||
| 344 | } | ||
| 345 | |||
| 346 | /* | ||
| 347 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) | ||
| 348 | 2. Set the default placeholder color to the user's configured gray 400 color. | ||
| 349 | */ | ||
| 350 | |||
| 351 | input::-moz-placeholder, textarea::-moz-placeholder { | ||
| 352 | opacity: 1; | ||
| 353 | /* 1 */ | ||
| 354 | color: #9ca3af; | ||
| 355 | /* 2 */ | ||
| 356 | } | ||
| 357 | |||
| 358 | input::placeholder, | ||
| 359 | textarea::placeholder { | ||
| 360 | opacity: 1; | ||
| 361 | /* 1 */ | ||
| 362 | color: #9ca3af; | ||
| 363 | /* 2 */ | ||
| 364 | } | ||
| 365 | |||
| 366 | /* | ||
| 367 | Set the default cursor for buttons. | ||
| 368 | */ | ||
| 369 | |||
| 370 | button, | ||
| 371 | [role="button"] { | ||
| 372 | cursor: pointer; | ||
| 373 | } | ||
| 374 | |||
| 375 | /* | ||
| 376 | Make sure disabled buttons don't get the pointer cursor. | ||
| 377 | */ | ||
| 378 | |||
| 379 | :disabled { | ||
| 380 | cursor: default; | ||
| 381 | } | ||
| 382 | |||
| 383 | /* | ||
| 384 | 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) | ||
| 385 | 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) | ||
| 386 | This can trigger a poorly considered lint error in some tools but is included by design. | ||
| 387 | */ | ||
| 388 | |||
| 389 | img, | ||
| 390 | svg, | ||
| 391 | video, | ||
| 392 | canvas, | ||
| 393 | audio, | ||
| 394 | iframe, | ||
| 395 | embed, | ||
| 396 | object { | ||
| 397 | display: block; | ||
| 398 | /* 1 */ | ||
| 399 | vertical-align: middle; | ||
| 400 | /* 2 */ | ||
| 401 | } | ||
| 402 | |||
| 403 | /* | ||
| 404 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) | ||
| 405 | */ | ||
| 406 | |||
| 407 | img, | ||
| 408 | video { | ||
| 409 | max-width: 100%; | ||
| 410 | height: auto; | ||
| 411 | } | ||
| 412 | |||
| 413 | /* Make elements with the HTML hidden attribute stay hidden by default */ | ||
| 414 | |||
| 415 | [hidden] { | ||
| 416 | display: none; | ||
| 417 | } | ||
| 418 | |||
| 419 | *, ::before, ::after { | ||
| 420 | --tw-border-spacing-x: 0; | ||
| 421 | --tw-border-spacing-y: 0; | ||
| 422 | --tw-translate-x: 0; | ||
| 423 | --tw-translate-y: 0; | ||
| 424 | --tw-rotate: 0; | ||
| 425 | --tw-skew-x: 0; | ||
| 426 | --tw-skew-y: 0; | ||
| 427 | --tw-scale-x: 1; | ||
| 428 | --tw-scale-y: 1; | ||
| 429 | --tw-pan-x: ; | ||
| 430 | --tw-pan-y: ; | ||
| 431 | --tw-pinch-zoom: ; | ||
| 432 | --tw-scroll-snap-strictness: proximity; | ||
| 433 | --tw-ordinal: ; | ||
| 434 | --tw-slashed-zero: ; | ||
| 435 | --tw-numeric-figure: ; | ||
| 436 | --tw-numeric-spacing: ; | ||
| 437 | --tw-numeric-fraction: ; | ||
| 438 | --tw-ring-inset: ; | ||
| 439 | --tw-ring-offset-width: 0px; | ||
| 440 | --tw-ring-offset-color: #fff; | ||
| 441 | --tw-ring-color: rgb(59 130 246 / 0.5); | ||
| 442 | --tw-ring-offset-shadow: 0 0 #0000; | ||
| 443 | --tw-ring-shadow: 0 0 #0000; | ||
| 444 | --tw-shadow: 0 0 #0000; | ||
| 445 | --tw-shadow-colored: 0 0 #0000; | ||
| 446 | --tw-blur: ; | ||
| 447 | --tw-brightness: ; | ||
| 448 | --tw-contrast: ; | ||
| 449 | --tw-grayscale: ; | ||
| 450 | --tw-hue-rotate: ; | ||
| 451 | --tw-invert: ; | ||
| 452 | --tw-saturate: ; | ||
| 453 | --tw-sepia: ; | ||
| 454 | --tw-drop-shadow: ; | ||
| 455 | --tw-backdrop-blur: ; | ||
| 456 | --tw-backdrop-brightness: ; | ||
| 457 | --tw-backdrop-contrast: ; | ||
| 458 | --tw-backdrop-grayscale: ; | ||
| 459 | --tw-backdrop-hue-rotate: ; | ||
| 460 | --tw-backdrop-invert: ; | ||
| 461 | --tw-backdrop-opacity: ; | ||
| 462 | --tw-backdrop-saturate: ; | ||
| 463 | --tw-backdrop-sepia: ; | ||
| 464 | } | ||
| 465 | |||
| 466 | ::backdrop { | ||
| 467 | --tw-border-spacing-x: 0; | ||
| 468 | --tw-border-spacing-y: 0; | ||
| 469 | --tw-translate-x: 0; | ||
| 470 | --tw-translate-y: 0; | ||
| 471 | --tw-rotate: 0; | ||
| 472 | --tw-skew-x: 0; | ||
| 473 | --tw-skew-y: 0; | ||
| 474 | --tw-scale-x: 1; | ||
| 475 | --tw-scale-y: 1; | ||
| 476 | --tw-pan-x: ; | ||
| 477 | --tw-pan-y: ; | ||
| 478 | --tw-pinch-zoom: ; | ||
| 479 | --tw-scroll-snap-strictness: proximity; | ||
| 480 | --tw-ordinal: ; | ||
| 481 | --tw-slashed-zero: ; | ||
| 482 | --tw-numeric-figure: ; | ||
| 483 | --tw-numeric-spacing: ; | ||
| 484 | --tw-numeric-fraction: ; | ||
| 485 | --tw-ring-inset: ; | ||
| 486 | --tw-ring-offset-width: 0px; | ||
| 487 | --tw-ring-offset-color: #fff; | ||
| 488 | --tw-ring-color: rgb(59 130 246 / 0.5); | ||
| 489 | --tw-ring-offset-shadow: 0 0 #0000; | ||
| 490 | --tw-ring-shadow: 0 0 #0000; | ||
| 491 | --tw-shadow: 0 0 #0000; | ||
| 492 | --tw-shadow-colored: 0 0 #0000; | ||
| 493 | --tw-blur: ; | ||
| 494 | --tw-brightness: ; | ||
| 495 | --tw-contrast: ; | ||
| 496 | --tw-grayscale: ; | ||
| 497 | --tw-hue-rotate: ; | ||
| 498 | --tw-invert: ; | ||
| 499 | --tw-saturate: ; | ||
| 500 | --tw-sepia: ; | ||
| 501 | --tw-drop-shadow: ; | ||
| 502 | --tw-backdrop-blur: ; | ||
| 503 | --tw-backdrop-brightness: ; | ||
| 504 | --tw-backdrop-contrast: ; | ||
| 505 | --tw-backdrop-grayscale: ; | ||
| 506 | --tw-backdrop-hue-rotate: ; | ||
| 507 | --tw-backdrop-invert: ; | ||
| 508 | --tw-backdrop-opacity: ; | ||
| 509 | --tw-backdrop-saturate: ; | ||
| 510 | --tw-backdrop-sepia: ; | ||
| 511 | } | ||
| 512 | |||
| 513 | .mx-auto { | ||
| 514 | margin-left: auto; | ||
| 515 | margin-right: auto; | ||
| 516 | } | ||
| 517 | |||
| 518 | .mb-10 { | ||
| 519 | margin-bottom: 2.5rem; | ||
| 520 | } | ||
| 521 | |||
| 522 | .mb-6 { | ||
| 523 | margin-bottom: 1.5rem; | ||
| 524 | } | ||
| 525 | |||
| 526 | .mb-1 { | ||
| 527 | margin-bottom: 0.25rem; | ||
| 528 | } | ||
| 529 | |||
| 530 | .mb-12 { | ||
| 531 | margin-bottom: 3rem; | ||
| 532 | } | ||
| 533 | |||
| 534 | .mb-5 { | ||
| 535 | margin-bottom: 1.25rem; | ||
| 536 | } | ||
| 537 | |||
| 538 | .mb-2 { | ||
| 539 | margin-bottom: 0.5rem; | ||
| 540 | } | ||
| 541 | |||
| 542 | .mb-4 { | ||
| 543 | margin-bottom: 1rem; | ||
| 544 | } | ||
| 545 | |||
| 546 | .mt-4 { | ||
| 547 | margin-top: 1rem; | ||
| 548 | } | ||
| 549 | |||
| 550 | .ml-6 { | ||
| 551 | margin-left: 1.5rem; | ||
| 552 | } | ||
| 553 | |||
| 554 | .block { | ||
| 555 | display: block; | ||
| 556 | } | ||
| 557 | |||
| 558 | .flex { | ||
| 559 | display: flex; | ||
| 560 | } | ||
| 561 | |||
| 562 | .hidden { | ||
| 563 | display: none; | ||
| 564 | } | ||
| 565 | |||
| 566 | .h-full { | ||
| 567 | height: 100%; | ||
| 568 | } | ||
| 569 | |||
| 570 | .w-full { | ||
| 571 | width: 100%; | ||
| 572 | } | ||
| 573 | |||
| 574 | .flex-grow { | ||
| 575 | flex-grow: 1; | ||
| 576 | } | ||
| 577 | |||
| 578 | .list-disc { | ||
| 579 | list-style-type: disc; | ||
| 580 | } | ||
| 581 | |||
| 582 | .flex-col { | ||
| 583 | flex-direction: column; | ||
| 584 | } | ||
| 585 | |||
| 586 | .items-center { | ||
| 587 | align-items: center; | ||
| 588 | } | ||
| 589 | |||
| 590 | .gap-1 { | ||
| 591 | gap: 0.25rem; | ||
| 592 | } | ||
| 593 | |||
| 594 | .rounded { | ||
| 595 | border-radius: 0.25rem; | ||
| 596 | } | ||
| 597 | |||
| 598 | .border-2 { | ||
| 599 | border-width: 2px; | ||
| 600 | } | ||
| 601 | |||
| 602 | .border-0 { | ||
| 603 | border-width: 0px; | ||
| 604 | } | ||
| 605 | |||
| 606 | .border-gray-100 { | ||
| 607 | --tw-border-opacity: 1; | ||
| 608 | border-color: rgb(243 244 246 / var(--tw-border-opacity)); | ||
| 609 | } | ||
| 610 | |||
| 611 | .bg-orange-600 { | ||
| 612 | --tw-bg-opacity: 1; | ||
| 613 | background-color: rgb(234 88 12 / var(--tw-bg-opacity)); | ||
| 614 | } | ||
| 615 | |||
| 616 | .px-6 { | ||
| 617 | padding-left: 1.5rem; | ||
| 618 | padding-right: 1.5rem; | ||
| 619 | } | ||
| 620 | |||
| 621 | .px-1\.5 { | ||
| 622 | padding-left: 0.375rem; | ||
| 623 | padding-right: 0.375rem; | ||
| 624 | } | ||
| 625 | |||
| 626 | .px-1 { | ||
| 627 | padding-left: 0.25rem; | ||
| 628 | padding-right: 0.25rem; | ||
| 629 | } | ||
| 630 | |||
| 631 | .py-4 { | ||
| 632 | padding-top: 1rem; | ||
| 633 | padding-bottom: 1rem; | ||
| 634 | } | ||
| 635 | |||
| 636 | .px-2 { | ||
| 637 | padding-left: 0.5rem; | ||
| 638 | padding-right: 0.5rem; | ||
| 639 | } | ||
| 640 | |||
| 641 | .pb-12 { | ||
| 642 | padding-bottom: 3rem; | ||
| 643 | } | ||
| 644 | |||
| 645 | .text-2xl { | ||
| 646 | font-size: 1.5rem; | ||
| 647 | line-height: 2rem; | ||
| 648 | } | ||
| 649 | |||
| 650 | .text-sm { | ||
| 651 | font-size: 0.875rem; | ||
| 652 | line-height: 1.25rem; | ||
| 653 | } | ||
| 654 | |||
| 655 | .text-xs { | ||
| 656 | font-size: 0.75rem; | ||
| 657 | line-height: 1rem; | ||
| 658 | } | ||
| 659 | |||
| 660 | .text-4xl { | ||
| 661 | font-size: 2.25rem; | ||
| 662 | line-height: 2.5rem; | ||
| 663 | } | ||
| 664 | |||
| 665 | .text-xl { | ||
| 666 | font-size: 1.25rem; | ||
| 667 | line-height: 1.75rem; | ||
| 668 | } | ||
| 669 | |||
| 670 | .font-bold { | ||
| 671 | font-weight: 700; | ||
| 672 | } | ||
| 673 | |||
| 674 | .font-semibold { | ||
| 675 | font-weight: 600; | ||
| 676 | } | ||
| 677 | |||
| 678 | .font-medium { | ||
| 679 | font-weight: 500; | ||
| 680 | } | ||
| 681 | |||
| 682 | .font-extrabold { | ||
| 683 | font-weight: 800; | ||
| 684 | } | ||
| 685 | |||
| 686 | .leading-tight { | ||
| 687 | line-height: 1.25; | ||
| 688 | } | ||
| 689 | |||
| 690 | .leading-relaxed { | ||
| 691 | line-height: 1.625; | ||
| 692 | } | ||
| 693 | |||
| 694 | .text-gray-600 { | ||
| 695 | --tw-text-opacity: 1; | ||
| 696 | color: rgb(75 85 99 / var(--tw-text-opacity)); | ||
| 697 | } | ||
| 698 | |||
| 699 | .text-gray-400 { | ||
| 700 | --tw-text-opacity: 1; | ||
| 701 | color: rgb(156 163 175 / var(--tw-text-opacity)); | ||
| 702 | } | ||
| 703 | |||
| 704 | .text-white { | ||
| 705 | --tw-text-opacity: 1; | ||
| 706 | color: rgb(255 255 255 / var(--tw-text-opacity)); | ||
| 707 | } | ||
| 708 | |||
| 709 | .underline { | ||
| 710 | text-decoration-line: underline; | ||
| 711 | } | ||
| 712 | |||
| 713 | .no-underline { | ||
| 714 | text-decoration-line: none; | ||
| 715 | } | ||
| 716 | |||
| 717 | /* Container */ | ||
| 718 | |||
| 719 | .container-blog { | ||
| 720 | max-width: 700px; | ||
| 721 | } | ||
| 722 | |||
| 723 | /* User text selection */ | ||
| 724 | |||
| 725 | ::-moz-selection { | ||
| 726 | --tw-bg-opacity: 1; | ||
| 727 | background-color: rgb(254 249 195 / var(--tw-bg-opacity)); | ||
| 728 | --tw-text-opacity: 1; | ||
| 729 | color: rgb(0 0 0 / var(--tw-text-opacity)); | ||
| 730 | } | ||
| 731 | |||
| 732 | ::selection { | ||
| 733 | --tw-bg-opacity: 1; | ||
| 734 | background-color: rgb(254 249 195 / var(--tw-bg-opacity)); | ||
| 735 | --tw-text-opacity: 1; | ||
| 736 | color: rgb(0 0 0 / var(--tw-text-opacity)); | ||
| 737 | } | ||
| 738 | |||
| 739 | ::-moz-selection { | ||
| 740 | --tw-bg-opacity: 1; | ||
| 741 | background-color: rgb(254 249 195 / var(--tw-bg-opacity)); | ||
| 742 | --tw-text-opacity: 1; | ||
| 743 | color: rgb(0 0 0 / var(--tw-text-opacity)); | ||
| 744 | } | ||
| 745 | |||
| 746 | /* Headings */ | ||
| 747 | |||
| 748 | article.single h2 { | ||
| 749 | margin-bottom: 1rem; | ||
| 750 | margin-top: 2rem; | ||
| 751 | font-size: 1.5rem; | ||
| 752 | line-height: 2rem; | ||
| 753 | font-weight: 700; | ||
| 754 | } | ||
| 755 | |||
| 756 | article.single h3 { | ||
| 757 | margin-bottom: 1rem; | ||
| 758 | margin-top: 2rem; | ||
| 759 | font-size: 1.25rem; | ||
| 760 | line-height: 1.75rem; | ||
| 761 | font-weight: 700; | ||
| 762 | } | ||
| 763 | |||
| 764 | article.single h4 { | ||
| 765 | margin-bottom: 1rem; | ||
| 766 | margin-top: 2rem; | ||
| 767 | font-size: 1.125rem; | ||
| 768 | line-height: 1.75rem; | ||
| 769 | font-weight: 700; | ||
| 770 | } | ||
| 771 | |||
| 772 | /* Paragraph */ | ||
| 773 | |||
| 774 | article.single p { | ||
| 775 | margin-bottom: 1.25rem; | ||
| 776 | } | ||
| 777 | |||
| 778 | /* Links */ | ||
| 779 | |||
| 780 | article.single a { | ||
| 781 | text-decoration-line: underline; | ||
| 782 | } | ||
| 783 | |||
| 784 | article.single a:hover { | ||
| 785 | --tw-bg-opacity: 1; | ||
| 786 | background-color: rgb(254 249 195 / var(--tw-bg-opacity)); | ||
| 787 | } | ||
| 788 | |||
| 789 | /* Blockquote */ | ||
| 790 | |||
| 791 | article.single blockquote { | ||
| 792 | background-image: url('/general/alert-light.svg'); | ||
| 793 | background-size: 30px 30px; | ||
| 794 | background-repeat: no-repeat; | ||
| 795 | background-position: 0 5px; | ||
| 796 | margin-top: 2rem; | ||
| 797 | margin-bottom: 2rem; | ||
| 798 | padding-left: 3rem; | ||
| 799 | } | ||
| 800 | |||
| 801 | /* Media: Images, audio, video */ | ||
| 802 | |||
| 803 | article.single img { | ||
| 804 | margin-top: 2rem; | ||
| 805 | margin-bottom: 2rem; | ||
| 806 | width: 100%; | ||
| 807 | border-radius: 0.25rem; | ||
| 808 | --tw-bg-opacity: 1 !important; | ||
| 809 | background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important; | ||
| 810 | } | ||
| 811 | |||
| 812 | article.single video { | ||
| 813 | width: 100%; | ||
| 814 | border-radius: 0.25rem; | ||
| 815 | --tw-bg-opacity: 1 !important; | ||
| 816 | background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important; | ||
| 817 | } | ||
| 818 | |||
| 819 | article.single audio { | ||
| 820 | margin-bottom: 1.5rem; | ||
| 821 | width: 100%; | ||
| 822 | } | ||
| 823 | |||
| 824 | /* Code */ | ||
| 825 | |||
| 826 | article.single code { | ||
| 827 | border-radius: 0.25rem; | ||
| 828 | --tw-bg-opacity: 1; | ||
| 829 | background-color: rgb(254 249 195 / var(--tw-bg-opacity)); | ||
| 830 | padding-left: 0.5rem; | ||
| 831 | padding-right: 0.5rem; | ||
| 832 | padding-top: 0.25rem; | ||
| 833 | padding-bottom: 0.25rem; | ||
| 834 | font-size: 0.75rem; | ||
| 835 | line-height: 1rem; | ||
| 836 | font-weight: 500; | ||
| 837 | } | ||
| 838 | |||
| 839 | article.single pre { | ||
| 840 | margin-bottom: 1.5rem; | ||
| 841 | overflow-x: auto; | ||
| 842 | border-radius: 0.25rem; | ||
| 843 | --tw-bg-opacity: 1 !important; | ||
| 844 | background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important; | ||
| 845 | padding: 1rem; | ||
| 846 | font-size: 0.75rem; | ||
| 847 | line-height: 1rem; | ||
| 848 | } | ||
| 849 | |||
| 850 | article.single pre code { | ||
| 851 | background: unset; | ||
| 852 | padding: unset; | ||
| 853 | line-height: 1.625; | ||
| 854 | } | ||
| 855 | |||
| 856 | /* Tables */ | ||
| 857 | |||
| 858 | article.single table { | ||
| 859 | margin-bottom: 1rem; | ||
| 860 | width: 100%; | ||
| 861 | border-collapse: collapse; | ||
| 862 | border-width: 1px; | ||
| 863 | --tw-border-opacity: 1; | ||
| 864 | border-color: rgb(0 0 0 / var(--tw-border-opacity)); | ||
| 865 | } | ||
| 866 | |||
| 867 | article.single table tr, | ||
| 868 | article.single table td, | ||
| 869 | article.single table th { | ||
| 870 | border-width: 1px; | ||
| 871 | padding-left: 1rem; | ||
| 872 | padding-right: 1rem; | ||
| 873 | padding-top: 0.5rem; | ||
| 874 | padding-bottom: 0.5rem; | ||
| 875 | text-align: left; | ||
| 876 | } | ||
| 877 | |||
| 878 | /* Unordered list */ | ||
| 879 | |||
| 880 | article.single ul { | ||
| 881 | margin-bottom: 1.5rem; | ||
| 882 | list-style-type: disc; | ||
| 883 | padding-left: 1.5rem; | ||
| 884 | } | ||
| 885 | |||
| 886 | @media (min-width: 768px) { | ||
| 887 | article.single ul { | ||
| 888 | padding-left: 2.5rem; | ||
| 889 | } | ||
| 890 | } | ||
| 891 | |||
| 892 | /* Ordered list */ | ||
| 893 | |||
| 894 | article.single ol { | ||
| 895 | list-style-type: decimal; | ||
| 896 | padding-left: 2rem; | ||
| 897 | } | ||
| 898 | |||
| 899 | @media (min-width: 768px) { | ||
| 900 | article.single ol { | ||
| 901 | padding-left: 2.5rem; | ||
| 902 | } | ||
| 903 | } | ||
| 904 | |||
| 905 | /* Katex */ | ||
| 906 | |||
| 907 | article.single .katex-display { | ||
| 908 | margin-top: 2.5rem; | ||
| 909 | margin-bottom: 2.5rem; | ||
| 910 | } | ||
| 911 | |||
| 912 | /* Lazy loading of iframes */ | ||
| 913 | |||
| 914 | article.single .ll-iframe { | ||
| 915 | border-radius: 0.25rem; | ||
| 916 | --tw-bg-opacity: 1; | ||
| 917 | background-color: rgb(243 244 246 / var(--tw-bg-opacity)); | ||
| 918 | } | ||
| 919 | |||
| 920 | article.single .ll-iframe::before { | ||
| 921 | display: flex; | ||
| 922 | height: 100%; | ||
| 923 | } | ||
| 924 | |||
| 925 | @keyframes pulse { | ||
| 926 | 50% { | ||
| 927 | opacity: .5; | ||
| 928 | } | ||
| 929 | } | ||
| 930 | |||
| 931 | article.single .ll-iframe::before { | ||
| 932 | animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | ||
| 933 | cursor: pointer; | ||
| 934 | align-items: center; | ||
| 935 | justify-content: center; | ||
| 936 | border-radius: 0.25rem; | ||
| 937 | border-width: 2px; | ||
| 938 | --tw-border-opacity: 1; | ||
| 939 | border-color: rgb(209 213 219 / var(--tw-border-opacity)); | ||
| 940 | font-size: 0.875rem; | ||
| 941 | line-height: 1.25rem; | ||
| 942 | font-weight: 500; | ||
| 943 | content: 'Click here to load resource…'; | ||
| 944 | } | ||
| 945 | |||
| 946 | article.single .ll-iframe.empty::before { | ||
| 947 | content: none; | ||
| 948 | } | ||
| 949 | |||
| 950 | /* Cactus Comments */ | ||
| 951 | |||
| 952 | .comments img { | ||
| 953 | max-width: auto !important; | ||
| 954 | max-width: unset !important; | ||
| 955 | max-width: inherit !important; | ||
| 956 | } | ||
| 957 | |||
| 958 | .cactus-container .cactus-editor-textarea { | ||
| 959 | margin-bottom: 0.5rem; | ||
| 960 | height: 8rem; | ||
| 961 | width: 100%; | ||
| 962 | border-radius: 0.25rem; | ||
| 963 | border-width: 1px; | ||
| 964 | padding-left: 0.75rem; | ||
| 965 | padding-right: 0.75rem; | ||
| 966 | padding-top: 0.5rem; | ||
| 967 | padding-bottom: 0.5rem; | ||
| 968 | outline: 2px solid transparent; | ||
| 969 | outline-offset: 2px; | ||
| 970 | } | ||
| 971 | |||
| 972 | .cactus-container .cactus-editor-name input { | ||
| 973 | margin-bottom: 0.5rem; | ||
| 974 | width: 100%; | ||
| 975 | border-radius: 0.25rem; | ||
| 976 | border-width: 1px; | ||
| 977 | padding-left: 0.75rem; | ||
| 978 | padding-right: 0.75rem; | ||
| 979 | padding-top: 0.5rem; | ||
| 980 | padding-bottom: 0.5rem; | ||
| 981 | outline: 2px solid transparent; | ||
| 982 | outline-offset: 2px; | ||
| 983 | } | ||
| 984 | |||
| 985 | .cactus-container .cactus-editor-name { | ||
| 986 | margin-bottom: 0.25rem; | ||
| 987 | } | ||
| 988 | |||
| 989 | /* Cactus: Buttons */ | ||
| 990 | |||
| 991 | .cactus-editor-buttons { | ||
| 992 | display: flex; | ||
| 993 | gap: 0.5rem; | ||
| 994 | } | ||
| 995 | |||
| 996 | .cactus-container .cactus-button { | ||
| 997 | border-radius: 0.25rem; | ||
| 998 | --tw-bg-opacity: 1; | ||
| 999 | background-color: rgb(229 231 235 / var(--tw-bg-opacity)); | ||
| 1000 | padding-left: 1.5rem; | ||
| 1001 | padding-right: 1.5rem; | ||
| 1002 | padding-top: 0.5rem; | ||
| 1003 | padding-bottom: 0.5rem; | ||
| 1004 | font-size: 1rem; | ||
| 1005 | line-height: 1.5rem; | ||
| 1006 | font-weight: 500; | ||
| 1007 | } | ||
| 1008 | |||
| 1009 | .cactus-container .cactus-button:hover { | ||
| 1010 | --tw-bg-opacity: 1; | ||
| 1011 | background-color: rgb(209 213 219 / var(--tw-bg-opacity)); | ||
| 1012 | } | ||
| 1013 | |||
| 1014 | .cactus-container .cactus-editor { | ||
| 1015 | margin-bottom: 2.5rem; | ||
| 1016 | } | ||
| 1017 | |||
| 1018 | /* Cactus: Comment List */ | ||
| 1019 | |||
| 1020 | .cactus-container .cactus-comments-list { | ||
| 1021 | display: flex; | ||
| 1022 | flex-direction: column; | ||
| 1023 | gap: 2rem; | ||
| 1024 | } | ||
| 1025 | |||
| 1026 | .cactus-container .cactus-comment { | ||
| 1027 | display: flex; | ||
| 1028 | gap: 1rem; | ||
| 1029 | } | ||
| 1030 | |||
| 1031 | .cactus-container .cactus-comment .cactus-comment-avatar img { | ||
| 1032 | height: 2rem; | ||
| 1033 | width: 2rem; | ||
| 1034 | border-radius: 9999px; | ||
| 1035 | } | ||
| 1036 | |||
| 1037 | .cactus-container .cactus-comment .cactus-comment-avatar-placeholder { | ||
| 1038 | height: 2rem; | ||
| 1039 | width: 2rem; | ||
| 1040 | border-radius: 9999px; | ||
| 1041 | --tw-bg-opacity: 1; | ||
| 1042 | background-color: rgb(209 213 219 / var(--tw-bg-opacity)); | ||
| 1043 | } | ||
| 1044 | |||
| 1045 | .cactus-container .cactus-comment .cactus-comment-header { | ||
| 1046 | display: flex; | ||
| 1047 | align-items: center; | ||
| 1048 | gap: 0.5rem; | ||
| 1049 | } | ||
| 1050 | |||
| 1051 | .cactus-container .cactus-comment .cactus-comment-header .cactus-comment-displayname { | ||
| 1052 | font-weight: 600; | ||
| 1053 | } | ||
| 1054 | |||
| 1055 | .cactus-container .cactus-comment .cactus-comment-header .cactus-comment-time { | ||
| 1056 | font-size: 0.875rem; | ||
| 1057 | line-height: 1.25rem; | ||
| 1058 | --tw-text-opacity: 1; | ||
| 1059 | color: rgb(156 163 175 / var(--tw-text-opacity)); | ||
| 1060 | } | ||
| 1061 | |||
| 1062 | .cactus-container .cactus-comment .cactus-message-text code { | ||
| 1063 | border-radius: 0.25rem; | ||
| 1064 | --tw-bg-opacity: 1; | ||
| 1065 | background-color: rgb(254 249 195 / var(--tw-bg-opacity)); | ||
| 1066 | padding-left: 0.5rem; | ||
| 1067 | padding-right: 0.5rem; | ||
| 1068 | padding-top: 0.25rem; | ||
| 1069 | padding-bottom: 0.25rem; | ||
| 1070 | font-size: 0.75rem; | ||
| 1071 | line-height: 1rem; | ||
| 1072 | font-weight: 500; | ||
| 1073 | } | ||
| 1074 | |||
| 1075 | /* Unordered list */ | ||
| 1076 | |||
| 1077 | .cactus-container .cactus-comment .cactus-message-text ul { | ||
| 1078 | list-style-type: disc; | ||
| 1079 | padding-left: 0.5rem; | ||
| 1080 | } | ||
| 1081 | |||
| 1082 | @media (min-width: 768px) { | ||
| 1083 | .cactus-container .cactus-comment .cactus-message-text ul { | ||
| 1084 | padding-left: 1.5rem; | ||
| 1085 | } | ||
| 1086 | } | ||
| 1087 | |||
| 1088 | /* Ordered list */ | ||
| 1089 | |||
| 1090 | .cactus-container .cactus-comment .cactus-message-text ol { | ||
| 1091 | list-style-type: decimal; | ||
| 1092 | padding-left: 0.5rem; | ||
| 1093 | } | ||
| 1094 | |||
| 1095 | @media (min-width: 768px) { | ||
| 1096 | .cactus-container .cactus-comment .cactus-message-text ol { | ||
| 1097 | padding-left: 1.5rem; | ||
| 1098 | } | ||
| 1099 | } | ||
| 1100 | |||
| 1101 | /* Cactus: Login */ | ||
| 1102 | |||
| 1103 | .cactus-container .cactus-login-form-wrapper { | ||
| 1104 | position: relative; | ||
| 1105 | margin-bottom: 1.5rem; | ||
| 1106 | border-radius: 0.25rem; | ||
| 1107 | border-width: 1px; | ||
| 1108 | padding: 0.75rem; | ||
| 1109 | } | ||
| 1110 | |||
| 1111 | .cactus-container .cactus-login-form .cactus-login-close { | ||
| 1112 | position: absolute; | ||
| 1113 | right: 0.75rem; | ||
| 1114 | top: 0.75rem; | ||
| 1115 | height: 1rem; | ||
| 1116 | width: 1rem; | ||
| 1117 | } | ||
| 1118 | |||
| 1119 | .cactus-container .cactus-login-form .cactus-login-title { | ||
| 1120 | margin-bottom: 1rem; | ||
| 1121 | margin-top: 0px; | ||
| 1122 | padding-top: 0px; | ||
| 1123 | font-weight: 700; | ||
| 1124 | } | ||
| 1125 | |||
| 1126 | /* Cactus: Login with a button */ | ||
| 1127 | |||
| 1128 | .cactus-container .cactus-login-form .cactus-login-client { | ||
| 1129 | margin-bottom: 1.5rem; | ||
| 1130 | } | ||
| 1131 | |||
| 1132 | .cactus-container .cactus-login-form .cactus-login-client-title { | ||
| 1133 | margin-bottom: 0.5rem; | ||
| 1134 | font-weight: 600; | ||
| 1135 | } | ||
| 1136 | |||
| 1137 | /* Cactus: Login with credentials */ | ||
| 1138 | |||
| 1139 | .cactus-container .cactus-login-form .cactus-login-credentials { | ||
| 1140 | } | ||
| 1141 | |||
| 1142 | .cactus-container .cactus-login-form .cactus-login-credentials-title { | ||
| 1143 | margin-bottom: 0.25rem; | ||
| 1144 | font-weight: 600; | ||
| 1145 | } | ||
| 1146 | |||
| 1147 | .cactus-container .cactus-login-form .cactus-login-field { | ||
| 1148 | margin-bottom: 0.5rem; | ||
| 1149 | display: flex; | ||
| 1150 | align-items: center; | ||
| 1151 | gap: 1rem; | ||
| 1152 | } | ||
| 1153 | |||
| 1154 | .cactus-container .cactus-login-form .cactus-login-label { | ||
| 1155 | width: 5rem; | ||
| 1156 | } | ||
| 1157 | |||
| 1158 | .cactus-container .cactus-login-form input { | ||
| 1159 | border-radius: 0.25rem; | ||
| 1160 | border-width: 1px; | ||
| 1161 | padding-left: 0.5rem; | ||
| 1162 | padding-right: 0.5rem; | ||
| 1163 | padding-top: 0.25rem; | ||
| 1164 | padding-bottom: 0.25rem; | ||
| 1165 | } | ||
| 1166 | |||
| 1167 | .hover\:bg-yellow-100:hover { | ||
| 1168 | --tw-bg-opacity: 1; | ||
| 1169 | background-color: rgb(254 249 195 / var(--tw-bg-opacity)); | ||
| 1170 | } | ||
| 1171 | |||
| 1172 | .hover\:text-gray-800:hover { | ||
| 1173 | --tw-text-opacity: 1; | ||
| 1174 | color: rgb(31 41 55 / var(--tw-text-opacity)); | ||
| 1175 | } | ||
| 1176 | |||
| 1177 | .hover\:underline:hover { | ||
| 1178 | text-decoration-line: underline; | ||
| 1179 | } | ||
| 1180 | |||
| 1181 | @media (min-width: 768px) { | ||
| 1182 | .md\:mb-0 { | ||
| 1183 | margin-bottom: 0px; | ||
| 1184 | } | ||
| 1185 | |||
| 1186 | .md\:block { | ||
| 1187 | display: block; | ||
| 1188 | } | ||
| 1189 | |||
| 1190 | .md\:flex-row { | ||
| 1191 | flex-direction: row; | ||
| 1192 | } | ||
| 1193 | |||
| 1194 | .md\:p-0 { | ||
| 1195 | padding: 0px; | ||
| 1196 | } | ||
| 1197 | } | ||
