diff --git a/ProjectSourceCode/src/resources/css/league-pages/league-page.css b/ProjectSourceCode/src/resources/css/league-pages/league-page.css index 2ea7c3c..55d057e 100644 --- a/ProjectSourceCode/src/resources/css/league-pages/league-page.css +++ b/ProjectSourceCode/src/resources/css/league-pages/league-page.css @@ -6,11 +6,13 @@ #league-page-body { - display: flex; /* Enable flexbox layout */ - flex-direction: column; /* Arrange child elements vertically */ - + /* --- SIZE CONTAINER --- */ width: 100%; /* Set the width to the full width of screen */ padding: 30px; /* Create some distance between page boundries and elements */ + + /* --- FORMAT CHILD ITEMS --- */ + display: flex; /* Enable flexbox layout */ + flex-direction: column; /* Arrange child elements vertically */ } /* @@ -22,21 +24,31 @@ /* Stylization for League Information Header Card */ #league-information-container { - display: flex; /* Enable flexbox layout */ - flex-direction: row; /* Arrange child elements horizontally */ + /* --- POSITION CONTAINER --- */ + align-items: center; /* Center content vertically */ + margin: 20px; + /* --- SIZE CONTAINER --- */ height: 100px; width: fit-content; - margin: 20px; - background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */ padding: 10px 20px; /* Adjust padding as needed */ + + /* --- STYLE CONTAINER --- */ + background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */ transform: skewX(-20deg); /* Skew the banner to create a triangular side */ box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4); - - align-items: center; /* Center content vertically */ + /* --- FORMAT CHILD ITEMS --- */ + display: flex; /* Enable flexbox layout */ + flex-direction: row; /* Arrange child elements horizontally */ } + /* + =========================== + LEAGUE INFORMATION CHILD ITEMS + =========================== + */ + /* Adds Red Diagonal Strip at the end of the #league-information-container */ #league-information-container::after {