Henry-Hiles/FlappyBird
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Changed styling

Browse source
This commit is contained in:
Henry Hiles 2022-02-28 10:06:29 -05:00
parent bb3a048d15
commit 00b9bca8bb
5 changed files with 45 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/bottomPipe.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7 KiB

BIN
images/flappyComputer1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
images/pipe.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
images/topPipe.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.7 KiB

90
styles.css
View file

@ -1,75 +1,75 @@
*,
*::after,
*::before {
box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
background-image: url(images/background.png);
background-size: cover;
height: 100vh;
font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
overflow: hidden;
margin: 0;
background-image: url(images/background.png);
background-size: cover;
height: 100vh;
font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
overflow: hidden;
}
.title {
z-index: 10;
position: absolute;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
inset: 0;
color: #eff2f5;
margin: 0;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.2);
z-index: 10;
position: absolute;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
inset: 0;
color: #eff2f5;
margin: 0;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.2);
}
.subtitle {
margin-top: 0.5rem;
margin-top: 0.5rem;
}
.hide {
display: none;
display: none;
}
.bird {
--bird-top: -1000;
--bird-size: 60px;
user-select: none;
position: absolute;
width: var(--bird-size);
left: var(--bird-size);
top: calc(var(--bird-top) * 1px);
border-radius: 50%;
--bird-top: -1000;
--bird-size: 60px;
user-select: none;
position: absolute;
width: var(--bird-size);
left: var(--bird-size);
top: calc(var(--bird-top) * 1px);
border-radius: 50%;
}
.pipe {
position: absolute;
top: 0;
bottom: 0;
width: calc(var(--pipe-width) * 1px);
left: calc(var(--pipe-left) * 1px);
position: absolute;
top: 0;
bottom: 0;
width: calc(var(--pipe-width) * 1px);
left: calc(var(--pipe-left) * 1px);
}
.pipe > .segment {
position: absolute;
width: 100%;
background-size: 100% 600px;
position: absolute;
width: 100%;
background-size: 100% 1200px;
}
.pipe > .top {
top: 0;
bottom: calc(var(--hole-top) * 1px);
background-image: url(images/topPipe.png);
background-position: bottom;
top: 0;
bottom: calc(var(--hole-top) * 1px);
background-image: url(images/pipe.png);
transform: scaleY(-1);
}
.pipe > .bottom {
bottom: 0;
top: calc(100vh - (var(--hole-top) * 1px) + calc(var(--hole-height) * 1px));
background-image: url(images/bottomPipe.png);
bottom: 0;
top: calc(100vh - (var(--hole-top) * 1px) + calc(var(--hole-height) * 1px));
background-image: url(images/pipe.png);
}