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

Responsive startBox

Browse source
This commit is contained in:
aronmal 2023-02-05 23:00:28 +01:00
parent 0268eb23a1
commit 49a09f9af8
Signed by: aronmal
GPG key ID: 816B7707426FC612
2 changed files with 59 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,7 @@ export default function Home() {
return ( return (
<div id='box'> <div id='box'>
<button id='navExpand'> <button id='navExpand'>
<img src='/assets/burger-menu.png' alt='Burger Menu' /> <img id='burgerMenu' src='/assets/burger-menu.png' alt='Burger Menu' />
</button> </button>
<div id='shield'> <div id='shield'>
<div id='width'> <div id='width'>
@ -30,15 +30,15 @@ export default function Home() {
</button> </button>
<div id='sameWidth'> <div id='sameWidth'>
<button className='optionButton'> <button className='optionButton'>
Raum erstellen <span>Raum erstellen</span>
<FontAwesomeIcon icon={faPlus} /> <FontAwesomeIcon icon={faPlus} />
</button> </button>
<button className='optionButton'> <button className='optionButton'>
Raum beitreten <span>Raum beitreten</span>
<FontAwesomeIcon icon={faUserPlus} /> <FontAwesomeIcon icon={faUserPlus} />
</button> </button>
<button className='optionButton'> <button className='optionButton'>
Zuschauen <span>Zuschauen</span>
<FontAwesomeIcon icon={faEye} /> <FontAwesomeIcon icon={faEye} />
</button> </button>
</div> </div>

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

@ -26,7 +26,7 @@
border-radius: 8px; border-radius: 8px;
box-shadow: 0 0 2px 2px #0008 inset; box-shadow: 0 0 2px 2px #0008 inset;
img { #burgerMenu {
@include pixelart; @include pixelart;
height: 84px; height: 84px;
width: 84px; width: 84px;
@ -132,13 +132,15 @@
gap: 3rem; gap: 3rem;
.optionButton { .optionButton {
position: relative; @include flex-row;
justify-content: space-between;
align-items: center;
font-size: 2.5em; font-size: 2.5em;
color: $grayish; color: $grayish;
background-color: #000C; background-color: #000C;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
padding: 1rem calc(4rem + 48px) 1rem 4rem; padding: 1rem 2rem 1rem 4rem;
width: 100%; width: 100%;
box-shadow: 0 0 2px 2px #fff6 inset; box-shadow: 0 0 2px 2px #fff6 inset;
border: 2px solid #000C; border: 2px solid #000C;
@ -147,13 +149,15 @@
margin-top: 2rem; margin-top: 2rem;
} }
span {
margin: 0 auto;
}
svg { svg {
position: absolute; margin-left: 3rem;
font-size: 2em; font-size: 2em;
top: 0; width: 2.5rem;
bottom: 0; height: inherit;
width: 48px;
right: 24px;
} }
} }
@ -195,8 +199,7 @@
width: 80px; width: 80px;
height: 80px; height: 80px;
img { #burgerMenu {
@include pixelart;
height: 64px; height: 64px;
width: 64px; width: 64px;
} }
@ -240,8 +243,7 @@
width: 64px; width: 64px;
height: 64px; height: 64px;
img { #burgerMenu {
@include pixelart;
height: 44px; height: 44px;
width: 44px; width: 44px;
} }
@ -281,6 +283,33 @@
font-size: 2em; font-size: 2em;
padding: calc(1rem + 8px) 3rem 1rem 3rem; padding: calc(1rem + 8px) 3rem 1rem 3rem;
} }
#startBox {
max-width: 90vw;
padding: 2rem;
#back {
margin-top: -1rem;
font-size: 2em;
width: 7rem;
padding: .125rem;
}
#sameWidth {
max-width: 100%;
.optionButton {
font-size: 2em;
padding: 1rem 2rem;
svg {
margin-left: 2rem;
font-size: 1.5em;
width: 2rem;
}
}
}
}
} }
} }
@ -291,5 +320,19 @@
height: 150px; height: 150px;
width: 300px; width: 300px;
} }
#startBox {
#sameWidth {
.optionButton {
font-size: 1.5em;
svg {
margin-left: 1rem;
font-size: 1em;
}
}
}
}
} }
} }