aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMayteApolix <83069108+MayteApolix@users.noreply.github.com> 2022-01-16 22:32:43 +0100
committerMayteApolix <83069108+MayteApolix@users.noreply.github.com> 2022-01-16 22:32:43 +0100
commit4612982e64478e042efae3a560e8a6a137b999c0 (patch)
tree7fd2081332aee991ace5742c005834891c3824c3
parentfeecdecf2559846da48f08a2faaaefb96732fb59 (diff)
final touches splash screen
-rw-r--r--draughts/public/stylesheets/splash.css34
1 files changed, 29 insertions, 5 deletions
diff --git a/draughts/public/stylesheets/splash.css b/draughts/public/stylesheets/splash.css
index 8826207..050afac 100644
--- a/draughts/public/stylesheets/splash.css
+++ b/draughts/public/stylesheets/splash.css
@@ -1,7 +1,6 @@
@import "style.css";
@import url("https://fonts.googleapis.com/css2?family=Saira&family=Saira+Condensed&display=swap");
-
body {
/* Set the default font */
font-family: "Saira Condensed";
@@ -11,7 +10,6 @@ body {
margin: 0;
}
-
.container {
display: grid;
grid-template-columns: repeat(4, 25%);
@@ -97,6 +95,16 @@ h2 {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
+h1::after{
+ display: block;
+ content: "";
+ align-content: left;
+ border-top: .4rem solid white;
+ width: 13rem;
+ margin: 0 0.7rem;
+ transform: translateY(-2rem);
+}
+
body > div {
width: 95%;
height: 90vh;
@@ -116,15 +124,26 @@ div > img {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
+
#button {
background-color: var(--light-blue);
color: inherit;
font-size: calc(50% + 2vw);
border: none;
+ animation: fadeIn 1s linear;
padding: 5%;
margin-left: 25%;
margin-top: 10%;
cursor: pointer;
+ text-shadow: 2px 2px #000;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
@@ -144,7 +163,8 @@ div > img {
}
.how-to-1 > h2::before {
- content: "1 ";
+ content: "1 - ";
+ font-weight: lighter;
}
.how-to-2 > img {
@@ -153,7 +173,8 @@ div > img {
}
.how-to-2 > h2::before {
- content: "2 ";
+ content: "2 - ";
+ font-weight: lighter;
}
.how-to-3> img {
@@ -163,5 +184,8 @@ div > img {
}
.how-to-3 > h2::before {
- content: "3 ";
+ content: "3 - ";
+ font-weight: lighter;
}
+
+