From 0861e5b3c4996a9a078a08b9be62a40db4c891af Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 18 Jul 2023 13:57:00 +0700
Subject: [PATCH] Refactor and format code

---
 practice/practice-02/src/index.pug            |  4 +--
 .../practice-02/src/layouts/nav/nav-menu.pug  |  2 +-
 .../practice-02/src/styles/bases/_base.scss   |  3 +++
 .../practice-02/src/styles/bases/_reset.scss  | 27 ++++++++++++++-----
 .../src/styles/layouts/_header.scss           |  2 --
 .../src/styles/layouts/_navbar.scss           |  3 ++-
 practice/practice-02/src/styles/main.scss     |  1 +
 7 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 practice/practice-02/src/styles/bases/_base.scss

diff --git a/practice/practice-02/src/index.pug b/practice/practice-02/src/index.pug
index 0ddb165..3ccf801 100644
--- a/practice/practice-02/src/index.pug
+++ b/practice/practice-02/src/index.pug
@@ -6,9 +6,9 @@ html(lang="en")
     link(rel="stylesheet", href="./styles/main.scss")
     title Food Hut
   body
-    header.header
+    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
+      .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
index 8e73368..fc965d1 100644
--- a/practice/practice-02/src/layouts/nav/nav-menu.pug
+++ b/practice/practice-02/src/layouts/nav/nav-menu.pug
@@ -3,7 +3,7 @@
 nav.nav
   input.toggle-menu(type="checkbox")
   .icon-menu
-  ul.nav-list
+  ul.nav-list.flex
     each val in list
       li.nav-item
         a.nav-link(href="javascrip:void(0)")= val
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..4a0203a
--- /dev/null
+++ b/practice/practice-02/src/styles/bases/_base.scss
@@ -0,0 +1,3 @@
+.flex {
+  display: flex;
+}
diff --git a/practice/practice-02/src/styles/bases/_reset.scss b/practice/practice-02/src/styles/bases/_reset.scss
index 3089150..509a8bc 100644
--- a/practice/practice-02/src/styles/bases/_reset.scss
+++ b/practice/practice-02/src/styles/bases/_reset.scss
@@ -90,7 +90,9 @@ video {
   font-size: 100%;
   vertical-align: baseline;
 }
+
 /* HTML5 display-role reset for older browsers */
+
 article,
 aside,
 details,
@@ -104,24 +106,37 @@ nav,
 section {
   display: block;
 }
+
 body {
   line-height: 1;
 }
+
 ol,
 ul {
   list-style: none;
 }
+
 blockquote,
 q {
   quotes: none;
 }
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: "";
-  content: 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/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss
index 4b18779..3acae8f 100644
--- a/practice/practice-02/src/styles/layouts/_header.scss
+++ b/practice/practice-02/src/styles/layouts/_header.scss
@@ -1,6 +1,5 @@
 .header {
   position: relative;
-  display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: $max-width;
@@ -17,7 +16,6 @@
   }
 
   .header-content {
-    display: flex;
     justify-content: space-between;
     gap: 10px;
     width: 100%;
diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss
index 04f3189..3f73da4 100644
--- a/practice/practice-02/src/styles/layouts/_navbar.scss
+++ b/practice/practice-02/src/styles/layouts/_navbar.scss
@@ -1,4 +1,5 @@
 .nav-list {
+  flex-direction: column;
   list-style: none;
   transition: 0.1s;
   position: fixed;
@@ -54,7 +55,7 @@
 
   .nav-list {
     position: unset;
-    display: flex;
+    flex-direction: row;
     justify-content: space-between;
     border: none;
     margin: auto;
diff --git a/practice/practice-02/src/styles/main.scss b/practice/practice-02/src/styles/main.scss
index 4ec497d..7545e54 100644
--- a/practice/practice-02/src/styles/main.scss
+++ b/practice/practice-02/src/styles/main.scss
@@ -3,6 +3,7 @@
 @import "./abstracts/variables";
 
 // Bases
+@import "./bases/base";
 @import "./bases/typography";
 @import "./bases/reset";