minimal.css (3116B)
1 /* 2 BSD Zero Clause License 3 4 Copyright (c) 2026-present 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 .alert-box { 109 font-size: 14px; 110 111 &.-error { 112 color: var(--red); 113 } 114 115 &.-success { 116 color: var(--green); 117 } 118 119 &.-info { 120 color: var(--primary); 121 } 122 } 123 124 select { 125 font: inherit; 126 border: none; 127 border-bottom: 1px solid var(--dark-gray); 128 background: none; 129 padding: 2px 0; 130 cursor: pointer; 131 132 &:focus { 133 outline: none; 134 border-bottom-color: var(--primary); 135 } 136 137 &:focus-visible { 138 outline: 2px solid var(--primary); 139 outline-offset: 2px; 140 border-bottom-color: transparent; 141 } 142 } 143 144 input { 145 146 &[type="radio"], 147 &[type="checkbox"] { 148 cursor: pointer; 149 } 150 151 &:focus-visible { 152 outline: 2px solid var(--primary); 153 outline-offset: 2px; 154 } 155 156 &[type="text"], 157 &[type="email"], 158 &[type="password"], 159 &[type="search"], 160 &[type="tel"], 161 &[type="url"], 162 &[type="number"] { 163 font: inherit; 164 border: none; 165 border-bottom: 1px solid var(--dark-gray); 166 background: none; 167 padding: 2px 0; 168 169 &:focus { 170 outline: none; 171 border-bottom-color: var(--primary); 172 } 173 } 174 } 175 176 fieldset { 177 border: none; 178 padding: 0; 179 margin: 12px 0; 180 } 181 182 legend { 183 font-weight: bold; 184 padding: 0; 185 margin-bottom: 8px; 186 } 187 188 hr { 189 margin: 20px 0; 190 border: none; 191 border-top: 1px solid var(--light-gray); 192 } 193 194 label { 195 & input { 196 margin: 8px 0; 197 } 198 }