♻️ Improve CSS selectors

app.css

@@ -4,49 +4,61 @@
 // ╚═╝╚═╝╝╚╝ ╩ ╚═╝ 
 */
 
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
+/* 
+//  ┬  ┬┌─┐┬─┐┬┌─┐┌┐ ┬  ┌─┐┌─┐
+//  ┐┌┘├─┤├┬┘│├─┤├┴┐│  ├┤ └─┐
+//  ┘ ┴ ┴┴└─┴┴ ┴└─┘┴─┘└─┘└─┘ 
+ */
 
-/* V A R I A B L E S */
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); /* Font Import */
 
 :root {
-  /* Fonts  */
+  /* Font Size */
-  --fsg: 12vh; /* Time and Greetings */
+  --fg-primary: 12vh; /* Time and Greetings */
-  --fsm: 8vh; /* Date */
+  --fg-secondary: 3vh; /* Greetings and Weather widger */
-  --fss: 3vh; /* Greetings and Weather widger */
+  --fg-date: 8vh; /* Date */
-  --fses: 2vh; /* Links List */
+  --fg-list: 2vh; /* Links List */
-
+  --icon: 3vh; /* Icon Size */
-  --iconsize: 3vh;
-
-  /* Light theme  */
-  --accent: #61b0f1; /* Hover color */
-  --bg: #f5f5f5; /* Background color */
-  --sbg: #e4e6e6; /* Cards color */
 
+  /* Fonts Color */
   --fg: #3a3a3a; /* Foreground color */
-  --sfg: #3a3a3a; /* Sceondary Foreground color */
+  --sfg: #494949; /* Sceondary Foreground color */
+
+  /* Light Colors  */
+  --accent: #61b0f1; /* Hover color */
+  --background: #f5f5f5; /* Background color */
+  --cards: #e4e6e6; /* Cards color */
 
   /* Image background  */
-  --imgbg: url(assets/background.jpg);
+  --imgbg: url(assets/background.jpg); /* Image URL */
   --imgcol: linear-gradient(
     rgba(255, 255, 255, 0.7),
     rgba(255, 255, 255, 0.7)
   ); /* Filter color */
 }
 
-/* Dark theme  */
 .darktheme {
+  /* Dark Colors  */
   --accent: #61b0f1; /* Hover color */
-  --bg: #19171a; /* Background color */
+  --background: #19171a; /* Background color */
-  --sbg: #201e21; /* Cards color */
+  --cards: #201e21; /* Cards color */
+
+  /* Fonts Color */
   --fg: #d8dee9; /* Foreground color */
   --sfg: #3a3a3a; /* Secondary Foreground color */
+
+  /* Image background  */
   --imgcol: linear-gradient(
     rgba(0, 0, 0, 0.85),
     rgba(0, 0, 0, 0.85)
   ); /* Filter color */
 }
 
-/* S T Y L E S */
+/* 
+//  ┌─┐┌┬┐┬ ┬┬  ┌─┐┌─┐
+//  └─┐ │ └┬┘│  ├┤ └─┐
+//  └─┘ ┴  ┴ ┴─┘└─┘└─┘ 
+*/
 
 * {
   margin: 0;
@@ -56,6 +68,15 @@
   transition: 0.2s ease-in-out;
 }
 
+body {
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .notransition {
   -webkit-transition: none;
   -moz-transition: none;
@@ -68,15 +89,6 @@
   background-size: cover;
 }
 
-body {
-  width: 100vw;
-  height: 100vh;
-  background-color: var(--bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 #themeButton {
   position: absolute;
   margin: 2em 2em 0 0;
@@ -104,7 +116,7 @@ body {
 }
 
 .card {
-  background-color: var(--sbg);
+  background-color: var(--cards);
   box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
   border-radius: 5px;
 }
@@ -154,24 +166,24 @@ body {
 #hour,
 #separator,
 #minutes {
-  font-size: var(--fsg);
+  font-size: var(--fg-primary);
   font-weight: bolder;
   color: var(--fg);
 }
 
 #month,
 #day {
-  font-size: var(--fsm);
+  font-size: var(--fg-date);
   font-weight: bold;
   color: var(--fg);
 }
 
 #day {
-  margin-left: 20px;
+  margin-left: 1.5rem;
 }
 
 #greetings {
-  font-size: var(--fss);
+  font-size: var(--fg-secondary);
   color: var(--fg);
 }
 
