Refactor and format code

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

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

practice/practice-02/src/styles/bases/_base.scss

@@ -0,0 +1,3 @@
+.flex {
+  display: flex;
+}

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;

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%;

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;

practice/practice-02/src/styles/main.scss

@@ -3,6 +3,7 @@
 @import "./abstracts/variables";
 
 // Bases
+@import "./bases/base";
 @import "./bases/typography";
 @import "./bases/reset";