Refactor CSS Code and Organize Global Variables ✨

[Nishitbaria]

Title:

Description: In this GitHub issue, I've made the following changes to refactor the CSS code and organize global variables for improved maintainability and readability:

1. Moved Global Variables to :root: I've gathered all the global CSS variables and moved them to the :root pseudo-class. This approach centralizes the variable definitions, making it easier to manage and maintain them.

:root {
  --lightback: white;
  --darkback: #243447;
  --textcolor: #555;
  --textcolor2: #0c2e8a;
  --textcolor3: #000;
  --postborder: transparent;
  --box-anchor: #444;
  --hover-color1: #081e5b;
  --section-header: #0c2e8a;
  --border-color: rgba(0, 0, 0, 0.168);
  --color1: white;
  --color2: #2796FF;
  --color3: white;
  --color4: rgba(0, 186, 124);
  --bar: white;
  --footer: #f2f5f8;
  --callcolor: #2796FF;
  --service: linear-gradient(#4770a9, #98b3ee);
  --icon: linear-gradient(45deg, #2796ff 30%, #0c2e8a 70%);
  --sd: #d2e1f2;
}

2. Reduced Redundancy in Light Mode Styles: Previously, the body.light styles included a duplicate copy of the entire CSS block. I've refactored it to only include the specific variable overrides for light mode. This change improves code readability and reduces redundancy.

/* Light mode styles */
body.light {
  --darkback: white;
  --textcolor: #555;
  --textcolor2: #0c2e8a;
  --textcolor3: #000;
  --postborder: transparent;
  --box-anchor: #444;
  --hover-color1: #081e5b;
  --section-header: #0c2e8a;
  --border-color: rgba(0, 0, 0, 0.168);
  --color1: white;
  --color2: #2796FF;
  --color3: white;
  --border-color: rgba(0, 186, 124);
  --bar: white;
  --footer: #f2f5f8;
  --callcolor: #2796FF;
  --sd: #d2e1f2;
}

body.light .card-heading {
  /* color: var(--footer); */
  /* background-image: linear-gradient(to right, #0c2e8a, #6da6db); */
}

body.light .view-btn {
  color: var(--footer);
}

body.light .viewRepo {
  background-color: #051b5a;
  border-top: 1px solid #87bef1;
}

body.light .hacktober-heading {
  color: #081e5b;
}

body.light .card {
  background-color: #eff2f5;
}

By making these modifications, the CSS code is now more organized, adheres to best practices for defining global variables, and simplifies the management of styles for both light and dark modes.

Please review the changes and let me know if there are any further improvements or suggestions. Feel free to discuss any concerns or ask for clarifications related to this issue.

[agamjotsingh18]

Sure @Nishitbaria