Comments added for league-page CSS

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

@@ -1,10 +1,30 @@
-#league-page-body {
-    display: flex;
-    flex-direction: column;
-    width: 100vh;
+/*
+==============================================================
+                     OVERALL PAGE STYLES
+==============================================================
+*/
+
+#league-page-body 
+{
+    display: flex; /* Enable flexbox layout */
+    flex-direction: column; /* Arrange child elements vertically */
+
+    width: 100%; /* Set the width to the full width of screen */
+    padding: 30px; /* Create some distance between page boundries and elements */
 }
 
-#league-information-container {
+/*
+=================================
+    LEAGUE INFORMATION HEADER
+=================================
+*/
+
+/* Stylization for League Information Header Card */
+#league-information-container 
+{
+    display: flex; /* Enable flexbox layout */
+    flex-direction: row; /* Arrange child elements horizontally */
+
     height: 100px;
     width: fit-content;
     margin: 20px;
@@ -13,46 +33,52 @@
     transform: skewX(-20deg); /* Skew the banner to create a triangular side */
     box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
 
-    display: flex; /* Use flexbox for layout */
+    
     align-items: center; /* Center content vertically */
-
-    /* Add any other styling you need for 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 */
-  }
+    /* 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 */
+    }
 
-#league-logo {
-    margin: 0px 30px;
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
-    height: 80%;
-}
+    /* 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%;
+    }
 
-#league-title {
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
-    margin-right: 20px;
-}
+    /* Styling for League Title in League Information Header */
+    #league-title 
+    {
+        transform: skewX(20deg); /* Skew the banner to create a triangular side */
+        margin-right: 20px;
+    }
 
-#league-flag {
+    /* 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;
+    }
 
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
-    height: 20px;
-    margin-right: 200px;
-}
-
-#league-stats-containers {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap; /* Allow items to wrap onto multiple lines */
-}
+/*
+=============================================
+             CARDS IN PAGE BODY
+=============================================
+*/
 
+/* Styling for Standings and Top Scorers Cards */
 #table-stats-container, #top-scorers-stats-container {
     margin: 0 10px;
     margin-bottom: 20px;

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

@@ -1,4 +1,4 @@
-<div class="container" id="league-page-body">
+<div class="page-container" id="league-page-body">
 
     <!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
     <div class="container" id="league-information-container">