{profile ?
;
5 |
6 | export default HeaderMenu;
7 |
--------------------------------------------------------------------------------
/src/components/Header/HeaderProfileButton.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const HeaderProfileButton = ({ profile }) => (
4 | <>
5 |
6 | {profile.firstname} {profile.lastname}
7 |
8 | {profile.profile &&
20 | 
22 |
23 |
24 | {profile && !isMobile &&
5 |
30 | );
31 |
32 | const MapLoader = ({ title = '' }) => (
33 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
34 |
41 | );
42 |
43 | export default MapLoader;
44 |
--------------------------------------------------------------------------------
/src/components/Map/Map.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from 'react';
2 | import _ from 'lodash';
3 | import { getMedian } from '../../helpers/mathHelpers';
4 | import Polyline from './Polyline';
5 | import MenuContext from '../../contexts/MenuContext';
6 |
7 | let Leaflet;
8 |
9 | // Fix for Heroku build (Leaflet wants a window object...)
10 | if (typeof window !== 'undefined') {
11 | Leaflet = require('react-leaflet');
12 | }
13 |
14 | const Map = ({ routes, activities, isLoading }) => {
15 | const { options } = useContext(MenuContext);
16 | const [selectedId, setSelectedId] = useState([]);
17 | const [center, setCenter] = useState([46.8139, -71.29]);
18 |
19 | useEffect(() => {
20 | if (!_.isEmpty(activities) && activities.length > 0) {
21 | const centerLat = getMedian(activities.map(x => _.get(x, 'polyline[0][0]')));
22 | const centerLong = getMedian(activities.map(x => _.get(x, 'polyline[0][1]')));
23 |
24 | if (centerLat && centerLong) {
25 | setCenter([centerLat, centerLong]);
26 | }
27 | }
28 | }, [isLoading]);
29 |
30 | const selected = activities.find(({ id }) => id === selectedId) || routes.find(({ id }) => id === selectedId);
31 |
32 | return (
33 | <>
34 | {typeof window !== 'undefined' && (
35 |
35 |
37 |
38 | {title || "Hang on, we're fetching your activities!"}
39 |
40 | 29 | {isRoute ? 'Creation Date' : 'Date'}: {moment(item.start_date).format('YYYY-MM-DD')} 30 |
31 | Distance: {convertKm(item.distance / 1000, unit, 2)} 32 |
33 | Elevation gain: {convertMeters(isRoute ? item.elevation_gain : item.total_elevation_gain, unit)} 34 |
31 |
34 |
35 |
19 |
20 | Feedback / Suggestion
29 | );
30 | };
31 |
32 | export default Footer;
33 |
--------------------------------------------------------------------------------
/src/components/Menu/Blocks/MapOptions.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FaCheck, FaTimes } from 'react-icons/fa';
3 | import { CirclePicker } from 'react-color';
4 | import InputRange from 'react-input-range';
5 | import classNames from 'classnames';
6 | import Collapsable from '../Collapsable';
7 |
8 | const MapOptions = ({ mapConfig, setMapOption }) => {
9 | const isImperial = mapConfig.unit === 'imperial';
10 |
11 | const handleHeatmapClick = () => setMapOption({ heatMapMode: !mapConfig.heatMapMode });
12 |
13 | const handleToggleUnit = unit => setMapOption({ unit });
14 |
15 | const handleBikePathsClick = () => setMapOption({ showBikePaths: !mapConfig.showBikePaths });
16 |
17 | const handleColorClick = polylineColor => setMapOption({ polylineColor });
18 |
19 | const handleWeightClick = polylineWeight => setMapOption({ polylineWeight });
20 |
21 | return (
22 |
38 | Line Color
39 | handleColorClick(hex)}
46 | />
47 |
48 |
49 | Line Weight
50 |
54 |
57 |
60 |
51 | handleWeightClick(polylineWeight)} formatLabel={() => ''} />
52 |
53 |
5 | No Activities to display...
6 |
7 | );
8 |
9 | export default NoActivities;
10 |
--------------------------------------------------------------------------------
/src/components/Menu/Blocks/RoutesOptions.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import InputRange from 'react-input-range';
3 | import { FaCheck, FaTimes } from 'react-icons/fa';
4 | import { CirclePicker } from 'react-color';
5 |
6 | import Collapsable from '../Collapsable';
7 |
8 | const RoutesOptions = ({ mapConfig, setMapOption }) => {
9 | const handleRoutesClick = () => setMapOption({ showRoutes: !mapConfig.showRoutes });
10 |
11 | const handleColorClick = routesLineColor => setMapOption({ routesLineColor });
12 |
13 | const handleWeightClick = routesLineWeight => setMapOption({ routesLineWeight });
14 |
15 | return (
16 |
21 | Line Color
22 | handleColorClick(hex)}
29 | />
30 |
31 |
32 | Line Weight
33 |
37 |
40 |
34 | handleWeightClick(routesLineWeight)} formatLabel={() => ''} />
35 |
36 | 23 |
14 |
18 |
19 |
21 |
22 | );
23 | }
24 |
25 | return (
26 | {children}
20 |
27 |
31 | );
32 | };
33 |
34 | export default Collapsable;
35 |
--------------------------------------------------------------------------------
/src/components/Menu/Menu.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect } from 'react';
2 | import _ from 'lodash';
3 |
4 | import ActivityTypes from './Blocks/ActivityTypes.jsx';
5 | import Footer from './Blocks/Footer';
6 | import MapOptions from './Blocks/MapOptions';
7 | import MenuContext from '../../contexts/MenuContext';
8 | import NoActivities from './Blocks/NoActivities';
9 | import Seasons from './Blocks/Seasons';
10 | import { getAllActivityTypes } from '../../helpers/activityHelpers';
11 | import { usePrevious } from '../../helpers/hooks';
12 | import MenuWrapper from './MenuWrapper';
13 | import Dates from './Blocks/Dates';
14 | import Stats from './Blocks/Stats';
15 | import RoutesOptions from './Blocks/RoutesOptions.jsx';
16 |
17 | const Menu = ({ activities, shownActivities }) => {
18 | const { initializeMenu, toggleActivityTypeDisplay, isMenuOpen, setOption, setMapOption, options, setDateConfig, toggleSeasonDisplay } = useContext(MenuContext);
19 | const userActivityTypes = getAllActivityTypes(activities);
20 |
21 | const prevActivityTypes = usePrevious(userActivityTypes);
22 |
23 | useEffect(() => {
24 | const userActivityLoaded = activities && userActivityTypes && prevActivityTypes;
25 | const userActivityTypesChanged = !_.isEqual(prevActivityTypes, userActivityTypes);
26 |
27 | if (userActivityLoaded && userActivityTypesChanged) {
28 | initializeMenu(activities, userActivityTypes);
29 | }
30 | }, [activities, userActivityTypes, prevActivityTypes, setOption, initializeMenu]);
31 |
32 | return (
33 | {label}
28 |
29 | {children}
30 |
35 |
60 |
36 | {_.isEmpty(userActivityTypes) && setDateConfig(datesConfig)}
48 | clearConfig={() => setDateConfig({ datesConfig: { startDate: null, endDate: null } }, true)}
49 | />
50 | setDateConfig(datesConfig)}
53 | clearConfig={() => setDateConfig({ datesConfig: { startDate: null, endDate: null } }, true)}
54 | />
55 |
56 | )}
57 |
58 |
59 | {children}
;
11 | }
12 |
13 | return (
14 | Page not found
12 |13 | You just hit a route that doesn't exist... The sadness.{' '} 14 | 15 | 😢 16 | 17 |
18 | Back to safety 19 |
98 |
235 |
236 | );
237 | };
238 |
239 | export default IndexPage;
240 |
--------------------------------------------------------------------------------
/src/pages/privacy.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'gatsby';
3 |
4 | const Privacy = () => (
5 |
99 |
100 |
112 |
113 |
114 |
115 |
155 |
156 |
157 |
191 |
192 |
193 |
194 |
213 |
214 |
233 |
234 |
101 |
111 |
102 |
110 |
103 |
104 |
105 |
108 |
109 |
104 |
105 |
106 |
107 |
108 |
116 |
154 |
117 |
153 |
118 |
133 | Find some inspiration!
119 |
120 | Like the saying goes, you need to know where you've been to know where you're going. If you find yourself tired of riding the same old routes or running the
121 | same old path, don't worry, you're not alone.
122 |
123 |
124 | Login with the button right below to visualize where you tend to go and let it inspire you to go somewhere new!
125 |
128 |
129 | 
130 |
131 |
132 |
134 |
137 |
138 |
139 |
140 |
141 |
152 |
142 | 
143 |
144 |
145 | 
146 |
147 |
148 |
149 |
150 |
151 |
158 |
190 |
159 |
189 |
160 |
188 |
161 |
169 |
162 |
168 |
163 | 
164 |
165 | Find some inspiration
166 |Tired of riding in the same three old routes? Check your ride history and let it inspire you to try new routes!
167 |
170 |
178 |
171 |
177 |
172 | 
173 |
174 | Visualize your activities
175 |A powerful visualization tool to analyze your past rides, runs, walks and hikes. Why? Because everyone loves data!
176 |
179 |
187 |
180 |
186 |
181 | 
182 |
183 | Compare your seasons
184 |Want to see if your riding habit has changed between years? You can filter your rides by seasons!
185 |
195 |
212 |
196 |
202 |
203 |
204 |
211 | Still not convinced? Give it a try, it's free!
205 |
206 |
207 |
208 |
209 |
210 |
6 |
33 | );
34 |
35 | export default Privacy;
36 |
--------------------------------------------------------------------------------
/src/styles/_font-types.scss:
--------------------------------------------------------------------------------
1 | %font-type-title {
2 | font-family: Gidole;
3 | font-size: rem(25);
4 | font-weight: 900;
5 |
6 | @include tablet {
7 | font-family: Gidole;
8 | font-size: rem(35);
9 | font-weight: 900;
10 | }
11 |
12 | @include laptop {
13 | font-family: Gidole;
14 | font-size: rem(40);
15 | font-weight: 900;
16 | }
17 |
18 | @include desktop {
19 | font-family: Gidole;
20 | font-size: rem(45);
21 | font-weight: 900;
22 | }
23 | }
24 |
25 | %font-type-header {
26 | font-family: Gidole;
27 | font-size: rem(18);
28 | font-weight: 900;
29 | text-decoration: underline cc(main);
30 |
31 | @include tablet {
32 | font-family: Gidole;
33 | font-size: rem(18);
34 | font-weight: 900;
35 | }
36 |
37 | @include desktop {
38 | font-family: Gidole;
39 | font-size: rem(25);
40 | font-weight: 900;
41 | }
42 | }
43 |
44 | %font-type-subheader {
45 | font-family: Gidole;
46 | font-size: rem(18);
47 | font-weight: 900;
48 |
49 | @include tablet {
50 | font-family: Gidole;
51 | font-size: rem(18);
52 | font-weight: 900;
53 | }
54 |
55 | @include desktop {
56 | font-family: Gidole;
57 | font-size: rem(20);
58 | font-weight: 900;
59 | }
60 | }
61 |
62 | %font-type-label {
63 | font-family: Gidole;
64 | font-size: rem(18);
65 | font-weight: 500;
66 | }
67 |
68 | %font-type-button {
69 | font-family: 'Gidole';
70 | font-size: rem(16);
71 | font-weight: 500;
72 | line-height: 1;
73 | }
74 |
75 | %font-type-button-override {
76 | font-family: 'Gidole' !important;
77 | font-size: rem(14) !important;
78 | font-weight: 900 !important;
79 |
80 | @include tablet {
81 | font-family: 'Gidole' !important;
82 | font-size: rem(14) !important;
83 | font-weight: 900 !important;
84 | }
85 |
86 | @include desktop {
87 | font-family: 'Gidole' !important;
88 | font-size: rem(14) !important;
89 | font-weight: 900 !important;
90 | }
91 | }
92 |
93 | %font-type-button-small {
94 | font-family: 'Gidole';
95 | font-size: rem(12);
96 | font-weight: 900;
97 | line-height: 2;
98 | }
99 |
--------------------------------------------------------------------------------
/src/styles/_fonts.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Gidole';
3 | src: url('./fonts/Gidole-Regular.otf');
4 | }
5 |
--------------------------------------------------------------------------------
/src/styles/blocks/_app.scss:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Gidole';
3 | color: cc(text);
4 | background-color: cc(dark);
5 | }
6 |
7 | a {
8 | color: cc(text);
9 | text-decoration: none;
10 | }
11 |
12 | p {
13 | @extend %font-type-label;
14 | }
15 |
16 | @supports (zoom: 2) {
17 | input[type='radio'],
18 | input[type='checkbox'] {
19 | zoom: 2;
20 | }
21 | }
22 |
23 | @supports not (zoom: 2) {
24 | input[type='radio'],
25 | input[type='checkbox'] {
26 | transform: scale(2);
27 | margin: 15px;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/styles/blocks/_button.scss:
--------------------------------------------------------------------------------
1 | .custom-button {
2 | @extend %font-type-button;
3 | align-items: center;
4 | display: flex;
5 | opacity: 0.8;
6 | padding: rem(3) rem(10);
7 | top: rem(70);
8 | transition: all 0.2s ease-out;
9 | z-index: 2;
10 |
11 | @include phone {
12 | padding: rem(5) rem(10);
13 | }
14 |
15 | &.--small {
16 | @extend %font-type-button-small;
17 | padding-top: 0;
18 | }
19 |
20 | &.--no-padding {
21 | padding: 0;
22 | }
23 |
24 | &:hover {
25 | opacity: 1;
26 | }
27 |
28 | &__icon {
29 | font-size: rem(25);
30 |
31 | @include laptop {
32 | margin-right: rem(10);
33 | }
34 | }
35 |
36 | &.--selected {
37 | text-decoration: underline cc(main);
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/styles/blocks/_collapsable.scss:
--------------------------------------------------------------------------------
1 | $transition: all 200ms ease-in;
2 |
3 | .collapsable-enter {
4 | opacity: 0;
5 | }
6 |
7 | .collapsable-enter-active {
8 | opacity: 1;
9 | transition: $transition;
10 | }
11 |
12 | .collapsable-exit {
13 | opacity: 1;
14 | max-height: rem(300);
15 | }
16 |
17 | .collapsable-exit-active {
18 | opacity: 0;
19 | max-height: 0;
20 | transition: $transition;
21 | }
22 |
--------------------------------------------------------------------------------
/src/styles/blocks/_header.scss:
--------------------------------------------------------------------------------
1 | .header {
2 | background-color: cc(darkest);
3 | position: absolute;
4 | align-items: center;
5 | display: flex;
6 | justify-content: space-between;
7 | padding: 0 rem(10);
8 | height: rem(60);
9 | width: 100%;
10 | z-index: 2;
11 |
12 | @include laptop {
13 | padding: 0 rem(10);
14 | }
15 |
16 | @include phone {
17 | padding: 0 rem(10) 0 rem(25);
18 |
19 | &.--open {
20 | background-color: rgba(0, 0, 0, 1);
21 | }
22 | }
23 |
24 | &__logo {
25 | cursor: pointer;
26 | height: rem(40);
27 |
28 | @include phone {
29 | height: rem(30);
30 | }
31 | }
32 |
33 | &__title-container {
34 | display: flex;
35 | align-items: center;
36 |
37 | &.--full {
38 | width: 100%;
39 | justify-content: space-between;
40 | flex-direction: row-reverse;
41 | }
42 | }
43 |
44 | &__menu {
45 | display: flex;
46 | align-items: center;
47 | padding: rem(10);
48 | position: relative;
49 |
50 | @include laptop {
51 | width: rem(500);
52 | justify-content: flex-end;
53 | }
54 |
55 | @include phone {
56 | position: static;
57 | }
58 | }
59 |
60 | &__name {
61 | @extend %font-type-label;
62 |
63 | @include phone {
64 | display: none;
65 | }
66 | }
67 |
68 | &__image {
69 | height: rem(40);
70 | width: rem(40);
71 | border-radius: 100%;
72 | background-color: cc(darkest);
73 | margin-left: rem(20);
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/styles/blocks/_label.scss:
--------------------------------------------------------------------------------
1 | .label {
2 | @extend %font-type-label;
3 | margin-left: rem(20);
4 | margin-bottom: rem(10);
5 |
6 | &__header {
7 | @extend %font-type-header;
8 | margin-left: rem(20);
9 | margin-bottom: rem(10);
10 |
11 | &.--small-margin {
12 | margin: 0;
13 | margin-left: rem(10);
14 | margin-bottom: rem(3);
15 | }
16 |
17 | &.--no-margin {
18 | margin: 0;
19 | }
20 | }
21 |
22 | &__subheader {
23 | @extend %font-type-subheader;
24 | margin-left: rem(20);
25 | margin-bottom: rem(10);
26 |
27 | &.--no-margin {
28 | margin: 0;
29 | text-decoration: underline cc(main);
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/styles/blocks/_landing.scss:
--------------------------------------------------------------------------------
1 | .landing {
2 | &__image {
3 | position: absolute;
4 | width: 100%;
5 | height: 100%;
6 | object-fit: cover;
7 | z-index: -1;
8 | }
9 |
10 | &__button {
11 | @extend %font-type-header;
12 | text-decoration: underline cc(main);
13 | margin-right: rem(10);
14 | }
15 |
16 | &__strava {
17 | @include tablet {
18 | max-width: rem(175);
19 | margin-left: rem(-5);
20 | }
21 | }
22 |
23 | &__policy {
24 | margin-left: rem(3);
25 |
26 | @include phone {
27 | margin-left: rem(12);
28 | }
29 | }
30 |
31 | &__main-title {
32 | @extend %font-type-subheader;
33 | }
34 | }
35 |
36 | .hero-cta {
37 | margin-bottom: 40px;
38 | display: flex;
39 | align-items: center;
40 |
41 | @include phone {
42 | flex-direction: column;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/styles/blocks/_layout.scss:
--------------------------------------------------------------------------------
1 | .layout {
2 | height: 100vh;
3 | height: calc(var(--vh, 1vh) * 100);
4 | position: relative;
5 | z-index: 1;
6 | }
7 |
--------------------------------------------------------------------------------
/src/styles/blocks/_loader.scss:
--------------------------------------------------------------------------------
1 | $color: cc(main);
2 | $colorRight: darken(cc(main), 15%);
3 | $colorLeft: darken(cc(main), 5%);
4 | $shadow: #000;
5 |
6 | .loader__container {
7 | position: absolute;
8 | display: flex;
9 | flex-direction: column;
10 | justify-content: center;
11 | z-index: 3;
12 | height: 100%;
13 | width: 100%;
14 | pointer-events: none;
15 | }
16 |
17 | .loader__center {
18 | text-align: center;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | @extend %font-type-title;
24 | background-color: rgba(100, 100, 100, 0.3);
25 | padding-top: rem(100);
26 | padding-bottom: rem(50);
27 |
28 | & + & {
29 | padding-top: rem(25);
30 | }
31 | }
32 |
33 | .boxes {
34 | --size: 32px;
35 | --duration: 800ms;
36 | height: calc(var(--size) * 2);
37 | width: calc(var(--size) * 3);
38 | position: relative;
39 | transform-style: preserve-3d;
40 | transform-origin: 50% 50%;
41 | margin-top: calc(var(--size) * 1.5 * -1);
42 | transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
43 | .box {
44 | width: var(--size);
45 | height: var(--size);
46 | top: 0;
47 | left: 0;
48 | position: absolute;
49 | transform-style: preserve-3d;
50 | &:nth-child(1) {
51 | transform: translate(100%, 0);
52 | animation: box1 var(--duration) linear infinite;
53 | }
54 | &:nth-child(2) {
55 | transform: translate(0, 100%);
56 | animation: box2 var(--duration) linear infinite;
57 | }
58 | &:nth-child(3) {
59 | transform: translate(100%, 100%);
60 | animation: box3 var(--duration) linear infinite;
61 | }
62 | &:nth-child(4) {
63 | transform: translate(200%, 0);
64 | animation: box4 var(--duration) linear infinite;
65 | }
66 | & > div {
67 | --background: #{$color};
68 | --top: auto;
69 | --right: auto;
70 | --bottom: auto;
71 | --left: auto;
72 | --translateZ: calc(var(--size) / 2);
73 | --rotateY: 0deg;
74 | --rotateX: 0deg;
75 | position: absolute;
76 | width: 100%;
77 | height: 100%;
78 | background: var(--background);
79 | top: var(--top);
80 | right: var(--right);
81 | bottom: var(--bottom);
82 | left: var(--left);
83 | transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
84 | &:nth-child(1) {
85 | --top: 0;
86 | --left: 0;
87 | }
88 | &:nth-child(2) {
89 | --background: #{$colorRight};
90 | --right: 0;
91 | --rotateY: 90deg;
92 | }
93 | &:nth-child(3) {
94 | --background: #{$colorLeft};
95 | --rotateX: -90deg;
96 | }
97 | &:nth-child(4) {
98 | --background: #{$shadow};
99 | --top: 0;
100 | --left: 0;
101 | --translateZ: calc(var(--size) * 3 * -1);
102 | }
103 | }
104 | }
105 | }
106 |
107 | @keyframes box1 {
108 | 0%,
109 | 50% {
110 | transform: translate(100%, 0);
111 | }
112 | 100% {
113 | transform: translate(200%, 0);
114 | }
115 | }
116 |
117 | @keyframes box2 {
118 | 0% {
119 | transform: translate(0, 100%);
120 | }
121 | 50% {
122 | transform: translate(0, 0);
123 | }
124 | 100% {
125 | transform: translate(100%, 0);
126 | }
127 | }
128 |
129 | @keyframes box3 {
130 | 0%,
131 | 50% {
132 | transform: translate(100%, 100%);
133 | }
134 | 100% {
135 | transform: translate(0, 100%);
136 | }
137 | }
138 |
139 | @keyframes box4 {
140 | 0% {
141 | transform: translate(200%, 0);
142 | }
143 | 50% {
144 | transform: translate(200%, 100%);
145 | }
146 | 100% {
147 | transform: translate(100%, 100%);
148 | }
149 | }
150 |
151 | html {
152 | -webkit-font-smoothing: antialiased;
153 | }
154 |
155 | * {
156 | box-sizing: border-box;
157 | &:before,
158 | &:after {
159 | box-sizing: border-box;
160 | }
161 | }
162 |
--------------------------------------------------------------------------------
/src/styles/blocks/_map.scss:
--------------------------------------------------------------------------------
1 | .leaflet-container {
2 | height: 100%;
3 | background-color: cc(dark) !important;
4 |
5 | @include phone {
6 | min-height: inherit;
7 | }
8 | }
9 |
10 | .leaflet-popup-content-wrapper {
11 | border-radius: 0;
12 | background-color: rgba(0, 0, 0, 0.8);
13 | color: white;
14 | }
15 |
16 | .leaflet-popup-content-wrapper .leaflet-popup-content {
17 | @extend %font-type-label;
18 | }
19 |
20 | .leaflet-popup-tip {
21 | background-color: rgba(0, 0, 0, 0.8);
22 | }
23 |
24 | .leaflet-container a {
25 | color: white;
26 | }
27 |
28 | .leaflet-control-attribution {
29 | background-color: cc(dark) !important;
30 | color: white;
31 | font-size: rem(7) !important;
32 |
33 | @include phone {
34 | width: 100vw !important;
35 | text-align: center;
36 | }
37 | }
38 |
39 | .leaflet-control-scale {
40 | margin-left: rem(10) !important;
41 | margin-bottom: rem(10) !important;
42 | opacity: 0.7;
43 |
44 | @include phone {
45 | margin-bottom: rem(15) !important;
46 | }
47 | }
48 |
49 | .leaflet-control-scale-line {
50 | background-color: transparent;
51 | color: white;
52 | }
53 |
--------------------------------------------------------------------------------
/src/styles/blocks/_menu.scss:
--------------------------------------------------------------------------------
1 | .simplebar-content {
2 | height: 100%;
3 | }
4 |
5 | .simplebar-scrollbar::before {
6 | background-color: rgba(255, 255, 255, 0.8) !important;
7 | }
8 |
9 | .menu {
10 | position: absolute !important;
11 | top: rem(60);
12 | background-color: cc(darkest);
13 | height: calc(100vh - 75px);
14 | max-width: rem(325);
15 | padding: rem(20);
16 | transform: translateX(rem(-325));
17 | transition: all 0.2s ease-out;
18 | width: 100%;
19 | z-index: 2;
20 | overflow-y: auto;
21 |
22 | @include phone {
23 | max-width: inherit;
24 | max-height: inherit;
25 | min-height: calc(100vh - 74px);
26 | height: inherit;
27 | width: 100%;
28 | transform: translateX(-100%);
29 | background-color: rgba(0, 0, 0, 1);
30 | }
31 |
32 | &.--open {
33 | transform: translateX(0);
34 | }
35 |
36 | &__status {
37 | color: white;
38 | transition: transform 200ms ease;
39 |
40 | &.--inactive {
41 | color: red;
42 | }
43 |
44 | &.--active {
45 | color: green;
46 | }
47 |
48 | &.--down {
49 | transform: rotate(180deg);
50 | }
51 | }
52 |
53 | &__color-picker {
54 | flex: 1;
55 | justify-content: flex-end;
56 |
57 | &.--picker {
58 | cursor: pointer;
59 | }
60 | }
61 |
62 | &__weight-picker {
63 | justify-content: flex-end;
64 |
65 | & + & {
66 | width: rem(70);
67 | }
68 |
69 | &.--picker {
70 | cursor: pointer;
71 | }
72 | }
73 |
74 | &__inner {
75 | height: 100%;
76 | display: flex;
77 | flex-direction: column;
78 | justify-content: space-between;
79 | }
80 |
81 | &__item {
82 | width: 100%;
83 | display: flex;
84 | justify-content: space-between;
85 | align-items: center;
86 | color: white;
87 | text-decoration: none;
88 | margin-bottom: rem(5);
89 |
90 | &.--no-margin {
91 | margin-bottom: 0;
92 | }
93 | }
94 |
95 | &__block {
96 | & + & {
97 | padding-top: rem(20);
98 | }
99 | }
100 |
101 | &__footer {
102 | padding-top: rem(50);
103 | padding-bottom: rem(10);
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/src/styles/blocks/_notfound.scss:
--------------------------------------------------------------------------------
1 | .notfound {
2 | padding: rem(20);
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | flex-direction: column;
7 |
8 | &__image {
9 | position: absolute;
10 | width: 100vw;
11 | height: 100vh;
12 | object-fit: cover;
13 | opacity: 0.1;
14 | z-index: -1;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/styles/blocks/_video-container.scss:
--------------------------------------------------------------------------------
1 | .video-container {
2 | position: relative;
3 | padding-bottom: 56.25%; /* 16:9 */
4 | height: 0;
5 | margin-bottom: rem(50);
6 | }
7 |
8 | .video-container iframe {
9 | position: absolute;
10 | top: 0;
11 | left: 0;
12 | width: 100%;
13 | height: 100%;
14 | }
15 |
--------------------------------------------------------------------------------
/src/styles/blocks/index.scss:
--------------------------------------------------------------------------------
1 | @import 'notfound', 'video-container', 'datepicker', 'collapsable', 'map', 'loader', 'landing', 'app', 'header', 'label', 'layout', 'button', 'menu';
2 |
--------------------------------------------------------------------------------
/src/styles/fonts/Gidole-Regular.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredbegin11/bifurkate/458f5fa84c047980d66676a2098d3a4cf8c99b1e/src/styles/fonts/Gidole-Regular.otf
--------------------------------------------------------------------------------
/src/styles/fonts/Montserrat-Black.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredbegin11/bifurkate/458f5fa84c047980d66676a2098d3a4cf8c99b1e/src/styles/fonts/Montserrat-Black.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/Montserrat-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredbegin11/bifurkate/458f5fa84c047980d66676a2098d3a4cf8c99b1e/src/styles/fonts/Montserrat-Bold.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/Montserrat-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredbegin11/bifurkate/458f5fa84c047980d66676a2098d3a4cf8c99b1e/src/styles/fonts/Montserrat-Regular.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/Montserrat-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredbegin11/bifurkate/458f5fa84c047980d66676a2098d3a4cf8c99b1e/src/styles/fonts/Montserrat-SemiBold.ttf
--------------------------------------------------------------------------------
/src/styles/index.scss:
--------------------------------------------------------------------------------
1 | // reset
2 | @import './tools/reset';
3 |
4 | // tools
5 | @import './tools/colors';
6 | @import './tools/functions';
7 | @import './tools/media-queries';
8 |
9 | // fonts
10 | @import './fonts';
11 | @import './font-types';
12 |
13 | // blocks
14 | @import './blocks/index';
15 | @import './landing/style';
16 |
17 | // leaflet
18 | @import url('https://unpkg.com/leaflet@1.0.1/dist/leaflet.css');
19 |
--------------------------------------------------------------------------------
/src/styles/landing/_normalize.scss:
--------------------------------------------------------------------------------
1 | html {
2 | line-height: 1.15;
3 | -ms-text-size-adjust: 100%;
4 | -webkit-text-size-adjust: 100%;
5 | }
6 |
7 | body {
8 | margin: 0;
9 | }
10 |
11 | article,
12 | aside,
13 | footer,
14 | header,
15 | nav,
16 | section {
17 | display: block;
18 | }
19 |
20 | h1 {
21 | font-size: 2em;
22 | margin: 0.67em 0;
23 | }
24 |
25 | figcaption,
26 | figure,
27 | main {
28 | display: block;
29 | }
30 |
31 | figure {
32 | margin: 1em 40px;
33 | }
34 |
35 | hr {
36 | box-sizing: content-box;
37 | height: 0;
38 | overflow: visible;
39 | }
40 |
41 | pre {
42 | font-family: monospace, monospace;
43 | font-size: 1em;
44 | }
45 |
46 | a {
47 | background-color: transparent;
48 | -webkit-text-decoration-skip: objects;
49 | }
50 |
51 | abbr[title] {
52 | border-bottom: none;
53 | text-decoration: underline;
54 | text-decoration: underline dotted;
55 | }
56 |
57 | b,
58 | strong {
59 | font-weight: inherit;
60 | }
61 |
62 | b,
63 | strong {
64 | font-weight: bolder;
65 | }
66 |
67 | code,
68 | kbd,
69 | samp {
70 | font-family: monospace, monospace;
71 | font-size: 1em;
72 | }
73 |
74 | dfn {
75 | font-style: italic;
76 | }
77 |
78 | mark {
79 | background-color: #ff0;
80 | color: #000;
81 | }
82 |
83 | small {
84 | font-size: 80%;
85 | }
86 |
87 | sub,
88 | sup {
89 | font-size: 75%;
90 | line-height: 0;
91 | position: relative;
92 | vertical-align: baseline;
93 | }
94 |
95 | sub {
96 | bottom: -0.25em;
97 | }
98 |
99 | sup {
100 | top: -0.5em;
101 | }
102 |
103 | audio,
104 | video {
105 | display: inline-block;
106 | }
107 |
108 | audio:not([controls]) {
109 | display: none;
110 | height: 0;
111 | }
112 |
113 | img {
114 | border-style: none;
115 | }
116 |
117 | svg:not(:root) {
118 | overflow: hidden;
119 | }
120 |
121 | button,
122 | input,
123 | optgroup,
124 | select,
125 | textarea {
126 | font-family: sans-serif;
127 | font-size: 100%;
128 | line-height: 1.15;
129 | margin: 0;
130 | }
131 |
132 | button,
133 | input {
134 | overflow: visible;
135 | }
136 |
137 | button,
138 | select {
139 | text-transform: none;
140 | }
141 |
142 | button,
143 | html [type='button'],
144 | [type='reset'],
145 | [type='submit'] {
146 | -webkit-appearance: button;
147 | }
148 |
149 | button::-moz-focus-inner,
150 | [type='button']::-moz-focus-inner,
151 | [type='reset']::-moz-focus-inner,
152 | [type='submit']::-moz-focus-inner {
153 | border-style: none;
154 | padding: 0;
155 | }
156 |
157 | button:-moz-focusring,
158 | [type='button']:-moz-focusring,
159 | [type='reset']:-moz-focusring,
160 | [type='submit']:-moz-focusring {
161 | outline: 1px dotted ButtonText;
162 | }
163 |
164 | fieldset {
165 | padding: 0.35em 0.75em 0.625em;
166 | }
167 |
168 | legend {
169 | box-sizing: border-box;
170 | color: inherit;
171 | display: table;
172 | max-width: 100%;
173 | padding: 0;
174 | white-space: normal;
175 | }
176 |
177 | progress {
178 | display: inline-block;
179 | vertical-align: baseline;
180 | }
181 |
182 | textarea {
183 | overflow: auto;
184 | }
185 |
186 | [type='checkbox'],
187 | [type='radio'] {
188 | box-sizing: border-box;
189 | padding: 0;
190 | }
191 |
192 | [type='number']::-webkit-inner-spin-button,
193 | [type='number']::-webkit-outer-spin-button {
194 | height: auto;
195 | }
196 |
197 | [type='search'] {
198 | -webkit-appearance: textfield;
199 | outline-offset: -2px;
200 | }
201 |
202 | [type='search']::-webkit-search-cancel-button,
203 | [type='search']::-webkit-search-decoration {
204 | -webkit-appearance: none;
205 | }
206 |
207 | ::-webkit-file-upload-button {
208 | -webkit-appearance: button;
209 | font: inherit;
210 | }
211 |
212 | details,
213 | menu {
214 | display: block;
215 | }
216 |
217 | summary {
218 | display: list-item;
219 | }
220 |
221 | canvas {
222 | display: inline-block;
223 | }
224 |
225 | template {
226 | display: none;
227 | }
228 |
229 | [hidden] {
230 | display: none;
231 | }
232 |
--------------------------------------------------------------------------------
/src/styles/landing/abstracts/_functions.scss:
--------------------------------------------------------------------------------
1 | // --------------------------------------------------------------------
2 | // Retrieve Font Size -------------------------------------------------
3 | // Used in _mixins.scss [@mixin font-size] ----------------------------
4 | // --------------------------------------------------------------------
5 | @function get-font-size($size, $elem) {
6 | @return nth(map-get(map-get($font__scale, $elem), $size), 1);
7 | }
8 |
9 | // --------------------------------------------------------------------
10 | // Retrieve Line Height -----------------------------------------------
11 | // Used in _mixins.scss [@mixin font-size] ----------------------------
12 | // --------------------------------------------------------------------
13 | @function get-line-height($size, $elem) {
14 | @return nth(map-get(map-get($font__scale, $elem), $size), 2);
15 | }
16 |
17 | // --------------------------------------------------------------------
18 | // Retrieve Kerning ---------------------------------------------------
19 | // Used in _mixins.scss [@mixin font-size] ----------------------------
20 | // --------------------------------------------------------------------
21 | @function get-kerning($size, $elem) {
22 | @return nth(map-get(map-get($font__scale, $elem), $size), 3);
23 | }
24 |
25 | // --------------------------------------------------------------------
26 | // Retrieve Font Family -----------------------------------------------
27 | // Used in _mixins.scss [@mixin font-family] --------------------------
28 | // --------------------------------------------------------------------
29 | @function get-font-family($elem) {
30 | @return map-get($font__family, $elem);
31 | }
32 |
33 | // --------------------------------------------------------------------
34 | // Retrieve Font Weight -----------------------------------------------
35 | // Used in _mixins.scss [@mixin font-weight] --------------------------
36 | // --------------------------------------------------------------------
37 | @function get-font-weight($elem) {
38 | @return map-get($font__weight, $elem);
39 | }
40 |
41 | // --------------------------------------------------------------------
42 | // Retrieve Padding of Content Area Elements --------------------------
43 | // Used in _mixins.scss [@mixin font-size] ----------------------------
44 | // --------------------------------------------------------------------
45 | @function get-content-padding($elem) {
46 | @return map-get($content__padding, $elem);
47 | }
48 |
49 | // --------------------------------------------------------------------
50 | // Retrieve Colors ----------------------------------------------------
51 | // Usage: color(typography, 1) ----------------------------------------------
52 | // --------------------------------------------------------------------
53 | @function color($elem, $variant) {
54 | @return map-get(map-get($color, $elem), $variant);
55 | }
56 |
--------------------------------------------------------------------------------
/src/styles/landing/abstracts/_include-media.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | // _ _ _ _ _
4 | // (_) | | | | | (_)
5 | // _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _
6 | // | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` |
7 | // | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| |
8 | // |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_|
9 | //
10 | // Simple, elegant and maintainable media queries in Sass
11 | // v1.4.9
12 | //
13 | // http://include-media.com
14 | //
15 | // Authors: Eduardo Boucas (@eduardoboucas)
16 | // Hugo Giraudel (@hugogiraudel)
17 | //
18 | // This project is licensed under the terms of the MIT license
19 |
20 |
21 | ////
22 | /// include-media library public configuration
23 | /// @author Eduardo Boucas
24 | /// @access public
25 | ////
26 |
27 |
28 | ///
29 | /// Creates a list of global breakpoints
30 | ///
31 | /// @example scss - Creates a single breakpoint with the label `phone`
32 | /// $breakpoints: ('phone': 320px);
33 | ///
34 | $breakpoints: (
35 | 'small': 480px,
36 | 'medium': 640px,
37 | 'large': 1024px,
38 | ) !default;
39 |
40 |
41 | ///
42 | /// Creates a list of static expressions or media types
43 | ///
44 | /// @example scss - Creates a single media type (screen)
45 | /// $media-expressions: ('screen': 'screen');
46 | ///
47 | /// @example scss - Creates a static expression with logical disjunction (OR operator)
48 | /// $media-expressions: (
49 | /// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
50 | /// );
51 | ///
52 | $media-expressions: (
53 | 'screen': 'screen',
54 | 'print': 'print',
55 | 'handheld': 'handheld',
56 | 'landscape': '(orientation: landscape)',
57 | 'portrait': '(orientation: portrait)',
58 | 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
59 | 'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)'
60 | ) !default;
61 |
62 |
63 | ///
64 | /// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals
65 | ///
66 | /// @example scss - Interval for pixels is defined as `1` by default
67 | /// @include media('>128px') {}
68 | ///
69 | /// /* Generates: */
70 | /// @media (min-width: 129px) {}
71 | ///
72 | /// @example scss - Interval for ems is defined as `0.01` by default
73 | /// @include media('>20em') {}
74 | ///
75 | /// /* Generates: */
76 | /// @media (min-width: 20.01em) {}
77 | ///
78 | /// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`
79 | /// @include media('>2.0rem') {}
80 | ///
81 | /// /* Generates: */
82 | /// @media (min-width: 2.1rem) {}
83 | ///
84 | $unit-intervals: (
85 | 'px': 1,
86 | 'em': 0.01,
87 | 'rem': 0.1,
88 | '': 0
89 | ) !default;
90 |
91 | ///
92 | /// Defines whether support for media queries is available, useful for creating separate stylesheets
93 | /// for browsers that don't support media queries.
94 | ///
95 | /// @example scss - Disables support for media queries
96 | /// $im-media-support: false;
97 | /// @include media('>=tablet') {
98 | /// .foo {
99 | /// color: tomato;
100 | /// }
101 | /// }
102 | ///
103 | /// /* Generates: */
104 | /// .foo {
105 | /// color: tomato;
106 | /// }
107 | ///
108 | $im-media-support: true !default;
109 |
110 | ///
111 | /// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or
112 | /// intercept the breakpoint will be displayed, any others will be ignored.
113 | ///
114 | /// @example scss - This media query will show because it intercepts the static breakpoint
115 | /// $im-media-support: false;
116 | /// $im-no-media-breakpoint: 'desktop';
117 | /// @include media('>=tablet') {
118 | /// .foo {
119 | /// color: tomato;
120 | /// }
121 | /// }
122 | ///
123 | /// /* Generates: */
124 | /// .foo {
125 | /// color: tomato;
126 | /// }
127 | ///
128 | /// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint
129 | /// $im-media-support: false;
130 | /// $im-no-media-breakpoint: 'tablet';
131 | /// @include media('>=desktop') {
132 | /// .foo {
133 | /// color: tomato;
134 | /// }
135 | /// }
136 | ///
137 | /// /* No output */
138 | ///
139 | $im-no-media-breakpoint: 'desktop' !default;
140 |
141 | ///
142 | /// Selects which media expressions are allowed in an expression for it to be used when media queries
143 | /// are not supported.
144 | ///
145 | /// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions
146 | /// $im-media-support: false;
147 | /// $im-no-media-breakpoint: 'desktop';
148 | /// $im-no-media-expressions: ('screen');
149 | /// @include media('>=tablet', 'screen') {
150 | /// .foo {
151 | /// color: tomato;
152 | /// }
153 | /// }
154 | ///
155 | /// /* Generates: */
156 | /// .foo {
157 | /// color: tomato;
158 | /// }
159 | ///
160 | /// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted
161 | /// $im-media-support: false;
162 | /// $im-no-media-breakpoint: 'desktop';
163 | /// $im-no-media-expressions: ('screen');
164 | /// @include media('>=tablet', 'retina2x') {
165 | /// .foo {
166 | /// color: tomato;
167 | /// }
168 | /// }
169 | ///
170 | /// /* No output */
171 | ///
172 | $im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
173 |
174 | ////
175 | /// Cross-engine logging engine
176 | /// @author Hugo Giraudel
177 | /// @access private
178 | ////
179 |
180 |
181 | ///
182 | /// Log a message either with `@error` if supported
183 | /// else with `@warn`, using `feature-exists('at-error')`
184 | /// to detect support.
185 | ///
186 | /// @param {String} $message - Message to log
187 | ///
188 | @function im-log($message) {
189 | @if feature-exists('at-error') {
190 | @error $message;
191 | } @else {
192 | @warn $message;
193 | $_: noop();
194 | }
195 |
196 | @return $message;
197 | }
198 |
199 |
200 | ///
201 | /// Wrapper mixin for the log function so it can be used with a more friendly
202 | /// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function
203 | /// within functions because it is not possible to include a mixin in a function
204 | /// and use the mixin everywhere else because it's much more elegant.
205 | ///
206 | /// @param {String} $message - Message to log
207 | ///
208 | @mixin log($message) {
209 | @if im-log($message) {}
210 | }
211 |
212 |
213 | ///
214 | /// Function with no `@return` called next to `@warn` in Sass 3.3
215 | /// to trigger a compiling error and stop the process.
216 | ///
217 | @function noop() {}
218 |
219 | ///
220 | /// Determines whether a list of conditions is intercepted by the static breakpoint.
221 | ///
222 | /// @param {Arglist} $conditions - Media query conditions
223 | ///
224 | /// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint
225 | ///
226 | @function im-intercepts-static-breakpoint($conditions...) {
227 | $no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint);
228 |
229 | @if not $no-media-breakpoint-value {
230 | @if im-log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {}
231 | }
232 |
233 | @each $condition in $conditions {
234 | @if not map-has-key($media-expressions, $condition) {
235 | $operator: get-expression-operator($condition);
236 | $prefix: get-expression-prefix($operator);
237 | $value: get-expression-value($condition, $operator);
238 |
239 | @if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or
240 | ($prefix == 'min' and $value > $no-media-breakpoint-value) {
241 | @return false;
242 | }
243 | } @else if not index($im-no-media-expressions, $condition) {
244 | @return false;
245 | }
246 | }
247 |
248 | @return true;
249 | }
250 |
251 | ////
252 | /// Parsing engine
253 | /// @author Hugo Giraudel
254 | /// @access private
255 | ////
256 |
257 |
258 | ///
259 | /// Get operator of an expression
260 | ///
261 | /// @param {String} $expression - Expression to extract operator from
262 | ///
263 | /// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`
264 | ///
265 | @function get-expression-operator($expression) {
266 | @each $operator in ('>=', '>', '<=', '<', '≥', '≤') {
267 | @if str-index($expression, $operator) {
268 | @return $operator;
269 | }
270 | }
271 |
272 | // It is not possible to include a mixin inside a function, so we have to
273 | // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
274 | // functions cannot be called anywhere in Sass, we need to hack the call in
275 | // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
276 | // Sass 3.3, change this line in `@if im-log(..) {}` instead.
277 | $_: im-log('No operator found in `#{$expression}`.');
278 | }
279 |
280 |
281 | ///
282 | /// Get dimension of an expression, based on a found operator
283 | ///
284 | /// @param {String} $expression - Expression to extract dimension from
285 | /// @param {String} $operator - Operator from `$expression`
286 | ///
287 | /// @return {String} - `width` or `height` (or potentially anything else)
288 | ///
289 | @function get-expression-dimension($expression, $operator) {
290 | $operator-index: str-index($expression, $operator);
291 | $parsed-dimension: str-slice($expression, 0, $operator-index - 1);
292 | $dimension: 'width';
293 |
294 | @if str-length($parsed-dimension) > 0 {
295 | $dimension: $parsed-dimension;
296 | }
297 |
298 | @return $dimension;
299 | }
300 |
301 |
302 | ///
303 | /// Get dimension prefix based on an operator
304 | ///
305 | /// @param {String} $operator - Operator
306 | ///
307 | /// @return {String} - `min` or `max`
308 | ///
309 | @function get-expression-prefix($operator) {
310 | @return if(index(('<', '<=', '≤'), $operator), 'max', 'min');
311 | }
312 |
313 |
314 | ///
315 | /// Get value of an expression, based on a found operator
316 | ///
317 | /// @param {String} $expression - Expression to extract value from
318 | /// @param {String} $operator - Operator from `$expression`
319 | ///
320 | /// @return {Number} - A numeric value
321 | ///
322 | @function get-expression-value($expression, $operator) {
323 | $operator-index: str-index($expression, $operator);
324 | $value: str-slice($expression, $operator-index + str-length($operator));
325 |
326 | @if map-has-key($breakpoints, $value) {
327 | $value: map-get($breakpoints, $value);
328 | } @else {
329 | $value: to-number($value);
330 | }
331 |
332 | $interval: map-get($unit-intervals, unit($value));
333 |
334 | @if not $interval {
335 | // It is not possible to include a mixin inside a function, so we have to
336 | // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
337 | // functions cannot be called anywhere in Sass, we need to hack the call in
338 | // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
339 | // Sass 3.3, change this line in `@if im-log(..) {}` instead.
340 | $_: im-log('Unknown unit `#{unit($value)}`.');
341 | }
342 |
343 | @if $operator == '>' {
344 | $value: $value + $interval;
345 | } @else if $operator == '<' {
346 | $value: $value - $interval;
347 | }
348 |
349 | @return $value;
350 | }
351 |
352 |
353 | ///
354 | /// Parse an expression to return a valid media-query expression
355 | ///
356 | /// @param {String} $expression - Expression to parse
357 | ///
358 | /// @return {String} - Valid media query
359 | ///
360 | @function parse-expression($expression) {
361 | // If it is part of $media-expressions, it has no operator
362 | // then there is no need to go any further, just return the value
363 | @if map-has-key($media-expressions, $expression) {
364 | @return map-get($media-expressions, $expression);
365 | }
366 |
367 | $operator: get-expression-operator($expression);
368 | $dimension: get-expression-dimension($expression, $operator);
369 | $prefix: get-expression-prefix($operator);
370 | $value: get-expression-value($expression, $operator);
371 |
372 | @return '(#{$prefix}-#{$dimension}: #{$value})';
373 | }
374 |
375 | ///
376 | /// Slice `$list` between `$start` and `$end` indexes
377 | ///
378 | /// @access private
379 | ///
380 | /// @param {List} $list - List to slice
381 | /// @param {Number} $start [1] - Start index
382 | /// @param {Number} $end [length($list)] - End index
383 | ///
384 | /// @return {List} Sliced list
385 | ///
386 | @function slice($list, $start: 1, $end: length($list)) {
387 | @if length($list) < 1 or $start > $end {
388 | @return ();
389 | }
390 |
391 | $result: ();
392 |
393 | @for $i from $start through $end {
394 | $result: append($result, nth($list, $i));
395 | }
396 |
397 | @return $result;
398 | }
399 |
400 | ////
401 | /// String to number converter
402 | /// @author Hugo Giraudel
403 | /// @access private
404 | ////
405 |
406 |
407 | ///
408 | /// Casts a string into a number
409 | ///
410 | /// @param {String | Number} $value - Value to be parsed
411 | ///
412 | /// @return {Number}
413 | ///
414 | @function to-number($value) {
415 | @if type-of($value) == 'number' {
416 | @return $value;
417 | } @else if type-of($value) != 'string' {
418 | $_: im-log('Value for `to-number` should be a number or a string.');
419 | }
420 |
421 | $first-character: str-slice($value, 1, 1);
422 | $result: 0;
423 | $digits: 0;
424 | $minus: ($first-character == '-');
425 | $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
426 |
427 | // Remove +/- sign if present at first character
428 | @if ($first-character == '+' or $first-character == '-') {
429 | $value: str-slice($value, 2);
430 | }
431 |
432 | @for $i from 1 through str-length($value) {
433 | $character: str-slice($value, $i, $i);
434 |
435 | @if not (index(map-keys($numbers), $character) or $character == '.') {
436 | @return to-length(if($minus, -$result, $result), str-slice($value, $i))
437 | }
438 |
439 | @if $character == '.' {
440 | $digits: 1;
441 | } @else if $digits == 0 {
442 | $result: $result * 10 + map-get($numbers, $character);
443 | } @else {
444 | $digits: $digits * 10;
445 | $result: $result + map-get($numbers, $character) / $digits;
446 | }
447 | }
448 |
449 | @return if($minus, -$result, $result);
450 | }
451 |
452 |
453 | ///
454 | /// Add `$unit` to `$value`
455 | ///
456 | /// @param {Number} $value - Value to add unit to
457 | /// @param {String} $unit - String representation of the unit
458 | ///
459 | /// @return {Number} - `$value` expressed in `$unit`
460 | ///
461 | @function to-length($value, $unit) {
462 | $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
463 |
464 | @if not index(map-keys($units), $unit) {
465 | $_: im-log('Invalid unit `#{$unit}`.');
466 | }
467 |
468 | @return $value * map-get($units, $unit);
469 | }
470 |
471 | ///
472 | /// This mixin aims at redefining the configuration just for the scope of
473 | /// the call. It is helpful when having a component needing an extended
474 | /// configuration such as custom breakpoints (referred to as tweakpoints)
475 | /// for instance.
476 | ///
477 | /// @author Hugo Giraudel
478 | ///
479 | /// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`
480 | /// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`
481 | ///
482 | /// @example scss - Extend the global breakpoints with a tweakpoint
483 | /// @include media-context(('custom': 678px)) {
484 | /// .foo {
485 | /// @include media('>phone', '<=custom') {
486 | /// // ...
487 | /// }
488 | /// }
489 | /// }
490 | ///
491 | /// @example scss - Extend the global media expressions with a custom one
492 | /// @include media-context($tweak-media-expressions: ('all': 'all')) {
493 | /// .foo {
494 | /// @include media('all', '>phone') {
495 | /// // ...
496 | /// }
497 | /// }
498 | /// }
499 | ///
500 | /// @example scss - Extend both configuration maps
501 | /// @include media-context(('custom': 678px), ('all': 'all')) {
502 | /// .foo {
503 | /// @include media('all', '>phone', '<=custom') {
504 | /// // ...
505 | /// }
506 | /// }
507 | /// }
508 | ///
509 | @mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {
510 | // Save global configuration
511 | $global-breakpoints: $breakpoints;
512 | $global-media-expressions: $media-expressions;
513 |
514 | // Update global configuration
515 | $breakpoints: map-merge($breakpoints, $tweakpoints) !global;
516 | $media-expressions: map-merge($media-expressions, $tweak-media-expressions) !global;
517 |
518 | @content;
519 |
520 | // Restore global configuration
521 | $breakpoints: $global-breakpoints !global;
522 | $media-expressions: $global-media-expressions !global;
523 | }
524 |
525 | ////
526 | /// include-media public exposed API
527 | /// @author Eduardo Boucas
528 | /// @access public
529 | ////
530 |
531 |
532 | ///
533 | /// Generates a media query based on a list of conditions
534 | ///
535 | /// @param {Arglist} $conditions - Media query conditions
536 | ///
537 | /// @example scss - With a single set breakpoint
538 | /// @include media('>phone') { }
539 | ///
540 | /// @example scss - With two set breakpoints
541 | /// @include media('>phone', '<=tablet') { }
542 | ///
543 | /// @example scss - With custom values
544 | /// @include media('>=358px', '<850px') { }
545 | ///
546 | /// @example scss - With set breakpoints with custom values
547 | /// @include media('>desktop', '<=1350px') { }
548 | ///
549 | /// @example scss - With a static expression
550 | /// @include media('retina2x') { }
551 | ///
552 | /// @example scss - Mixing everything
553 | /// @include media('>=350px', '
7 |
32 | Privacy Policy
8 |Your privacy is important to us.
9 |10 | It is Birfurkate's policy to respect your privacy and this is why we don't collect any information from your Strava profile. We use Strava's api to fetch your activity data 11 | and athlete profile but we do not store nor retain any information we obtain from it. 12 |
13 |14 | Like many site operators, we collect information that your browser sends whenever you visit our Site ("Log Data"). This Log Data may include information such as your 15 | computer's Internet Protocol ("IP") address, browser type, browser version, the pages of our Site that you visit, the time and date of your visit, the time spent on those 16 | pages and other statistics. In addition, we may use third party services such as Google Analytics that collect, monitor and analyze this information to improve our 17 | platform. 18 |
19 |20 | Our website may link to external sites that are not operated by us. Please be aware that we have no control over the content and practices of these sites, and cannot accept 21 | responsibility or liability for their respective privacy policies. 22 |
23 |24 | Your continued use of our website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle 25 | user data and personal information, feel free to contact us. 26 |
27 |This policy is effective as of 30 June 2020.
28 |29 | Go back to Bifurkate 30 |
31 |