refactor: reorder .

brunoglvm · Jun 25, 2024 · f6cfaf5 · f6cfaf5
1 parent ec56e38
commit f6cfaf5
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -1,22 +1,23 @@
 <!DOCTYPE html>
-<html lang="pt-br" class="">
+<html lang="en">
   <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@brunoglvm</title>
+
+    <link rel="stylesheet" href="style.css" />
+
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"
       rel="stylesheet"
     />
-
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@brunoglvm</title>
-    <link href="style.css" rel="stylesheet" />
   </head>
   <body>
     <div id="container">
-      <div id="profile">
+      <div id="user">
         <img src="./assets/avatar-dark.png" />
         <p>@brunoglvm</p>
       </div>
@@ -28,30 +29,62 @@
 
       <ul>
         <li>
-          <a href="https://github.com/brunoglvm" target="_blank" rel="noopener noreferrer">Link#1</a>
+          <a
+            href="https://github.com/brunoglvm"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Link#1</a
+          >
         </li>
 
         <li>
-          <a href="https://github.com/brunoglvm" target="_blank" rel="noopener noreferrer">Link#2</a>
+          <a
+            href="https://github.com/brunoglvm"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Link#2</a
+          >
         </li>
 
         <li>
-          <a href="https://github.com/brunoglvm" target="_blank" rel="noopener noreferrer">Link#3</a>
+          <a
+            href="https://github.com/brunoglvm"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Link#3</a
+          >
         </li>
 
         <li>
-          <a href="https://github.com/brunoglvm" target="_blank" rel="noopener noreferrer">Link#4</a>
+          <a
+            href="https://github.com/brunoglvm"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Link#4</a
+          >
         </li>
       </ul>
       <div id="social-links">
-        <a href="https://github.com/brunoglvm" target="_blank" rel="noopener noreferrer">
+        <a
+          href="https://github.com/brunoglvm"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <ion-icon name="logo-github"></ion-icon>
         </a>
-        <a href="https://www.instagram.com/brunoglvm" target="_blank" rel="noopener noreferrer">
+        <a
+          href="https://www.instagram.com/brunoglvm"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <ion-icon name="logo-instagram"></ion-icon>
         </a>
 
-        <a href="https://www.linkedin.com/in/brunoglvm" target="_blank" rel="noopener noreferrer">
+        <a
+          href="https://www.linkedin.com/in/brunoglvm"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <ion-icon name="logo-linkedin"></ion-icon>
         </a>
       </div>

diff --git a/script.js b/script.js
@@ -1,18 +1,17 @@
-function toggleMode() {
-  const html = document.documentElement;
-  const root = document.querySelector(":root");
-
-  html.classList.toggle("light");
-
-  const img = document.querySelector("#profile img");
-
-  if (html.classList.contains("light")) {
-    img.setAttribute("src", "./assets/avatar-light.png");
-    img.setAttribute("alt", "Light theme profile picture");
-    root.style.setProperty("--bg-color", "rgb(239, 235, 239)");
-  } else {
-    img.setAttribute("src", "./assets/avatar-dark.png");
-    img.setAttribute("alt", "Dark theme profile picture");
-    root.style.setProperty("--bg-color", "rgb(22, 22, 24)");
-  }
-}
+function toggleMode() {
+  const html = document.documentElement;
+  const root = document.querySelector(":root");
+  const img = document.querySelector("#user img");
+
+  html.classList.toggle("light");
+
+  if (html.classList.contains("light")) {
+    img.setAttribute("src", "./assets/avatar-light.png");
+    img.setAttribute("alt", "Light theme user image");
+    root.style.setProperty("--bg-color", "rgb(239, 235, 239)");
+  } else {
+    img.setAttribute("src", "./assets/avatar-dark.png");
+    img.setAttribute("alt", "Dark theme user image");
+    root.style.setProperty("--bg-color", "rgb(22, 22, 24)");
+  }
+}
diff --git a/style.css b/style.css
@@ -45,16 +45,16 @@ body * {
   padding: 0 24px;
 }
 
-#profile {
+#user {
   text-align: center;
   padding: 24px;
 }
 
-#profile img {
+#user img {
   width: 112px;
 }
 
-#profile p {
+#user p {
   font-weight: 500;
   line-height: 24px;
   margin-top: 8px;