From dffc8f7a2d2450f4c479dc2c4626bf5ab8102001 Mon Sep 17 00:00:00 2001 From: stefan080106 Date: Tue, 20 Sep 2022 22:40:09 +0200 Subject: [PATCH] :lipstick: Update card and social-media logo desgin --- styles/Kontakt.module.css | 2 +- styles/Kontakt.module.scss | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/styles/Kontakt.module.css b/styles/Kontakt.module.css index 8319ade..37f3070 100644 --- a/styles/Kontakt.module.css +++ b/styles/Kontakt.module.css @@ -1 +1 @@ -.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;border:1px solid #000;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}} \ No newline at end of file +.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>span>img{filter:drop-shadow(1px 1px 4px #4444dd)}.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}} \ No newline at end of file diff --git a/styles/Kontakt.module.scss b/styles/Kontakt.module.scss index 5e5ae71..b25b222 100644 --- a/styles/Kontakt.module.scss +++ b/styles/Kontakt.module.scss @@ -8,7 +8,10 @@ div { a { - span { + > span { + > img { + filter: drop-shadow(1px 1px 4px #4444dd); + } transition: all 0.5s; } :hover { @@ -37,7 +40,7 @@ align-items: center; justify-content: center; flex-direction: row; - border: 1px solid black; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 15px; border-radius: 0.5rem; } }