♻️ Improve CSS selectors

FlexiBoii · Feb 3, 2022 · 122811b · 122811b
1 parent a62c737
commit 122811b
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 80 deletions.
diff --git a/app.css b/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  */
-  --fsg: 12vh; /* Time and Greetings */
-  --fsm: 8vh; /* Date */
-  --fss: 3vh; /* Greetings and Weather widger */
-  --fses: 2vh; /* Links List */
-
-  --iconsize: 3vh;
+  /* Font Size */
+  --fg-primary: 12vh; /* Time and Greetings */
+  --fg-secondary: 3vh; /* Greetings and Weather widger */
+  --fg-date: 8vh; /* Date */
+  --fg-list: 2vh; /* Links List */
+  --icon: 3vh; /* Icon Size */
+
+  /* Fonts Color */
+  --fg: #3a3a3a; /* Foreground color */
+  --sfg: #494949; /* Sceondary Foreground color */
 
-  /* Light theme  */
+  /* Light Colors  */
   --accent: #61b0f1; /* Hover color */
-  --bg: #f5f5f5; /* Background color */
-  --sbg: #e4e6e6; /* Cards color */
-
-  --fg: #3a3a3a; /* Foreground color */
-  --sfg: #3a3a3a; /* Sceondary Foreground 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 */
-  --sbg: #201e21; /* Cards color */
+  --background: #19171a; /* Background 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 {
-  width: var(--iconsize);
-  height: var(--iconsize);
+.buttonIcon {
+  width: var(--icon);
+  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);
-  height: var(--iconsize);
+  width: var(--icon);
+  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;

diff --git a/assets/js/cards.js b/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>
     `;
 

diff --git a/assets/js/lists.js b/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
           >
       `;

diff --git a/assets/js/theme.js b/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 =