├── .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 |     <SiteFooter id="footer" isPreload={!isPageLoaded} state={transitionState}>
35 |       <p className="copyright">
36 |         &copy; Untitled. Design: <a href="https://html5up.net">HTML5 UP</a>.
37 |         Images: <a href="https://unsplash.com">Unsplash</a>.
38 |       </p>
39 |     </SiteFooter>
40 |   );
41 | };
42 | 
43 | export default connect(Footer);
44 | 


--------------------------------------------------------------------------------
/src/components/header.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { connect, styled } from "frontity";
  3 | import Nav from "./nav";
  4 | 
  5 | const Header = ({ state, transitionState }) => {
  6 |   const { isPageLoaded } = state.theme;
  7 | 
  8 |   return (
  9 |     <SiteHeader id="header" isPreload={!isPageLoaded} state={transitionState}>
 10 |       <div className="logo">
 11 |         <span className="icon fa-gem"></span>
 12 |       </div>
 13 |       <div className="content">
 14 |         <div className="inner">
 15 |           <h1>{state.frontity.title}</h1>
 16 |           {/* <p>{state.frontity.description}</p> */}
 17 |           <p>
 18 |             A fully responsive Frontity theme designed by{" "}
 19 |             <a href="https://html5up.net">HTML5 UP</a>,<br /> implemented by{" "}
 20 |             <a href="https://www.matnard.com">Matnard</a> and released <br />
 21 |             for free under the Creative Commons license.
 22 |           </p>
 23 |         </div>
 24 |       </div>
 25 |       <Nav />
 26 |     </SiteHeader>
 27 |   );
 28 | };
 29 | 
 30 | const SiteHeader = styled.header`
 31 | display: ${({ state }) => (state === "exited" ? "none" : "flex")};
 32 | flex-direction: column;
 33 | align-items: center;
 34 | transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
 35 | background-image: radial-gradient(
 36 |   rgba(0, 0, 0, 0.25) 25%,
 37 |   rgba(0, 0, 0, 0) 55%
 38 |   );
 39 |   max-width: 100%;
 40 |   text-align: center;
 41 |   
 42 |   ${({ state }) =>
 43 |     state === "exiting" || state === "entering"
 44 |       ? "transform: scale(0.95);"
 45 |       : ""}
 46 |   ${({ state }) =>
 47 |     state === "exiting" || state === "entering" ? "filter: blur(0.1rem);" : ""}
 48 |   
 49 |   opacity: ${({ state }) =>
 50 |     state === "exiting" || state === "entering" ? 0 : 1};
 51 |   
 52 |   
 53 |   ${({ isPreload }) => (isPreload ? "filter: blur(0.125rem);" : "")}
 54 |   
 55 |   > * {
 56 |     transition: opacity 0.325s ease-in-out;
 57 |     position: relative;
 58 |     margin-top: 3.5rem;
 59 |     opacity: ${({ isPreload }) => (isPreload ? 0 : 1)};
 60 |   }
 61 |   
 62 |   > *:before {
 63 |     content: "";
 64 |     display: block;
 65 |     position: absolute;
 66 |     top: calc(-3.5rem - 1px);
 67 |     left: calc(50% - 1px);
 68 |     width: 1px;
 69 |     height: calc(3.5rem + 1px);
 70 |     background: #ffffff;
 71 |   }
 72 |   
 73 |   > :first-child {
 74 |     margin-top: 0;
 75 |   }
 76 |   
 77 |   > :first-child:before {
 78 |     display: none;
 79 |   }
 80 |   
 81 |   .logo {
 82 |     width: 5.5rem;
 83 |     height: 5.5rem;
 84 |     line-height: 5.5rem;
 85 |     border: solid 1px #ffffff;
 86 |     border-radius: 100%;
 87 |   }
 88 |   
 89 |   .logo .icon:before {
 90 |     font-size: 2rem;
 91 |   }
 92 |   
 93 |   .content {
 94 |     border-style: solid;
 95 |     border-color: #ffffff;
 96 |     border-top-width: 1px;
 97 |     border-bottom-width: 1px;
 98 |     max-width: 100%;
 99 |   }
100 |   
101 |   .content .inner {
102 |     transition: max-height 0.75s ease, padding 0.75s ease,
103 |     opacity 0.325s ease-in-out;
104 |     transition-delay: 0.25s;
105 |     padding: 3rem 2rem;
106 |     max-height: 40rem;
107 |     overflow: hidden;
108 | 
109 |     ${(props) => (props.isPreload ? "max-height: 0;" : "")}
110 |     ${(props) => (props.isPreload ? "padding-top: 0;" : "")}
111 |     ${(props) => (props.isPreload ? "padding-bottom: 0;" : "")}
112 |     ${(props) => (props.isPreload ? "opacity: 0;" : "")}			
113 |   }
114 |   
115 |   .content .inner > :last-child {
116 |     margin-bottom: 0;
117 |   }
118 | 
119 |   .content p {
120 |     text-transform: uppercase;
121 |     letter-spacing: 0.2rem;
122 |     font-size: 0.8rem;
123 |     line-height: 2;
124 |   }
125 |   `;
126 | 
127 | export default connect(Header);
128 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import Bg from "./bg";
 3 | import Header from "./header";
 4 | import Main from "./main";
 5 | import Footer from "./footer";
 6 | import Title from "./title";
 7 | import Wrapper from "./wrapper";
 8 | import Post from "./post";
 9 | import { connect, Global, css, Head } from "frontity";
