yusufipek/natours-react
1
0
Fork 0
mirror of https://github.com/yusufipk/natours-react.git synced 2026-09-11 19:16:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

changed styling and folder structure to sass

Browse Source
This commit is contained in:
Yusuf Ipek
2021-05-01 14:08:23 +03:00
parent 9dabcc2098
commit f4660562a4
18 changed files with 223 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+24 -9
View File
@@ -13,6 +13,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"sass": "^1.32.12",
"web-vitals": "^1.1.1"
}
},
@@ -4622,7 +4623,6 @@
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"optional": true,
"engines": {
"node": ">=8"
}
@@ -5105,7 +5105,6 @@
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
"integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
"optional": true,
"dependencies": {
"anymatch": "~3.1.1",
"braces": "~3.0.2",
@@ -9866,7 +9865,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"optional": true,
"dependencies": {
"binary-extensions": "^2.0.0"
},
@@ -16191,7 +16189,6 @@
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
"integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
"optional": true,
"dependencies": {
"picomatch": "^2.2.1"
},
@@ -17138,6 +17135,20 @@
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-10.0.0.tgz",
"integrity": "sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg=="
},
"node_modules/sass": {
"version": "1.32.12",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.12.tgz",
"integrity": "sha512-zmXn03k3hN0KaiVTjohgkg98C3UowhL1/VSGdj4/VAAiMKGQOE80PFPxFP2Kyq0OUskPKcY5lImkhBKEHlypJA==",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=8.9.0"
}
},
"node_modules/sass-loader": {
"version": "10.1.1",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.1.tgz",
@@ -24974,8 +24985,7 @@
"binary-extensions": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"optional": true
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
},
"bindings": {
"version": "1.5.0",
@@ -25373,7 +25383,6 @@
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
"integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
"optional": true,
"requires": {
"anymatch": "~3.1.1",
"braces": "~3.0.2",
@@ -29120,7 +29129,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"optional": true,
"requires": {
"binary-extensions": "^2.0.0"
}
@@ -33996,7 +34004,6 @@
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
"integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
"optional": true,
"requires": {
"picomatch": "^2.2.1"
}
@@ -34734,6 +34741,14 @@
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-10.0.0.tgz",
"integrity": "sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg=="
},
"sass": {
"version": "1.32.12",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.12.tgz",
"integrity": "sha512-zmXn03k3hN0KaiVTjohgkg98C3UowhL1/VSGdj4/VAAiMKGQOE80PFPxFP2Kyq0OUskPKcY5lImkhBKEHlypJA==",
"requires": {
"chokidar": ">=3.0.0 <4.0.0"
}
},
"sass-loader": {
"version": "10.1.1",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.1.tgz",
package.json
+1
View File
@@ -9,6 +9,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"sass": "^1.32.12",
"web-vitals": "^1.1.1"
},
"scripts": {
src/App.css
-30
View File
@@ -1,30 +0,0 @@
/*
COLORS:
Light green: #7ed56f
Medium green: #55c57a
Dark green: #28b485
*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777;
padding: 3rem;
box-sizing: border-box;
}
src/App.js
+1 -1
View File
@@ -1,4 +1,4 @@
import "./App.css";
import "./App.scss";
import Header from "./commons/header/header";
function App() {
src/App.scss
+14
View File
@@ -0,0 +1,14 @@
@import "./sass/abstracts/variables";
@import "./sass/abstracts/mixins";
@import "./sass/abstracts/functions";
@import "./sass/base/animations";
@import "./sass/base/typography";
@import "./sass/base/base";
@import "./sass/base/utilities";
@import "./sass/components/button";
@import "./sass/layout/header";
@import "./sass/pages/home";
src/commons/header/header.css
-89
View File
@@ -1,89 +0,0 @@
.header {
height: 95vh;
background-image: linear-gradient(
to right bottom,
rgba(126, 213, 111, 0.8),
rgba(40, 180, 133, 0.8)
),
url(../../commons/images/hero.jpg);
background-size: cover;
background-position: top;
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
position: relative;
}
.header__text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.header__logo-box {
position: absolute;
top: 4rem;
left: 4rem;
}
.header__logo {
height: 3.5rem;
}
.heading-primary {
color: #ffff;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
}
.heading-primary--main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
animation: moveInLeft 1s ease-out;
}
.heading-primary--sub {
display: block;
font-size: 2rem;
font-weight: 700;
letter-spacing: 1.75rem;
animation: moveInRight 1s ease-out;
}
@keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-10rem);
}
80% {
transform: translateX(1rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(10rem);
}
80% {
transform: translateX(-1rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
src/commons/header/header.js
-1
View File
@@ -1,4 +1,3 @@
import "./header.css";
import logoWhite from "../../commons/images/logo-white.png";
import Button from "../../components/button/button";
src/components/button/button.css
-65
View File
@@ -1,65 +0,0 @@
.btn:link,
.btn:visited {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all 0.2s;
position: relative;
font-size: 1.6rem;
}
.move-in--bottom {
animation: moveInBottom 0.5s ease-out 0.75s;
animation-fill-mode: backwards;
}
.btn:hover {
transform: translateY(-0.3rem);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}
.btn:active {
transform: translateY(-0.1rem);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
.btn--white {
background-color: #fff;
color: #777;
}
.btn::after {
content: " ";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all 0.4s;
}
.btn--white::after {
background-color: white;
}
.btn:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
@keyframes moveInBottom {
0% {
opacity: 0;
transform: translateY(10rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
src/components/button/button.jsx
-2
View File
@@ -1,5 +1,3 @@
import "./button.css";
function Button(props) {
const { text, animationName, link } = props;
return (
src/sass/abstracts/_functions.scss
View File
src/sass/abstracts/_mixins.scss
View File
src/sass/abstracts/_variables.scss
+7
View File
@@ -0,0 +1,7 @@
$color-primary: #55c57a;
$color-primary-light: #55c57a;
$color-primary-dark: #28b485;
$color-grey-dark: #777;
$color-white: #fff;
$color-black: #000;
src/sass/base/_animations.scss
+43
View File
@@ -0,0 +1,43 @@
@keyframes moveInBottom {
0% {
opacity: 0;
transform: translateY(10rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-10rem);
}
80% {
transform: translateX(1rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(10rem);
}
80% {
transform: translateX(-1rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
src/sass/base/_base.scss
+15
View File
@@ -0,0 +1,15 @@
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
box-sizing: border-box;
}
src/sass/base/_typography.scss
+33
View File
@@ -0,0 +1,33 @@
.heading-primary {
color: $color-white;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
&--main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
animation: moveInLeft 1s ease-out;
}
&--sub {
display: block;
font-size: 2rem;
font-weight: 700;
letter-spacing: 1.75rem;
animation: moveInRight 1s ease-out;
}
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
}
src/sass/base/_utilities.scss
View File
src/sass/components/button.scss
+54
View File
@@ -0,0 +1,54 @@
.btn {
&:link,
&:visited {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all 0.2s;
position: relative;
font-size: 1.6rem;
}
&:hover {
transform: translateY(-0.3rem);
box-shadow: 0 1rem 2rem rgba($color-black, 0.2);
&::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
}
&:active {
transform: translateY(-0.1rem);
box-shadow: 0 0.5rem 1rem rgba($color-black, 0.2);
}
&--white {
background-color: $color-white;
color: $color-grey-dark;
&::after {
background-color: $color-white;
}
}
&:after {
content: " ";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all 0.4s;
}
}
.move-in--bottom {
animation: moveInBottom 0.5s ease-out 0.75s;
animation-fill-mode: backwards;
}
src/sass/layout/header.scss
+31
View File
@@ -0,0 +1,31 @@
.header {
height: 95vh;
background-image: linear-gradient(
to right bottom,
rgba($color-primary-light, 0.8),
rgba($color-primary-dark, 0.8)
),
url(../../commons/images/hero.jpg);
background-size: cover;
background-position: top;
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
position: relative;
&__logo-box {
position: absolute;
top: 4rem;
left: 4rem;
}
&__text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
&__logo {
height: 3.5rem;
}
}