minimal.css (3395B)
1 /* 2 BSD Zero Clause License 3 4 Copyright (c) 2026 Brook Jeynes <me@brookjeynes.dev> 5 6 Permission to use, copy, modify, and/or distribute this software for any 7 purpose with or without fee is hereby granted. 8 9 THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 10 REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 11 AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 12 INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 13 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 14 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 15 PERFORMANCE OF THIS SOFTWARE. 16 */ 17 18 *, 19 *::before, 20 *::after { 21 box-sizing: border-box; 22 } 23 24 :root { 25 --primary: #4070a0; 26 --text: #1a1a1a; 27 --secondary: #808080; 28 --light-gray: #e8e8e8; 29 --dark-gray: #c0c0c0; 30 --red: #a05050; 31 --green: #5a9060; 32 } 33 34 body { 35 font-family: 'Georgia', serif; 36 font-size: 16px; 37 color: var(--text); 38 margin: 0; 39 padding: 0.5rem 1.5rem; 40 max-width: 900px; 41 margin-left: auto; 42 margin-right: auto; 43 } 44 45 h1 { 46 font-size: 32px; 47 font-weight: normal; 48 line-height: 40px; 49 margin-top: 40px; 50 } 51 52 h2 { 53 font-size: 16px; 54 font-weight: bold; 55 margin-top: 24px; 56 } 57 58 a, 59 a:visited { 60 color: inherit; 61 text-decoration-thickness: 1px; 62 text-underline-offset: 3px; 63 64 &:hover { 65 color: var(--primary); 66 } 67 } 68 69 footer { 70 margin: 2rem 0; 71 font-size: 75%; 72 color: var(--secondary); 73 } 74 75 button { 76 font: inherit; 77 cursor: pointer; 78 background: none; 79 border: none; 80 padding: 0; 81 color: inherit; 82 83 &:disabled { 84 opacity: 0.35; 85 cursor: default; 86 } 87 88 &:hover:not(:disabled) { 89 text-decoration: underline; 90 text-decoration-thickness: 1px; 91 text-underline-offset: 3px; 92 } 93 94 &:focus-visible { 95 outline: 2px solid var(--primary); 96 outline-offset: 2px; 97 } 98 99 &.-primary { 100 font-weight: bold; 101 } 102 103 &.-secondary { 104 color: var(--secondary); 105 } 106 } 107 108 .section-label { 109 font-size: 14px; 110 font-weight: bold; 111 112 &.-muted { 113 color: var(--secondary); 114 } 115 } 116 117 .alert-box { 118 font-size: 14px; 119 120 &.-error { 121 color: var(--red); 122 } 123 124 &.-success { 125 color: var(--green); 126 } 127 128 &.-info { 129 color: var(--primary); 130 } 131 } 132 133 select { 134 font: inherit; 135 border: none; 136 border-bottom: 1px solid var(--dark-gray); 137 background: none; 138 padding: 2px 0; 139 cursor: pointer; 140 141 &:focus { 142 outline: none; 143 border-bottom-color: var(--primary); 144 } 145 146 &:focus-visible { 147 outline: 2px solid var(--primary); 148 outline-offset: 2px; 149 border-bottom-color: transparent; 150 } 151 } 152 153 input { 154 155 &[type="radio"], 156 &[type="checkbox"] { 157 cursor: pointer; 158 } 159 160 &:focus-visible { 161 outline: 2px solid var(--primary); 162 outline-offset: 2px; 163 } 164 165 &[type="text"], 166 &[type="email"], 167 &[type="password"], 168 &[type="search"], 169 &[type="tel"], 170 &[type="url"], 171 &[type="number"] { 172 font: inherit; 173 border: none; 174 border-bottom: 1px solid var(--dark-gray); 175 background: none; 176 padding: 2px 0; 177 178 &:focus { 179 outline: none; 180 border-bottom-color: var(--primary); 181 } 182 } 183 } 184 185 fieldset { 186 border: none; 187 padding: 0; 188 margin: 12px 0; 189 } 190 191 legend { 192 font-weight: bold; 193 padding: 0; 194 margin-bottom: 8px; 195 } 196 197 hr { 198 margin: 20px 0; 199 border: none; 200 border-top: 1px solid var(--light-gray); 201 } 202 203 label { 204 & input { 205 margin: 8px 0; 206 } 207 } 208 209 [role="tablist"] { 210 display: flex; 211 gap: 15px; 212 213 [role="tab"][aria-selected="true"] { 214 text-decoration: underline; 215 text-decoration-thickness: 1px; 216 text-underline-offset: 3px; 217 } 218 }