From 34cc213b79fa9006ba69052fbd481474bdb26abc Mon Sep 17 00:00:00 2001 From: Lucas Patenaude Date: Tue, 9 Apr 2024 21:36:32 -0600 Subject: [PATCH] Formatting to make homepage cards take up more space horizontally --- .../src/resources/css/homepage/homepage.css | 54 +++++++++++++------ ProjectSourceCode/src/views/pages/home.hbs | 14 ++--- .../views/partials/homepage/league-card.hbs | 2 +- 3 files changed, 45 insertions(+), 25 deletions(-) diff --git a/ProjectSourceCode/src/resources/css/homepage/homepage.css b/ProjectSourceCode/src/resources/css/homepage/homepage.css index 9b4eb25..cc7d305 100644 --- a/ProjectSourceCode/src/resources/css/homepage/homepage.css +++ b/ProjectSourceCode/src/resources/css/homepage/homepage.css @@ -1,6 +1,32 @@ -.banner { +/* Container for all page contents */ +#page-container { + width: 100%; + text-align: center; /* Center the content horizontally */ +} + +/* Styling for text at top of the page */ +#leagues-header { + font-family: 'Golos Text'; + display: inline-block; /* Ensure the width is based on content */ + border-bottom: 1.5px solid #999696; /* Adjust the color and thickness as needed */ + +} + +/* Position cards in the center of the screen */ +#card-row { + display: flex; + align-items: center; + justify-content: center; +} + +/* Stylize League Cards */ +#league-card { width: 500px; /* Set width of the banner to 100% of viewport width */ height: 150px; + margin: 20px; + + text-align: center; /* Center the content horizontally */ + background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */ padding: 10px; /* Adjust padding as needed */ position: relative; /* Needed for absolute positioning */ @@ -8,30 +34,24 @@ transform: skewX(-20deg); /* Skew the banner to create a triangular side */ transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */ cursor: pointer; /* Change cursor to pointer on hover */ + box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4); + + /* Counter skew contents to keep inner content straight*/ + #card-contents { + transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */ + } } -.banner:hover { +#league-card:hover { transform: skewX(-20deg) scale(1.05); /* Increase scale on hover to make it pop */ box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Add box-shadow on hover for depth effect */ } -.underlined-header { - font-family: 'Golos Text'; - display: inline-block; /* Ensure the width is based on content */ - border-bottom: 1.5px solid #999696; /* Adjust the color and thickness as needed */ - width: 165px; /* Adjust the width as needed, for example, 50% of the header's width */ -} -.content { - transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */ -} -.banner .content { - display: flex; - align-items: center; -} -.banner::after { + +#league-card::after { content: ''; position: absolute; top: 0; @@ -39,4 +59,4 @@ bottom: 0; width: 1%; /* Width of the red strip */ background-color: red; /* Red color */ -} \ No newline at end of file +} diff --git a/ProjectSourceCode/src/views/pages/home.hbs b/ProjectSourceCode/src/views/pages/home.hbs index 0fec0db..06ffb2d 100644 --- a/ProjectSourceCode/src/views/pages/home.hbs +++ b/ProjectSourceCode/src/views/pages/home.hbs @@ -1,34 +1,34 @@ -
+

Leagues