💄 add dynamic scaling to gameboy

This commit is contained in:
Chase Manning 2023-09-05 09:37:27 +03:00
commit ef3144ac5f
3 changed files with 59 additions and 45 deletions

View file

@ -8,6 +8,8 @@ const StyledApp = styled.div`
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
padding-bottom: 28px;
`;
const App = () => {

View file

@ -3,6 +3,7 @@ import "./gameboy.css";
const Gameboy = () => {
return (
<div className="gameboy" id="GameBoy">
<div className="section">
<div className="screen-area">
<div className="power">
<div className="indicator">
@ -29,7 +30,8 @@ const Gameboy = () => {
</div>
<div className="nintendo">Nintendo</div>
</div>
<div className="section">
<div className="controls">
<div className="dpad">
<div className="up">
@ -56,6 +58,7 @@ const Gameboy = () => {
<div className="select">SELECT</div>
<div className="start">START</div>
</div>
</div>
<div className="speaker">
<div className="dot placeholder"></div>

View file

@ -1,7 +1,10 @@
.gameboy {
position: relative;
width: 350px;
height: 570px;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
border-radius: 20px;
padding: 20px;
background-color: #4f50db;
@ -37,6 +40,12 @@
box-shadow: 0px 5px 0px #3d38b5;
border-bottom: 2px solid #9998eb;
}
.gameboy .section {
width: 100%;
min-height: 199px;
}
.gameboy .screen-area {
position: relative;
padding: 35px 50px 5px 50px;
@ -111,7 +120,7 @@
.gameboy .screen-area .display {
background-color: #929d97;
height: 190px;
width: 210px;
width: 100%;
border-radius: 3px;
margin-bottom: 15px;
}