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,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 {
+    /* Adds Red Diagonal Strip at the end of the #league-information-container */
-    content: '';
+    #league-information-container::after
-    position: absolute;
+    {
-    top: 0;
+        content: '';
-    right: 0;
+        position: absolute;
-    bottom: 0;
+        top: 0;
-    width: 8px; /* Width of the red strip */
+        right: 0;
-    background-color: red; /* Red color */
+        bottom: 0;
-  }
+        width: 8px; /* Width of the red strip */
+        background-color: red; /* Red color */
+    }
 
-#league-logo {
+    /* Styling for League Logo in League Information Header */
-    margin: 0px 30px;
+    #league-logo 
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
+    {
-    height: 80%;
+        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 */
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
+    #league-title 
-    margin-right: 20px;
+    {
-}
+        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;
+             CARDS IN PAGE BODY
-}
+=============================================
-
+*/
-#league-stats-containers {
-    width: 100%;
-    display: flex;
-    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">