diff --git a/src/App.tsx b/src/App.tsx index a1c917f..3101f29 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,8 @@ const StyledApp = styled.div` display: flex; justify-content: center; align-items: center; + padding: 5px; + padding-bottom: 28px; `; const App = () => { diff --git a/src/components/Gameboy.tsx b/src/components/Gameboy.tsx index 49119ca..8fee09b 100644 --- a/src/components/Gameboy.tsx +++ b/src/components/Gameboy.tsx @@ -3,58 +3,61 @@ import "./gameboy.css"; const Gameboy = () => { return ( <div className="gameboy" id="GameBoy"> - <div className="screen-area"> - <div className="power"> - <div className="indicator"> - <div className="led"></div> - <span className="arc" style={{ zIndex: 2 }}></span> - <span className="arc" style={{ zIndex: 1 }}></span> - <span className="arc" style={{ zIndex: 0 }}></span> + <div className="section"> + <div className="screen-area"> + <div className="power"> + <div className="indicator"> + <div className="led"></div> + <span className="arc" style={{ zIndex: 2 }}></span> + <span className="arc" style={{ zIndex: 1 }}></span> + <span className="arc" style={{ zIndex: 0 }}></span> + </div> + POWER </div> - POWER - </div> - <canvas className="display" id="mainCanvas"></canvas> + <canvas className="display" id="mainCanvas"></canvas> - <div className="label"> - <div className="title">GAME BOY</div> - <div className="subtitle"> - <span className="c">C</span> - <span className="o1">O</span> - <span className="l">L</span> - <span className="o2">O</span> - <span className="r">R</span> + <div className="label"> + <div className="title">GAME BOY</div> + <div className="subtitle"> + <span className="c">C</span> + <span className="o1">O</span> + <span className="l">L</span> + <span className="o2">O</span> + <span className="r">R</span> + </div> </div> </div> + + <div className="nintendo">Nintendo</div> </div> - - <div className="nintendo">Nintendo</div> - - <div className="controls"> - <div className="dpad"> - <div className="up"> - <i className="fa fa-caret-up"></i> + <div className="section"> + <div className="controls"> + <div className="dpad"> + <div className="up"> + <i className="fa fa-caret-up"></i> + </div> + <div className="right"> + <i className="fa fa-caret-right"></i> + </div> + <div className="down"> + <i className="fa fa-caret-down"></i> + </div> + <div className="left"> + <i className="fa fa-caret-left"></i> + </div> + <div className="middle"></div> </div> - <div className="right"> - <i className="fa fa-caret-right"></i> + <div className="a-b"> + <div className="b">B</div> + <div className="a">A</div> </div> - <div className="down"> - <i className="fa fa-caret-down"></i> - </div> - <div className="left"> - <i className="fa fa-caret-left"></i> - </div> - <div className="middle"></div> </div> - <div className="a-b"> - <div className="b">B</div> - <div className="a">A</div> - </div> - </div> - <div className="start-select"> - <div className="select">SELECT</div> - <div className="start">START</div> + <div className="start-select"> + <div className="select">SELECT</div> + <div className="start">START</div> + </div> </div> <div className="speaker"> diff --git a/src/components/gameboy.css b/src/components/gameboy.css index 9adcf58..f224c39 100644 --- a/src/components/gameboy.css +++ b/src/components/gameboy.css @@ -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; }