@@ -30,15 +30,15 @@ export default function Home() {
diff --git a/leaky-ships/styles/homepage.scss b/leaky-ships/styles/homepage.scss
index 0644b53..a84823d 100644
--- a/leaky-ships/styles/homepage.scss
+++ b/leaky-ships/styles/homepage.scss
@@ -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;
+ }
+ }
+ }
+ }
}
}
\ No newline at end of file