aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Responsive burger menu, videoWrapper, startButton

Browse source
This commit is contained in:
aronmal 2023-02-05 22:09:11 +01:00
parent 61acca3018
commit 0268eb23a1
Signed by: aronmal
GPG key ID: 816B7707426FC612
3 changed files with 144 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

3
leaky-ships/pages/dev/index.tsx
View file

@ -28,7 +28,7 @@ export default function Home() {
<button id='back' onClick={() => setHeWantsToPlay(false)}>
<FontAwesomeIcon icon={faLeftLong} />
</button>
<div>
<div id='sameWidth'>
<button className='optionButton'>
Raum erstellen
<FontAwesomeIcon icon={faPlus} />
@ -43,7 +43,6 @@ export default function Home() {
</button>
</div>
</div>}
{/* </div> */}
</div >
)
}

6
leaky-ships/styles/App.scss
View file

@ -2,6 +2,12 @@
@use './mixins/effects' as *;
@import './mixins/variables';
html,
body,
#__next {
height: 100%;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

204
leaky-ships/styles/homepage.scss
View file

@ -7,7 +7,7 @@
@import url('https://fonts.googleapis.com/css2?family=Farro:wght@300;400;500;700&display=swap');
#box {
min-height: 100vh;
min-height: 100%;
background-color: #282c34;
@include flex-col;
align-items: center;
@ -27,8 +27,9 @@
box-shadow: 0 0 2px 2px #0008 inset;
img {
height: 80%;
width: 80%;
@include pixelart;
height: 84px;
width: 84px;
}
}
@ -62,69 +63,6 @@
}
}
}
@media (max-width: 2000px) {
height: 200px;
width: 560px;
#width {
h1 {
font-size: 4.5em;
letter-spacing: 4px;
&:first-child {
border-top: 4px solid black;
}
&:last-child {
border-bottom: 4px solid black;
}
}
}
}
@media (max-width: 800px) {
height: 160px;
width: 450px;
#width {
h1 {
font-size: 3.6em;
letter-spacing: 3px;
&:first-child {
border-top: 3px solid black;
}
&:last-child {
border-bottom: 3px solid black;
}
}
}
}
@media (max-width: 600px) {
height: 100px;
width: 280px;
#width {
h1 {
font-size: 2.4em;
letter-spacing: 2px;
&:first-child {
border-top: 2px solid black;
}
&:last-child {
border-bottom: 2px solid black;
}
}
}
}
}
#videoWrapper {
@ -187,7 +125,7 @@
border: 2px solid #000C;
}
div {
#sameWidth {
display: flex;
flex-direction: column;
align-items: center;
@ -222,4 +160,136 @@
}
}
}
@media (max-width: 2000px) {
#box {
#shield {
height: 200px;
width: 560px;
#width {
h1 {
font-size: 4.5em;
letter-spacing: 4px;
&:first-child {
border-top: 4px solid black;
}
&:last-child {
border-bottom: 4px solid black;
}
}
}
}
}
}
@media (max-width: 1000px) {
#box {
#navExpand {
top: 32px;
left: 32px;
width: 80px;
height: 80px;
img {
@include pixelart;
height: 64px;
width: 64px;
}
}
#shield {
height: 160px;
width: 450px;
#width {
h1 {
font-size: 3.6em;
letter-spacing: 3px;
&:first-child {
border-top: 3px solid black;
}
&:last-child {
border-bottom: 3px solid black;
}
}
}
}
#videoWrapper {
height: 300px;
width: 600px;
}
}
}
@media (max-width: 700px) {
#box {
justify-content: space-evenly;
#navExpand {
top: 16px;
left: 16px;
width: 64px;
height: 64px;
img {
@include pixelart;
height: 44px;
width: 44px;
}
}
#shield {
height: 100px;
width: 280px;
#width {
h1 {
font-size: 2.2em;
letter-spacing: 2px;
&:first-child {
border-top: 2px solid black;
}
&:last-child {
border-bottom: 2px solid black;
}
}
}
}
#videoWrapper {
height: 250px;
width: 450px;
svg {
font-size: 4em;
}
}
#startButton {
font-size: 2em;
padding: calc(1rem + 8px) 3rem 1rem 3rem;
}
}
}
@media (max-width: 500px) {
#box {
#videoWrapper {
height: 150px;
width: 300px;
}
}
}