From f4660562a4b7b453ea052f7238b4e450b87b91ac Mon Sep 17 00:00:00 2001 From: Yusuf Ipek Date: Sat, 1 May 2021 14:08:23 +0300 Subject: [PATCH] changed styling and folder structure to sass --- package-lock.json | 33 ++++++++--- package.json | 1 + src/App.css | 30 ---------- src/App.js | 2 +- src/App.scss | 14 +++++ src/commons/header/header.css | 89 ------------------------------ src/commons/header/header.js | 1 - src/components/button/button.css | 65 ---------------------- src/components/button/button.jsx | 2 - src/sass/abstracts/_functions.scss | 0 src/sass/abstracts/_mixins.scss | 0 src/sass/abstracts/_variables.scss | 7 +++ src/sass/base/_animations.scss | 43 +++++++++++++++ src/sass/base/_base.scss | 15 +++++ src/sass/base/_typography.scss | 33 +++++++++++ src/sass/base/_utilities.scss | 0 src/sass/components/button.scss | 54 ++++++++++++++++++ src/sass/layout/header.scss | 31 +++++++++++ 18 files changed, 223 insertions(+), 197 deletions(-) delete mode 100644 src/App.css create mode 100644 src/App.scss delete mode 100644 src/commons/header/header.css delete mode 100644 src/components/button/button.css create mode 100644 src/sass/abstracts/_functions.scss create mode 100644 src/sass/abstracts/_mixins.scss create mode 100644 src/sass/abstracts/_variables.scss create mode 100644 src/sass/base/_animations.scss create mode 100644 src/sass/base/_base.scss create mode 100644 src/sass/base/_typography.scss create mode 100644 src/sass/base/_utilities.scss create mode 100644 src/sass/components/button.scss create mode 100644 src/sass/layout/header.scss diff --git a/package-lock.json b/package-lock.json index 953ce53..b3102f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 5b330c5..cb177f7 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/App.css b/src/App.css deleted file mode 100644 index d564b83..0000000 --- a/src/App.css +++ /dev/null @@ -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; -} diff --git a/src/App.js b/src/App.js index cd92bef..aaafbac 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import "./App.css"; +import "./App.scss"; import Header from "./commons/header/header"; function App() { diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 0000000..3df8c85 --- /dev/null +++ b/src/App.scss @@ -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"; diff --git a/src/commons/header/header.css b/src/commons/header/header.css deleted file mode 100644 index 07c8208..0000000 --- a/src/commons/header/header.css +++ /dev/null @@ -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); - } -} diff --git a/src/commons/header/header.js b/src/commons/header/header.js index d5f8a33..629a2ad 100644 --- a/src/commons/header/header.js +++ b/src/commons/header/header.js @@ -1,4 +1,3 @@ -import "./header.css"; import logoWhite from "../../commons/images/logo-white.png"; import Button from "../../components/button/button"; diff --git a/src/components/button/button.css b/src/components/button/button.css deleted file mode 100644 index bc867f2..0000000 --- a/src/components/button/button.css +++ /dev/null @@ -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); - } -} diff --git a/src/components/button/button.jsx b/src/components/button/button.jsx index 0ebbc81..36ccdc4 100644 --- a/src/components/button/button.jsx +++ b/src/components/button/button.jsx @@ -1,5 +1,3 @@ -import "./button.css"; - function Button(props) { const { text, animationName, link } = props; return ( diff --git a/src/sass/abstracts/_functions.scss b/src/sass/abstracts/_functions.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/sass/abstracts/_mixins.scss b/src/sass/abstracts/_mixins.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss new file mode 100644 index 0000000..72b2f3f --- /dev/null +++ b/src/sass/abstracts/_variables.scss @@ -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; diff --git a/src/sass/base/_animations.scss b/src/sass/base/_animations.scss new file mode 100644 index 0000000..291a7b4 --- /dev/null +++ b/src/sass/base/_animations.scss @@ -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); + } +} diff --git a/src/sass/base/_base.scss b/src/sass/base/_base.scss new file mode 100644 index 0000000..808d5fa --- /dev/null +++ b/src/sass/base/_base.scss @@ -0,0 +1,15 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + font-size: 62.5%; +} + +body { + box-sizing: border-box; +} diff --git a/src/sass/base/_typography.scss b/src/sass/base/_typography.scss new file mode 100644 index 0000000..d0de039 --- /dev/null +++ b/src/sass/base/_typography.scss @@ -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; +} diff --git a/src/sass/base/_utilities.scss b/src/sass/base/_utilities.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/sass/components/button.scss b/src/sass/components/button.scss new file mode 100644 index 0000000..d265e93 --- /dev/null +++ b/src/sass/components/button.scss @@ -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; +} diff --git a/src/sass/layout/header.scss b/src/sass/layout/header.scss new file mode 100644 index 0000000..900d05d --- /dev/null +++ b/src/sass/layout/header.scss @@ -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; + } +}