stefan.arnold/AGS_IT_Solutions_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📱 Update map resonsive and map api

Browse Source
This commit is contained in:
stefan080106
2022-09-21 21:38:20 +02:00
parent a730ca9cf8
commit 59332ab8d5
4 changed files with 191 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
styles/Kontakt.module.css
View File

@@ -1 +1,160 @@
.SocialMediaContainer{width:80%;height:100%;display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap}.SocialMediaContainer div a>span{transition:all .5s}.SocialMediaContainer div a :hover{transform:scale(1.05)}.TwoColumnLayout{display:flex;flex-direction:row;justify-content:space-around;align-items:center;flex-wrap:wrap;width:90vw;height:100%;padding:0;margin:0}.TwoColumnLayout .columnChild{height:40vh;width:40vw;min-width:600px;margin:1rem;display:flex;align-items:center;justify-content:center;flex-direction:row;box-shadow:rgba(0,0,0,.24) 0px 3px 15px;border-radius:.5rem}.mapouter{position:relative;text-align:right;height:100%;width:60%;border-radius:0 .5rem .5rem 0}.gmap_canvas{overflow:hidden;background:none !important;height:100%;width:100%;border-radius:0 .5rem .5rem 0}.contactInfo{width:40%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.contactInfo p{transition:all .25s ease-in-out}.contactInfo p:hover{transform:scale(1.05)}@media(max-width: 768px){.TwoColumnLayout{flex-direction:column}.TwoColumnLayout .columnChild{width:90vw;height:40vh;min-width:0}.TwoColumnLayout .columnChild .mapouter{display:none}.contactInfo{width:100%}.SocialMediaContainer{justify-content:center}.SocialMediaContainer div{flex-basis:50%;text-align:center}}
.SocialMediaContainer {
width: 80%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.SocialMediaContainer div a > span {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.SocialMediaContainer div a :hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.TwoColumnLayout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 90vw;
height: 100%;
padding: 0;
margin: 0;
}
.TwoColumnLayout .columnChild {
height: 40vh;
width: 40vw;
min-width: 600px;
margin: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 15px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 15px;
border-radius: 0.5rem;
}
.mapouter {
position: relative;
text-align: right;
height: 100%;
width: 60%;
border-radius: 0 0.5rem 0.5rem 0;
}
.gmap_canvas {
overflow: hidden;
background: none !important;
height: 100%;
width: 100%;
border-radius: 0 0.5rem 0.5rem 0;
border: none;
}
.contactInfo {
width: 40%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.contactInfo p {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.contactInfo p:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.infoContainer {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
@media (max-width: 768px) {
.TwoColumnLayout {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 95vw;
}
.TwoColumnLayout .columnChild {
width: 90vw;
height: 40vh;
min-width: 0;
}
.TwoColumnLayout .columnChild .mapouter {
height: 100%;
width: 100%;
}
.TwoColumnLayout .infoContainer {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 55vh;
}
.contactInfo {
width: 100%;
}
.SocialMediaContainer {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.SocialMediaContainer div {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
text-align: center;
}
}
/*# sourceMappingURL=Kontakt.module.css.map */