diff --git a/.gitignore b/.gitignore index a01233a..1430d95 100644 --- a/.gitignore +++ b/.gitignore @@ -74,3 +74,6 @@ packages/react-devtools-timeline/dist# See https://help.github.com/articles/igno npm-debug.log* yarn-debug.log* yarn-error.log* + +.prettierrc +.editorconfig \ No newline at end of file diff --git a/package.json b/package.json index 33c3b9f..9bccbfb 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "web-vitals": "^2.1.4" }, "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "7.21.11" }, "scripts": { "nc": "node scripts/new-component.mjs", diff --git a/public/index.html b/public/index.html index 427f402..e39d4a1 100644 --- a/public/index.html +++ b/public/index.html @@ -28,6 +28,6 @@ -
+
diff --git a/src/App.css b/src/App.css index 4f47b8f..b2f3f22 100644 --- a/src/App.css +++ b/src/App.css @@ -1,4 +1,32 @@ :root { - --color-primary: black; + --color-primary: red; --color-secondary: #d9d9d9; + --color-pink: #FFB7C5; + /* test */ + --classy-base: #FFB7C5; + --classy-dark: #564145; + --classy-darken: #BEA5A9; + --classy-second: #D4C792; + --classy-second-dark: #9C915F; + /* test ++ */ + --hanzo-primary: #A569BD; + /* Purple for the royal and noble feel */ + --hanzo-secondary: #F1C40F; + /* Gold for wealth and prosperity */ + --hanzo-tertiary: #196F3D; + /* Dark Green for the natural environment */ + --hanzo-quaternary: #641E16; + /* Dark Red/Brown for the wooden structures */ + --hanzo-quinary: #17202A; + /* Dark Blue for the night sky */ +} + +.root-app { + overflow: hidden; +} + +@media (min-width: 62em) { + .root-app { + overflow: auto; + } } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 561f33b..d01c55e 100644 --- a/src/App.js +++ b/src/App.js @@ -5,23 +5,9 @@ import logo from "../src/assets/svg/logo.svg"; function App() { return ( -
+ <>
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ ); } diff --git a/src/components/BurgerButton/index.js b/src/components/BurgerButton/index.js new file mode 100644 index 0000000..4e1af96 --- /dev/null +++ b/src/components/BurgerButton/index.js @@ -0,0 +1,19 @@ +import "./styles.css"; + +const BurgerButton = ({ checked, onClick }) => { + return ( + <> + + + + ); +}; + +export default BurgerButton; diff --git a/src/components/BurgerButton/styles.css b/src/components/BurgerButton/styles.css new file mode 100644 index 0000000..cc5da0d --- /dev/null +++ b/src/components/BurgerButton/styles.css @@ -0,0 +1,73 @@ +.burgerInput { + position: absolute; + opacity: 0; + z-index: 50; +} + +.burgerInput:checked+.burgerLabel>.burgerSpan { + transform: rotate(45deg); +} + +.burgerInput:checked+.burgerLabel>.burgerSpan::before { + top: 0; + transform: rotate(0deg); +} + +.burgerInput:checked+.burgerLabel>.burgerSpan::after { + top: 0; + transform: rotate(90deg); +} + +.burgerInput:checked~.navbar { + right: 0; +} + +.burgerLabel { + position: absolute; + margin: auto; + width: 26px; + z-index: 45; +} + +.burgerLabel:before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: -12px; + right: 0; + display: block; + margin: auto; + background-color: var(--classy-dark); + width: 50px; + height: 50px; + border-radius: 10px; +} + +.burgerSpan { + position: absolute; + display: block; + width: 100%; + height: 2px; + background-color: var(--classy-second-dark); + transition-duration: 0.25s; +} + +.burgerSpan::before, +.burgerSpan::after { + content: ""; + position: absolute; + display: block; + width: 100%; + height: 2px; + background-color: var(--classy-second-dark); + transition-duration: 0.25s; +} + +.burgerSpan::before { + top: -8px; +} + +.burgerSpan::after { + top: 8px; +} \ No newline at end of file diff --git a/src/components/BurgerMenu/index.js b/src/components/BurgerMenu/index.js new file mode 100644 index 0000000..7ab6b63 --- /dev/null +++ b/src/components/BurgerMenu/index.js @@ -0,0 +1,30 @@ +import "./styles.css"; + +import { useState } from "react"; + +import BurgerButton from "../BurgerButton"; +import Navbar from "../Navbar"; + +const BurgerMenu = () => { + const [checked, setChecked] = useState(false); + + const handleClick = () => { + !checked + ? (document.body.style.overflow = "hidden") + : (document.body.style.overflow = "auto"); + setChecked(!checked); + }; + + return ( +
+ + +
+ ); +}; + +export default BurgerMenu; diff --git a/src/components/BurgerMenu/styles.css b/src/components/BurgerMenu/styles.css new file mode 100644 index 0000000..6e7f0d9 --- /dev/null +++ b/src/components/BurgerMenu/styles.css @@ -0,0 +1,32 @@ +@keyframes overlayIn { + from { + background-color: rgba(131, 131, 131, 0); + } + + to { + background-color: rgba(131, 131, 131, 0.5); + } +} + +.burgerMenu { + display: flex; + align-items: center; + justify-content: center; + width: 50px; + height: 50px; +} + +.burgerMenu .navbar { + position: absolute; + top: 0; + right: -100%; + width: 100%; + height: 100vh; + z-index: 40; + transition-duration: 0.25s; +} + +.burgerMenu .navbar.animation { + animation: overlayIn 0.9s; + animation-fill-mode: forwards; +} \ No newline at end of file diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index a2acadd..adee88a 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -1,7 +1,27 @@ -import './styles.css'; +import "./styles.css"; -const Navbar = () => { - return
; +const Navbar = ({ className, onClick, handleClose }) => { + return ( + + ); }; -export default Navbar; \ No newline at end of file +export default Navbar; diff --git a/src/components/Navbar/styles.css b/src/components/Navbar/styles.css index e4f1885..8f7ee1f 100644 --- a/src/components/Navbar/styles.css +++ b/src/components/Navbar/styles.css @@ -1 +1,48 @@ -.navbar {} \ No newline at end of file +.navbar { + flex: 1; +} + +.navbarList { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 70%; + height: 100%; + background-color: var(--classy-base); + gap: 2rem; +} + +.navbarList__item { + color: var(--classy-dark); +} + +.navbar__link { + color: var(--classy-dark); + font-weight: 600; + text-decoration: none; + transition: color 0.3s ease-in-out; +} + + +@media (min-width: 62em) { + .navbarList { + flex-direction: row; + align-items: center; + gap: 4rem; + width: 100%; + } + + /* .navbarList__item { + color: var(--classy-dark); + } */ + + .navbarList__item:last-child { + margin-left: auto; + } + + .navbar__link:hover { + color: var(--classy-second-dark); + } + +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 8cd2736..c880352 100644 --- a/src/index.css +++ b/src/index.css @@ -62,11 +62,6 @@ a:not([class]) { /* A elements that have a class remove underline */ a[class] { text-decoration: none; - - /* A elements that have a class and is active have underline */ - &.active { - text-decoration: underline solid 2px; - } } /* Make medias easier to work with */ @@ -164,7 +159,7 @@ article>*+* { body { font-size: 1.6rem; /* Base : équivalent 16px */ - font-family: $font-stack; + font-family: Arial, Helvetica, sans-serif; line-height: 1.5; - color: $color-light-grey; + color: var(--color-primary); } \ No newline at end of file diff --git a/src/layouts/Container/styles.css b/src/layouts/Container/styles.css index f871e5c..24297fc 100644 --- a/src/layouts/Container/styles.css +++ b/src/layouts/Container/styles.css @@ -1,64 +1,64 @@ .container { - width: 100%; - max-width: 30rem; - margin: 0 auto; + width: 100%; + max-width: 30rem; + margin: 0 auto; } .container.--grow { - display: flex; - flex-direction: column; - flex-grow: 1; + display: flex; + flex-direction: column; + flex-grow: 1; } .container.--fullwidth { - max-width: 100%; - margin: 0; + max-width: 100%; + margin: 0; } @media (min-width: 36em) { - /* 36em * 16 = 576px */ - .container { - max-width: 50rem; - } + /* 36em * 16 = 576px */ + .container { + max-width: 50rem; + } } @media (min-width: 48em) { - /* 48em * 16 = 768px */ - .container { - max-width: 69rem; - } + /* 48em * 16 = 768px */ + .container { + max-width: 69rem; + } } @media (min-width: 62em) { - /* 62em * 16 = 992px */ - .container { - max-width: 96rem; - } + /* 62em * 16 = 992px */ + .container { + max-width: 96rem; + } } @media (min-width: 75em) { - /* 75em * 16 = 1200px */ - .container { - max-width: 111rem; - } + /* 75em * 16 = 1200px */ + .container { + max-width: 111rem; + } } @media (min-width: 90em) { - /* 90em * 16 = 1440px */ - .container { - max-width: 120rem; - } + /* 90em * 16 = 1440px */ + .container { + max-width: 120rem; + } } @media (min-width: 120em) { - /* 90em * 16 = 1920px */ - .container { - max-width: 168rem; - } + /* 90em * 16 = 1920px */ + .container { + max-width: 168rem; + } } \ No newline at end of file diff --git a/src/layouts/Header/index.js b/src/layouts/Header/index.js index eef5d36..44594cc 100644 --- a/src/layouts/Header/index.js +++ b/src/layouts/Header/index.js @@ -2,20 +2,18 @@ import "./styles.css"; import React from "react"; +import BurgerMenu from "../../components/BurgerMenu"; import Container from "../Container"; +import Navbar from "../../components/Navbar"; +import useResize from "../../hooks/useResize"; const Header = () => { + const { dimensions } = useResize(); + return (
-

My Website

- + {dimensions.width <= 768 ? : }
); diff --git a/src/layouts/Header/styles.css b/src/layouts/Header/styles.css index e69de29..3b76249 100644 --- a/src/layouts/Header/styles.css +++ b/src/layouts/Header/styles.css @@ -0,0 +1,11 @@ +.header { + position: relative; + padding: 3rem 0; + background-color: var(--classy-base); +} + +.header .container { + display: flex; + justify-content: space-between; + align-items: center; +} \ No newline at end of file