💚 Updated EndOfLine format + Updated .eslintrc file

Author: MrAnyx

.eslintrc.js

@@ -14,5 +14,6 @@ module.exports = {
   rules: {
     "prettier/prettier": "error",
     "no-unused-vars": "off",
+    "vue/multi-word-component-names": "off",
   },
 };

.prettierrc

@@ -1,4 +1,5 @@
 {
   "semi": true,
   "singleQuote": false,
+  "endOfLine": "lf"
 }

components/Footer.vue

@@ -4,32 +4,40 @@
       <a href="https://github.com/MrAnyx" target="_blank"
         ><eva-icon name="github-outline" class="icon"></eva-icon
       ></a>
+
       <a href="https://twitter.com/MrAnyx" target="_blank"
         ><eva-icon name="twitter-outline" class="icon"></eva-icon>
       </a>
+
       <a
         href="https://www.linkedin.com/in/robin-bidanchon-62020119a/"
         target="_blank"
         ><eva-icon name="linkedin-outline" class="icon"></eva-icon>
       </a>
+
       <a href="https://www.instagram.com/rob.bch/" target="_blank"
         ><eva-icon name="camera-outline" class="icon"></eva-icon>
       </a>
+
       <a href="mailto:robin@codeon.fr" target="_blank"
         ><eva-icon name="at-outline" class="icon"></eva-icon>
       </a>
     </div>
+
     <div id="footer-credits">
       Made with <a href="https://nuxtjs.org/" class="accent">NuxtJS</a>
+
       <br />
 
       Licensed under
+
       <a
         href="https://github.com/Codeon-org/codeon.fr/blob/master/LICENSE"
         class="accent"
         target="_blank"
         >CC-BY-SA-4.0</a
       >
+
       © {{ year }} <nuxt-link to="/" class="accent">Codeon</nuxt-link>
     </div>
   </div>
@@ -42,6 +50,7 @@ export default {
       year: 2021,
     };
   },
+
   mounted() {
     this.year = new Date().getFullYear();
   },
@@ -51,35 +60,50 @@ export default {
 <style lang="scss" scoped>
 #footer-wrapper {
   margin-top: 75px;
+
   height: 140px;
+
   display: flex;
+
   align-items: center;
+
   flex-direction: column;
 
   & #footer-links {
     display: flex;
+
     justify-content: center;
+
     align-items: center;
+
     column-gap: 12px;
 
     & a {
       color: $light;
+
       text-decoration: none;
+
       padding: 8px 8px 4px 8px;
+
       border-radius: 6px;
+
       transition: background-color 0.12s ease-in-out;
 
       &:hover {
         background-color: $semi-dark-transparent;
+
         transition: background-color 0.3s ease-in-out;
       }
     }
   }
 
   & #footer-credits {
     text-align: center;
+
     margin-top: 15px;
+
     font-size: 12px;
+
     line-height: 30px;
   }
 }

components/Navbar.vue

@@ -18,27 +18,41 @@ export default {
       links: [
         {
           icon: "🏡",
+
           text: "Home",
+
           link: "/",
         },
+
         {
           icon: "📚",
+
           text: "Blog",
+
           link: "/blog",
         },
+
         {
           icon: "💡",
+
           text: "Projects",
+
           link: "/projects",
         },
+
         {
           icon: "💻",
+
           text: "Tools",
+
           link: "/tools",
         },
+
         {
           icon: "📝",
+
           text: "About",
+
           link: "/about",
         },
       ],
@@ -50,17 +64,29 @@ export default {
 <style lang="scss" scoped>
 #container {
   width: 100%;
+
   height: 70px;
+
   background-color: $dark-transparent;
+
   backdrop-filter: blur(10px);
+
   position: fixed;
+
   z-index: 5;
+
   top: 0;
+
   left: 0;
+
   display: flex;
+
   flex-direction: row;
+
   justify-content: center;
+
   align-items: center;
+
   column-gap: 12px;
 
   @include xs-screen {
@@ -69,20 +95,28 @@ export default {
 
   & a {
     color: $light;
+
     text-decoration: none;
+
     font-size: 16px;
+
     padding: 8px 12px;
+
     border-radius: 6px;
+
     transition: background-color 0.12s ease-in-out;
 
     @include xs-screen {
       font-size: 14px;
+
       padding: 6px 8px;
+
       border-radius: 4px;
     }
 
     &:hover {
       background-color: $semi-dark-transparent;
+
       transition: background-color 0.3s ease-in-out;
     }
 
@@ -95,10 +129,12 @@ export default {
 
   & a.active {
     color: $accent;
+
     transition: background-color 0.3s ease-in-out;
 
     &:hover {
       background-color: $accent-semi-transparent;
+
       transition: background-color 0.3s ease-in-out;
     }
   }