diff --git a/practice/practice-02/package-lock.json b/practice/practice-02/package-lock.json index 186f438..0567e8b 100644 --- a/practice/practice-02/package-lock.json +++ b/practice/practice-02/package-lock.json @@ -15,6 +15,7 @@ "devDependencies": { "@parcel/transformer-pug": "^2.9.3", "@parcel/transformer-sass": "^2.9.3", + "@prettier/plugin-pug": "^2.5.1", "parcel": "^2.9.3" } }, @@ -1813,6 +1814,32 @@ "@parcel/core": "^2.9.3" } }, + "node_modules/@prettier/plugin-pug": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@prettier/plugin-pug/-/plugin-pug-2.5.1.tgz", + "integrity": "sha512-rauAMYyTv6tgoo4DZ+1TwpytjaoJgcg+8btp0CfAUaHwjxfNo4cuAGgsJS6WVT7vx2Sz4Pkos50xuSNZuvJAWQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/Shinigami92" + }, + { + "type": "paypal", + "url": "https://www.paypal.com/donate/?hosted_button_id=L7GY729FBKTZY" + } + ], + "dependencies": { + "pug-lexer": "^5.0.1" + }, + "engines": { + "node": "^16.13.0 || >=18.0.0", + "npm": ">=7.10.0" + }, + "peerDependencies": { + "prettier": "^2.3.0" + } + }, "node_modules/@swc/core": { "version": "1.3.69", "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.69.tgz", @@ -3493,6 +3520,22 @@ "node": ">=12" } }, + "node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "peer": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/promise": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", diff --git a/practice/practice-02/package.json b/practice/practice-02/package.json index 15f04c9..0eb6ef4 100644 --- a/practice/practice-02/package.json +++ b/practice/practice-02/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "description": "Practice 02", "scripts": { - "start": "rm -rf dist && rm -rf .parcel-cache && parcel ./src/*.pug --no-cache --no-source-maps", + "start": "del -rf dist && del -rf .parcel-cache && parcel ./src/*.pug --no-cache --no-source-maps", "build": "rm -rf build && rm -rf .parcel-cache && parcel build ./src/*.pug --no-cache --no-source-maps --dist-dir dist", "test": "echo \"Error: no test specified\" && exit 1" }, @@ -13,6 +13,7 @@ "devDependencies": { "@parcel/transformer-pug": "^2.9.3", "@parcel/transformer-sass": "^2.9.3", + "@prettier/plugin-pug": "^2.5.1", "parcel": "^2.9.3" }, "dependencies": { diff --git a/practice/practice-02/src/assets/fonts/inter-regular.ttf b/practice/practice-02/src/assets/fonts/inter-regular.ttf new file mode 100644 index 0000000..8d4eebf Binary files /dev/null and b/practice/practice-02/src/assets/fonts/inter-regular.ttf differ diff --git a/practice/practice-02/src/assets/fonts/inter-regular.woff2 b/practice/practice-02/src/assets/fonts/inter-regular.woff2 new file mode 100644 index 0000000..d94592a Binary files /dev/null and b/practice/practice-02/src/assets/fonts/inter-regular.woff2 differ diff --git a/practice/practice-02/src/assets/fonts/sofia-pro-regular.ttf b/practice/practice-02/src/assets/fonts/sofia-pro-regular.ttf new file mode 100644 index 0000000..2128884 Binary files /dev/null and b/practice/practice-02/src/assets/fonts/sofia-pro-regular.ttf differ diff --git a/practice/practice-02/src/assets/fonts/sofia-pro-regular.woff2 b/practice/practice-02/src/assets/fonts/sofia-pro-regular.woff2 new file mode 100644 index 0000000..d3f5600 Binary files /dev/null and b/practice/practice-02/src/assets/fonts/sofia-pro-regular.woff2 differ diff --git a/practice/practice-02/src/assets/images/logo.svg b/practice/practice-02/src/assets/images/logo.svg new file mode 100644 index 0000000..bc274f3 --- /dev/null +++ b/practice/practice-02/src/assets/images/logo.svg @@ -0,0 +1,23 @@ + + + diff --git a/practice/practice-02/src/assets/images/nav-button.svg b/practice/practice-02/src/assets/images/nav-button.svg new file mode 100644 index 0000000..6aa0de7 --- /dev/null +++ b/practice/practice-02/src/assets/images/nav-button.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/practice/practice-02/src/index.pug b/practice/practice-02/src/index.pug index 71fe774..3ccf801 100644 --- a/practice/practice-02/src/index.pug +++ b/practice/practice-02/src/index.pug @@ -3,6 +3,12 @@ html(lang="en") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") - link(rel="stylesheet", href="./sass/main.scss") + link(rel="stylesheet", href="./styles/main.scss") title Food Hut - body \ No newline at end of file + body + header.header.flex + .logo-wrapper + a.logo-link(href="javascript:void(0)") + img.logo(src="./assets/images/logo.svg", alt="Food Hut logo") + .header-content.flex + include layouts/nav/nav-menu diff --git a/practice/practice-02/src/layouts/nav/nav-menu.pug b/practice/practice-02/src/layouts/nav/nav-menu.pug new file mode 100644 index 0000000..5ffe22f --- /dev/null +++ b/practice/practice-02/src/layouts/nav/nav-menu.pug @@ -0,0 +1,10 @@ +- var list = ["Today Special Offers", "Why FoodHut", "Our Menu", "Our Popular Food"]; + +nav.nav + input.toggle-menu(type="checkbox") + .icon-menu + ul.nav-list + each val in list + li.nav-item + a.nav-link.no-underline(href="javascript:void(0)")= val +a.btn.nav-download-btn.no-underline(href="javascript:void(0)") Download App diff --git a/practice/practice-02/src/sass/base/reset.scss b/practice/practice-02/src/sass/base/reset.scss deleted file mode 100644 index 93d88f2..0000000 --- a/practice/practice-02/src/sass/base/reset.scss +++ /dev/null @@ -1,54 +0,0 @@ -$background-color_1: transparent; - -* { - box-sizing: border-box; - margin: 0; - padding: 0; - font: inherit; - &:before { - box-sizing: border-box; - } - &:after { - box-sizing: border-box; - } -} -img { - display: block; - max-width: 100%; -} -picture { - display: block; - max-width: 100%; -} -svg { - display: block; - max-width: 100%; -} -video { - display: block; - max-width: 100%; -} -input { - background-color: $background-color_1; - outline: none; -} -select { - background-color: $background-color_1; - outline: none; -} -textarea { - background-color: $background-color_1; - outline: none; -} -button { - cursor: pointer; - background-color: $background-color_1; - outline: none; - border: 0; -} -body { - min-height: 100vh; - font-weight: 400; - font-size: 16px; - line-height: 1; -} diff --git a/practice/practice-02/src/sass/main.scss b/practice/practice-02/src/sass/main.scss deleted file mode 100644 index fa331fe..0000000 --- a/practice/practice-02/src/sass/main.scss +++ /dev/null @@ -1 +0,0 @@ -@import "./base/reset.scss"; diff --git a/practice/practice-02/src/styles/abstracts/_mixins.scss b/practice/practice-02/src/styles/abstracts/_mixins.scss new file mode 100644 index 0000000..30c1588 --- /dev/null +++ b/practice/practice-02/src/styles/abstracts/_mixins.scss @@ -0,0 +1,44 @@ +@mixin base-icon-menu { + @include size(36px, 3px); + + background: #000000; + border-radius: 10px; + transition: 0.3s; +} + +@mixin icon-menu { + @include base-icon-menu; + + content: ""; + position: absolute; + right: 0; +} + +@mixin flex-container( + $justify-content: null, + $flex-direction: null, + $align-items: null +) { + display: flex; + @if $justify-content != null { + justify-content: $justify-content; + } + + @if $flex-direction != null { + flex-direction: $flex-direction; + } + + @if $align-items != null { + align-items: $align-items; + } +} + +@mixin size($width: null, $height: null) { + @if $width != null { + width: $width; + } + + @if $height != null { + height: $height; + } +} diff --git a/practice/practice-02/src/styles/abstracts/_variables.scss b/practice/practice-02/src/styles/abstracts/_variables.scss new file mode 100644 index 0000000..e2baab0 --- /dev/null +++ b/practice/practice-02/src/styles/abstracts/_variables.scss @@ -0,0 +1,21 @@ +$primary-font: "Sofia Pro"; +$secondary-font: "Inter"; + +// Color +$black: #000; +$white: #fff; +$primary-color: #f54748; +$secondary-color: #fdc55e; + +// Font size +$fs-xx-sm: 14px; +$fs-x-sm: 16px; +$fs-sm: 17px; +$fs-md: 18px; +$fs-lg: 24px; +$fs-x-lg: 48px; +$fs-xx-lg: 58px; + +// Size +$max-width: 1440px; +$min-width: 320px; diff --git a/practice/practice-02/src/styles/bases/_base.scss b/practice/practice-02/src/styles/bases/_base.scss new file mode 100644 index 0000000..ee78604 --- /dev/null +++ b/practice/practice-02/src/styles/bases/_base.scss @@ -0,0 +1,3 @@ +.no-underline { + text-decoration: none; +} diff --git a/practice/practice-02/src/styles/bases/_reset.scss b/practice/practice-02/src/styles/bases/_reset.scss new file mode 100644 index 0000000..509a8bc --- /dev/null +++ b/practice/practice-02/src/styles/bases/_reset.scss @@ -0,0 +1,143 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote { + &:before, + &:after { + content: ""; + content: none; + } +} + +q { + &:before, + &:after { + content: ""; + content: none; + } +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/practice/practice-02/src/styles/bases/_typography.scss b/practice/practice-02/src/styles/bases/_typography.scss new file mode 100644 index 0000000..04cb1af --- /dev/null +++ b/practice/practice-02/src/styles/bases/_typography.scss @@ -0,0 +1,17 @@ +$font-path: "../assets/fonts"; + +@font-face { + font-family: "Sofia Pro"; + src: url("#{$font-path}/sofia-pro-regular.woff2") format("woff2"), + url("#{$font-path}/sofia-pro-regular.ttf") format("truetype"); +} + +@font-face { + font-family: "Inter"; + src: url("#{$font-path}/inter-regular.woff2") format("woff2"), + url("#{$font-path}/inter-regular.ttf") format("truetype"); +} + +* { + font-family: $primary-font; +} diff --git a/practice/practice-02/src/styles/components/_button.scss b/practice/practice-02/src/styles/components/_button.scss new file mode 100644 index 0000000..229e758 --- /dev/null +++ b/practice/practice-02/src/styles/components/_button.scss @@ -0,0 +1,11 @@ +.btn { + align-self: center; + padding: 13px 20px; + background-color: $primary-color; + border-radius: 100px; + font-size: $fs-md; + color: $white; + white-space: nowrap; + transition: 0.2s; + text-decoration: none; +} diff --git a/practice/practice-02/src/styles/components/_logo.scss b/practice/practice-02/src/styles/components/_logo.scss new file mode 100644 index 0000000..637f73e --- /dev/null +++ b/practice/practice-02/src/styles/components/_logo.scss @@ -0,0 +1,11 @@ +.logo-wrapper { + @include size(121px, 78px); + + flex-shrink: 0; +} + +.logo-link { + @include size(100%, 100%); + + display: inline-block; +} diff --git a/practice/practice-02/src/styles/components/_toggle-menu.scss b/practice/practice-02/src/styles/components/_toggle-menu.scss new file mode 100644 index 0000000..415a580 --- /dev/null +++ b/practice/practice-02/src/styles/components/_toggle-menu.scss @@ -0,0 +1,54 @@ +.icon-menu { + @include base-icon-menu; + + position: relative; + cursor: pointer; + + &:before { + @include icon-menu; + + top: -10px; + } + + &:after { + @include icon-menu; + + top: 10px; + } +} + +.toggle-menu { + @include size(36px, 27px); + + position: absolute; + top: 46px; + right: 21px; + cursor: pointer; + z-index: 1; + opacity: 0; +} + +.toggle-menu:checked ~ .icon-menu { + background: transparent; +} + +.toggle-menu:checked ~ .icon-menu:before { + top: 0; + transform: rotate(-45deg); +} + +.toggle-menu:checked ~ .icon-menu:after { + top: 0; + transform: rotate(45deg); +} + +.toggle-menu:checked ~ .nav-list { + right: 0; +} + +@media screen and (min-width: 840px) { + .icon-menu, + .toggle-menu { + display: none; + } +} diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss new file mode 100644 index 0000000..fd2060a --- /dev/null +++ b/practice/practice-02/src/styles/layouts/_header.scss @@ -0,0 +1,27 @@ +.header { + @include flex-container(space-between, null, center); + + position: relative; + max-width: $max-width; + min-width: $min-width; + padding: 24px; +} + +.header-content { + @include flex-container(space-between); +} + +@media screen and (min-width: 840px) { + .header { + padding-top: 32px; + padding-inline: 24px; + gap: 10px; + } + + .header-content { + @include size(100%, auto); + + gap: 10px; + max-width: 918px; + } +} diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss new file mode 100644 index 0000000..1419bc7 --- /dev/null +++ b/practice/practice-02/src/styles/layouts/_navbar.scss @@ -0,0 +1,73 @@ +.nav-list { + @include flex-container(space-between, column); + + list-style: none; + transition: 0.1s; + position: fixed; + border: 2px solid $primary-color; + top: 0; + right: -300px; + margin-top: 105px; + margin-right: 10px; + margin-left: 10px; + background-color: $white; +} + +.nav-download-btn { + display: none; +} + +.nav-item { + font-size: $fs-xx-sm; + padding: 14px; + border-bottom: 1px solid $black; + + &:last-child { + border-bottom: unset; + } + + &:hover { + background-color: $secondary-color; + } +} + +.nav-link { + color: $black; +} + +@media screen and (min-width: 840px) { + .nav { + @include size(100%, auto); + + margin: auto; + } + + .nav-download-btn { + display: block; + + &:hover { + background-color: $secondary-color; + } + } + + .nav-list { + position: unset; + flex-direction: row; + border: none; + max-width: 600px; + margin: unset; + } + + .nav-item { + border-bottom: none; + padding: 0; + + &:hover { + background-color: unset; + } + } + + .nav-link:hover { + color: $secondary-color; + } +} diff --git a/practice/practice-02/src/styles/main.scss b/practice/practice-02/src/styles/main.scss new file mode 100644 index 0000000..7545e54 --- /dev/null +++ b/practice/practice-02/src/styles/main.scss @@ -0,0 +1,17 @@ +// Abstracts +@import "./abstracts/mixins"; +@import "./abstracts/variables"; + +// Bases +@import "./bases/base"; +@import "./bases/typography"; +@import "./bases/reset"; + +// Components +@import "./components/button"; +@import "./components/toggle-menu"; +@import "./components/logo"; + +// Layouts +@import "./layouts/navbar"; +@import "./layouts/header";