10 | import Switch from "@frontity/components/switch";
11 | import mainCss from "../styles.css";
12 | import { Transition } from "react-transition-group";
13 | 
14 | const Theme = ({ state, actions }) => {
15 |   const { setIsPageLoaded } = actions.theme;
16 |   useEffect(() => {
17 |     setIsPageLoaded();
18 |   }, []);
19 | 
20 |   const data = state.source.get(state.router.link);
21 |   const [showMain, setShowMain] = useState(!data.isHome);
22 |   const TIMEOUT = 325;
23 |   return (
24 |     <>
25 |       <Global styles={css(mainCss)} />
26 |       <Title />
27 |       <Head>
28 |         <meta name="description" content={state.frontity.description} />
29 |         <html lang="en" />
30 |       </Head>
31 |       <Wrapper>
32 |         <Transition
33 |           in={data.isHome}
34 |           timeout={TIMEOUT}
35 |           onEntering={() => setShowMain(false)}
36 |           onExited={() => setShowMain(true)}
37 |         >
38 |           {(transitionState) => <Header transitionState={transitionState} />}
39 |         </Transition>
40 | 
41 |         <Main isDisplayed={showMain}>
42 |           <Switch>
43 |             <Post when={data.isPostType} timeout={TIMEOUT} />
44 |           </Switch>
45 |         </Main>
46 | 
47 |         <Transition in={data.isHome} timeout={TIMEOUT}>
48 |           {(transitionState) => <Footer transitionState={transitionState} />}
49 |         </Transition>
50 |       </Wrapper>
51 |       <Bg isBlurred={!data.isHome} isPreload={!state.theme.isPageLoaded} />
52 |     </>
53 |   );
54 | };
55 | 
56 | export default connect(Theme);
57 | 


--------------------------------------------------------------------------------
/src/components/link.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { connect } from "frontity";
 3 | 
 4 | const Link = ({
 5 |   actions,
 6 |   link,
 7 |   className,
 8 |   children,
 9 |   "aria-current": ariaCurrent,
10 | }) => {
11 |   const onClick = (event) => {
12 |     // Do nothing if it's an external link
13 |     if (link.startsWith("http")) return;
14 | 
15 |     event.preventDefault();
16 |     // Set the router to the new url.
17 |     actions.router.set(link);
18 |     // Scroll the page to the top
19 |     window.scrollTo(0, 0);
20 |   };
21 | 
22 |   return (
23 |     <a
24 |       href={link}
25 |       onClick={onClick}
26 |       className={className}
27 |       aria-current={ariaCurrent}
28 |     >
29 |       {children}
30 |     </a>
31 |   );
32 | };
33 | 
34 | export default connect(Link);
35 | 


--------------------------------------------------------------------------------
/src/components/main.js:
--------------------------------------------------------------------------------
 1 | import { styled } from "frontity";
 2 | 
 3 | const Main = styled.div`
 4 |   flex-grow: 1;
 5 |   flex-shrink: 1;
 6 |   display: ${(props) => (props.isDisplayed ? "flex" : "none")};
 7 |   align-items: center;
 8 |   justify-content: center;
 9 |   flex-direction: column;
10 |   position: relative;
11 |   max-width: 100%;
12 |   z-index: 3;
13 | `;
14 | 
15 | export default Main;
16 | 


