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;
+                     OVERALL PAGE STYLES
-    width: 100vh;
+==============================================================
+*/
+
+#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,13 +33,13 @@
     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 */
+    align-items: center; /* Center content vertically */
 }
 
-#league-information-container::after {
+    /* Adds Red Diagonal Strip at the end of the #league-information-container */
+    #league-information-container::after
+    {
         content: '';
         position: absolute;
         top: 0;
@@ -29,30 +49,36 @@
         background-color: red; /* Red color */
     }
 
-#league-logo {
+    /* 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 {
+    /* 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;
     }
 
-#league-stats-containers {
+/*
-    width: 100%;
+=============================================
-    display: flex;
+             CARDS IN PAGE BODY
-    flex-wrap: wrap; /* Allow items to wrap onto multiple lines */
+=============================================
-}
+*/
 
+/* 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">