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

35
styles/fonts.css
View file

@ -1,5 +1,14 @@
@font-face { @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"), src: url("../fonts/Purisa-Bold.ttf") format("truetype"),
url("../fonts/Purisa-Bold.woff") format("woff"), url("../fonts/Purisa-Bold.woff") format("woff"),
url("../fonts/Purisa-Bold.woff2") format("woff2"); url("../fonts/Purisa-Bold.woff2") format("woff2");
@ -8,16 +17,7 @@
} }
@font-face { @font-face {
font-family: "Purisa-BoldOblique"; 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;
}
@font-face {
font-family: "Purisa-Oblique";
src: url("../fonts/Purisa-Oblique.ttf") format("truetype"), src: url("../fonts/Purisa-Oblique.ttf") format("truetype"),
url("../fonts/Purisa-Oblique.woff") format("woff"), url("../fonts/Purisa-Oblique.woff") format("woff"),
url("../fonts/Purisa-Oblique.woff2") format("woff2"); url("../fonts/Purisa-Oblique.woff2") format("woff2");
@ -27,10 +27,9 @@
@font-face { @font-face {
font-family: "Purisa"; font-family: "Purisa";
src: url("../fonts/Purisa.ttf") format("truetype"), src: url("../fonts/Purisa-BoldOblique.ttf") format("truetype"),
url("../fonts/Purisa.woff") format("woff"), url("../fonts/Purisa-BoldOblique.woff") format("woff"),
url("../fonts/Purisa.woff2") format("woff2"); url("../fonts/Purisa-BoldOblique.woff2") format("woff2");
font-weight: 400; font-weight: 700;
font-style: normal; font-style: oblique;
} }

27
styles/style.css
View file

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