Lorem ipsum dolor sit amet, consectetur adipiscing elit.
17 |
18 | Donec tempor malesuada augue, eu blandit ipsum sagittis sed. Fusce ultricies justo et
19 | massa mattis tincidunt. In lacinia ornare eros, quis tempus metus volutpat ut. Cras et
20 | sapien lectus. Sed pulvinar nibh faucibus pretium tristique. Integer finibus nisi et
21 | ipsum tincidunt, tristique semper nunc dictum. Cras fermentum vitae nulla vel auctor.
22 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
38 |
Mauris vel lacus diam.
39 |
40 |
41 |
42 |
43 | This could include a text for example
44 |
45 |
46 |
47 |
48 | );
49 | })
50 | .add('Panel without footer', () => {
51 | return (
52 |
53 | Panel without footer
54 |
55 |
56 | Donecmetus volutpat ut. Cras et sapien lectus. Sed pulvinar nibh faucibus pretium
57 | tristique. Integer finibus nisi et ipsum tincidunt, tristique semper nunc dictum. Cras
58 | fermentum vitae nulla vel auctor.
59 |
60 |
61 |
62 | );
63 | });
64 |
--------------------------------------------------------------------------------
/src/components/icon/Twitter.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Icon from './Icon.js';
3 |
4 | const vectors =
5 | 'M10.6958834,1.0264501 C10.4543969,1.13095978 10.2037152,1.2134089 9.9464883,1.27309916 C10.2299229,1.01023441 10.4430288,0.681446587 10.5632553,0.314460095 C10.5975717,0.209691788 10.4809755,0.119096039 10.3840418,0.175191437 C10.0261976,0.382348717 9.64074145,0.53775547 9.23835232,0.637144412 C9.2150066,0.642911712 9.1909189,0.645834156 9.1667517,0.645834156 C9.09345513,0.645834156 9.022199,0.619273541 8.96615336,0.571066154 C8.53803358,0.202812408 7.98740838,0 7.41574287,0 C7.16837359,0 6.91861938,0.0376296931 6.67339653,0.111854586 C5.91361377,0.341848305 5.32737375,0.95351832 5.14344336,1.70818117 C5.07443965,1.99124439 5.05575777,2.27456624 5.0878747,2.5502587 C5.09155808,2.58194006 5.07621509,2.60405235 5.0667549,2.61442315 C5.05013995,2.63260437 5.02658224,2.64302689 5.00212355,2.64302689 C4.99939414,2.64302689 4.99658523,2.64289757 4.99380283,2.64263895 C3.33066508,2.49183569 1.8309209,1.70983636 0.770823616,0.44072 C0.716765412,0.375986583 0.613100856,0.383926319 0.570013287,0.456056363 C0.362419184,0.803646106 0.252712828,1.20120187 0.252712828,1.60574047 C0.252712828,2.2257123 0.50792585,2.80996824 0.951229623,3.23589499 C0.764808316,3.19275662 0.58437581,3.12481627 0.416768878,3.0339619 C0.335681572,2.98999593 0.235912386,3.04650513 0.234772924,3.13702329 C0.22316631,4.05803266 0.775672955,4.87755824 1.60334646,5.24658785 C1.58667851,5.24697579 1.57001057,5.24715682 1.55331612,5.24715682 C1.42211898,5.24715682 1.28927889,5.23479463 1.15853224,5.21040645 C1.06721627,5.19338904 0.990501319,5.277933 1.01885538,5.36433905 C1.28750345,6.18290772 2.00965746,6.78627593 2.87384675,6.9232687 C2.15662158,7.39316141 1.32139583,7.641026 0.452092205,7.641026 L0.181085708,7.64087083 C0.0975869817,7.64087083 0.0269668278,7.69399206 0.00568803467,7.7729239 C-0.015272769,7.85066607 0.0233364484,7.93267552 0.094539583,7.97309835 C1.07410604,8.5294747 2.19144142,8.82352941 3.32623972,8.82352941 C4.31955923,8.82352941 5.24872436,8.63113952 6.08795148,8.25173911 C6.85730042,7.90391661 7.53716183,7.40671328 8.10864185,6.7739396 C8.64100916,6.18448532 9.05731033,5.50402151 9.34593875,4.75147937 C9.62107911,4.03413586 9.76650627,3.26871429 9.76650627,2.53794823 L9.76650627,2.50313753 C9.76647978,2.38580013 9.82085597,2.27539384 9.91572282,2.2002379 C10.2757134,1.91497638 10.5891979,1.57917986 10.8474319,1.20218464 C10.9156141,1.10264053 10.8080807,0.977880637 10.6958834,1.0264501 Z'; // eslint-disable-line
6 |
7 | export default function Twitter(props) {
8 | return ;
9 | }
10 |
--------------------------------------------------------------------------------
/src/theme/base/_spacing.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * @TODO: Remove this file when fully migrated to tailwind
3 | */
4 |
5 | /**
6 | * We need a way to consistently set the spacing in the app. This script
7 | * generates classnames for paddings and margins. It also defines a mixin to
8 | * use inside responsive selectors.
9 | *
10 | * The idea is to use composition when possible, for responsive scenarios we should use
11 | * the `spacing` mixing.
12 | *
13 | * The classnames consist of three parts, representing the following:
14 | *
15 | * .[Type][Direction][Size]
16 | *
17 | * Type = `M` or `P` = Margin or Padding
18 | * Direction = `T`, `L`, `R`, `B` = Top, Left, Right, Bottom
19 | * Size = `Z`, `T`, `S`, `M`, `L`, `XL` = Zero, Tiny, Small, Medium, Large, Extra Large
20 | *
21 | **/
22 | $typeList: (
23 | 'M': 'margin',
24 | 'P': 'padding',
25 | );
26 |
27 | $directionListVertical: (
28 | 'T': ('top'),
29 | 'B': ('bottom'),
30 | 'V': ('top', 'bottom'),
31 | );
32 |
33 | $directionListHorizontal: (
34 | 'L': ('left'),
35 | 'R': ('right'),
36 | 'H': ('left', 'right'),
37 | );
38 |
39 | // Size list description:
40 | // A - auto
41 | // Z - zero
42 | // T - tiny
43 | // XS - extra small
44 | // S - small
45 | // M - medium
46 | // L - large
47 | // XL - extra large
48 | $sizeList: (
49 | 'A': 'auto',
50 | 'Z': 0,
51 | 'T': 1px,
52 | 'XS': 4px,
53 | 'S': 8px,
54 | 'M': 16px,
55 | 'L': 32px,
56 | 'XL': 64px,
57 | 'XXL': 84px,
58 | );
59 |
60 | /**
61 | * Composition doesn't work well inside responsive selectors, therefore we
62 | * should use this mixing instead to still keep consistency across our code base.
63 | *
64 | * .button {
65 | * // some styles for mobile
66 | *
67 | * respond-to(tablet) {
68 | * @include spacing('M', 'L', 'XL'); // marging-left: 64px;
69 | * // something else....
70 | * }
71 | * }
72 | */
73 | @mixin spacing($type: 'P', $direction: 'V', $size: 'M') {
74 | $directions: map-get($directionListVertical, $direction);
75 |
76 | @if ($directions) { } @else {
77 | $directions: map-get($directionListHorizontal, $direction);
78 | }
79 |
80 | @each $dir in $directions {
81 | #{map-get($typeList, $type) + '-' + $dir}: #{map-get($sizeList, $size)};
82 | }
83 | }
84 |
85 | /**
86 | * Generates the common spacing classes for composition.
87 | *
88 | * .button {
89 | * composes: PTM; // padding-top: 16px;
90 | * composes: MLL; // margin-left: 32px;
91 | * }
92 | *
93 | */
94 | @mixin spacingGenerator($types, $directions, $sizes) {
95 | @each $typeKey, $type in $types {
96 | @each $directionKey, $direction in $directions {
97 | @each $sizeKey, $size in $sizes {
98 | .#{$typeKey}#{$directionKey}#{$sizeKey} {
99 | @each $dir in $direction {
100 | #{$type + '-' + $dir}: #{$size};
101 | }
102 | }
103 | }
104 | }
105 | }
106 | }
107 |
108 | @include spacingGenerator($typeList, $directionListVertical, $sizeList);
109 | @include spacingGenerator($typeList, $directionListHorizontal, $sizeList);
110 |
--------------------------------------------------------------------------------
/src/components/icon/Instagram.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Icon from './Icon.js';
3 |
4 | export default function Instagram(props) {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
36 |
42 |
43 |
44 |
45 |
46 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/pages/static/CookiesPolicy.md:
--------------------------------------------------------------------------------
1 | # What Are Cookies
2 |
3 | As is common practice with almost all professional websites this site uses cookies, which are tiny files that are downloaded to your computer, to improve your experience. This page describes what information they gather, how we use it and why we sometimes need to store these cookies. We will also share how you can prevent these cookies from being stored however this may downgrade or 'break' certain elements of the sites functionality.
4 |
5 | For more general information on cookies see the Wikipedia article on HTTP Cookies.
6 |
7 | ## How We Use Cookies
8 |
9 | We use cookies for a variety of reasons detailed below. Unfortunately in most cases there are no industry standard options for disabling cookies without completely disabling the functionality and features they add to this site. It is recommended that you leave on all cookies if you are not sure whether you need them or not in case they are used to provide a service that you use.
10 |
11 | ## Disabling Cookies
12 |
13 | You can prevent the setting of cookies by adjusting the settings on your browser (see your browser Help for how to do this). Be aware that disabling cookies will affect the functionality of this and many other websites that you visit. Disabling cookies will usually result in also disabling certain functionality and features of the this site. Therefore it is recommended that you do not disable cookies.
14 |
15 | ## The Cookies We Set
16 |
17 | * **Account related cookies** - If you create an account with us then we will use cookies for the management of the signup process and general administration. These cookies will usually be deleted when you log out however in some cases they may remain afterwards to remember your site preferences when logged out.
18 | * **Login related cookies** - We use cookies when you are logged in so that we can remember this fact. This prevents you from having to log in every single time you visit a new page. These cookies are typically removed or cleared when you log out to ensure that you can only access restricted features and areas when logged in.
19 |
20 | ## Third Party Cookies
21 |
22 | In some special cases we also use cookies provided by trusted third parties. The following section details which third party cookies you might encounter through this site.
23 |
24 | * This site uses Google Analytics which is one of the most widespread and trusted analytics solution on the web for helping us to understand how you use the site and ways that we can improve your experience. These cookies may track things such as how long you spend on the site and the pages that you visit so we can continue to produce engaging content.
25 | * For more information on Google Analytics cookies, see the official Google Analytics page.
26 |
27 | ## More Information
28 |
29 | Hopefully that has clarified things for you and as was previously mentioned if there is something that you aren't sure whether you need or not it's usually safer to leave cookies enabled in case it does interact with one of the features you use on our site. This Cookies Policy was created with the help of the GDPR Cookies Policy Generator However if you are still looking for more information then you can contact us through one of our preferred contact methods:
30 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "coding-coach",
3 | "version": "0.1.0",
4 | "private": true,
5 | "homepage": "https://codingcoach.io/",
6 | "scripts": {
7 | "start": "npm-run-all i18n-extract i18n-compile build:css build:dev",
8 | "build": "npm-run-all i18n-extract i18n-compile build:css build:app",
9 | "build:app": "react-scripts build",
10 | "build:dev": "react-scripts start",
11 | "build:prod": "npm-run-all build build:ssr",
12 | "build:ssr": "react-snap",
13 | "deploy": "gh-pages -d build",
14 | "lint": "eslint src/",
15 | "test": "react-scripts test --env=jsdom",
16 | "test:staged": "cross-env CI=true react-scripts test --env=jsdom --findRelatedTests",
17 | "eject": "react-scripts eject",
18 | "precommit": "lint-staged",
19 | "analyze": "source-map-explorer build/static/js/main.*",
20 | "storybook": "start-storybook -p 9001 -c .storybook",
21 | "build:css": "postcss src/theme/tailwind.css -o src/theme/index.css",
22 | "watch:css": "postcss src/theme/tailwind.css -o src/theme/index.css -w",
23 | "i18n-add": "lingui add-locale",
24 | "i18n-extract": "lingui extract",
25 | "i18n-compile": "lingui compile"
26 | },
27 | "dependencies": {
28 | "@fortawesome/fontawesome-svg-core": "^1.2.4",
29 | "@fortawesome/free-brands-svg-icons": "^5.3.1",
30 | "@fortawesome/free-solid-svg-icons": "^5.4.0",
31 | "@fortawesome/react-fontawesome": "^0.1.3",
32 | "@lingui/react": "^2.7.0",
33 | "@reach/router": "^1.1.1",
34 | "classnames": "^2.2.6",
35 | "glhd-tailwindcss-transitions": "^0.3.0",
36 | "prop-types": "^15.6.2",
37 | "react": "^16.5.0",
38 | "react-dom": "^16.5.0",
39 | "react-scripts": "2.1.1",
40 | "remark": "^10.0.1",
41 | "remark-react": "^5.0.0"
42 | },
43 | "husky": {
44 | "hooks": {
45 | "pre-commit": "lint-staged"
46 | }
47 | },
48 | "lint-staged": {
49 | "src/**/*.js": [
50 | "prettier --write",
51 | "eslint --fix",
52 | "npm run test:staged",
53 | "git add"
54 | ]
55 | },
56 | "devDependencies": {
57 | "@babel/core": "^7.1.6",
58 | "@lingui/cli": "^2.7.0",
59 | "@lingui/loader": "^2.7.0",
60 | "@lingui/macro": "^2.7.0",
61 | "@storybook/addon-viewport": "^3.4.10",
62 | "@storybook/react": "^3.4.10",
63 | "ajv": "^6.5.3",
64 | "autoprefixer": "^9.3.1",
65 | "babel-core": "^7.0.0-bridge.0",
66 | "cross-env": "^5.2.0",
67 | "css-loader": "^1.0.1",
68 | "eslint-config-prettier": "^3.3.0",
69 | "eslint-plugin-babel": "^5.2.1",
70 | "eslint-plugin-prettier": "^3.0.0",
71 | "file-loader": "^2.0.0",
72 | "gh-pages": "^1.2.0",
73 | "husky": "^0.14.3",
74 | "lint-staged": "^8.0.4",
75 | "node-sass": "^4.10.0",
76 | "npm-run-all": "^4.1.3",
77 | "postcss-cli": "^6.0.1",
78 | "prettier": "^1.14.2",
79 | "react-snap": "^1.19.0",
80 | "react-testing-library": "^5.0.1",
81 | "resolve-url-loader": "^3.0.0",
82 | "sass-loader": "^7.1.0",
83 | "storybook-readme": "^4.0.0-beta1",
84 | "style-loader": "^0.23.1",
85 | "tailwindcss": "^0.7.2",
86 | "tailwindcss-plugins": "^0.1.2",
87 | "webpack-bundle-analyzer": "^3.0.2"
88 | },
89 | "browserslist": [
90 | ">0.2%",
91 | "not dead",
92 | "not ie <= 11",
93 | "not op_mini all"
94 | ]
95 | }
96 |
--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, gender identity and expression, level of experience,
9 | nationality, personal appearance, race, religion, or sexual identity and
10 | orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
26 | * Trolling, insulting/derogatory comments, and personal or political attacks
27 | * Public or private harassment
28 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
29 | * Other conduct which could reasonably be considered inappropriate in a professional setting
30 |
31 | ## Our Responsibilities
32 |
33 | Project maintainers are responsible for clarifying the standards of acceptable
34 | behavior and are expected to take appropriate and fair corrective action in
35 | response to any instances of unacceptable behavior.
36 |
37 | Project maintainers have the right and responsibility to remove, edit, or
38 | reject comments, commits, code, wiki edits, issues, and other contributions
39 | that are not aligned to this Code of Conduct, or to ban temporarily or
40 | permanently any contributor for other behaviors that they deem inappropriate,
41 | threatening, offensive, or harmful.
42 |
43 | ## Scope
44 |
45 | This Code of Conduct applies both within project spaces and in public spaces
46 | when an individual is representing the project or its community. Examples of
47 | representing a project or community include using an official project e-mail
48 | address, posting via an official social media account, or acting as an appointed
49 | representative at an online or offline event. Representation of a project may be
50 | further defined and clarified by project maintainers.
51 |
52 | ## Enforcement
53 |
54 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
55 | reported by contacting the project team. All
56 | complaints will be reviewed and investigated and will result in a response that
57 | is deemed necessary and appropriate to the circumstances. The project team is
58 | obligated to maintain confidentiality with regard to the reporter of an incident.
59 | Further details of specific enforcement policies may be posted separately.
60 |
61 | Project maintainers who do not follow or enforce the Code of Conduct in good
62 | faith may face temporary or permanent repercussions as determined by other
63 | members of the project's leadership.
64 |
65 | ## Attribution
66 |
67 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
68 | available at [http://contributor-covenant.org/version/1/4][version]
69 |
70 | [homepage]: http://contributor-covenant.org
71 | [version]: http://contributor-covenant.org/version/1/4/
72 |
--------------------------------------------------------------------------------
/src/pages/auth/Login.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Trans, t } from '@lingui/macro';
3 | import { noop } from 'utils/noop';
4 | import { I18n } from '@lingui/react';
5 |
6 | import Button from 'components/button/Button';
7 | import Facebook from 'components/icon/Facebook';
8 | import Instagram from 'components/icon/Instagram';
9 | import TextField from 'components/textfield/TextField';
10 | import Twitter from 'components/icon/Twitter';
11 | import { Panel, PanelContent } from 'components/panel/Panel';
12 |
13 | import { ReactComponent as Logo } from '../home/assets/images/coding-coach-logo.svg';
14 |
15 | export default function Login() {
16 | return (
17 |
92 |
93 |
94 |
95 | )}
96 |
97 |
98 |
99 | {legal.show && }
100 |
101 | );
102 | }
103 | }
104 |
105 | export default Home;
106 |
--------------------------------------------------------------------------------
/src/components/button/button.module.scss:
--------------------------------------------------------------------------------
1 | @import '~theme/base/variables';
2 | @import '~theme/base/spacing';
3 |
4 |
5 | @mixin btn-box-shadow ($color) {
6 | box-shadow: 0px 7px 10px rgba($color, 0.5);
7 |
8 | &:hover,
9 | &:focus {
10 | box-shadow: 0px 4px 5px rgba($color, 0.6);
11 | }
12 |
13 | &:active {
14 | box-shadow: none;
15 | }
16 | }
17 |
18 | @mixin btn-borders ($color, $color-darker) {
19 | border: 3px solid $color;
20 |
21 | &:hover,
22 | &:focus {
23 | background-color: $color-darker;
24 | border-color: $color-darker;
25 | // border-bottom-color: $color-darker;
26 | }
27 |
28 | &:active {
29 | border-color: $color-darker;
30 | }
31 | }
32 |
33 | .button {
34 | display: inline-block;
35 | min-height: $button-default;
36 | line-height: inherit;
37 | min-width: 96px;
38 | box-sizing: border-box;
39 | text-align: center;
40 | white-space: nowrap;
41 | outline: none;
42 | border: none;
43 | border-radius: 3px;
44 | transition-property: all;
45 | transition-duration: 0.1s;
46 | transition-timing-function: linear;
47 | font-size: $font-xs;
48 | cursor: pointer;
49 |
50 | &.square {
51 | border-radius: 0;
52 | }
53 |
54 | &.rounded {
55 | border-radius: $border-radius-rounded;
56 | }
57 |
58 | &.pill {
59 | border-radius: $border-radius-pill;
60 | }
61 |
62 | &.primary {
63 | background: $color-primary;
64 | color: $color-white;
65 | @include btn-borders($color-primary, $color-primary-darker);
66 |
67 | &.shadow {
68 | @include btn-box-shadow($color-primary-darker);
69 | }
70 |
71 | &:active {
72 | background: $color-primary-darker;
73 | }
74 | }
75 |
76 |
77 | &.secondary {
78 | background: transparent;
79 | color: $color-primary;
80 | @include btn-borders($color-primary, $color-primary);
81 |
82 | &.shadow {
83 | @include btn-box-shadow($color-primary-darker);
84 | }
85 |
86 | &:active {
87 | background: $color-primary;
88 | color: $color-white;
89 | }
90 | }
91 |
92 | &.tertiary {
93 | background: transparent;
94 | color: $color-primary-darker;
95 |
96 | &:hover,
97 | &:focus {
98 | text-decoration: underline;
99 | }
100 | }
101 |
102 | &.danger {
103 | background: $color-danger;
104 | color: $color-white;
105 | @include btn-borders($color-danger, $color-danger-darker);
106 |
107 | &.shadow {
108 | @include btn-box-shadow($color-danger-darker);
109 | }
110 |
111 | &:active {
112 | background: $color-danger-darker;
113 | }
114 | }
115 |
116 | &:disabled {
117 | cursor: not-allowed;
118 | background: $color-grey-light;
119 | color: $color-grey;
120 | border: none;
121 |
122 | &.shadow {
123 | @include btn-box-shadow($color-grey-light);
124 | }
125 |
126 | &:hover,
127 | &:active {
128 | transform: none;
129 | background: $color-grey-light;
130 | }
131 | }
132 |
133 | &:active {
134 | text-shadow: none;
135 | }
136 |
137 | i,
138 | svg {
139 | vertical-align: middle;
140 | margin-right: 4px;
141 | }
142 | }
143 |
144 | .capitalize {
145 | text-transform: capitalize;
146 | }
147 |
148 | .uppercase {
149 | text-transform: uppercase;
150 | }
151 |
152 | .lowercase {
153 | text-transform: lowercase;
154 | }
155 |
156 | .none{
157 | text-transform: none;
158 | }
159 |
160 | .small {
161 | composes: PHS;
162 | min-height: $button-small;
163 | line-height: $button-small;
164 | font-size: $font-xxs
165 | }
166 |
167 | .medium {
168 | composes: PHM;
169 | }
170 |
171 | .large {
172 | composes: PHL;
173 | min-height: $button-large;
174 | line-height: $button-large;
175 | font-size: $font-l;
176 | }
177 |
178 | .fullWidth {
179 | width: 100%;
180 | }
181 |
--------------------------------------------------------------------------------
/src/pages/static/TermsAndConditions.md:
--------------------------------------------------------------------------------
1 | # Terms and Conditions
2 |
3 | #### Last updated: October 03, 2018
4 |
5 | These Terms and Conditions ("Terms", "Terms and Conditions") govern your relationship with www.codingcoach.io website (the "Service") operated by Coding Coach ("us", "we", or "our").
6 |
7 | Please read these Terms and Conditions carefully before using the Service.
8 |
9 | Your access to and use of the Service is conditioned on your acceptance of and compliance with these Terms. These Terms apply to all visitors, users and others who access or use the Service.
10 |
11 |
12 | By accessing or using the Service you agree to be bound by these Terms. If you disagree with any part of the terms then you may not access the Service.
13 |
14 | ## Accounts
15 |
16 | When you create an account with us, you must provide us information that is accurate, complete, and current at all times. Failure to do so constitutes a breach of the Terms, which may result in immediate termination of your account on our Service.
17 |
18 | You are responsible for safeguarding the password that you use to access the Service and for any activities or actions under your password, whether your password is with our Service or a third-party service.
19 |
20 | You agree not to disclose your password to any third party. You must notify us immediately upon becoming aware of any breach of security or unauthorized use of your account.
21 |
22 | You may not use as a username the name of another person or entity or that is not lawfully available for use, a name or trademark that is subject to any rights of another person or entity other than you without appropriate authorization, or a name that is otherwise offensive, vulgar or obscene.
23 |
24 | ## Links To Other Websites
25 |
26 | Our Service may contain links to third-party web sites or services that are not owned or controlled by Coding Coach.
27 |
28 | Coding Coach has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that Coding Coach shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such web sites or services.
29 |
30 | We strongly advise you to read the terms and conditions and privacy policies of any third-party web sites or services that you visit.
31 |
32 | ## Termination
33 |
34 | We may terminate or suspend your account immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms. Upon termination, your right to use the Service will immediately cease. If you wish to terminate your account, you may simply discontinue using the Service. Governing Law
35 |
36 | These Terms shall be governed and construed in accordance with the laws of Baden-Württemberg, Germany, without regard to its conflict of law provisions.
37 |
38 | Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect. These Terms constitute the entire agreement between us regarding our Service, and supersede and replace any prior agreements we might have between us regarding the Service.
39 |
40 | ## Changes
41 |
42 | We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is material we will try to provide at least 15 days notice prior to any new terms taking effect. What constitutes a material change will be determined at our sole discretion.
43 |
44 | By continuing to access or use our Service after those revisions become effective, you agree to be bound by the revised terms. If you do not agree to the new terms, please stop using the Service.
45 |
46 | ## Contact Us
47 |
48 | If you have any questions about these Terms, please contact us.
49 |
--------------------------------------------------------------------------------
/src/components/button/stories/Button.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { faFacebook, faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons';
5 | import Container from './container-story';
6 | import { withDocs } from 'storybook-readme';
7 | import ButtonReadme from './button.README.md';
8 |
9 | import Button from './../Button';
10 | import styles from './styles.scss';
11 | storiesOf('Buttons', module).add(
12 | 'Button Types',
13 | withDocs(ButtonReadme, () => (
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | )),
22 | );
23 |
24 | storiesOf('Buttons', module).add('Button Sizes', () => (
25 |
137 | ));
138 |
--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | // In production, we register a service worker to serve assets from local cache.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on the "N+1" visit to a page, since previously
7 | // cached resources are updated in the background.
8 |
9 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
10 | // This link also includes instructions on opting out of this behavior.
11 |
12 | const isLocalhost = Boolean(
13 | window.location.hostname === 'localhost' ||
14 | // [::1] is the IPv6 localhost address.
15 | window.location.hostname === '[::1]' ||
16 | // 127.0.0.1/8 is considered localhost for IPv4.
17 | window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
18 | );
19 |
20 | export default function register() {
21 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
22 | // The URL constructor is available in all browsers that support SW.
23 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
24 | if (publicUrl.origin !== window.location.origin) {
25 | // Our service worker won't work if PUBLIC_URL is on a different origin
26 | // from what our page is served on. This might happen if a CDN is used to
27 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
28 | return;
29 | }
30 |
31 | window.addEventListener('load', () => {
32 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
33 |
34 | if (isLocalhost) {
35 | // This is running on localhost. Lets check if a service worker still exists or not.
36 | checkValidServiceWorker(swUrl);
37 |
38 | // Add some additional logging to localhost, pointing developers to the
39 | // service worker/PWA documentation.
40 | navigator.serviceWorker.ready.then(() => {
41 | console.log(
42 | 'This web app is being served cache-first by a service ' +
43 | 'worker. To learn more, visit https://goo.gl/SC7cgQ'
44 | );
45 | });
46 | } else {
47 | // Is not local host. Just register service worker
48 | registerValidSW(swUrl);
49 | }
50 | });
51 | }
52 | }
53 |
54 | function registerValidSW(swUrl) {
55 | navigator.serviceWorker
56 | .register(swUrl)
57 | .then(registration => {
58 | registration.onupdatefound = () => {
59 | const installingWorker = registration.installing;
60 | installingWorker.onstatechange = () => {
61 | if (installingWorker.state === 'installed') {
62 | if (navigator.serviceWorker.controller) {
63 | // At this point, the old content will have been purged and
64 | // the fresh content will have been added to the cache.
65 | // It's the perfect time to display a "New content is
66 | // available; please refresh." message in your web app.
67 | console.log('New content is available; please refresh.');
68 | } else {
69 | // At this point, everything has been precached.
70 | // It's the perfect time to display a
71 | // "Content is cached for offline use." message.
72 | console.log('Content is cached for offline use.');
73 | }
74 | }
75 | };
76 | };
77 | })
78 | .catch(error => {
79 | console.error('Error during service worker registration:', error);
80 | });
81 | }
82 |
83 | function checkValidServiceWorker(swUrl) {
84 | // Check if the service worker can be found. If it can't reload the page.
85 | fetch(swUrl)
86 | .then(response => {
87 | // Ensure service worker exists, and that we really are getting a JS file.
88 | if (
89 | response.status === 404 ||
90 | response.headers.get('content-type').indexOf('javascript') === -1
91 | ) {
92 | // No service worker found. Probably a different app. Reload the page.
93 | navigator.serviceWorker.ready.then(registration => {
94 | registration.unregister().then(() => {
95 | window.location.reload();
96 | });
97 | });
98 | } else {
99 | // Service worker found. Proceed as normal.
100 | registerValidSW(swUrl);
101 | }
102 | })
103 | .catch(() => {
104 | console.log('No internet connection found. App is running in offline mode.');
105 | });
106 | }
107 |
108 | export function unregister() {
109 | if ('serviceWorker' in navigator) {
110 | navigator.serviceWorker.ready.then(registration => {
111 | registration.unregister();
112 | });
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Coding Coach
2 | [](https://travis-ci.org/Coding-Coach/coding-coach)
3 | [](https://github.com/Coding-Coach/coding-coach/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)
4 |
5 | Connecting developers with mentors worldwide.
6 |
7 | ## Getting started
8 |
9 | Copy the `.env.example` file to `.env`.
10 |
11 | Installing the node modules and starting the server:
12 |
13 | ### npm
14 | ```sh
15 | npm install
16 | npm start
17 | ```
18 |
19 | ### Yarn
20 | ```sh
21 | yarn
22 | yarn start
23 | ```
24 |
25 | ## Slack
26 |
27 | Coding Coach is on Slack! [Click here](https://coding-coach.slack.com/) to join.
28 |
29 | ## Styling
30 | Initially we decided to use SASS to handle the CSS. However, over time we decided to use [tailwind](https://tailwindcss.com/docs/what-is-tailwind)! We are currently migrating all our styles to tailwind.
31 |
32 | Please, every new PR *should be using tailwind* for styling the components. Eventually we want to remove SASS, but for now it will be still there to support legacy code.
33 |
34 | ## Internationalization
35 | One of the goals we have with this platform is to provide mentorship all over the world, therefore we want to support as many languages as possible.
36 |
37 | We are using [LinguiJS](https://lingui.js.org/tutorials/react.html) as the library to enable i18n support. Lingui provides a CLI tool to manage the keys and texts. When working on a new feature that requires you to add some text, we are going to use the CLI to insert that new text into the dictionaries. Follow these steps:
38 |
39 | First you need to define the key in the code:
40 | ```
41 |
42 | ```
43 |
44 | Then in your terminal you need to extract all the keys running the following command:
45 | ```
46 | $ yarn i18n-extract
47 |
48 | Catalog statistics:
49 | ┌──────────┬─────────────┬─────────┐
50 | │ Language │ Total count │ Missing │
51 | ├──────────┼─────────────┼─────────┤
52 | │ en │ 18 │ 1 │
53 | │ es │ 18 │ 18 │
54 | │ fr │ 18 │ 18 │
55 | └──────────┴─────────────┴─────────┘
56 |
57 | (use "lingui add-locale " to add more locales)
58 | (use "lingui extract" to update catalogs with new messages)
59 | (use "lingui compile" to compile catalogs for production)
60 | ✨ Done in 2.95s.
61 | ```
62 |
63 | At this point the key will be inserted into all dictionaries, and we will also see a nice count of the missing keys, in this example for english there's only one key missing for translation (The one we just defined in our code), but for the other languages we need to translate them all. This is a nice feature because we can easily know which translations are missing.
64 |
65 | Open the `src/config/i18n/en/messages.json` file (not the `.js` but the `.json` file) and add the translation to the new key, if you can speak other languages, please go ahead and add the translations as well, if not we can leverage in our community to add the missing translations later on.
66 |
67 | Finally we need to compile the dictionaries, just run the following command in your terminal:
68 | ```
69 | $ yarn i18n-compile
70 | ```
71 |
72 | This will generate the compiled dictionaries that our app will be using.
73 |
74 | ### Coding Coach Board
75 |
76 | In order to organize all the work, we are using https://zenhub.com to keep track of all the epics and tasks. After you login to ZenHub search for the `Coding-Coach/coding-coach` repository, make sure you don't add someone else fork.
77 |
78 | ### Workflow
79 |
80 | This section describes the workflow we are going to follow when working in a new feature or fixing a bug. If you want to contribute, please follow these steps:
81 |
82 | 1. Fork this project
83 | 2. Clone the forked project to your local environment, for example: `git clone git@github.com:crysfel/coding-coach-front-end.git` (Make sure to replace the URL to your own repository).
84 | 3. Add the original project as a remote, for this example the name is `upstream`, feel free to use whatever name you want. `git remote add upstream git@github.com:Coding-Coach/coding-coach.git`.
85 |
86 | Forking the project will create a copy of that project in your own GitHub account, you will commit your work against your own repository.
87 |
88 | #### Updating your local
89 |
90 | In order to update your local environment to the latest version on `develop`, you will have to pull the changes using the `upstream` repository, for example: `git pull upstream develop`. This will pull all the new commits from the origin repository to your local environment.
91 |
92 | #### Features/Bugs
93 |
94 | When working on a new feature, create a new branch `feature/something` from the `develop` branch, for example `feature/login-form`. Commit your work against this new branch and push everything to your forked project. Once everything is completed, you should create a PR to the original project. Make sure to add a description about your work.
95 |
96 | When fixing a bug, create a new branch `fix/something` from the `develop` branch, for example `fix/css-btn-issues`. When completed, push your commits to your forked repository and create a PR from there. Please make sure to describe what was the problem and how did you fix it.
97 |
98 | #### Updating your local branch
99 |
100 | Let's say you've been working on a feature for a couple days, most likely there are new changes in `develop` and your branch is behind. In order to update it to the latest (You might not need/want to do this) you need to pull the latest changes to `develop` and then rebase your current branch.
101 |
102 | ```bash
103 | $ git checkout develop
104 | $ git pull upstream develop
105 | $ git checkout feature/something-awesome
106 | $ git rebase develop
107 | ```
108 |
109 | After this, your commits will be on top of the `develop` commits. From here you can push to your `origin` repository and create a PR.
110 |
111 | You might have some conflicts while rebasing, try to resolve the conflicts for each individual commit. Rebasing is intimidating at the beginning, if you need help don't be afraid to reach out in slack.
112 |
113 | #### Pull Requests
114 |
115 | In order to merge a PR, it will first go through a review process. Once it is approved, we will merge to the `develop` branch using the `Squash` button in github.
116 |
117 | When using squash, all the commits will be squashed into one. The idea is to merge features/fixes as oppose of merging each individual commit. This helps when looking back in time for changes in the code base, and if the PR has a great comment, it's easier to know why that code was introduced.
118 |
--------------------------------------------------------------------------------
/src/pages/home/assets/images/meeting.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tailwind.js:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Tailwind - The Utility-First CSS Framework
4 |
5 | A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink),
6 | David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger).
7 |
8 | Welcome to the Tailwind config file. This is where you can customize
9 | Tailwind specifically for your project. Don't be intimidated by the
10 | length of this file. It's really just a big JavaScript object and
11 | we've done our very best to explain each section.
12 |
13 | View the full documentation at https://tailwindcss.com.
14 |
15 |
16 | |-------------------------------------------------------------------------------
17 | | The default config
18 | |-------------------------------------------------------------------------------
19 | |
20 | | This variable contains the default Tailwind config. You don't have
21 | | to use it, but it can sometimes be helpful to have available. For
22 | | example, you may choose to merge your custom configuration
23 | | values with some of the Tailwind defaults.
24 | |
25 | */
26 |
27 | let defaultConfig = require('tailwindcss/defaultConfig')()
28 |
29 |
30 | /*
31 | |-------------------------------------------------------------------------------
32 | | Colors https://tailwindcss.com/docs/colors
33 | |-------------------------------------------------------------------------------
34 | |
35 | | Here you can specify the colors used in your project. To get you started,
36 | | we've provided a generous palette of great looking colors that are perfect
37 | | for prototyping, but don't hesitate to change them for your project. You
38 | | own these colors, nothing will break if you change everything about them.
39 | |
40 | | We've used literal color names ("red", "blue", etc.) for the default
41 | | palette, but if you'd rather use functional names like "primary" and
42 | | "secondary", or even a numeric scale like "100" and "200", go for it.
43 | |
44 | */
45 |
46 | let colors = {
47 | 'transparent': 'transparent',
48 |
49 | 'black': '#202939',
50 | 'white': '#ffffff',
51 |
52 | // Green variations
53 | 'primary-lightest': '#D5FFF4',
54 | 'primary-lighter': '#E6F5F0',
55 | 'primary-light': '#69D5B1',
56 | 'primary': '#00bc89',
57 | 'primary-dark': '#009d6c',
58 |
59 | // Grey variations
60 | 'secondary-lightest': '#E8E7E7',
61 | 'secondary-lighter': '#A8A4A4',
62 | 'secondary-light': '#979797',
63 | 'secondary': '#929292',
64 | 'secondary-dark': '#4A4A4A',
65 |
66 | // Red variations
67 | 'danger-lighter': '#FFD5DB',
68 | 'danger-light': '#EA7A71',
69 | 'danger': '#EB6E64',
70 | 'danger-dark': '#D4574D',
71 | }
72 |
73 | module.exports = {
74 |
75 | /*
76 | |-----------------------------------------------------------------------------
77 | | Colors https://tailwindcss.com/docs/colors
78 | |-----------------------------------------------------------------------------
79 | |
80 | | The color palette defined above is also assigned to the "colors" key of
81 | | your Tailwind config. This makes it easy to access them in your CSS
82 | | using Tailwind's config helper. For example:
83 | |
84 | | .error { color: config('colors.red') }
85 | |
86 | */
87 |
88 | colors: colors,
89 |
90 |
91 | /*
92 | |-----------------------------------------------------------------------------
93 | | Screens https://tailwindcss.com/docs/responsive-design
94 | |-----------------------------------------------------------------------------
95 | |
96 | | Screens in Tailwind are translated to CSS media queries. They define the
97 | | responsive breakpoints for your project. By default Tailwind takes a
98 | | "mobile first" approach, where each screen size represents a minimum
99 | | viewport width. Feel free to have as few or as many screens as you
100 | | want, naming them in whatever way you'd prefer for your project.
101 | |
102 | | Tailwind also allows for more complex screen definitions, which can be
103 | | useful in certain situations. Be sure to see the full responsive
104 | | documentation for a complete list of options.
105 | |
106 | | Class name: .{screen}:{utility}
107 | |
108 | */
109 |
110 | screens: {
111 | 'sm': '576px',
112 | 'md': '768px',
113 | 'lg': '992px',
114 | 'xl': '1200px',
115 | },
116 |
117 |
118 | /*
119 | |-----------------------------------------------------------------------------
120 | | Fonts https://tailwindcss.com/docs/fonts
121 | |-----------------------------------------------------------------------------
122 | |
123 | | Here is where you define your project's font stack, or font families.
124 | | Keep in mind that Tailwind doesn't actually load any fonts for you.
125 | | If you're using custom fonts you'll need to import them prior to
126 | | defining them here.
127 | |
128 | | By default we provide a native font stack that works remarkably well on
129 | | any device or OS you're using, since it just uses the default fonts
130 | | provided by the platform.
131 | |
132 | | Class name: .font-{name}
133 | |
134 | */
135 |
136 | fonts: {
137 | 'titles': ['"Fjalla One"', 'sans-serif'],
138 | 'content': ['"Open Sans"', 'sans-serif'],
139 | },
140 |
141 |
142 | /*
143 | |-----------------------------------------------------------------------------
144 | | Text sizes https://tailwindcss.com/docs/text-sizing
145 | |-----------------------------------------------------------------------------
146 | |
147 | | Here is where you define your text sizes. Name these in whatever way
148 | | makes the most sense to you. We use size names by default, but
149 | | you're welcome to use a numeric scale or even something else
150 | | entirely.
151 | |
152 | | By default Tailwind uses the "rem" unit type for most measurements.
153 | | This allows you to set a root font size which all other sizes are
154 | | then based on. That said, you are free to use whatever units you
155 | | prefer, be it rems, ems, pixels or other.
156 | |
157 | | Class name: .text-{size}
158 | |
159 | */
160 |
161 | textSizes: {
162 | 'xs': '.75rem', // 12px
163 | 'sm': '.875rem', // 14px
164 | 'base': '1rem', // 16px
165 | 'lg': '1.125rem', // 18px
166 | 'xl': '1.25rem', // 20px
167 | '2xl': '1.5rem', // 24px
168 | '3xl': '1.875rem', // 30px
169 | '4xl': '2.25rem', // 36px
170 | '5xl': '3rem', // 48px
171 | '6xl': '5.25rem', // 84px
172 | },
173 |
174 |
175 | /*
176 | |-----------------------------------------------------------------------------
177 | | Font weights https://tailwindcss.com/docs/font-weight
178 | |-----------------------------------------------------------------------------
179 | |
180 | | Here is where you define your font weights. We've provided a list of
181 | | common font weight names with their respective numeric scale values
182 | | to get you started. It's unlikely that your project will require
183 | | all of these, so we recommend removing those you don't need.
184 | |
185 | | Class name: .font-{weight}
186 | |
187 | */
188 |
189 | fontWeights: {
190 | 'hairline': 100,
191 | 'thin': 200,
192 | 'light': 300,
193 | 'normal': 400,
194 | 'medium': 500,
195 | 'semibold': 600,
196 | 'bold': 700,
197 | 'extrabold': 800,
198 | 'black': 900,
199 | },
200 |
201 |
202 | /*
203 | |-----------------------------------------------------------------------------
204 | | Leading (line height) https://tailwindcss.com/docs/line-height
205 | |-----------------------------------------------------------------------------
206 | |
207 | | Here is where you define your line height values, or as we call
208 | | them in Tailwind, leadings.
209 | |
210 | | Class name: .leading-{size}
211 | |
212 | */
213 |
214 | leading: {
215 | 'none': 1,
216 | 'tight': 1.25,
217 | 'normal': 1.5,
218 | 'loose': 2,
219 | },
220 |
221 |
222 | /*
223 | |-----------------------------------------------------------------------------
224 | | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing
225 | |-----------------------------------------------------------------------------
226 | |
227 | | Here is where you define your letter spacing values, or as we call
228 | | them in Tailwind, tracking.
229 | |
230 | | Class name: .tracking-{size}
231 | |
232 | */
233 |
234 | tracking: {
235 | 'tight': '-0.05em',
236 | 'normal': '0',
237 | 'wide': '0.05em',
238 | },
239 |
240 |
241 | /*
242 | |-----------------------------------------------------------------------------
243 | | Text colors https://tailwindcss.com/docs/text-color
244 | |-----------------------------------------------------------------------------
245 | |
246 | | Here is where you define your text colors. By default these use the
247 | | color palette we defined above, however you're welcome to set these
248 | | independently if that makes sense for your project.
249 | |
250 | | Class name: .text-{color}
251 | |
252 | */
253 |
254 | textColors: colors,
255 |
256 |
257 | /*
258 | |-----------------------------------------------------------------------------
259 | | Background colors https://tailwindcss.com/docs/background-color
260 | |-----------------------------------------------------------------------------
261 | |
262 | | Here is where you define your background colors. By default these use
263 | | the color palette we defined above, however you're welcome to set
264 | | these independently if that makes sense for your project.
265 | |
266 | | Class name: .bg-{color}
267 | |
268 | */
269 |
270 | backgroundColors: colors,
271 |
272 |
273 | /*
274 | |-----------------------------------------------------------------------------
275 | | Background sizes https://tailwindcss.com/docs/background-size
276 | |-----------------------------------------------------------------------------
277 | |
278 | | Here is where you define your background sizes. We provide some common
279 | | values that are useful in most projects, but feel free to add other sizes
280 | | that are specific to your project here as well.
281 | |
282 | | Class name: .bg-{size}
283 | |
284 | */
285 |
286 | backgroundSize: {
287 | 'auto': 'auto',
288 | 'cover': 'cover',
289 | 'contain': 'contain',
290 | },
291 |
292 |
293 | /*
294 | |-----------------------------------------------------------------------------
295 | | Border widths https://tailwindcss.com/docs/border-width
296 | |-----------------------------------------------------------------------------
297 | |
298 | | Here is where you define your border widths. Take note that border
299 | | widths require a special "default" value set as well. This is the
300 | | width that will be used when you do not specify a border width.
301 | |
302 | | Class name: .border{-side?}{-width?}
303 | |
304 | */
305 |
306 | borderWidths: {
307 | default: '1px',
308 | '0': '0',
309 | '2': '2px',
310 | '4': '4px',
311 | '8': '8px',
312 | },
313 |
314 |
315 | /*
316 | |-----------------------------------------------------------------------------
317 | | Border colors https://tailwindcss.com/docs/border-color
318 | |-----------------------------------------------------------------------------
319 | |
320 | | Here is where you define your border colors. By default these use the
321 | | color palette we defined above, however you're welcome to set these
322 | | independently if that makes sense for your project.
323 | |
324 | | Take note that border colors require a special "default" value set
325 | | as well. This is the color that will be used when you do not
326 | | specify a border color.
327 | |
328 | | Class name: .border-{color}
329 | |
330 | */
331 |
332 | borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
333 |
334 |
335 | /*
336 | |-----------------------------------------------------------------------------
337 | | Border radius https://tailwindcss.com/docs/border-radius
338 | |-----------------------------------------------------------------------------
339 | |
340 | | Here is where you define your border radius values. If a `default` radius
341 | | is provided, it will be made available as the non-suffixed `.rounded`
342 | | utility.
343 | |
344 | | If your scale includes a `0` value to reset already rounded corners, it's
345 | | a good idea to put it first so other values are able to override it.
346 | |
347 | | Class name: .rounded{-side?}{-size?}
348 | |
349 | */
350 |
351 | borderRadius: {
352 | 'none': '0',
353 | 'sm': '.125rem',
354 | default: '.25rem',
355 | 'lg': '.5rem',
356 | 'full': '9999px',
357 | },
358 |
359 |
360 | /*
361 | |-----------------------------------------------------------------------------
362 | | Width https://tailwindcss.com/docs/width
363 | |-----------------------------------------------------------------------------
364 | |
365 | | Here is where you define your width utility sizes. These can be
366 | | percentage based, pixels, rems, or any other units. By default
367 | | we provide a sensible rem based numeric scale, a percentage
368 | | based fraction scale, plus some other common use-cases. You
369 | | can, of course, modify these values as needed.
370 | |
371 | |
372 | | It's also worth mentioning that Tailwind automatically escapes
373 | | invalid CSS class name characters, which allows you to have
374 | | awesome classes like .w-2/3.
375 | |
376 | | Class name: .w-{size}
377 | |
378 | */
379 |
380 | width: {
381 | 'auto': 'auto',
382 | 'px': '1px',
383 | '1': '0.25rem',
384 | '2': '0.5rem',
385 | '3': '0.75rem',
386 | '4': '1rem',
387 | '5': '1.25rem',
388 | '6': '1.5rem',
389 | '8': '2rem',
390 | '10': '2.5rem',
391 | '12': '3rem',
392 | '16': '4rem',
393 | '24': '6rem',
394 | '32': '8rem',
395 | '48': '12rem',
396 | '64': '16rem',
397 | '1/2': '50%',
398 | '1/3': '33.33333%',
399 | '2/3': '66.66667%',
400 | '1/4': '25%',
401 | '3/4': '75%',
402 | '1/5': '20%',
403 | '2/5': '40%',
404 | '3/5': '60%',
405 | '4/5': '80%',
406 | '1/6': '16.66667%',
407 | '5/6': '83.33333%',
408 | 'full': '100%',
409 | 'screen': '100vw',
410 | },
411 |
412 |
413 | /*
414 | |-----------------------------------------------------------------------------
415 | | Height https://tailwindcss.com/docs/height
416 | |-----------------------------------------------------------------------------
417 | |
418 | | Here is where you define your height utility sizes. These can be
419 | | percentage based, pixels, rems, or any other units. By default
420 | | we provide a sensible rem based numeric scale plus some other
421 | | common use-cases. You can, of course, modify these values as
422 | | needed.
423 | |
424 | | Class name: .h-{size}
425 | |
426 | */
427 |
428 | height: {
429 | 'auto': 'auto',
430 | 'px': '1px',
431 | '1': '0.25rem',
432 | '2': '0.5rem',
433 | '3': '0.75rem',
434 | '4': '1rem',
435 | '5': '1.25rem',
436 | '6': '1.5rem',
437 | '8': '2rem',
438 | '10': '2.5rem',
439 | '12': '3rem',
440 | '16': '4rem',
441 | '24': '6rem',
442 | '32': '8rem',
443 | '40': '9rem',
444 | '48': '12rem',
445 | '64': '16rem',
446 | 'full': '100%',
447 | 'screen': '100vh',
448 | },
449 |
450 |
451 | /*
452 | |-----------------------------------------------------------------------------
453 | | Minimum width https://tailwindcss.com/docs/min-width
454 | |-----------------------------------------------------------------------------
455 | |
456 | | Here is where you define your minimum width utility sizes. These can
457 | | be percentage based, pixels, rems, or any other units. We provide a
458 | | couple common use-cases by default. You can, of course, modify
459 | | these values as needed.
460 | |
461 | | Class name: .min-w-{size}
462 | |
463 | */
464 |
465 | minWidth: {
466 | '0': '0',
467 | 'full': '100%',
468 | },
469 |
470 |
471 | /*
472 | |-----------------------------------------------------------------------------
473 | | Minimum height https://tailwindcss.com/docs/min-height
474 | |-----------------------------------------------------------------------------
475 | |
476 | | Here is where you define your minimum height utility sizes. These can
477 | | be percentage based, pixels, rems, or any other units. We provide a
478 | | few common use-cases by default. You can, of course, modify these
479 | | values as needed.
480 | |
481 | | Class name: .min-h-{size}
482 | |
483 | */
484 |
485 | minHeight: {
486 | '0': '0',
487 | '20': '5rem',
488 | 'full': '100%',
489 | 'screen': '100vh',
490 | },
491 |
492 |
493 | /*
494 | |-----------------------------------------------------------------------------
495 | | Maximum width https://tailwindcss.com/docs/max-width
496 | |-----------------------------------------------------------------------------
497 | |
498 | | Here is where you define your maximum width utility sizes. These can
499 | | be percentage based, pixels, rems, or any other units. By default
500 | | we provide a sensible rem based scale and a "full width" size,
501 | | which is basically a reset utility. You can, of course,
502 | | modify these values as needed.
503 | |
504 | | Class name: .max-w-{size}
505 | |
506 | */
507 |
508 | maxWidth: {
509 | 'xs': '20rem',
510 | 'sm': '30rem',
511 | 'md': '40rem',
512 | 'lg': '50rem',
513 | 'xl': '60rem',
514 | '2xl': '70rem',
515 | '3xl': '80rem',
516 | '4xl': '90rem',
517 | '5xl': '100rem',
518 | 'full': '100%',
519 | },
520 |
521 |
522 | /*
523 | |-----------------------------------------------------------------------------
524 | | Maximum height https://tailwindcss.com/docs/max-height
525 | |-----------------------------------------------------------------------------
526 | |
527 | | Here is where you define your maximum height utility sizes. These can
528 | | be percentage based, pixels, rems, or any other units. We provide a
529 | | couple common use-cases by default. You can, of course, modify
530 | | these values as needed.
531 | |
532 | | Class name: .max-h-{size}
533 | |
534 | */
535 |
536 | maxHeight: {
537 | 'full': '100%',
538 | 'screen': '100vh',
539 | },
540 |
541 |
542 | /*
543 | |-----------------------------------------------------------------------------
544 | | Padding https://tailwindcss.com/docs/padding
545 | |-----------------------------------------------------------------------------
546 | |
547 | | Here is where you define your padding utility sizes. These can be
548 | | percentage based, pixels, rems, or any other units. By default we
549 | | provide a sensible rem based numeric scale plus a couple other
550 | | common use-cases like "1px". You can, of course, modify these
551 | | values as needed.
552 | |
553 | | Class name: .p{side?}-{size}
554 | |
555 | */
556 |
557 | padding: {
558 | 'px': '1px',
559 | '0': '0',
560 | '1': '0.25rem',
561 | '2': '0.5rem',
562 | '3': '0.75rem',
563 | '4': '1rem',
564 | '5': '1.25rem',
565 | '6': '1.5rem',
566 | '8': '2rem',
567 | '10': '2.5rem',
568 | '12': '3rem',
569 | '16': '4rem',
570 | '20': '5rem',
571 | '24': '6rem',
572 | '32': '8rem',
573 | },
574 |
575 |
576 | /*
577 | |-----------------------------------------------------------------------------
578 | | Margin https://tailwindcss.com/docs/margin
579 | |-----------------------------------------------------------------------------
580 | |
581 | | Here is where you define your margin utility sizes. These can be
582 | | percentage based, pixels, rems, or any other units. By default we
583 | | provide a sensible rem based numeric scale plus a couple other
584 | | common use-cases like "1px". You can, of course, modify these
585 | | values as needed.
586 | |
587 | | Class name: .m{side?}-{size}
588 | |
589 | */
590 |
591 | margin: {
592 | 'auto': 'auto',
593 | 'px': '1px',
594 | '0': '0',
595 | '1': '0.25rem',
596 | '2': '0.5rem',
597 | '3': '0.75rem',
598 | '4': '1rem',
599 | '5': '1.25rem',
600 | '6': '1.5rem',
601 | '8': '2rem',
602 | '10': '2.5rem',
603 | '12': '3rem',
604 | '16': '4rem',
605 | '20': '5rem',
606 | '24': '6rem',
607 | '32': '8rem',
608 | },
609 |
610 |
611 | /*
612 | |-----------------------------------------------------------------------------
613 | | Negative margin https://tailwindcss.com/docs/negative-margin
614 | |-----------------------------------------------------------------------------
615 | |
616 | | Here is where you define your negative margin utility sizes. These can
617 | | be percentage based, pixels, rems, or any other units. By default we
618 | | provide matching values to the padding scale since these utilities
619 | | generally get used together. You can, of course, modify these
620 | | values as needed.
621 | |
622 | | Class name: .-m{side?}-{size}
623 | |
624 | */
625 |
626 | negativeMargin: {
627 | 'px': '1px',
628 | '0': '0',
629 | '1': '0.25rem',
630 | '2': '0.5rem',
631 | '3': '0.75rem',
632 | '4': '1rem',
633 | '5': '1.25rem',
634 | '6': '1.5rem',
635 | '8': '2rem',
636 | '10': '2.5rem',
637 | '12': '3rem',
638 | '16': '4rem',
639 | '20': '5rem',
640 | '24': '6rem',
641 | '32': '8rem',
642 | },
643 |
644 |
645 | /*
646 | |-----------------------------------------------------------------------------
647 | | Shadows https://tailwindcss.com/docs/shadows
648 | |-----------------------------------------------------------------------------
649 | |
650 | | Here is where you define your shadow utilities. As you can see from
651 | | the defaults we provide, it's possible to apply multiple shadows
652 | | per utility using comma separation.
653 | |
654 | | If a `default` shadow is provided, it will be made available as the non-
655 | | suffixed `.shadow` utility.
656 | |
657 | | Class name: .shadow-{size?}
658 | |
659 | */
660 |
661 | shadows: {
662 | default: '0 2px 4px 0 rgba(0,0,0,0.10)',
663 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
664 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
665 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
666 | 'outline': '0 0 0 3px rgba(52,144,220,0.5)',
667 | 'floating': '0px 7px 10px rgba(0, 157, 108, 0.5)',
668 | 'none': 'none',
669 | },
670 |
671 |
672 | /*
673 | |-----------------------------------------------------------------------------
674 | | Z-index https://tailwindcss.com/docs/z-index
675 | |-----------------------------------------------------------------------------
676 | |
677 | | Here is where you define your z-index utility values. By default we
678 | | provide a sensible numeric scale. You can, of course, modify these
679 | | values as needed.
680 | |
681 | | Class name: .z-{index}
682 | |
683 | */
684 |
685 | zIndex: {
686 | 'auto': 'auto',
687 | '0': 0,
688 | '10': 10,
689 | '20': 20,
690 | '30': 30,
691 | '40': 40,
692 | '50': 50,
693 | },
694 |
695 |
696 | /*
697 | |-----------------------------------------------------------------------------
698 | | Opacity https://tailwindcss.com/docs/opacity
699 | |-----------------------------------------------------------------------------
700 | |
701 | | Here is where you define your opacity utility values. By default we
702 | | provide a sensible numeric scale. You can, of course, modify these
703 | | values as needed.
704 | |
705 | | Class name: .opacity-{name}
706 | |
707 | */
708 |
709 | opacity: {
710 | '0': '0',
711 | '25': '.25',
712 | '50': '.5',
713 | '75': '.75',
714 | '100': '1',
715 | },
716 |
717 |
718 | /*
719 | |-----------------------------------------------------------------------------
720 | | SVG fill https://tailwindcss.com/docs/svg
721 | |-----------------------------------------------------------------------------
722 | |
723 | | Here is where you define your SVG fill colors. By default we just provide
724 | | `fill-current` which sets the fill to the current text color. This lets you
725 | | specify a fill color using existing text color utilities and helps keep the
726 | | generated CSS file size down.
727 | |
728 | | Class name: .fill-{name}
729 | |
730 | */
731 |
732 | svgFill: {
733 | 'current': 'currentColor',
734 | },
735 |
736 |
737 | /*
738 | |-----------------------------------------------------------------------------
739 | | SVG stroke https://tailwindcss.com/docs/svg
740 | |-----------------------------------------------------------------------------
741 | |
742 | | Here is where you define your SVG stroke colors. By default we just provide
743 | | `stroke-current` which sets the stroke to the current text color. This lets
744 | | you specify a stroke color using existing text color utilities and helps
745 | | keep the generated CSS file size down.
746 | |
747 | | Class name: .stroke-{name}
748 | |
749 | */
750 |
751 | svgStroke: {
752 | 'current': 'currentColor',
753 | },
754 |
755 |
756 | /*
757 | |-----------------------------------------------------------------------------
758 | | Modules https://tailwindcss.com/docs/configuration#modules
759 | |-----------------------------------------------------------------------------
760 | |
761 | | Here is where you control which modules are generated and what variants are
762 | | generated for each of those modules.
763 | |
764 | | Currently supported variants:
765 | | - responsive
766 | | - hover
767 | | - focus
768 | | - focus-within
769 | | - active
770 | | - group-hover
771 | |
772 | | To disable a module completely, use `false` instead of an array.
773 | |
774 | */
775 |
776 | modules: {
777 | appearance: ['responsive'],
778 | backgroundAttachment: ['responsive'],
779 | backgroundColors: ['responsive', 'hover', 'focus', 'group-hover'],
780 | backgroundPosition: ['responsive'],
781 | backgroundRepeat: ['responsive'],
782 | backgroundSize: ['responsive'],
783 | borderCollapse: [],
784 | borderColors: ['responsive', 'hover', 'focus'],
785 | borderRadius: ['responsive'],
786 | borderStyle: ['responsive'],
787 | borderWidths: ['responsive'],
788 | cursor: ['responsive'],
789 | display: ['responsive'],
790 | flexbox: ['responsive'],
791 | float: ['responsive'],
792 | fonts: ['responsive'],
793 | fontWeights: ['responsive', 'hover', 'focus'],
794 | height: ['responsive'],
795 | leading: ['responsive'],
796 | lists: ['responsive'],
797 | margin: ['responsive'],
798 | maxHeight: ['responsive'],
799 | maxWidth: ['responsive'],
800 | minHeight: ['responsive'],
801 | minWidth: ['responsive'],
802 | negativeMargin: ['responsive'],
803 | objectFit: false,
804 | objectPosition: false,
805 | opacity: ['responsive'],
806 | outline: ['focus'],
807 | overflow: ['responsive'],
808 | padding: ['responsive'],
809 | pointerEvents: ['responsive'],
810 | position: ['responsive'],
811 | resize: ['responsive'],
812 | shadows: ['responsive', 'hover', 'focus'],
813 | svgFill: [],
814 | svgStroke: [],
815 | tableLayout: ['responsive'],
816 | textAlign: ['responsive'],
817 | textColors: ['responsive', 'hover', 'focus', 'group-hover'],
818 | textSizes: ['responsive'],
819 | textStyle: ['responsive', 'hover', 'focus', 'group-hover'],
820 | tracking: ['responsive'],
821 | userSelect: ['responsive'],
822 | verticalAlign: ['responsive'],
823 | visibility: ['responsive'],
824 | whitespace: ['responsive'],
825 | width: ['responsive'],
826 | zIndex: ['responsive'],
827 | },
828 |
829 |
830 | /*
831 | |-----------------------------------------------------------------------------
832 | | Plugins https://tailwindcss.com/docs/plugins
833 | |-----------------------------------------------------------------------------
834 | |
835 | | Here is where you can register any plugins you'd like to use in your
836 | | project. Tailwind's built-in `container` plugin is enabled by default to
837 | | give you a Bootstrap-style responsive container component out of the box.
838 | |
839 | | Be sure to view the complete plugin documentation to learn more about how
840 | | the plugin system works.
841 | |
842 | */
843 |
844 | plugins: [
845 | ({ addComponents, config }) => {
846 | const colors = config('colors');
847 | const base = {
848 | '.bg-diagonal:after': {
849 | content: "''",
850 | width: '100%',
851 | height: '150px',
852 | display: 'block',
853 | },
854 | };
855 |
856 | const variants = Object.keys(colors).map(name => ({
857 | [`.bg-diagonal-${name}:after`]: {
858 | backgroundImage: `linear-gradient(to bottom right, ${colors[name]} 50%, #ffffff 50%)`,
859 | }
860 | }));
861 |
862 | addComponents([
863 | base,
864 | ...variants,
865 | ]);
866 | },
867 | ({ addComponents, config }) => {
868 | const heights = config('height');
869 | const base = {
870 | '.calcheight': {
871 | height: '100%',
872 | },
873 | };
874 |
875 | const variants = Object.keys(heights).map(height => {
876 | if (height !== 'auto') return ({
877 | [`.calcheight-${height}`]: {
878 | height: `calc(100% - ${heights[height]})`
879 | },
880 | })
881 | });
882 |
883 | addComponents([
884 | base,
885 | ...variants,
886 | ]);
887 | },
888 | ({ addComponents, config }) => {
889 | const colors = config('colors');
890 | const textSizes = config('textSizes');
891 | const margin = config('margin');
892 | const base = {
893 | '.panel-content': {
894 | lineHeight: 'normal',
895 | h2: {
896 | margin: `${margin[3]} 0`,
897 | },
898 | p: {
899 | margin: `${margin[4]} 0`,
900 | },
901 | ul: {
902 | margin: `${margin[4]} 0`,
903 |
904 | li: {
905 | fontSize: textSizes.base,
906 | },
907 | },
908 | a: {
909 | color: colors.primary,
910 | textDecoration: 'none',
911 | transition: 'background 0.15s ease-out, color 0.15s ease-out',
912 | cursor: 'pointer',
913 | '&:hover': {
914 | background: colors['primary-light'],
915 | color: colors.white,
916 | },
917 | },
918 | },
919 | };
920 |
921 | addComponents([
922 | base,
923 | ]);
924 | },
925 | require('tailwindcss/plugins/container')({
926 | center: true,
927 | padding: '1rem',
928 | }),
929 | require('tailwindcss-plugins/gradients')({
930 | gradients: {
931 | // Array definition (defaults to linear gradients).
932 | 'gradient-primary': ['-45deg', colors['primary-lightest'], colors['primary-light']],
933 | },
934 | variants: ['responsive']
935 | }),
936 | require('glhd-tailwindcss-transitions')(),
937 | ],
938 |
939 |
940 | /*
941 | |-----------------------------------------------------------------------------
942 | | Advanced Options https://tailwindcss.com/docs/configuration#options
943 | |-----------------------------------------------------------------------------
944 | |
945 | | Here is where you can tweak advanced configuration options. We recommend
946 | | leaving these options alone unless you absolutely need to change them.
947 | |
948 | */
949 |
950 | options: {
951 | prefix: '',
952 | important: false,
953 | separator: ':',
954 | },
955 |
956 | }
957 |
--------------------------------------------------------------------------------
/src/pages/home/assets/images/mission.svg:
--------------------------------------------------------------------------------
1 |
53 |
--------------------------------------------------------------------------------