CSS fixes

This commit is contained in:
2020-12-01 18:00:45 +01:00
parent 44e304c123
commit be55d34c03
4 changed files with 38 additions and 7 deletions

View File

@@ -15,7 +15,7 @@
.App { .App {
background-image: url("./public/bg_tile.jpg"); background-image: url("./public/bg_tile.jpg");
background-size: contain; background-size: contain;
background-repeat: round; background-repeat: repeat;
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 100%; height: 100%;
@@ -34,7 +34,7 @@
} }
.logo { .logo {
height: 5rem; width: 20vw;
margin: 16px; margin: 16px;
} }

View File

@@ -8,7 +8,7 @@ import googleplay from "../../public/googleplay.png";
export default function HomeScreen() { export default function HomeScreen() {
return <div className="hs"> return <div className="hs">
<div className="hs-top"> <div className="hs-top">
<h5>Dowiedz się czym właściwie jest Menui</h5> <h5>Dowiedz się czym jest Menui</h5>
<div className="hs-top-icon"><HelpIcon/></div> <div className="hs-top-icon"><HelpIcon/></div>
</div> </div>
<div className="hs-center"> <div className="hs-center">
@@ -19,7 +19,7 @@ export default function HomeScreen() {
</p> </p>
</div> </div>
<div className="hs-bottom"> <div className="hs-bottom">
<h4>Pobierz na telefon</h4> <h4>Pobierz Menui na telefon</h4>
<div> <div>
<img className="hs-bottom-icon" src={appstore} alt="Get Menui from App Store" /> <img className="hs-bottom-icon" src={appstore} alt="Get Menui from App Store" />
<img className="hs-bottom-icon" src={googleplay} alt="Get Menui from Google Play"/> <img className="hs-bottom-icon" src={googleplay} alt="Get Menui from Google Play"/>

View File

@@ -1,5 +1,5 @@
.hs { .hs {
height: 100%; height: 90%;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: space-around; justify-content: space-around;
@@ -46,3 +46,21 @@
.hs-bottom-icon:hover { .hs-bottom-icon:hover {
opacity: 1; opacity: 1;
} }
@media (max-height: 600px) {
.hs-top {
display: none;
}
.hs-center {
display: none;
}
}
@media (max-width: 768px) {
.hs-top {
display: none;
}
.hs-center {
display: none;
}
}

View File

@@ -6,12 +6,13 @@
justify-content: space-between; justify-content: space-between;
background-color: $main-color; background-color: $main-color;
position: fixed; position: fixed;
z-index: 1; z-index: 3;
} }
.topBarLogo { .topBarLogo {
height: 2.4rem; height: 2.4rem;
margin: 16px; margin: 12px;
margin-left: 16px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.5; opacity: 0.5;
@@ -67,3 +68,15 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
@media (max-width: 768px) {
.topBar-hamburger {
display: none;
}
}
@media (max-height: 600px) {
.topBar-hamburger {
display: none;
}
}