...
 
Commits (5)
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#00aba9</TileColor>
</tile>
</msapplication>
</browserconfig>
public/favicon.ico

3.08 KB | W: | H:

public/favicon.ico

14.7 KB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
......@@ -22,12 +22,16 @@
<meta property="twitter:description" content="Odliczanie do wakacji 2020 z opcją pominięcia dni wolnych.">
<meta property="twitter:image" content="https://romanowski.me/wakacje/background.png">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="apple-mobile-web-app-title" content="Odliczanie do wakacji 2020">
<meta name="application-name" content="Odliczanie do wakacji 2020">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#b0d6ae">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
......
{
"short_name": "Wakacje",
"name": "Odliczanie do wakacji 2020",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1595 6990 c-98 -20 -165 -65 -165 -112 0 -37 41 -93 96 -133 30 -22
127 -77 215 -122 635 -325 1025 -593 1218 -838 48 -60 111 -164 111 -182 0 -6
-26 -5 -67 3 -38 7 -97 16 -133 19 -36 4 -76 8 -90 11 -59 10 -258 18 -425 18
-294 0 -547 -26 -770 -79 -38 -9 -80 -18 -91 -21 -82 -16 -331 -99 -424 -141
-306 -138 -534 -292 -723 -488 -61 -63 -107 -146 -107 -190 0 -39 29 -82 64
-97 50 -21 208 -15 296 11 41 12 82 24 90 26 89 24 154 41 325 85 110 28 209
53 220 56 11 2 74 15 140 29 165 36 357 72 500 95 105 16 158 24 265 35 14 2
48 6 75 9 28 3 73 9 100 12 90 9 529 12 585 3 30 -4 75 -10 100 -13 100 -10
239 -47 312 -81 l36 -18 -37 -30 c-39 -33 -256 -251 -306 -308 -67 -75 -235
-289 -302 -384 -213 -301 -414 -671 -544 -1000 -22 -55 -44 -109 -49 -120 -13
-29 -97 -283 -111 -335 -7 -25 -14 -49 -15 -55 -12 -37 -95 -376 -99 -405 -3
-19 -12 -71 -20 -115 -18 -99 -22 -124 -31 -200 -3 -33 -8 -67 -9 -75 -3 -15
-13 -108 -20 -180 -28 -286 -23 -778 10 -1074 35 -315 272 -591 516 -602 109
-5 202 36 277 122 41 47 102 161 117 219 5 17 9 35 11 40 16 55 26 159 29 305
4 182 14 429 20 490 2 19 6 73 10 120 3 47 10 119 15 160 5 41 12 102 15 135
3 33 11 92 16 130 5 39 12 84 14 100 14 100 41 256 76 440 23 116 43 221 45
234 12 60 117 478 147 586 92 322 177 586 277 855 18 47 39 105 47 130 9 25
20 49 24 55 5 5 9 15 9 23 0 8 6 28 14 45 13 28 90 213 164 394 20 50 28 61
39 52 15 -13 131 -182 193 -284 216 -351 379 -695 480 -1012 48 -149 51 -159
89 -319 45 -188 102 -282 162 -267 18 5 79 70 79 84 0 4 7 23 15 43 8 20 15
37 15 38 0 2 7 26 16 53 19 60 43 165 50 220 3 22 8 51 11 65 3 14 7 104 8
200 3 152 -1 231 -19 340 -7 45 -46 205 -55 225 -4 11 -16 45 -26 75 -10 30
-42 106 -71 168 -29 62 -50 111 -46 109 305 -167 877 -547 1162 -773 61 -49
260 -212 289 -238 19 -17 58 -51 86 -76 27 -24 129 -122 225 -216 208 -205
196 -194 240 -221 151 -90 197 19 121 287 -219 773 -735 1394 -1455 1750 -286
141 -513 221 -846 298 l-125 29 60 28 c129 58 476 165 615 189 14 2 63 11 110
19 84 16 122 21 230 32 30 4 73 8 95 10 22 3 126 5 230 5 105 0 217 5 251 11
111 19 175 73 160 135 -13 50 -98 122 -210 175 -87 41 -248 102 -308 115 -10
2 -26 6 -35 8 -82 20 -121 27 -166 32 -29 3 -59 7 -67 9 -33 9 -192 18 -315
19 -124 0 -353 -12 -365 -19 -3 -1 -33 -6 -67 -10 -35 -4 -73 -8 -85 -10 -40
-5 -151 -25 -223 -41 -38 -8 -79 -16 -91 -18 -21 -4 -246 -62 -275 -72 -13 -3
-28 16 -62 78 -318 581 -900 966 -1611 1064 -122 17 -508 26 -571 14z"/>
</g>
</svg>
{
"name": "Odliczanie do wakacji 2020",
"short_name": "Odliczanie do wakacji 2020",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#b0d6ae",
"background_color": "#b0d6ae",
"display": "standalone"
}
......@@ -4,11 +4,9 @@ import styled from 'styled-components';
import Heading from '../Heading';
import Countdown from '../Countdown';
import palm from '../../img/palm.svg';
import Handwriting from '../Typography/Handwriting/Handwriting';
import { currentTheme, device } from '../../utils/Theme';
import background from '../../img/background.png';
import Link from '../Link';
import { authorWebsite } from '../../utils/Config';
import Footer from '../Footer';
const StyledApp = styled.div`
background-color: ${currentTheme.backgroundColor};
......@@ -37,14 +35,6 @@ const Palm = styled.img`
margin-top: 1rem;
`;
const Footer = styled.footer`
bottom: 16px;
font-size: calc(.5em + 8px);
left: 18px;
position: absolute;
z-index: 1;
`;
function App () {
return (
<StyledApp>
......@@ -57,13 +47,7 @@ function App () {
<Countdown/>
</main>
</Container>
<Footer>
<Link to={authorWebsite}>
<Handwriting letterSpacing={0.15}>
crafted with &lt;3 by romanowski.me
</Handwriting>
</Link>
</Footer>
<Footer/>
<BackgroundShapes />
</StyledApp>
);
......
import React, { useState } from 'react';
import styled from 'styled-components';
import { authorWebsite } from '../../utils/Config';
import Handwriting from '../Typography/Handwriting/Handwriting';
import Link from '../Link';
import Modal from '../Modal/Modal';
import Text from '../Typography/Text';
const FooterComponent = styled.footer`
bottom: 16px;
font-size: calc(.5em + 8px);
left: 18px;
position: absolute;
z-index: 1;
`;
const List = styled(Text)`
list-style: none;
`;
const ListItem = styled.li`
line-height: 1.5;
`;
const Footer = (props) => {
const [showModal, setShowModal] = useState(false);
const handleCreditsClick = () => setShowModal(!showModal);
const handleModalClose = () => setShowModal(false);
return (
<FooterComponent {...props}>
<Handwriting fontSize={0.8} letterSpacing={0.15}>
&lt;/&gt; with &lt;3 by <Link to={authorWebsite}>romanowski.me</Link> &sdot;&nbsp;
<span onClick={handleCreditsClick}>credits</span>
</Handwriting>
<Modal show={showModal} onClick={handleModalClose}>
<Modal.Title>
credits
</Modal.Title>
<Modal.Content>
<List $as="ul" letterSpacing={0.15}>
<ListItem>icons by <Link to="https://www.flaticon.com/authors/freepik">freepik</Link></ListItem>
<ListItem>images by <Link to="https://pixabay.com/">pixabay.com</Link></ListItem>
</List>
</Modal.Content>
</Modal>
</FooterComponent>);
};
export default Footer;
export { default } from './Footer';
......@@ -4,6 +4,7 @@ import styled from 'styled-components';
import { currentTheme } from '../../utils/Theme';
const Component = styled.a`
color: ${currentTheme.textColor};
text-decoration: ${currentTheme.linkDecorations};
`;
......
import React from 'react';
import styled from 'styled-components';
import { currentTheme } from '../../utils/Theme';
import PropTypes from 'prop-types';
import ModalHeader from './ModalHeader';
import ModalContent from './ModalContent';
const Container = styled.div`
background-color: ${currentTheme.secondaryColor};
height: 100%;
left: 0;
position: fixed;
top: ${props => props.show ? '0' : '100%'};
transition: top .2s ease-out;
width: 100%;
`;
const ContentWrapper = styled.div`
margin: 0 auto;
max-width: 1000px;
width: 100%;
`;
const Modal = ({ onClose, children, ...props }) => (
<Container {...props}>
<ContentWrapper>
{children}
</ContentWrapper>
</Container>
);
Modal.propTypes = {
show: PropTypes.bool,
onClose: PropTypes.func,
children: PropTypes.node
};
Modal.Title = ModalHeader;
Modal.Content = ModalContent;
export default Modal;
import styled from 'styled-components';
const ModalContent = styled.div`
padding: 1em;
`;
export default ModalContent;
export { default } from './ModalContent';
import styled from 'styled-components';
import Handwriting from '../../Typography/Handwriting/Handwriting';
import React from 'react';
import PropTypes from 'prop-types';
import { currentTheme } from '../../../utils/Theme';
import Text from '../../Typography/Text';
const Container = styled.div`
align-items: flex-start;
display: flex;
justify-content: space-between;
padding: 1em;
`;
const Title = styled(Handwriting)`
margin: 0;
text-align: center;
`;
const CloseButton = styled.button`
background: transparent;
border: none;
color: ${currentTheme.textColor};
cursor: pointer;
padding: 1em;
transform: scale(.8);
transition: transform .2s linear;
margin: -1em -1em -1em auto;
&:focus {
outline: none;
}
&:hover {
transform: scale(1);
}
`;
const ModalHeader = ({ children, ...props }) => (
<Container>
<Title $as="h3" fontSize={3} letterSpacing={0.05} {...props}>
{children}
</Title>
<CloseButton>
<Text fontSize={3} aria-hidden="true">x</Text>
<span className="sr-only">Close</span>
</CloseButton>
</Container>
);
ModalHeader.propTypes = {
children: PropTypes.node
};
export default ModalHeader;
export { default } from './ModalHeader';
export { default } from './Modal';
......@@ -9,3 +9,15 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sr-only {
border-width: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
......@@ -2,6 +2,7 @@ export const themes = {
default: {
textColor: '#ffffff',
backgroundColor: '#b0d6ae',
secondaryColor: '#ffcf99',
linkColor: '#ffffff',
linkDecorations: 'none'
}
......