├── .gitignore
├── README.md
├── package.json
└── src
├── components
├── bg.js
├── footer.js
├── header.js
├── index.js
├── link.js
├── main.js
├── nav.js
├── post.js
├── title.js
└── wrapper.js
├── images
├── bg.jpg
└── overlay.png
├── index.js
└── styles.css
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # frontity-dimension-theme
2 |
3 | A fully responsive Frontity theme designed by [HTML5 UP](https://html5up.net/), implemented by [Matnard](https://www.matnard.com/) and released for free under the Creative Commons license.
4 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@matnard/dimension-theme",
3 | "version": "1.0.2",
4 | "homepage": "https://github.com/Matnard/frontity-dimension-theme#readme",
5 | "description": "A fully responsive Frontity theme designed by HTML5 UP, implemented by Matnard and released for free under the Creative Commons license.",
6 | "keywords": [
7 | "frontity",
8 | "frontity-theme",
9 | "HTML5UP"
10 | ],
11 | "license": "CC-BY-3.0",
12 | "dependencies": {
13 | "frontity": "^1.8.0"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/bg.js:
--------------------------------------------------------------------------------
1 | import { styled } from "frontity";
2 | import overlayImage from "../images/overlay.png";
3 | import bgImage from "../images/bg.jpg";
4 |
5 | export default styled.div`
6 | transform: scale(1);
7 | -webkit-backface-visibility: hidden;
8 | position: fixed;
9 | top: 0;
10 | left: 0;
11 | width: 100%;
12 | height: 100vh;
13 | z-index: 1;
14 |
15 | &:before,
16 | &:after {
17 | content: "";
18 | display: block;
19 | position: absolute;
20 | top: 0;
21 | left: 0;
22 | width: 100%;
23 | height: 100%;
24 | }
25 |
26 | &:before {
27 | transition: background-color 2.5s ease-in-out;
28 | transition-delay: 0.75s;
29 | background-image: linear-gradient(
30 | to top,
31 | rgba(19, 21, 25, 0.5),
32 | rgba(19, 21, 25, 0.5)
33 | ),
34 | url(${overlayImage});
35 | background-size: auto, 256px 256px;
36 | background-position: center, center;
37 | background-repeat: no-repeat, repeat;
38 | z-index: 2;
39 |
40 | ${(props) => (props.isPreload ? "background-color: #000000;" : "")}
41 | }
42 |
43 | &:after {
44 | transform: scale(1.125);
45 | transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
46 | background-image: url(${bgImage});
47 | background-position: center;
48 | background-size: cover;
49 | background-repeat: no-repeat;
50 | z-index: 1;
51 | ${(props) => (props.isBlurred ? "transform: scale(1.0825);" : "")}
52 | ${(props) => (props.isBlurred ? "filter: blur(0.2rem);" : "")}
53 | }
54 | `;
55 |
--------------------------------------------------------------------------------
/src/components/footer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { connect, styled } from "frontity";
3 |
4 | const SiteFooter = styled.footer`
5 | display: ${({ state }) => (state === "exited" ? "none" : "block")};
6 | transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
7 | width: 100%;
8 | max-width: 100%;
9 | margin-top: 2rem;
10 | text-align: center;
11 | ${({ state }) =>
12 | state === "exiting" || state === "entering"
13 | ? "transform: scale(0.95);"
14 | : ""}
15 | ${({ state }) =>
16 | state === "exiting" || state === "entering" ? "filter: blur(0.1rem);" : ""}
17 | opacity: ${({ state }) =>
18 | state === "exiting" || state === "entering" ? "0" : "1"};
19 | opacity: ${(props) => (props.isPreload ? "0" : "1")};
20 |
21 | .copyright {
22 | letter-spacing: 0.2rem;
23 | font-size: 0.6rem;
24 | opacity: 0.75;
25 | margin-bottom: 0;
26 | text-transform: uppercase;
27 | }
28 | `;
29 |
30 | const Footer = ({ state, transitionState }) => {
31 | const { isPageLoaded } = state.theme;
32 |
33 | return (
34 |
36 | © Untitled. Design: HTML5 UP.
37 | Images: Unsplash.
38 |
30 |
31 |
12 | {menuItems.map(([label, link], i) => {
13 | const isCurrentPage = state.router.link === link;
14 | return (
15 |
31 |
40 |
41 | 42 | ); 43 | }; 44 | 45 | export default connect(Title); 46 | -------------------------------------------------------------------------------- /src/components/wrapper.js: -------------------------------------------------------------------------------- 1 | import { styled } from "frontity"; 2 | 3 | const Wrapper = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | position: relative; 9 | min-height: 100vh; 10 | width: 100%; 11 | padding: 4rem 2rem; 12 | z-index: 3; 13 | 14 | &:before { 15 | content: ""; 16 | display: block; 17 | } 18 | 19 | @media screen and (max-width: 1680px) { 20 | padding: 3rem 2rem; 21 | } 22 | 23 | @media screen and (max-width: 736px) { 24 | padding: 2rem 1rem; 25 | } 26 | 27 | @media screen and (max-width: 480px) { 28 | padding: 1rem; 29 | } 30 | `; 31 | 32 | export default Wrapper; 33 | -------------------------------------------------------------------------------- /src/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Matnard/frontity-dimension-theme/c2090d46a35bd0feb1227d2d859f9dcc4a5e840a/src/images/bg.jpg -------------------------------------------------------------------------------- /src/images/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Matnard/frontity-dimension-theme/c2090d46a35bd0feb1227d2d859f9dcc4a5e840a/src/images/overlay.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Theme from "./components"; 2 | 3 | export default { 4 | name: "@matnard/dimension-theme", 5 | roots: { 6 | theme: Theme, 7 | }, 8 | state: { 9 | theme: { 10 | isPageLoaded: false, 11 | }, 12 | }, 13 | actions: { 14 | theme: { 15 | setIsPageLoaded: ({ state }) => { 16 | state.theme.isPageLoaded = true; 17 | }, 18 | }, 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css); 2 | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600"); 3 | 4 | /* 5 | Dimension by HTML5 UP 6 | html5up.net | @ajlkn 7 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 8 | */ 9 | 10 | html, 11 | body, 12 | div, 13 | span, 14 | applet, 15 | object, 16 | iframe, 17 | h1, 18 | h2, 19 | h3, 20 | h4, 21 | h5, 22 | h6, 23 | p, 24 | blockquote, 25 | pre, 26 | a, 27 | abbr, 28 | acronym, 29 | address, 30 | big, 31 | cite, 32 | code, 33 | del, 34 | dfn, 35 | em, 36 | img, 37 | ins, 38 | kbd, 39 | q, 40 | s, 41 | samp, 42 | small, 43 | strike, 44 | strong, 45 | sub, 46 | sup, 47 | tt, 48 | var, 49 | b, 50 | u, 51 | i, 52 | center, 53 | dl, 54 | dt, 55 | dd, 56 | ol, 57 | ul, 58 | li, 59 | fieldset, 60 | form, 61 | label, 62 | legend, 63 | table, 64 | caption, 65 | tbody, 66 | tfoot, 67 | thead, 68 | tr, 69 | th, 70 | td, 71 | article, 72 | aside, 73 | canvas, 74 | details, 75 | embed, 76 | figure, 77 | figcaption, 78 | footer, 79 | header, 80 | hgroup, 81 | menu, 82 | nav, 83 | output, 84 | ruby, 85 | section, 86 | summary, 87 | time, 88 | mark, 89 | audio, 90 | video { 91 | margin: 0; 92 | padding: 0; 93 | border: 0; 94 | font-size: 100%; 95 | font: inherit; 96 | vertical-align: baseline; 97 | } 98 | 99 | article, 100 | aside, 101 | details, 102 | figcaption, 103 | figure, 104 | footer, 105 | header, 106 | hgroup, 107 | menu, 108 | nav, 109 | section { 110 | display: block; 111 | } 112 | 113 | body { 114 | line-height: 1; 115 | } 116 | 117 | ol, 118 | ul { 119 | list-style: none; 120 | } 121 | 122 | blockquote, 123 | q { 124 | quotes: none; 125 | } 126 | 127 | blockquote:before, 128 | blockquote:after, 129 | q:before, 130 | q:after { 131 | content: ""; 132 | content: none; 133 | } 134 | 135 | table { 136 | border-collapse: collapse; 137 | border-spacing: 0; 138 | } 139 | 140 | body { 141 | -webkit-text-size-adjust: none; 142 | } 143 | 144 | mark { 145 | background-color: transparent; 146 | color: inherit; 147 | } 148 | 149 | input::-moz-focus-inner { 150 | border: 0; 151 | padding: 0; 152 | } 153 | 154 | input, 155 | select, 156 | textarea { 157 | -moz-appearance: none; 158 | -webkit-appearance: none; 159 | -ms-appearance: none; 160 | appearance: none; 161 | } 162 | 163 | /* Basic */ 164 | 165 | @-ms-viewport { 166 | width: device-width; 167 | } 168 | 169 | @media screen and (max-width: 480px) { 170 | html, 171 | body { 172 | min-width: 320px; 173 | } 174 | } 175 | 176 | html { 177 | box-sizing: border-box; 178 | } 179 | 180 | *, 181 | *:before, 182 | *:after { 183 | box-sizing: inherit; 184 | } 185 | 186 | body { 187 | background: #1b1f22; 188 | } 189 | 190 | body.is-preload *, 191 | body.is-preload *:before, 192 | body.is-preload *:after { 193 | -moz-animation: none !important; 194 | -webkit-animation: none !important; 195 | -ms-animation: none !important; 196 | animation: none !important; 197 | -moz-transition: none !important; 198 | -webkit-transition: none !important; 199 | -ms-transition: none !important; 200 | transition: none !important; 201 | } 202 | 203 | /* Type */ 204 | 205 | html { 206 | font-size: 16pt; 207 | } 208 | 209 | @media screen and (max-width: 1680px) { 210 | html { 211 | font-size: 12pt; 212 | } 213 | } 214 | 215 | @media screen and (max-width: 736px) { 216 | html { 217 | font-size: 11pt; 218 | } 219 | } 220 | 221 | @media screen and (max-width: 360px) { 222 | html { 223 | font-size: 10pt; 224 | } 225 | } 226 | 227 | body, 228 | input, 229 | select, 230 | textarea { 231 | color: #ffffff; 232 | font-family: "Source Sans Pro", sans-serif; 233 | font-weight: 300; 234 | font-size: 1rem; 235 | line-height: 1.65; 236 | } 237 | 238 | a { 239 | -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, 240 | border-bottom-color 0.2s ease-in-out; 241 | -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, 242 | border-bottom-color 0.2s ease-in-out; 243 | -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, 244 | border-bottom-color 0.2s ease-in-out; 245 | transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, 246 | border-bottom-color 0.2s ease-in-out; 247 | border-bottom: dotted 1px rgba(255, 255, 255, 0.5); 248 | text-decoration: none; 249 | color: inherit; 250 | } 251 | 252 | a:hover { 253 | border-bottom-color: transparent; 254 | } 255 | 256 | strong, 257 | b { 258 | color: #ffffff; 259 | font-weight: 600; 260 | } 261 | 262 | em, 263 | i { 264 | font-style: italic; 265 | } 266 | 267 | p { 268 | margin: 0 0 2rem 0; 269 | } 270 | 271 | h1, 272 | h2, 273 | h3, 274 | h4, 275 | h5, 276 | h6 { 277 | color: #ffffff; 278 | font-weight: 600; 279 | line-height: 1.5; 280 | margin: 0 0 1rem 0; 281 | text-transform: uppercase; 282 | letter-spacing: 0.2rem; 283 | } 284 | 285 | h1 a, 286 | h2 a, 287 | h3 a, 288 | h4 a, 289 | h5 a, 290 | h6 a { 291 | color: inherit; 292 | text-decoration: none; 293 | } 294 | 295 | h1.major, 296 | h2.major, 297 | h3.major, 298 | h4.major, 299 | h5.major, 300 | h6.major { 301 | border-bottom: solid 1px #ffffff; 302 | width: -moz-max-content; 303 | width: -webkit-max-content; 304 | width: -ms-max-content; 305 | width: max-content; 306 | padding-bottom: 0.5rem; 307 | margin: 0 0 2rem 0; 308 | } 309 | 310 | h1 { 311 | font-size: 2.25rem; 312 | line-height: 1.3; 313 | letter-spacing: 0.5rem; 314 | } 315 | 316 | h2 { 317 | font-size: 1.5rem; 318 | line-height: 1.4; 319 | letter-spacing: 0.5rem; 320 | } 321 | 322 | h3 { 323 | font-size: 1rem; 324 | } 325 | 326 | h4 { 327 | font-size: 0.8rem; 328 | } 329 | 330 | h5 { 331 | font-size: 0.7rem; 332 | } 333 | 334 | h6 { 335 | font-size: 0.6rem; 336 | } 337 | 338 | @media screen and (max-width: 736px) { 339 | h1 { 340 | font-size: 1.75rem; 341 | line-height: 1.4; 342 | } 343 | 344 | h2 { 345 | font-size: 1.25em; 346 | line-height: 1.5; 347 | } 348 | } 349 | 350 | sub { 351 | font-size: 0.8rem; 352 | position: relative; 353 | top: 0.5rem; 354 | } 355 | 356 | sup { 357 | font-size: 0.8rem; 358 | position: relative; 359 | top: -0.5rem; 360 | } 361 | 362 | blockquote { 363 | border-left: solid 4px #ffffff; 364 | font-style: italic; 365 | margin: 0 0 2rem 0; 366 | padding: 0.5rem 0 0.5rem 2rem; 367 | } 368 | 369 | code { 370 | background: rgba(255, 255, 255, 0.075); 371 | border-radius: 4px; 372 | font-family: "Courier New", monospace; 373 | font-size: 0.9rem; 374 | margin: 0 0.25rem; 375 | padding: 0.25rem 0.65rem; 376 | } 377 | 378 | pre { 379 | -webkit-overflow-scrolling: touch; 380 | font-family: "Courier New", monospace; 381 | font-size: 0.9rem; 382 | margin: 0 0 2rem 0; 383 | } 384 | 385 | pre code { 386 | display: block; 387 | line-height: 1.75; 388 | padding: 1rem 1.5rem; 389 | overflow-x: auto; 390 | } 391 | 392 | hr { 393 | border: 0; 394 | border-bottom: solid 1px #ffffff; 395 | margin: 2.75rem 0; 396 | } 397 | 398 | .align-left { 399 | text-align: left; 400 | } 401 | 402 | .align-center { 403 | text-align: center; 404 | } 405 | 406 | .align-right { 407 | text-align: right; 408 | } 409 | 410 | /* Form */ 411 | 412 | form { 413 | margin: 0 0 2rem 0; 414 | } 415 | 416 | form > :last-child { 417 | margin-bottom: 0; 418 | } 419 | 420 | form > .fields { 421 | display: -moz-flex; 422 | display: -webkit-flex; 423 | display: -ms-flex; 424 | display: flex; 425 | -moz-flex-wrap: wrap; 426 | -webkit-flex-wrap: wrap; 427 | -ms-flex-wrap: wrap; 428 | flex-wrap: wrap; 429 | width: calc(100% + 3rem); 430 | margin: -1.5rem 0 2rem -1.5rem; 431 | } 432 | 433 | form > .fields > .field { 434 | -moz-flex-grow: 0; 435 | -webkit-flex-grow: 0; 436 | -ms-flex-grow: 0; 437 | flex-grow: 0; 438 | -moz-flex-shrink: 0; 439 | -webkit-flex-shrink: 0; 440 | -ms-flex-shrink: 0; 441 | flex-shrink: 0; 442 | padding: 1.5rem 0 0 1.5rem; 443 | width: calc(100% - 1.5rem); 444 | } 445 | 446 | form > .fields > .field.half { 447 | width: calc(50% - 0.75rem); 448 | } 449 | 450 | form > .fields > .field.third { 451 | width: calc(100% / 3 - 0.5rem); 452 | } 453 | 454 | form > .fields > .field.quarter { 455 | width: calc(25% - 0.375rem); 456 | } 457 | 458 | @media screen and (max-width: 480px) { 459 | form > .fields { 460 | width: calc(100% + 3rem); 461 | margin: -1.5rem 0 2rem -1.5rem; 462 | } 463 | 464 | form > .fields > .field { 465 | padding: 1.5rem 0 0 1.5rem; 466 | width: calc(100% - 1.5rem); 467 | } 468 | 469 | form > .fields > .field.half { 470 | width: calc(100% - 1.5rem); 471 | } 472 | 473 | form > .fields > .field.third { 474 | width: calc(100% - 1.5rem); 475 | } 476 | 477 | form > .fields > .field.quarter { 478 | width: calc(100% - 1.5rem); 479 | } 480 | } 481 | 482 | label { 483 | color: #ffffff; 484 | display: block; 485 | font-size: 0.8rem; 486 | font-weight: 300; 487 | letter-spacing: 0.2rem; 488 | line-height: 1.5; 489 | margin: 0 0 1rem 0; 490 | text-transform: uppercase; 491 | } 492 | 493 | input[type="text"], 494 | input[type="password"], 495 | input[type="email"], 496 | input[type="tel"], 497 | select, 498 | textarea { 499 | -moz-appearance: none; 500 | -webkit-appearance: none; 501 | -ms-appearance: none; 502 | appearance: none; 503 | -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, 504 | background-color 0.2s ease-in-out; 505 | -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, 506 | background-color 0.2s ease-in-out; 507 | -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, 508 | background-color 0.2s ease-in-out; 509 | transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, 510 | background-color 0.2s ease-in-out; 511 | background-color: transparent; 512 | border-radius: 4px; 513 | border: solid 1px #ffffff; 514 | color: inherit; 515 | display: block; 516 | outline: 0; 517 | padding: 0 1rem; 518 | text-decoration: none; 519 | width: 100%; 520 | } 521 | 522 | input[type="text"]:invalid, 523 | input[type="password"]:invalid, 524 | input[type="email"]:invalid, 525 | input[type="tel"]:invalid, 526 | select:invalid, 527 | textarea:invalid { 528 | box-shadow: none; 529 | } 530 | 531 | input[type="text"]:focus, 532 | input[type="password"]:focus, 533 | input[type="email"]:focus, 534 | input[type="tel"]:focus, 535 | select:focus, 536 | textarea:focus { 537 | background: rgba(255, 255, 255, 0.075); 538 | border-color: #ffffff; 539 | box-shadow: 0 0 0 1px #ffffff; 540 | } 541 | 542 | select { 543 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23ffffff' /%3E%3C/svg%3E"); 544 | background-size: 1.25rem; 545 | background-repeat: no-repeat; 546 | background-position: calc(100% - 1rem) center; 547 | height: 2.75rem; 548 | padding-right: 2.75rem; 549 | text-overflow: ellipsis; 550 | } 551 | 552 | select option { 553 | color: #ffffff; 554 | background: #1b1f22; 555 | } 556 | 557 | select:focus::-ms-value { 558 | background-color: transparent; 559 | } 560 | 561 | select::-ms-expand { 562 | display: none; 563 | } 564 | 565 | input[type="text"], 566 | input[type="password"], 567 | input[type="email"], 568 | select { 569 | height: 2.75rem; 570 | } 571 | 572 | textarea { 573 | padding: 0.75rem 1rem; 574 | } 575 | 576 | input[type="checkbox"], 577 | input[type="radio"] { 578 | -moz-appearance: none; 579 | -webkit-appearance: none; 580 | -ms-appearance: none; 581 | appearance: none; 582 | display: block; 583 | float: left; 584 | margin-right: -2rem; 585 | opacity: 0; 586 | width: 1rem; 587 | z-index: -1; 588 | } 589 | 590 | input[type="checkbox"] + label, 591 | input[type="radio"] + label { 592 | text-decoration: none; 593 | -moz-user-select: none; 594 | -webkit-user-select: none; 595 | -ms-user-select: none; 596 | user-select: none; 597 | color: #ffffff; 598 | cursor: pointer; 599 | display: inline-block; 600 | font-size: 0.8rem; 601 | font-weight: 300; 602 | margin: 0 0 0.5rem 0; 603 | padding-left: 2.65rem; 604 | padding-right: 0.75rem; 605 | position: relative; 606 | } 607 | 608 | input[type="checkbox"] + label:before, 609 | input[type="radio"] + label:before { 610 | -moz-osx-font-smoothing: grayscale; 611 | -webkit-font-smoothing: antialiased; 612 | display: inline-block; 613 | font-style: normal; 614 | font-variant: normal; 615 | text-rendering: auto; 616 | line-height: 1; 617 | text-transform: none !important; 618 | font-family: "Font Awesome 5 Free"; 619 | font-weight: 900; 620 | } 621 | 622 | input[type="checkbox"] + label:before, 623 | input[type="radio"] + label:before { 624 | -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, 625 | background-color 0.2s ease-in-out; 626 | -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, 627 | background-color 0.2s ease-in-out; 628 | -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, 629 | background-color 0.2s ease-in-out; 630 | transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, 631 | background-color 0.2s ease-in-out; 632 | border-radius: 4px; 633 | border: solid 1px #ffffff; 634 | content: ""; 635 | display: inline-block; 636 | height: 1.65rem; 637 | left: 0; 638 | line-height: 1.65rem; 639 | position: absolute; 640 | text-align: center; 641 | top: -0.15rem; 642 | width: 1.65rem; 643 | } 644 | 645 | input[type="checkbox"]:checked + label:before, 646 | input[type="radio"]:checked + label:before { 647 | background: #ffffff !important; 648 | border-color: #ffffff !important; 649 | color: #1b1f22; 650 | content: "\f00c"; 651 | } 652 | 653 | input[type="checkbox"]:focus + label:before, 654 | input[type="radio"]:focus + label:before { 655 | background: rgba(255, 255, 255, 0.075); 656 | border-color: #ffffff; 657 | box-shadow: 0 0 0 1px #ffffff; 658 | } 659 | 660 | input[type="checkbox"] + label:before { 661 | border-radius: 4px; 662 | } 663 | 664 | input[type="radio"] + label:before { 665 | border-radius: 100%; 666 | } 667 | 668 | ::-webkit-input-placeholder { 669 | color: rgba(255, 255, 255, 0.5) !important; 670 | opacity: 1; 671 | } 672 | 673 | :-moz-placeholder { 674 | color: rgba(255, 255, 255, 0.5) !important; 675 | opacity: 1; 676 | } 677 | 678 | ::-moz-placeholder { 679 | color: rgba(255, 255, 255, 0.5) !important; 680 | opacity: 1; 681 | } 682 | 683 | :-ms-input-placeholder { 684 | color: rgba(255, 255, 255, 0.5) !important; 685 | opacity: 1; 686 | } 687 | 688 | .formerize-placeholder { 689 | color: rgba(255, 255, 255, 0.5) !important; 690 | opacity: 1; 691 | } 692 | 693 | /* Box */ 694 | 695 | .box { 696 | border-radius: 4px; 697 | border: solid 1px #ffffff; 698 | margin-bottom: 2rem; 699 | padding: 1.5em; 700 | } 701 | 702 | .box > :last-child, 703 | .box > :last-child > :last-child, 704 | .box > :last-child > :last-child > :last-child { 705 | margin-bottom: 0; 706 | } 707 | 708 | .box.alt { 709 | border: 0; 710 | border-radius: 0; 711 | padding: 0; 712 | } 713 | 714 | /* Icon */ 715 | 716 | .icon { 717 | text-decoration: none; 718 | border-bottom: none; 719 | position: relative; 720 | } 721 | 722 | .icon:before { 723 | -moz-osx-font-smoothing: grayscale; 724 | -webkit-font-smoothing: antialiased; 725 | display: inline-block; 726 | font-style: normal; 727 | font-variant: normal; 728 | text-rendering: auto; 729 | line-height: 1; 730 | text-transform: none !important; 731 | font-family: "Font Awesome 5 Free"; 732 | font-weight: 400; 733 | } 734 | 735 | .icon > .label { 736 | display: none; 737 | } 738 | 739 | .icon:before { 740 | line-height: inherit; 741 | } 742 | 743 | .icon.solid:before { 744 | font-weight: 900; 745 | } 746 | 747 | .icon.brands:before { 748 | font-family: "Font Awesome 5 Brands"; 749 | } 750 | 751 | /* Image */ 752 | 753 | .image { 754 | border-radius: 4px; 755 | border: 0; 756 | display: inline-block; 757 | position: relative; 758 | } 759 | 760 | .image:before { 761 | pointer-events: none; 762 | background-image: url(${overlayImage}); 763 | background-color: rgba(19, 21, 25, 0.5); 764 | border-radius: 4px; 765 | content: ""; 766 | display: block; 767 | height: 100%; 768 | left: 0; 769 | opacity: 0.5; 770 | position: absolute; 771 | top: 0; 772 | width: 100%; 773 | } 774 | 775 | .image img { 776 | border-radius: 4px; 777 | display: block; 778 | } 779 | 780 | .image.left, 781 | .image.right { 782 | max-width: 40%; 783 | } 784 | 785 | .image.left img, 786 | .image.right img { 787 | width: 100%; 788 | } 789 | 790 | .image.left { 791 | float: left; 792 | padding: 0 1.5em 1em 0; 793 | top: 0.25em; 794 | } 795 | 796 | .image.right { 797 | float: right; 798 | padding: 0 0 1em 1.5em; 799 | top: 0.25em; 800 | } 801 | 802 | .image.fit { 803 | display: block; 804 | margin: 0 0 2rem 0; 805 | width: 100%; 806 | } 807 | 808 | .image.fit img { 809 | width: 100%; 810 | } 811 | 812 | .image.main { 813 | display: block; 814 | margin: 2.5rem 0; 815 | width: 100%; 816 | } 817 | 818 | .image.main img { 819 | width: 100%; 820 | } 821 | 822 | @media screen and (max-width: 736px) { 823 | .image.main { 824 | margin: 2rem 0; 825 | } 826 | } 827 | 828 | @media screen and (max-width: 480px) { 829 | .image.main { 830 | margin: 1.5rem 0; 831 | } 832 | } 833 | 834 | /* List */ 835 | 836 | ol { 837 | list-style: decimal; 838 | margin: 0 0 2rem 0; 839 | padding-left: 1.25em; 840 | } 841 | 842 | ol li { 843 | padding-left: 0.25em; 844 | } 845 | 846 | ul { 847 | list-style: disc; 848 | margin: 0 0 2rem 0; 849 | padding-left: 1em; 850 | } 851 | 852 | ul li { 853 | padding-left: 0.5em; 854 | } 855 | 856 | ul.alt { 857 | list-style: none; 858 | padding-left: 0; 859 | } 860 | 861 | ul.alt li { 862 | border-top: solid 1px #ffffff; 863 | padding: 0.5em 0; 864 | } 865 | 866 | ul.alt li:first-of-type { 867 | border-top: 0; 868 | padding-top: 0; 869 | } 870 | 871 | dl { 872 | margin: 0 0 2rem 0; 873 | } 874 | 875 | dl dt { 876 | display: block; 877 | font-weight: 600; 878 | margin: 0 0 1rem 0; 879 | } 880 | 881 | dl dd { 882 | margin-left: 2rem; 883 | } 884 | 885 | /* Actions */ 886 | 887 | ul.actions { 888 | display: -moz-flex; 889 | display: -webkit-flex; 890 | display: -ms-flex; 891 | display: flex; 892 | cursor: default; 893 | list-style: none; 894 | margin-left: -1rem; 895 | padding-left: 0; 896 | } 897 | 898 | ul.actions li { 899 | padding: 0 0 0 1rem; 900 | vertical-align: middle; 901 | } 902 | 903 | ul.actions.special { 904 | -moz-justify-content: center; 905 | -webkit-justify-content: center; 906 | -ms-justify-content: center; 907 | justify-content: center; 908 | width: 100%; 909 | margin-left: 0; 910 | } 911 | 912 | ul.actions.special li:first-of-type { 913 | padding-left: 0; 914 | } 915 | 916 | ul.actions.stacked { 917 | -moz-flex-direction: column; 918 | -webkit-flex-direction: column; 919 | -ms-flex-direction: column; 920 | flex-direction: column; 921 | margin-left: 0; 922 | } 923 | 924 | ul.actions.stacked li { 925 | padding: 1.3rem 0 0 0; 926 | } 927 | 928 | ul.actions.stacked li:first-of-type { 929 | padding-top: 0; 930 | } 931 | 932 | ul.actions.fit { 933 | width: calc(100% + 1rem); 934 | } 935 | 936 | ul.actions.fit li { 937 | -moz-flex-grow: 1; 938 | -webkit-flex-grow: 1; 939 | -ms-flex-grow: 1; 940 | flex-grow: 1; 941 | -moz-flex-shrink: 1; 942 | -webkit-flex-shrink: 1; 943 | -ms-flex-shrink: 1; 944 | flex-shrink: 1; 945 | width: 100%; 946 | } 947 | 948 | ul.actions.fit li > * { 949 | width: 100%; 950 | } 951 | 952 | ul.actions.fit.stacked { 953 | width: 100%; 954 | } 955 | 956 | @media screen and (max-width: 480px) { 957 | ul.actions:not(.fixed) { 958 | -moz-flex-direction: column; 959 | -webkit-flex-direction: column; 960 | -ms-flex-direction: column; 961 | flex-direction: column; 962 | margin-left: 0; 963 | width: 100% !important; 964 | } 965 | 966 | ul.actions:not(.fixed) li { 967 | -moz-flex-grow: 1; 968 | -webkit-flex-grow: 1; 969 | -ms-flex-grow: 1; 970 | flex-grow: 1; 971 | -moz-flex-shrink: 1; 972 | -webkit-flex-shrink: 1; 973 | -ms-flex-shrink: 1; 974 | flex-shrink: 1; 975 | padding: 1rem 0 0 0; 976 | text-align: center; 977 | width: 100%; 978 | } 979 | 980 | ul.actions:not(.fixed) li > * { 981 | width: 100%; 982 | } 983 | 984 | ul.actions:not(.fixed) li:first-of-type { 985 | padding-top: 0; 986 | } 987 | 988 | ul.actions:not(.fixed) li input[type="submit"], 989 | ul.actions:not(.fixed) li input[type="reset"], 990 | ul.actions:not(.fixed) li input[type="button"], 991 | ul.actions:not(.fixed) li button, 992 | ul.actions:not(.fixed) li .button { 993 | width: 100%; 994 | } 995 | 996 | ul.actions:not(.fixed) li input[type="submit"].icon:before, 997 | ul.actions:not(.fixed) li input[type="reset"].icon:before, 998 | ul.actions:not(.fixed) li input[type="button"].icon:before, 999 | ul.actions:not(.fixed) li button.icon:before, 1000 | ul.actions:not(.fixed) li .button.icon:before { 1001 | margin-left: -0.5em; 1002 | } 1003 | } 1004 | 1005 | /* Icons */ 1006 | 1007 | ul.icons { 1008 | cursor: default; 1009 | list-style: none; 1010 | padding-left: 0; 1011 | } 1012 | 1013 | ul.icons li { 1014 | display: inline-block; 1015 | padding: 0 0.75em 0 0; 1016 | } 1017 | 1018 | ul.icons li:last-child { 1019 | padding-right: 0; 1020 | } 1021 | 1022 | ul.icons li a { 1023 | border-radius: 100%; 1024 | box-shadow: inset 0 0 0 1px #ffffff; 1025 | display: inline-block; 1026 | height: 2.25rem; 1027 | line-height: 2.25rem; 1028 | text-align: center; 1029 | width: 2.25rem; 1030 | } 1031 | 1032 | ul.icons li a:hover { 1033 | background-color: rgba(255, 255, 255, 0.075); 1034 | } 1035 | 1036 | ul.icons li a:active { 1037 | background-color: rgba(255, 255, 255, 0.175); 1038 | } 1039 | 1040 | /* Table */ 1041 | 1042 | .table-wrapper { 1043 | -webkit-overflow-scrolling: touch; 1044 | overflow-x: auto; 1045 | } 1046 | 1047 | table { 1048 | margin: 0 0 2rem 0; 1049 | width: 100%; 1050 | } 1051 | 1052 | table tbody tr { 1053 | border: solid 1px #ffffff; 1054 | border-left: 0; 1055 | border-right: 0; 1056 | } 1057 | 1058 | table tbody tr:nth-of-type(2n + 1) { 1059 | background-color: rgba(255, 255, 255, 0.075); 1060 | } 1061 | 1062 | table td { 1063 | padding: 0.75em 0.75em; 1064 | } 1065 | 1066 | table th { 1067 | color: #ffffff; 1068 | font-size: 0.9em; 1069 | font-weight: 600; 1070 | padding: 0 0.75em 0.75em 0.75em; 1071 | text-align: left; 1072 | } 1073 | 1074 | table thead { 1075 | border-bottom: solid 2px #ffffff; 1076 | } 1077 | 1078 | table tfoot { 1079 | border-top: solid 2px #ffffff; 1080 | } 1081 | 1082 | table.alt { 1083 | border-collapse: separate; 1084 | } 1085 | 1086 | table.alt tbody tr td { 1087 | border: solid 1px #ffffff; 1088 | border-left-width: 0; 1089 | border-top-width: 0; 1090 | } 1091 | 1092 | table.alt tbody tr td:first-of-type { 1093 | border-left-width: 1px; 1094 | } 1095 | 1096 | table.alt tbody tr:first-of-type td { 1097 | border-top-width: 1px; 1098 | } 1099 | 1100 | table.alt thead { 1101 | border-bottom: 0; 1102 | } 1103 | 1104 | table.alt tfoot { 1105 | border-top: 0; 1106 | } 1107 | 1108 | /* Button */ 1109 | 1110 | input[type="submit"], 1111 | input[type="reset"], 1112 | input[type="button"], 1113 | button, 1114 | .button { 1115 | -moz-appearance: none; 1116 | -webkit-appearance: none; 1117 | -ms-appearance: none; 1118 | appearance: none; 1119 | -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; 1120 | -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; 1121 | -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; 1122 | transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; 1123 | background-color: transparent; 1124 | border-radius: 4px; 1125 | border: 0; 1126 | box-shadow: inset 0 0 0 1px #ffffff; 1127 | color: #ffffff !important; 1128 | cursor: pointer; 1129 | display: inline-block; 1130 | font-size: 0.8rem; 1131 | font-weight: 300; 1132 | height: 2.75rem; 1133 | letter-spacing: 0.2rem; 1134 | line-height: 2.75rem; 1135 | outline: 0; 1136 | padding: 0 1.25rem 0 1.35rem; 1137 | text-align: center; 1138 | text-decoration: none; 1139 | text-transform: uppercase; 1140 | white-space: nowrap; 1141 | } 1142 | 1143 | input[type="submit"]:hover, 1144 | input[type="reset"]:hover, 1145 | input[type="button"]:hover, 1146 | button:hover, 1147 | .button:hover { 1148 | background-color: rgba(255, 255, 255, 0.075); 1149 | } 1150 | 1151 | input[type="submit"]:active, 1152 | input[type="reset"]:active, 1153 | input[type="button"]:active, 1154 | button:active, 1155 | .button:active { 1156 | background-color: rgba(255, 255, 255, 0.175); 1157 | } 1158 | 1159 | input[type="submit"].icon:before, 1160 | input[type="reset"].icon:before, 1161 | input[type="button"].icon:before, 1162 | button.icon:before, 1163 | .button.icon:before { 1164 | margin-right: 0.5em; 1165 | } 1166 | 1167 | input[type="submit"].fit, 1168 | input[type="reset"].fit, 1169 | input[type="button"].fit, 1170 | button.fit, 1171 | .button.fit { 1172 | width: 100%; 1173 | } 1174 | 1175 | input[type="submit"].small, 1176 | input[type="reset"].small, 1177 | input[type="button"].small, 1178 | button.small, 1179 | .button.small { 1180 | font-size: 0.6rem; 1181 | height: 2.0625rem; 1182 | line-height: 2.0625rem; 1183 | } 1184 | 1185 | input[type="submit"].primary, 1186 | input[type="reset"].primary, 1187 | input[type="button"].primary, 1188 | button.primary, 1189 | .button.primary { 1190 | background-color: #ffffff; 1191 | color: #1b1f22 !important; 1192 | font-weight: 600; 1193 | } 1194 | 1195 | input[type="submit"].disabled, 1196 | input[type="submit"]:disabled, 1197 | input[type="reset"].disabled, 1198 | input[type="reset"]:disabled, 1199 | input[type="button"].disabled, 1200 | input[type="button"]:disabled, 1201 | button.disabled, 1202 | button:disabled, 1203 | .button.disabled, 1204 | .button:disabled { 1205 | pointer-events: none; 1206 | cursor: default; 1207 | opacity: 0.25; 1208 | } 1209 | 1210 | input[type="submit"], 1211 | input[type="reset"], 1212 | input[type="button"], 1213 | button { 1214 | line-height: calc(2.75rem - 2px); 1215 | } 1216 | --------------------------------------------------------------------------------