Octavia/odin-rock-paper-scissors
Watch
1
0
Fork
You've already forked odin-rock-paper-scissors
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add text and button styes for better readability

Browse source
This commit is contained in:
lolabird 2023-12-31 17:28:37 -07:00
commit c8bfb70e00
2 changed files with 40 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

39
styles/fonts.css
View file

@ -1,5 +1,14 @@
@font-face {
font-family: "Purisa-Bold";
font-family: "Purisa";
src: url("../fonts/Purisa.ttf") format("truetype"),
url("../fonts/Purisa.woff") format("woff"),
url("../fonts/Purisa.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Purisa";
src: url("../fonts/Purisa-Bold.ttf") format("truetype"),
url("../fonts/Purisa-Bold.woff") format("woff"),
url("../fonts/Purisa-Bold.woff2") format("woff2");
@ -8,29 +17,19 @@
}
@font-face {
font-family: "Purisa-BoldOblique";
src: url("../fonts/Purisa-BoldOblique.ttf") format("truetype"),
url("../fonts/Purisa-BoldOblique.woff") format("woff"),
url("../fonts/Purisa-BoldOblique.woff2") format("woff2");
font-weight: 700;
font-style: oblique;
}
@font-face {
font-family: "Purisa-Oblique";
font-family: "Purisa";
src: url("../fonts/Purisa-Oblique.ttf") format("truetype"),
url("../fonts/Purisa-Oblique.woff") format("woff"),
url("../fonts/Purisa-Oblique.woff2") format("woff2");
font-weight: 400;
font-style: oblique;
}
@font-face {
font-family: "Purisa";
src: url("../fonts/Purisa.ttf") format("truetype"),
url("../fonts/Purisa.woff") format("woff"),
url("../fonts/Purisa.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
font-family: "Purisa";
src: url("../fonts/Purisa-BoldOblique.ttf") format("truetype"),
url("../fonts/Purisa-BoldOblique.woff") format("woff"),
url("../fonts/Purisa-BoldOblique.woff2") format("woff2");
font-weight: 700;
font-style: oblique;
}

27
styles/style.css
View file

@ -2,11 +2,13 @@ body {
background-image: url("../images/paper-5985445_1920.jpg");
background-size: cover;
background-color: rgb(221, 125, 104);
color: #eee;
color: #fff;
text-align: center;
height: 100vh;
display: flex;
flex-direction: column;
font-family: "Purisa", cursive;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)
}
header {
@ -30,18 +32,22 @@ main {
justify-content: center;
}
.button {
button {
width: 200px;
height: 200px;
margin: 5px;
border-radius: 5px;
font-family: "Purisa", cursive;
font-size: 30px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(233, 233, 233, 0.973)
}
.button {
height: 200px;
}
.replay-button {
width: 200px;
height: auto;
margin: 5px;
font-size: 30px;
}
#rock {
@ -90,4 +96,13 @@ main {
footer {
flex: 0 0 auto;
font-weight: bold;
}
footer a {
color: #ebe5dc;
}
footer a:hover {
text-decoration: none;
}