styles.css (10997B)
1 @layer base, primative, modifier, entity; 2 3 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap'); 4 5 /* 6 STYLE GUIDE :: 7 class: __attribute - ( __ ) signifies global attribute 8 class: _attribute_ - ( _*_ ) signifies local attribute 9 class: --attribute - ( -- ) signifies modifier 10 11 variable: --fmd_attribute-id__opt-property--opt-modifier -- standard variable format 12 */ 13 14 @layer base { 15 16 *, 17 *::before, 18 *::after { 19 box-sizing: border-box; 20 } 21 22 :root { 23 24 /* CONTANTS */ 25 26 --fmd_gold: 1.618; 27 28 /* LAYOUT */ 29 30 --fmd_page__max-width: 900px; 31 --fmd-page__header-height: 3rem; 32 33 --fmd_padding--half: calc(var(--fmd_padding) * 0.5); 34 --fmd_padding: 0.5rem; 35 --fmd_padding--double: calc(var(--fmd_padding) * 2.0); 36 37 --fmd_margin--half: calc(var(--fmd_margin) * 0.5); 38 --fmd_margin: 0.5rem; 39 --fmd_margin--double: calc(var(--fmd_margin) * 2); 40 41 --fmd_border__width--half: calc(var(--fmd_border__width) / 2); 42 --fmd_border__width: 0.25rem; 43 --fmd_border__width--double: 0.5rem; 44 --fmd_border__radius: 1.0rem; 45 --fmd_border__radius--half: calc(var(--fmd_border__radius) * 0.5); 46 47 /* COLORS */ 48 49 --fmd_color__theme: light-dark(#fdfdfd, #010101); 50 --fmd_color__theme-inverse: light-dark(#010101, #fdfdfd); 51 52 /* Light color theme */ 53 54 --fmd_color__font-l: light-dark(#fdfdfd, #010101); 55 --fmd_color__bg-l: light-dark(#b2bec3, #2d3436); 56 --fmd_color__fg-l: light-dark(#dfe6e9, #636e72); 57 58 --fmd_color__pink-l: light-dark(#fd79a8, #e84393); 59 --fmd_color__red-l: light-dark(#ff7675, #d63031); 60 --fmd_color__orange-l: light-dark(#fab1a0, #e17055); 61 --fmd_color__yellow-l: light-dark(#ffeaa7, #fdcb6e); 62 --fmd_color__mint-l: light-dark(#55efc4, #00b894); 63 --fmd_color__aqua-l: light-dark(#81ecec, #00cec9); 64 --fmd_color__blue-l: light-dark(#74b9ff, #0984e3); 65 --fmd_color__purple-l: light-dark(#a29bfe, #6c5ce7); 66 67 /* Dark color theme */ 68 69 --fmd_color__font-d: light-dark(#010101, #fdfdfd); 70 --fmd_color__bg-d: light-dark(#2d3436, #b2bec3); 71 --fmd_color__fg-d: light-dark(#636e72, #dfe6e9); 72 73 --fmd_color__pink-d: light-dark(#e84393, #fd79a8); 74 --fmd_color__red-d: light-dark(#d63031, #ff7675); 75 --fmd_color__orange-d: light-dark(#e17055, #fab1a0); 76 --fmd_color__yellow-d: light-dark(#fdcb6e, #ffeaa7); 77 --fmd_color__mint-d: light-dark(#00b894, #55efc4); 78 --fmd_color__aqua-d: light-dark(#00cec9, #81ecec); 79 --fmd_color__blue-d: light-dark(#0984e3, #74b9ff); 80 --fmd_color__purple-d: light-dark(#6c5ce7, #a29bfe); 81 } 82 83 a { 84 color: var(--fmd_color__blue-d); 85 text-decoration: none; 86 } 87 88 body { 89 position: relative; 90 margin: var(--fmd_margin); 91 92 color-scheme: dark; 93 color: var(--fmd_color__font-d); 94 background-color: var(--fmd_color__bg-l); 95 96 font-family: 'Comfortaa'; 97 98 display: grid; 99 grid-template-columns: 1fr; 100 101 @media screen and (min-width: 900px) { 102 grid-template-columns: auto max(var(--fmd_page__max-width)) auto; 103 } 104 } 105 106 button { 107 padding: var(--fmd_padding); 108 109 display: grid; 110 justify-items: center; 111 align-items: center; 112 113 font-family: 'Comfortaa'; 114 115 background-color: var(--fmd_color__theme); 116 border: 1px solid var(--fmd_color__fg-d); 117 border-radius: var(--fmd_border__radius--half); 118 119 cursor: pointer; 120 121 transition: linear 0.15s; 122 123 @media screen and (min-width: 900px) { 124 &:hover { 125 color: var(--fmd_color__theme); 126 background-color: var(--fmd_color__theme-inverse); 127 } 128 } 129 130 @media screen and (max-width: 900px) { 131 &:active { 132 transition: none; 133 color: var(--fmd_color__theme); 134 background-color: var(--fmd_color__theme-inverse); 135 } 136 } 137 138 } 139 140 code { 141 padding: calc(var(--fmd_padding--half) / 2) var(--fmd_padding); 142 margin: 0; 143 144 display: inline-grid; 145 justify-items: center; 146 align-items: center; 147 148 background-color: var(--fmd_color__bg-l); 149 border-radius: var(--fmd_border__radius--half); 150 151 font-style: italic; 152 153 >* { 154 display: inline-grid; 155 } 156 } 157 158 h1, 159 h2, 160 h3, 161 h4, 162 h5, 163 h6 { 164 padding: var(--fmd_padding--half) var(--fmd_padding) var(--fmd_padding--half) var(--fmd_padding); 165 margin: var(--fmd_margin--double) var(--fmd_margin) var(--fmd_margin--half) var(--fmd_margin); 166 167 display: grid; 168 justify-items: center; 169 border-bottom: 1px solid var(--fmd_color__fg-d); 170 171 font-weight: bold; 172 } 173 174 header { 175 z-index: 10; 176 width: 100%; 177 top: 0; 178 179 display: grid; 180 overflow: visible; 181 182 button { 183 height: 2.5rem; 184 border-radius: 0; 185 } 186 } 187 188 hr { 189 width: 100%; 190 border: none; 191 border-top: 1px solid var(--fmd_color__theme-inverse); 192 } 193 194 img { 195 width: 75%; 196 padding: var(--fmd_padding); 197 margin: var(--fmd_margin); 198 199 justify-self: center; 200 } 201 } 202 203 @layer primative { 204 205 /* LAYOUT */ 206 207 .__view { 208 position: relative; 209 210 >:not(_panel_) { 211 width: 100%; 212 height: 100%; 213 margin: 0; 214 } 215 216 >._panel_ { 217 position: absolute; 218 top: 0; 219 left: 0; 220 } 221 } 222 223 ._content_ { 224 padding: var(--fmd_padding--half); 225 } 226 227 .__border { 228 border: 1px solid var(--fmd_color__fg-d); 229 } 230 231 .__collapsible { 232 position: relative; 233 234 display: grid; 235 justify-items: center; 236 237 >._collapsible-toggle_ { 238 display: inline-block; 239 width: 100%; 240 padding: var(--fmd_padding--half); 241 242 font-weight: bold; 243 244 &::before { 245 color: var(--fmd_color__blue-d); 246 content: '+\a0'; 247 } 248 249 &.--open::before { 250 color: var(--fmd_color__red-d); 251 content: '-\a0'; 252 } 253 } 254 255 >._collapsible-content-view_ { 256 position: absolute; 257 top: calc(100%); 258 width: 98%; 259 height: 0; 260 261 overflow: hidden; 262 263 background-color: var(--fmd_color__fg-l); 264 265 transition: linear 0.15s; 266 267 >* { 268 padding: var(--fmd_padding--half); 269 background-color: var(--fmd_color__fg-l); 270 border: 1px solid var(--fmd_color__fg-d); 271 border-top: none; 272 } 273 274 } 275 } 276 277 /* Column container */ 278 .__mcol { 279 width: 100%; 280 display: flex; 281 flex-direction: row; 282 gap: var(--fmd_padding); 283 } 284 285 .__mlist { 286 display: grid; 287 gap: var(--fmd_padding--half); 288 } 289 290 /* FONTS */ 291 292 /* Font descriptor */ 293 .__descriptor { 294 margin-top: 0.25rem; 295 font-size: 0.75em; 296 } 297 298 .__bttn:hover { 299 color: var(--fmd_color__theme-inverse) 300 } 301 } 302 303 @layer modifier { 304 305 /* LAYOUT */ 306 307 /* Center element */ 308 .--center-on-body { 309 @media screen and (min-width: 900px) { 310 grid-column: 2; 311 } 312 } 313 314 /* Hide element */ 315 .--hide { 316 display: none; 317 } 318 319 /* COLOR */ 320 321 /* Clear background */ 322 .--clear_bg { 323 background-color: inherit; 324 border: none; 325 } 326 327 .--bg_theme { 328 background-color: var(--fmd_color__theme); 329 } 330 331 /* FONT */ 332 333 /* Center text */ 334 .--center_font { 335 text-align: center; 336 } 337 338 .--set-size_half-font { 339 font-size: .5rem; 340 } 341 342 .--set-size_3-4-font { 343 font-size: .75rem; 344 } 345 346 .--set-size_5-4-font { 347 font-size: 1.25rem; 348 } 349 350 .--set-size_6-4-font { 351 font-size: 1.5rem; 352 } 353 354 .--set-size_double-font { 355 font-size: 2rem; 356 } 357 358 .--set-size_font-to-screen { 359 font-size: max(min(1.25rem), 3vmin); 360 } 361 362 .--bold_font { 363 font-weight: bold; 364 } 365 366 /* UX */ 367 368 .--clickable { 369 cursor: pointer; 370 } 371 372 .--transition { 373 transition: linear 0.25s; 374 } 375 } 376 377 @layer entity { 378 379 #header-title { 380 display: grid; 381 } 382 383 #subcard { 384 width: min(75vw); 385 padding: var(--fmd_padding); 386 margin-bottom: var(--fmd_margin--double); 387 388 display: grid; 389 justify-self: center; 390 391 background-color: var(--fmd_color__fg-l); 392 border: 1px solid var(--fmd_color__fg-d); 393 border-radius: var(--fmd_border__radius--half); 394 395 @media screen and (min-width: 900px) { 396 width: calc(var(--fmd_gold) * 12rem); 397 margin-right: var(--fmd_margin--double); 398 float: left; 399 } 400 401 >.collapsible_ { 402 403 >._button { 404 border-radius: 1rem; 405 406 transition: .33s; 407 408 &::before { 409 content: "open\a0"; 410 } 411 412 &.active { 413 background-color: var(--color__theme); 414 415 &::before { 416 content: "close\a0"; 417 } 418 } 419 } 420 421 >._content { 422 padding: 0; 423 width: 100%; 424 425 transition: .5s; 426 } 427 } 428 } 429 430 @scope(#fmd-view) { 431 & { 432 height: max(50vh); 433 margin-top: var(--fmd_margin); 434 position: relative; 435 border: 1px solid var(--fmd_color__fg-d); 436 overflow: hidden; 437 } 438 439 >#text-editor-panel>._content_ { 440 z-index: 0; 441 width: 100%; 442 height: 100%; 443 background-color: var(--fmd_color__fg-l); 444 resize: none; 445 overflow-y: auto; 446 outline: none; 447 border: none; 448 } 449 450 >#html-output-panel { 451 position: absolute; 452 top: 0; 453 left: 100%; 454 455 background-color: var(--fmd_color__fg-l); 456 457 overflow-y: auto; 458 459 &.--open { 460 left: 0; 461 } 462 } 463 464 >#guide-text-panel { 465 position: absolute; 466 top: 0; 467 left: -100%; 468 469 background-color: var(--fmd_color__fg-l); 470 471 overflow-y: auto; 472 473 &.--open { 474 left: 0; 475 } 476 } 477 478 >#error-output-panel { 479 position: absolute; 480 height: 50%; 481 top: 100%; 482 483 color: var(--fmd_color__font-l); 484 background-color: var(--fmd_color__bg-d); 485 486 &.--open { 487 top: 50%; 488 } 489 } 490 } 491 }