@@ -181,19 +193,19 @@ body {
 }
 
 .weatherValue p {
-  font-size: var(--fss);
+  font-size: var(--fg-secondary);
   font-weight: bolder;
   margin-left: 15px;
   color: var(--fg);
 }
 
 .weatherDescription p {
-  font-size: var(--fss);
+  font-size: var(--fg-secondary);
   margin-left: 15px;
   color: var(--fg);
 }
 
-.buttons {
+.buttonsBlock {
   grid-row: 3 / span 2;
   grid-column: 1 / span 2;
   display: grid;
@@ -203,47 +215,47 @@ body {
   padding: 20px;
 }
 
-.buttons__link {
+.button {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
 }
 
-.buttonLink__icon {
+.buttonIcon {
-  width: var(--iconsize);
+  width: var(--icon);
-  height: var(--iconsize);
+  height: var(--icon);
   color: var(--fg);
 }
 
-.buttons__link-1 {
+.button__1 {
   grid-row: 1;
   grid-column: 1;
 }
-.buttons__link-2 {
+.button__2 {
   grid-row: 1;
   grid-column: 2;
 }
-.buttons__link-3 {
+.button__3 {
   grid-row: 2;
   grid-column: 1;
 }
-.buttons__link-4 {
+.button__4 {
   grid-row: 2;
   grid-column: 2;
 }
-.buttons__link-5 {
+.button__5 {
   grid-row: 1;
   grid-column: 3;
 }
-.buttons__link-6 {
+.button__6 {
   grid-row: 2;
   grid-column: 3;
 }
-.buttons__link:hover {
+.button:hover {
   background-color: var(--accent);
 }
-.buttons__link:hover svg {
+.button:hover svg {
   stroke: var(--sfg);
 }
 
@@ -261,16 +273,16 @@ body {
   grid-column: 4;
   grid-row: 3 / span 2;
 }
-.list__head {
+.listIcon {
   margin-top: 3vh;
   margin-bottom: 2vh;
   color: var(--fg);
-  width: var(--iconsize);
+  width: var(--icon);
-  height: var(--iconsize);
+  height: var(--icon);
 }
-.list__link {
+.listItem {
   text-decoration: none;
-  font-size: var(--fses);
+  font-size: var(--fg-list);
   color: var(--fg);
   margin-top: 1vh;
   padding: 8px 12px;
@@ -279,7 +291,7 @@ body {
   text-align: center;
   width: 80%;
 }
-.list__link:hover {
+.listItem:hover {
   background-color: var(--accent);
   color: var(--sfg);
 }
@@ -302,7 +314,7 @@ body {
   }
 
   #greetings {
-    font-size: var(--fss);
+    font-size: var(--fg-secondary);
   }
 
   .list {
@@ -313,7 +325,7 @@ body {
     grid-column: 1 / span 4;
   }
 
-  .buttonLink {
+  .button {
     grid-gap: 3vw;
     padding-left: 100px;
     padding-right: 100px;

assets/js/cards.js

@@ -1,18 +1,17 @@
 // ┌─┐┌─┐┬─┐┌┬┐┌─┐
 // │  ├─┤├┬┘ ││└─┐
 // └─┘┴ ┴┴└──┴┘└─┘
+// Function to print Button Cards.
 
-// Print cards
 const printCards = () => {
   for (const card of CONFIG.cards) {
-    // Card Item
     let item = `
         <a
           href="${card.link}"
           target="${CONFIG.openInNewTab ? '_blank' : ''}"
-          class="buttons__link  card buttonLink__link-${card.id}"
+          class="card button button__${card.id}"
         >
-          <i class="buttonLink__icon" icon-name="${card.icon}"></i>
+          <i class="buttonIcon" icon-name="${card.icon}"></i>
         </a>
     `;
 

assets/js/lists.js

@@ -1,19 +1,18 @@
 // ┬  ┬┌─┐┌┬┐┌─┐
 // │  │└─┐ │ └─┐
 // ┴─┘┴└─┘ ┴ └─┘
+// Functions for printing both lists
 
-// Print the first List
 const printFirstList = () => {
-  let icon = `<i class="list__head" icon-name="${CONFIG.firstListIcon}"></i>`;
+  let icon = `<i class="listIcon" icon-name="${CONFIG.firstListIcon}"></i>`;
   const position = 'beforeend';
   list_1.insertAdjacentHTML(position, icon);
   for (const link of CONFIG.lists.firstList) {
-    // List item
     let item = `
         <a
         target="${CONFIG.openInNewTab ? '_blank' : ''}"
         href="${link.link}"
-        class="list__link"
+        class="listItem"
         >${link.name}</a
         >
     `;
@@ -22,18 +21,16 @@ const printFirstList = () => {
   }
 };
 
-// Print the second List
 const printSecondList = () => {
-  let icon = `<i class="list__head" icon-name="${CONFIG.secondListIcon}"></i>`;
+  let icon = `<i class="listIcon" icon-name="${CONFIG.secondListIcon}"></i>`;
   const position = 'beforeend';
   list_2.insertAdjacentHTML(position, icon);
   for (const link of CONFIG.lists.secondList) {
-    // List item
     let item = `
           <a
           target="${CONFIG.openInNewTab ? '_blank' : ''}"
           href="${link.link}"
-          class="list__link"
+          class="listItem"
           >${link.name}</a
           >
       `;

assets/js/theme.js

@@ -34,6 +34,7 @@ if (darkTheme === 'enabled') {
   disableDark();
 }
 
+// Toggle Theme Listener
 themeToggle.addEventListener('click', () => {
   darkTheme = localStorage.getItem('darkTheme');
   if (darkTheme !== 'enabled') {
@@ -58,6 +59,7 @@ if (CONFIG.changeThemeByOS && CONFIG.autoChangeTheme) {
   }
 }
 
+// Theme Autochanger
 if (CONFIG.changeThemeByHour && CONFIG.autoChangeTheme && !CONFIG.changeThemeByOS) {
   const date = new Date();
   const hours =

config.js

@@ -23,8 +23,8 @@ const CONFIG = {
   greetingNight: 'Go to Sleep!',
 
   // Weather
-  weatherKey: 'InsertYourAPIKeyHere123456',
+  weatherKey: 'InsertYourAPIKeyHere123456', // Write here your API Key
-  weatherIcons: 'OneDark', // 'Nord', 'Dark', 'White'
+  weatherIcons: 'OneDark', // 'Onedark', 'Nord', 'Dark', 'White'
   weatherUnit: 'C', // 'F', 'C'
   language: 'en', // More languages in https://openweathermap.org/current#multi
 

index.html

@@ -27,29 +27,29 @@
 
       <div class="timeBlock">
         <div class="clock">
-          <div id="hour" class=""></div>
+          <div id="hour"></div>
-          <div id="separator" class=""></div>
+          <div id="separator"></div>
-          <div id="minutes" class=""></div>
+          <div id="minutes"></div>
         </div>
-        <div id="greetings" class=""></div>
+        <div id="greetings"></div>
       </div>
 
       <!-- Date and Weather  -->
 
       <div class="weatherBlock">
         <div class="date">
-          <div id="month" class=""></div>
+          <div id="month"></div>
-          <div id="day" class=""></div>
+          <div id="day"></div>
         </div>
         <div class="weather">
           <div class="weatherIcon">
             <img src="assets/icons/OneDark/unknown.png" />
           </div>
           <div class="weatherValue">
-            <p class="">- °<span class="g">c</span></p>
+            <p>- °<span class="g">c</span></p>
           </div>
           <div class="weatherDescription">
-            <p class=""></p>
+            <p></p>
           </div>
         </div>
       </div>
@@ -60,7 +60,7 @@
         └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘ 
         -->
 
-      <div class="buttons" id="buttonsContainer"></div>
+      <div class="buttonsBlock" id="buttonsContainer"></div>
 
       <!-- 
         ┬  ┬┌─┐┌┬┐┌─┐
@@ -84,11 +84,13 @@
 
     <script src="assets/js/cards.js"></script>
     <script src="assets/js/lists.js"></script>
+
+    <!-- Icons -->
     <script>
       lucide.createIcons();
     </script>
   </body>
 
-  <!-- Developed and designed by Miguel R. Ávila: -->
+  <!-- Developed and designed by Miguel Ávila: -->
-  <!-- https://github.com/migueravila -->
+  <!-- https://avila.sh-->
 </html>