--------------------------------------------------------------------------------
/src/components/nav.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { connect, styled } from "frontity";
  3 | import Link from "./link";
  4 | 
  5 | const Nav = ({ state }) => {
  6 |   const menuItems = state.theme.menu;
  7 |   const areItemsEven = menuItems.length % 2 == 0;
  8 | 
  9 |   return (
 10 |     <Navigation className="use-middle">
 11 |       <List className={areItemsEven ? "use-middle" : ""}>
 12 |         {menuItems.map(([label, link], i) => {
 13 |           const isCurrentPage = state.router.link === link;
 14 |           return (
 15 |             <li
 16 |               key={link}
 17 |               className={
 18 |                 areItemsEven && i === menuItems.length / 2 ? "is-middle" : ""
 19 |               }
 20 |             >
 21 |               <Link
 22 |                 link={link}
 23 |                 aria-current={isCurrentPage ? "page" : undefined}
 24 |               >
 25 |                 {label}
 26 |               </Link>
 27 |             </li>
 28 |           );
 29 |         })}
 30 |       </List>
 31 |     </Navigation>
 32 |   );
 33 | };
 34 | 
 35 | const Navigation = styled.nav`
 36 |   &:after {
 37 |     content: "";
 38 |     display: block;
 39 |     position: absolute;
 40 |     top: 0;
 41 |     left: calc(50% - 1px);
 42 |     width: 1px;
 43 |     height: 100%;
 44 |     background: #ffffff;
 45 |   }
 46 | 
 47 |   @media (max-width: 480px) {
 48 |     &.use-middle:after {
 49 |       display: none;
 50 |     }
 51 |   }
 52 | `;
 53 | 
 54 | const List = styled.ul`
 55 |   display: flex;
 56 |   margin-bottom: 0;
 57 |   list-style: none;
 58 |   padding-left: 0;
 59 |   border: solid 1px #ffffff;
 60 |   border-radius: 4px;
 61 | 
 62 |   li {
 63 |     padding-left: 0;
 64 |     border-left: solid 1px #ffffff;
 65 | 
 66 |     &:first-of-type {
 67 |       border-left: 0;
 68 |     }
 69 | 
 70 |     &.is-middle {
 71 |       border-left: 0;
 72 |     }
 73 | 
 74 |     a {
 75 |       display: block;
 76 |       min-width: 7.5rem;
 77 |       height: 2.75rem;
 78 |       line-height: 2.75rem;
 79 |       padding: 0 1.25rem 0 1.45rem;
 80 |       text-transform: uppercase;
 81 |       letter-spacing: 0.2rem;
 82 |       font-size: 0.8rem;
 83 |       border-bottom: 0;
 84 | 
 85 |       &:hover {
 86 |         background-color: rgba(255, 255, 255, 0.075);
 87 |       }
 88 | 
 89 |       &:active {
 90 |         background-color: rgba(255, 255, 255, 0.175);
 91 |       }
 92 |     }
 93 |   }
 94 | 
 95 |   @media (max-width: 480px) {
 96 |     flex-direction: column;
 97 |     min-width: 10rem;
 98 |     max-width: 100%;
 99 | 
100 |     li {
101 |       border-left: 0;
102 |       border-top: solid 1px #ffffff;
103 | 
104 |       &:first-child {
105 |         border-top: 0;
106 |       }
107 | 
108 |       a {
109 |         height: 3rem;
110 |         line-height: 3rem;
111 |         min-width: 0;
112 |         width: 100%;
113 |       }
114 |     }
115 |   }
116 | `;
117 | 
118 | export default connect(Nav);
119 | 


