aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--draughts/public/stylesheets/splash.css207
-rw-r--r--draughts/public/stylesheets/style.css19
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;
+ }
+}