variables.css setup with footer and header.css

Author: stradichenko

assets/css/footer.css

@@ -1,12 +1,14 @@
+@import url('./global/variables.css'); /* Import CSS variables */
+
 /* Footer container styling */
 footer {
-  background-color: var(--footer-bg-color, #8f7e73); /* Blue background */
-  color: var(--footer-text-color, #000000); /* Use CSS variable with fallback */
+  background-color: var(--footer-bg-color); /* Use CSS variable */
+  color: var(--footer-text-color); /* Use CSS variable */
   text-align: center; /* Center-align text */
-  padding: 20px 10px; /* Add spacing: 20px vertical, 10px horizontal */
-  font-size: 14px; /* Set a smaller font size */
-  font-family: 'Comic Sans MS', 'Comic Sans', cursive; /* Add Comic Sans font family */
-  border-top: 1px solid var(--footer-border-color, #eaeaea); /* Add a subtle border at the top using a CSS variable */
+  padding: var(--footer-padding-vertical) var(--footer-padding-horizontal); /* Use CSS variables for padding */
+  font-size: var(--footer-font-size); /* Use CSS variable for font size */
+  font-family: var(--footer-font-family); /* Use CSS variable for font family */
+  border-top: 1px solid var(--footer-border-color); /* Use CSS variable for border color */
 }
 
 /* Footer text styling */
@@ -17,11 +19,11 @@ footer p {
 
 /* Add hover effect for links in the footer */
 footer a {
-  color: var(--footer-link-color, #5a7fa3); /* Use CSS variable with fallback */
+  color: var(--footer-link-color); /* Use CSS variable for link color */
   text-decoration: none; /* Remove underline */
 }
 
 footer a:hover {
   text-decoration: underline; /* Add underline on hover */
-  color: var(--footer-link-hover-color, #0056b3); /* Add slight color change for better feedback */
+  color: var(--footer-link-hover-color); /* Use CSS variable for hover color */
 }

assets/css/global/variables.css

@@ -0,0 +1,51 @@
+/* Colors */
+:root { /* Why use :root? It ensures the variables are globally scoped and available throughout the entire document. */
+  /* General Colors */
+  --primary-color: #007bff;
+  --primary-color-hover: #0056b3;
+  --secondary-color: #f8f9fa;
+  --body-text-color: #333;
+  --link-color: #00e;
+  --link-hover-color: #0056b3;
+
+  /* Fonts */
+  --font-family-sans: 'Arial', sans-serif;
+  --font-family-serif: 'Georgia', serif;
+  --font-size-base: 16px;
+  --font-size-large: 1.5rem;
+  --font-size-small: 0.875rem;
+
+  /* Spacing */
+  --spacing-small: 8px;
+  --spacing-medium: 16px;
+  --spacing-large: 24px;
+
+  /* Borders */
+  --border-radius: 4px; /* Default border radius */
+  --border-color: #ddd;
+
+  /* Footer Variables */
+  --footer-bg-color: #8f62d8; /* Default background color */
+  --footer-text-color: #000000; /* Default text color */
+  --footer-border-color: #eaeaea; /* Default border color */
+  --footer-link-color: #5a7fa3; /* Default link color */
+  --footer-link-hover-color: #004080; /* Unique link hover color for better distinction */
+  --footer-font-family: 'Arial', sans-serif; /* Default font family */
+  --footer-font-size: 14px; /* Default font size */
+  --footer-padding-vertical: 20px; /* Vertical padding */
+  --footer-padding-horizontal: 10px; /* Horizontal padding */
+
+  /* Header Variables */
+  --header-bg-color: #0a3d70; /* Light gray background */
+  --header-text-color: #333; /* Dark text color */
+  --header-logo-color: #007bff; /* Logo color */
+  --header-logo-hover-color: #0056b3; /* Logo hover color */
+  --header-font-family: 'Arial', sans-serif; /* Default font family */
+  --header-font-size: 1.5rem; /* Font size for header logo */
+  --header-padding: 20px; /* Padding around the header */
+  --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+  --header-nav-gap: 15px; /* Spacing between navigation items */
+  --header-nav-link-color: #333; /* Navigation link color */
+  --header-nav-link-hover-bg: #007bff; /* Navigation link hover background */
+  --header-nav-link-hover-color: #fff; /* Navigation link hover text color */
+}

assets/css/header.css

@@ -1,3 +1,5 @@
+@import url('./global/variables.css'); /* Import CSS variables */
+
 /* ============================
     Header Stylesheet
     ============================
@@ -7,26 +9,27 @@
 
 /* General Header Styles */
 header {
-  background-color: #f8f9fa; /* Light gray background */
-  color: #333; /* Dark text color */
-  padding: 20px; /* Spacing around the header */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+  background-color: var(--header-bg-color);
+  color: var(--header-text-color);
+  padding: var(--header-padding);
+  box-shadow: var(--header-shadow);
   position: relative;
   z-index: 1000; /* Ensure header is above other elements */
   width: 100%; /* Make the header span the full width of the page */
   margin: 0; /* Remove any default margins */
+  font-family: var(--header-font-family);
 }
 
 /* Logo Styles */
 header .logo {
-  font-size: 1.5rem; /* Larger font size for logo */
+  font-size: var(--header-font-size);
   font-weight: bold; /* Bold text for emphasis */
   text-decoration: none; /* Remove underline */
-  color: #007bff; /* Primary color for logo */
+  color: var(--header-logo-color);
 }
 
 header .logo:hover {
-  color: #0056b3; /* Darker shade on hover */
+  color: var(--header-logo-hover-color);
 }
 
 /* Navigation Styles */
@@ -37,14 +40,15 @@ header nav {
   max-width: 1200px; /* Limit the content width */
   margin: 0 auto; /* Center the content horizontally */
   width: 100%; /* Ensure the nav spans the full width of the header */
+  gap: var(--header-nav-gap);
 }
 
 header nav ul {
   list-style: none; /* Remove default list styling */
   margin: 0; /* Reset margin */
   padding: 0; /* Reset padding */
   display: flex; /* Flexbox for horizontal layout */
-  gap: 15px; /* Spacing between nav items */
+  gap: var(--header-nav-gap);
 }
 
 header nav ul li {
@@ -53,16 +57,16 @@ header nav ul li {
 
 header nav ul li a {
   text-decoration: none; /* Remove underline */
-  color: #333; /* Dark text color */
+  color: var(--header-nav-link-color);
   font-size: 1rem; /* Standard font size */
-  padding: 5px 10px; /* Padding for clickable area */
-  border-radius: 4px; /* Rounded corners */
+  padding: var(--spacing-small) var(--spacing-medium); /* Padding for clickable area */
+  border-radius: var(--border-radius); /* Rounded corners */
   transition: background-color 0.3s, color 0.3s; /* Smooth hover effect */
 }
 
 header nav ul li a:hover {
-  background-color: #007bff; /* Primary color background */
-  color: #fff; /* White text on hover */
+  background-color: var(--header-nav-link-hover-bg); /* Primary color background */
+  color: var(--header-nav-link-hover-color); /* White text on hover */
 }
 
 /* Responsive Design */