lucaspatenaude/ScoreSpot
1
0
Fork 0
Code Projects 1 Releases 1 Wiki Activity

More comments added to league-page CSS

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-14 19:58:19 -06:00
parent e90f1212c5
commit 62dbf54385
1 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
ProjectSourceCode/src/resources/css/league-pages/league-page.css
View File

@@ -6,11 +6,13 @@
#league-page-body #league-page-body
{ {
display: flex; /* Enable flexbox layout */ /* --- SIZE CONTAINER --- */
flex-direction: column; /* Arrange child elements vertically */
width: 100%; /* Set the width to the full width of screen */ width: 100%; /* Set the width to the full width of screen */
padding: 30px; /* Create some distance between page boundries and elements */ 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 */ /* Stylization for League Information Header Card */
#league-information-container #league-information-container
{ {
display: flex; /* Enable flexbox layout */ /* --- POSITION CONTAINER --- */
flex-direction: row; /* Arrange child elements horizontally */ align-items: center; /* Center content vertically */
margin: 20px;
/* --- SIZE CONTAINER --- */
height: 100px; height: 100px;
width: fit-content; 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 */ 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 */ transform: skewX(-20deg); /* Skew the banner to create a triangular side */
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4); box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
/* --- FORMAT CHILD ITEMS --- */
align-items: center; /* Center content vertically */ 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 */ /* Adds Red Diagonal Strip at the end of the #league-information-container */
#league-information-container::after #league-information-container::after
{ {