More CSS streamlining

ProjectSourceCode/src/resources/css/generated-pages/card-styling.css

@@ -54,6 +54,35 @@
     flex-direction: row; /* Arrange child elements horizontally */
 }
 
+    /*
+    ===========================
+    LEAGUE INFORMATION CHILD ITEMS
+    ===========================
+    */
+
+    /* Styling for League Logo in League Information Header */
+    #generated-page-header-logo 
+    {
+        margin: 0px 30px;
+        transform: skewX(20deg); /* Skew the banner to create a triangular side */
+        height: 80%;
+    }
+
+    /* Styling for League Title in League Information Header */
+    #generated-page-header-title 
+    {
+        transform: skewX(20deg); /* Skew the banner to create a triangular side */
+        margin-right: 20px;
+    }
+
+    /* Styling for Flag in League Information Header */
+    #generated-page-header-flag 
+    {
+        transform: skewX(20deg); /* Skew the banner to create a triangular side */
+        height: 20px;
+        margin-right: 200px;
+    }
+
 /*
 =============================================
              CARDS IN PAGE BODY
@@ -75,3 +104,16 @@
     border: 1px solid gray;
     box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
 }
+
+/*
+==============================================================
+                       HOVER STYLES
+==============================================================
+*/
+
+/* Hover Styling for Standings and Top Scorers Cards */
+.card-container:hover
+{
+    transform: scale(1.01); /* Scale the row by 1.1 on hover */
+    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
+}

ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-page.css

@@ -1,32 +1,3 @@
-/*
-===========================
-LEAGUE INFORMATION CHILD ITEMS
-===========================
-*/
-
-/* Styling for League Logo in Club Information Header */
-#club-logo 
-{
-    margin: 0px 30px;
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
-    height: 80%;
-}
-
-/* Styling for League Title in Club Information Header */
-#club-title 
-{
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
-    margin-right: 20px;
-}
-
-/* Styling for FLag in Club Information Header */
-#club-flag 
-{
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
-    height: 20px;
-    margin-right: 200px;
-}
-
 /*
 =============================================
              CARDS IN PAGE BODY

ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-page.css

@@ -1,68 +1,15 @@
-/*
-===========================
-LEAGUE INFORMATION CHILD ITEMS
-===========================
-*/
-
-/* Adds Red Diagonal Strip at the end of the #league-information-container */
-#league-information-container::after
-{
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 8px; /* Width of the red strip */
-    background-color: red; /* Red color */
-}
-
-/* Styling for League Logo in League Information Header */
-#league-logo 
-{
-    margin: 0px 30px;
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
-    height: 80%;
-}
-
-/* Styling for League Title in League Information Header */
-#league-title 
-{
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
-    margin-right: 20px;
-}
-
-/* Styling for FLag in League Information Header */
-#league-flag 
-{
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
-    height: 20px;
-    margin-right: 200px;
-}
-
 /*
 =============================================
              CARDS IN PAGE BODY
 =============================================
 */
 
-#table-and-top-scorers-containers {
+#table-and-top-scorers-containers 
+{
     display: flex;
     flex-direction: row;
 }
 
-/*
-==============================================================
-                       HOVER STYLES
-==============================================================
-*/
-
-    /* Hover Styling for Standings and Top Scorers Cards */
-    #table-stats-container:hover, #top-scorers-stats-container:hover 
-    {
-        transform: scale(1.01); /* Scale the row by 1.1 on hover */
-        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
-    }
-
 /*
 ==============================================================
                  DYNAMIC PAGE WIDTH STYLES

ProjectSourceCode/src/views/pages/clubs-page.hbs

@@ -2,9 +2,9 @@
 
     <!-- Container on Top containing Club Information -->
     <div id="club-header-container" class="information-container">
-        <img id="club-logo" src="{{club.crest}}" alt="{{club.name}} Logo">
+        <img id="generated-page-header-logo" src="{{club.crest}}" alt="{{club.name}} Logo">
-        <h1 id="club-title">{{club.name}}</h2>
+        <h1 id="generated-page-header-title">{{club.name}}</h2>
-        <img id="club-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
+        <img id="generated-page-header-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
     </div>
 
     <div id="club-page-contents-container" class="page-content-container">

ProjectSourceCode/src/views/pages/leagues-page.hbs

@@ -2,9 +2,9 @@
 
     <!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
     <div id="league-header-container" class="information-container">
-        <img id="league-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
+        <img id="generated-page-header-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
-        <h1 id="league-title">{{league.competition.league_name}}</h2>
+        <h1 id="generated-page-header-title">{{league.competition.league_name}}</h2>
-        <img id="league-flag" src="{{league.area.league_flag}}" alt="{{league.competition.league_name}} Flag">
+        <img id="generated-page-header-flag" src="{{league.area.league_flag}}" alt="{{league.competition.league_name}} Flag">
     </div>
 
     <!-- Container to display all stats for league <- bottom rest of the container -->