├── .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 | 35 |

36 | © Untitled. Design: HTML5 UP. 37 | Images: Unsplash. 38 |

39 |
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 | 10 |
11 | 12 |
13 |
14 |
15 |

{state.frontity.title}

16 | {/*

{state.frontity.description}

*/} 17 |

18 | A fully responsive Frontity theme designed by{" "} 19 | HTML5 UP,
implemented by{" "} 20 | Matnard and released
21 | for free under the Creative Commons license. 22 |

23 |
24 |
25 |