More CSS streamlining

This commit is contained in:
Lucas Patenaude
2024-04-16 14:36:59 -06:00
parent 7ce001cf20
commit 80c1dca846
5 changed files with 50 additions and 90 deletions

View File

@@ -54,6 +54,35 @@
flex-direction: row; /* Arrange child elements horizontally */
}
/*
===========================
LEAGUE INFORMATION CHILD ITEMS
===========================
*/
/* Styling for League Logo in League Information Header */
#generated-page-header-logo
{
margin: 0px 30px;
transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 80%;
}
/* Styling for League Title in League Information Header */
#generated-page-header-title
{
transform: skewX(20deg); /* Skew the banner to create a triangular side */
margin-right: 20px;
}
/* Styling for Flag in League Information Header */
#generated-page-header-flag
{
transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 20px;
margin-right: 200px;
}
/*
=============================================
CARDS IN PAGE BODY
@@ -74,4 +103,17 @@
background: linear-gradient(to top, rgb(216, 216, 216), rgb(236, 236, 236), rgb(241, 240, 240));
border: 1px solid gray;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
}
/*
==============================================================
HOVER STYLES
==============================================================
*/
/* Hover Styling for Standings and Top Scorers Cards */
.card-container:hover
{
transform: scale(1.01); /* Scale the row by 1.1 on hover */
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
}

View File

@@ -1,32 +1,3 @@
/*
===========================
LEAGUE INFORMATION CHILD ITEMS
===========================
*/
/* Styling for League Logo in Club Information Header */
#club-logo
{
margin: 0px 30px;
transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 80%;
}
/* Styling for League Title in Club Information Header */
#club-title
{
transform: skewX(20deg); /* Skew the banner to create a triangular side */
margin-right: 20px;
}
/* Styling for FLag in Club Information Header */
#club-flag
{
transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 20px;
margin-right: 200px;
}
/*
=============================================
CARDS IN PAGE BODY

View File

@@ -1,68 +1,15 @@
/*
===========================
LEAGUE INFORMATION CHILD ITEMS
===========================
*/
/* 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 */
}
/* 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%;
}
/* Styling for League Title in League Information Header */
#league-title
{
transform: skewX(20deg); /* Skew the banner to create a triangular side */
margin-right: 20px;
}
/* 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;
}
/*
=============================================
CARDS IN PAGE BODY
=============================================
*/
#table-and-top-scorers-containers {
#table-and-top-scorers-containers
{
display: flex;
flex-direction: row;
}
/*
==============================================================
HOVER STYLES
==============================================================
*/
/* Hover Styling for Standings and Top Scorers Cards */
#table-stats-container:hover, #top-scorers-stats-container:hover
{
transform: scale(1.01); /* Scale the row by 1.1 on hover */
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
}
/*
==============================================================
DYNAMIC PAGE WIDTH STYLES