Bonsai 2.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bonsai",
   "author": "AnderZeng <aquesada.dev@gmail.com>",
-  "version": "1.5",
+  "version": "2.0",
   "description": "Web page inspired by the Bonsai project from Frontend Practice",
   "type": "module",
   "private": "true",
@@ -21,9 +21,9 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "prettier": "3.2.5",
-    "vite": "^5.2.10",
+    "prettier": "3.3.3",
+    "vite": "^5.4.2",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-static-copy": "^1.0.3"
+    "vite-plugin-static-copy": "^1.0.6"
   }
 }

src/index.html

@@ -51,7 +51,6 @@
       type="image/png"
       sizes="16x16"
       href="assets/favicon/favicon-16x16.png" />
-    <link rel="manifest" href="assets/favicon/site.webmanifest" />
     <link
       rel="mask-icon"
       href="assets/favicon/safari-pinned-tab.svg"
@@ -167,14 +166,12 @@
         </ul>
       </nav>
       <div class="page-header__buttons-container">
-        <ul>
-          <li class="page-header__button page-header__button-login">
-            <a role="button" class="page-header__button-label">Log In</a>
-          </li>
-          <li class="page-header__button page-header__button-trial">
-            <a role="button" class="page-header__button-label">Start free</a>
-          </li>
-        </ul>
+        <div class="page-header__button page-header__button-login">
+          <a role="button" class="page-header__button-label">Log In</a>
+        </div>
+        <div class="page-header__button page-header__button-trial">
+          <a role="button" class="page-header__button-label">Start free</a>
+        </div>
       </div>
     </header>
     <main class="page-content">

src/styles/base-styles/page-header/page-header-buttons.css

@@ -3,13 +3,7 @@
   flex-grow: 1;
   flex-basis: 0;
   justify-content: flex-end;
-}
-
-.page-header__buttons-container ul {
-  list-style: none;
-  display: flex;
   gap: 1rem;
-  padding: 0;
 }
 
 .page-header__button {
@@ -32,5 +26,6 @@
 
 .page-header__button-trial {
   color: white;
+  border: solid 2px var(--color-green-primary);
   background-color: var(--color-green-primary);
 }

src/styles/base-styles/page-header/page-header.css

@@ -3,7 +3,7 @@
 
 .page-header {
   max-width: 1200px;
-  margin: auto;
+  margin: 1rem auto;
   display: flex;
   flex-wrap: wrap;
   align-items: center;

src/styles/medium-screen/page-header/medium-screen-page-header.css

@@ -1,5 +1,3 @@
-@import url(medium-screen-page-header-buttons.css);
-
 .page-header {
   flex-direction: column;
   gap: 2em;

src/styles/small-screen/page-header/small-screen-page-header-buttons.css

@@ -1,7 +1,3 @@
 .page-header__buttons-container {
-  margin-top: 1em;
-}
-
-.page-header__buttons-container ul {
-  flex-direction: row-reverse;
+  margin-top: 2.5em;
 }