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

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

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