--------------------------------------------------------------------------------
/src/components/post.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { Transition } from "react-transition-group";
  3 | import { connect, styled } from "frontity";
  4 | 
  5 | const Post = (props) => {
  6 |   const { libraries, actions, state, timeout } = props;
  7 | 
  8 |   // Get information about the current URL.
  9 |   const data = state.source.get(state.router.link);
 10 |   console.log(data);
 11 |   const post = state.source[data.type][data.id];
 12 | 
 13 |   const [triggered, setTriggered] = useState(true);
 14 | 
 15 |   const Html2React = libraries.html2react.Component;
 16 |   const onClose = () => {
 17 |     setTriggered(false);
 18 |   };
 19 | 
 20 |   const onExited = () => {
 21 |     actions.router.set("/");
 22 |   };
 23 | 
 24 |   useEffect(() => {
 25 |     actions.source.fetch("/");
 26 |   }, []);
 27 | 
 28 |   return (
 29 |     <Transition
 30 |       appear={true}
 31 |       in={triggered}
 32 |       timeout={timeout}
 33 |       onExited={onExited}
 34 |     >
 35 |       {(transitionState) => (
 36 |         <Article state={transitionState}>
 37 |           <h2
 38 |             className="major"
 39 |             dangerouslySetInnerHTML={{ __html: post.title.rendered }}
 40 |           />
 41 |           <Html2React html={post.content.rendered} />
 42 |           <Close onClick={onClose} role="button" />
 43 |         </Article>
 44 |       )}
 45 |     </Transition>
 46 |   );
 47 | };
 48 | 
 49 | // Connect the Post to gain access to `state` as a prop
 50 | export default connect(Post);
 51 | 
 52 | const Article = styled.article`
 53 |   display: ${({ state }) => (state === "exited" ? "none" : "block")};
 54 |   transform: translateY(
 55 |     ${({ state }) =>
 56 |       state === "entering" || state === "exiting" ? "0.25rem" : "0"}
 57 |   );
 58 |   transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out;
 59 |   padding: 4.5rem 2.5rem 1.5rem 2.5rem;
 60 |   position: relative;
 61 |   width: 40rem;
 62 |   max-width: 100%;
 63 |   background-color: rgba(27, 31, 34, 0.85);
 64 |   border-radius: 4px;
 65 |   opacity: ${({ state }) =>
 66 |     state === "entering" || state === "exiting" ? "0" : "1"};
 67 | 
 68 |   @media screen and (max-width: 736px) {
 69 |     padding: 3.5rem 2rem 0.5rem 2rem;
 70 |   }
 71 | 
 72 |   @media screen and (max-width: 480px) {
 73 |     padding: 3rem 1.5rem 0.5rem 1.5rem;
 74 |   }
 75 | 
 76 |   img {
 77 |     width: 100%;
 78 |   }
 79 | `;
 80 | 
 81 | const Close = styled.div`
 82 |   display: block;
 83 |   position: absolute;
 84 |   top: 0;
 85 |   right: 0;
 86 |   width: 4rem;
 87 |   height: 4rem;
 88 |   cursor: pointer;
 89 |   text-indent: 4rem;
 90 |   overflow: hidden;
 91 |   white-space: nowrap;
 92 | 
 93 |   &:before {
 94 |     transition: background-color 0.2s ease-in-out;
 95 |     content: "";
 96 |     display: block;
 97 |     position: absolute;
 98 |     top: 0.75rem;
 99 |     left: 0.75rem;
100 |     width: 2.5rem;
101 |     height: 2.5rem;
102 |     border-radius: 100%;
103 |     background-position: center;
104 |     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
105 |     background-size: 20px 20px;
106 |     background-repeat: no-repeat;
107 |   }
108 | 
109 |   &:hover:before {
110 |     background-color: rgba(255, 255, 255, 0.075);
111 |   }
112 | 
113 |   &:active:before {
114 |     background-color: rgba(255, 255, 255, 0.175);
115 |   }
116 | 
117 |   @media screen and (max-width: 736px) {
118 |     &:before {
119 |       top: 0.875rem;
120 |       left: 0.875rem;
121 |       width: 2.25rem;
122 |       height: 2.25rem;
123 |       background-size: 14px 14px;
124 |     }
125 |   }
126 | `;
127 | 


--------------------------------------------------------------------------------
/src/components/title.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Head, connect, decode } from "frontity";
 3 | 
 4 | const Title = ({ state }) => {
 5 |   // Get data about the current URL.
 6 |   const data = state.source.get(state.router.link);
 7 |   // Set the default title.
 8 |   let title = state.frontity.title;
 9 | 
10 |   if (data.isTaxonomy) {
11 |     // Add titles to taxonomies, like "Category: Nature - Blog Name" or "Tag: Japan - Blog Name".
12 |     // 1. Get the taxonomy entity from the state to get its taxonomy term and name.
13 |     const { taxonomy, name } = state.source[data.taxonomy][data.id];
14 |     // 2. Uppercase first letter of the taxonomy term (from "category" to "Category").
15 |     const taxonomyCapitalized =
16 |       taxonomy.charAt(0).toUpperCase() + taxonomy.slice(1);
17 |     // 3. Render the proper title.
18 |     title = `${taxonomyCapitalized}: ${decode(name)} - ${state.frontity.title}`;
19 |   } else if (data.isAuthor) {
20 |     // Add titles to authors, like "Author: Jon Snow - Blog Name".
21 |     // 1. Get the author entity from the state to get its name.
22 |     const { name } = state.source.author[data.id];
23 |     // 2. Render the proper title.
24 |     title = `Author: ${decode(name)} - ${state.frontity.title}`;
25 |   } else if (data.isPostType) {
26 |     // Add titles to posts and pages, using the title and ending with the Blog Name.
27 |     // 1. Get the post entity from the state and get its title.
28 |     const postTitle = state.source[data.type][data.id].title.rendered;
29 |     // 2. Remove any HTML tags found in the title.
30 |     const cleanTitle = decode(postTitle);
31 |     // 3. Render the proper title.
32 |     title = `${cleanTitle} - ${state.frontity.title}`;
33 |   } else if (data.is404) {
34 |     // Add titles to 404's.
35 |     title = `404 Not Found - ${state.frontity.title}`;
36 |   }
37 | 
38 |   return (
39 |     <Head>
40 |       <title>{title}</title>
41 |     </Head>
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 | 


--------------------------------------------------------------------------------