From 14e754aa6a4850b88bd5c6e7e25b58f62ef531a4 Mon Sep 17 00:00:00 2001 From: Thomas Voss Date: Mon, 17 Jan 2022 01:01:57 +0100 Subject: Enough CSS to give me a tumor --- draughts/public/stylesheets/splash.css | 207 +++++++++++++++++++-------------- draughts/public/stylesheets/style.css | 19 +++ 2 files changed, 137 insertions(+), 89 deletions(-) diff --git a/draughts/public/stylesheets/splash.css b/draughts/public/stylesheets/splash.css index 050afac..53f5680 100644 --- a/draughts/public/stylesheets/splash.css +++ b/draughts/public/stylesheets/splash.css @@ -4,82 +4,47 @@ body { /* Set the default font */ font-family: "Saira Condensed"; - background-color: var(--dark-blue); + background-color: var(--dark-blue); color: white; /* Remove the margin on the sides of the screen */ margin: 0; } +/* Resizes body to fit the viewport and ensures position is absolute */ +body > div { + width: 95%; + height: 90vh; + margin-top:8vh; + position: absolute; +} + +/* Adjusts standard rendering of our images. Adds drop shadow and ensures it fits the container */ +div > img { + object-fit: contain; + width: 100%; + max-height: 100%; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); +} + +/* Set the container class to a 4x3 grid with named areas */ .container { display: grid; grid-template-columns: repeat(4, 25%); grid-template-rows: repeat(3, calc(100% / 3)); grid-template-areas: - "header header how-to-1 church" - "stats stats how-to-2 raadhuis" - "players button how-to-3 windmill"; + "header header how-to-1 church" + "stats stats how-to-2 raadhuis" + "players button how-to-3 windmill"; } +/* Sets the header class to the header grid-area */ .header { grid-area: header; justify-self: left; margin-left:10%; } -.stats { - grid-area: stats; - justify-self: left; - margin-left:10%; - margin-top: 2%; -} - -.icon { - grid-area: players; -} - -.button { - grid-area: button; -} - -.how-to-1 { - grid-area: how-to-1; - display: grid; - justify-content:left; - margin-left: 20%; -} - -.how-to-2 { - grid-area: how-to-2; - display: grid; - justify-content:left; - margin-left: 20%; -} - -.how-to-3 { - grid-area: how-to-3; - display: grid; - justify-content:left; - margin-left: 20%; -} - -.church { - grid-area: church; -} - -.raadhuis { - grid-area: raadhuis; -} - -.windmill { - grid-area: windmill; -} - -.icon > img { - margin-left: 15%; - height: 75%; - width: 90%; -} - +/* Formats the title according to our wireframe */ h1 { justify-content: start; font-family: Saira; @@ -87,52 +52,59 @@ h1 { filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } -h2 { - font-family: inherit; - font-size: 30px; - font-weight: normal; - font-style: normal; - filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); -} - -h1::after{ +/* Adds line under title */ +h1::after { display: block; - content: ""; + content: ""; align-content: left; - border-top: .4rem solid white; - width: 13rem; - margin: 0 0.7rem; - transform: translateY(-2rem); + border-top: .4rem solid white; + width: 13rem; + margin: 0 0.7rem; + transform: translateY(-2rem); } -body > div { - width: 95%; - height: 90vh; - margin-top:8vh; - position: absolute; +/* Sets the stats class to the stats grid-area. */ +.stats { + grid-area: stats; + justify-self: left; + margin-left:10%; + margin-top: 2%; } +/* Overrides font-size for paragraphs (particularly those that contain the stats) */ div > p { font-size:24px; margin: 0; } -div > img { - object-fit: contain; - width: 100%; - max-height: 100%; - filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); +/* Sets the icon class to the icon area */ +.icon { + grid-area: players; +} + +/* Alligns the icon image within the icon div */ +.icon > img { + margin-left: 15%; + height: 75%; + width: 90%; +} + +/* Sets button class to button grid area */ +.button { + grid-area: button; } +/* Play button fade in animation */ @keyframes fadeIn { 0% { opacity: 0; } 100% { - opacity: 1; + opacity: 1; } - } +} +/* Formats our button using the button element id selector */ #button { background-color: var(--light-blue); color: inherit; @@ -147,45 +119,102 @@ div > img { filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } +/* Change text to bold when clicked */ #button:active { font-weight: bold; } +/* Changes background color of play button when hovered */ #button:hover { cursor: pointer; background-color: var(--darker-blue) } +/* Configures the standard setting for our how-to section headers */ +h2 { + font-family: inherit; + font-size: 30px; + font-weight: normal; + font-style: normal; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); +} + +/* Sets the how-to class to the grid area */ +.how-to-1 { + grid-area: how-to-1; + display: grid; + justify-content:left; + margin-left: 20%; +} + +/* Adds labeling and formattnig for the header */ +.how-to-1 > h2::before { + content: "1 - "; + display: list-item-inline; + font-weight: lighter; +} + +/* Some specific adjustments for each image within the how-to section to ensure proper allignment */ .how-to-1 > img { justify-self: center; width: fit-content; height: 75%; } -.how-to-1 > h2::before { - content: "1 - "; +/* Sets the how-to class to the grid area */ +.how-to-2 { + grid-area: how-to-2; + display: grid; + justify-content:left; + margin-left: 20%; +} + +/* Adds labeling and formattnig for the header */ +.how-to-2 > h2::before { + content: "2 - "; + display: list-item-inline; font-weight: lighter; } +/* Some specific adjustments for each image within the how-to section to ensure proper allignment */ .how-to-2 > img { justify-self: center; height: 85%; } -.how-to-2 > h2::before { - content: "2 - "; - font-weight: lighter; +/* Sets the how-to class to the grid area */ +.how-to-3 { + grid-area: how-to-3; + display: grid; + justify-content:left; + margin-left: 20%; } +/* Some specific adjustments for each image within the how-to section to ensure proper allignment */ .how-to-3> img { justify-self: center; height: 45%; opacity: 0.8; } +/* Adds labeling and formattnig for the header */ .how-to-3 > h2::before { + display: list-item-inline; content: "3 - "; font-weight: lighter; } +/* Sets church class to church grid area */ +.church { + grid-area: church; +} +/* Sets raadhuis class to raadhuis grid area */ +.raadhuis { + grid-area: raadhuis; +} + +/* Sets windmill class to windmill grid area */ +.windmill { + grid-area: windmill; +} diff --git a/draughts/public/stylesheets/style.css b/draughts/public/stylesheets/style.css index b8830b8..9813ae0 100644 --- a/draughts/public/stylesheets/style.css +++ b/draughts/public/stylesheets/style.css @@ -8,3 +8,22 @@ --darker-blue: #302C5D; --red: #9E3C2F; } + + +/* Ensures a minimum screen resolution of 800 x 800*/ +@media (max-width: 799px), (max-height: 799px) { + body::before { + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + font-family: Saira; + font-size: 20px; + color: white; + padding: 20px; + content: "Your window is too small! Please zoom out or use a machine with a larger screen resolution"; + background-color: var(--red); + z-index: 100; + } +} -- cgit v1.2.3