Reset build and try again

Amaan-Samar · Nov 9, 2024 · 0375d04 · 0375d04
1 parent 441b1d9
commit 0375d04
Show file tree

Hide file tree

Showing 12 changed files with 189 additions and 399 deletions.
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./pen.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chinese Assistant</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/public/favico.png b/public/favico.png
diff --git a/public/logo.png b/public/logo.png
diff --git a/public/ooo.png b/public/ooo.png
diff --git a/public/pen.svg b/public/pen.svg
diff --git a/src/App.vue b/src/App.vue
@@ -11,7 +11,6 @@
 <script setup>
 import { RouterView } from 'vue-router'
 import Header from './components/Header.vue'
-// import FontConverter from './components/FontConverter.vue'
 import Footer from './components/Footer.vue'
 </script>
 
@@ -20,17 +19,17 @@ import Footer from './components/Footer.vue'
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  align-items: center; /* Center children horizontally */
+  align-items: center;
 }
 
 .main-content {
-  flex: 1; /* Uncomment this to make it take available vertical space */
+  flex: 1;
   display: flex;
-  justify-content: center; /* Center content horizontally */
-  align-items: center; /* Center content vertically */
+  justify-content: center;
+  align-items: center;
   width: 100%;
   max-width: 1200px;
   padding: 20px;
-  margin: 0 auto;
+  /* margin: 0 auto; */
 }
 </style>
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -1,26 +1,32 @@
 @import './base.css';
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 html,
 body {
-  font-family: var(--handwriting-friendly);
+  font-family: Overpass, sans-serif;
+  /* font-family: var(--handwriting-friendly); */
 }
 #app {
-  /* max-width: 1280px; */
-  margin: 0 auto;
-  padding: 2rem;
+  /* margin: 0 auto;
+  padding: 2rem; */
   font-weight: normal;
 }
 
 a,
 .green {
   text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
   padding: 3px;
 }
 
 @media (hover: hover) {
   a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
+    background-color: rgba(44, 116, 232, 0.2);
+    border-radius: 5%;
   }
 }
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -2,7 +2,7 @@
   <footer class="footer">
     <div class="footer-container">
       <div class="footer-section">
-        <h3 class="footer-title">Chinese Writing Assistant</h3>
+        <h3 class="footer-title">Little Hanzi</h3>
         <p class="footer-description">
           Help learners practice Chinese characters with proper stroke order and
           beginner-friendly fonts.
@@ -22,8 +22,7 @@
     <div class="footer-bottom">
       <div class="footer-container">
         <p class="copyright">
-          © {{ currentYear }} Chinese Writing Assistant. Made with ❤️ for
-          Chinese learners.
+          © {{ currentYear }} Little Hanzi. Made with ❤️ for Chinese learners.
         </p>
         <div class="social-links">
           <a
@@ -47,112 +46,6 @@ import { RouterLink } from 'vue-router'
 const currentYear = computed(() => new Date().getFullYear())
 </script>
 
-<!-- <style scoped>
-.footer {
-  background-color: #2c3e50;
-  color: white;
-  padding-top: 2rem;
-  margin-top: auto;
-}
-
-.footer-container {
-  width: 1000px;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 2rem;
-}
-
-.footer-section {
-  flex: 1;
-  min-width: 250px;
-}
-
-.footer-title {
-  font-size: 1.5rem;
-  margin-bottom: 1rem;
-  font-weight: bold;
-}
-
-.footer-subtitle {
-  font-size: 1.1rem;
-  margin-bottom: 0.8rem;
-  color: #bbbbbb;
-}
-
-.footer-description {
-  color: #bbbbbb;
-  line-height: 1.6;
-}
-
-.footer-links {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.footer-link {
-  color: #bbbbbb;
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-
-.footer-link:hover {
-  color: white;
-}
-
-.footer-bottom {
-  margin-top: 2rem;
-  padding: 1.5rem 0;
-  border-top: 1px solid #3d5266;
-}
-
-.footer-bottom .footer-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.copyright {
-  color: #bbbbbb;
-}
-
-.social-links {
-  display: flex;
-  gap: 1rem;
-}
-
-.social-link {
-  color: #bbbbbb;
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-
-.social-link:hover {
-  color: white;
-}
-
-@media (max-width: 768px) {
-  .footer-container {
-    flex-direction: column;
-    gap: 2rem;
-  }
-
-  .footer-section {
-    min-width: 100%;
-  }
-
-  .footer-bottom .footer-container {
-    flex-direction: column;
-    gap: 1rem;
-    text-align: center;
-  }
-}
-</style> -->
-
 <style scoped>
 .footer {
   background-color: #2c3e50;
@@ -207,7 +100,7 @@ const currentYear = computed(() => new Date().getFullYear())
 }
 
 .footer-link:hover {
-  color: white;
+  color: #2c74e8;
 }
 
 .footer-bottom {
@@ -238,7 +131,7 @@ const currentYear = computed(() => new Date().getFullYear())
 }
 
 .social-link:hover {
-  color: white; /* On hover, change color */
+  color: #2c74e8; /* On hover, change color */
 }
 
 /* Media Queries for Responsiveness */