Updates

studio-arrenberg · Feb 22, 2021 · ae6a3a0 · ae6a3a0
1 parent 6962401
commit ae6a3a0
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 5 deletions.
diff --git a/elements/map-card.php b/elements/map-card.php
@@ -36,21 +36,22 @@
 
         <div class="marker-container">
             <div class="marker">
-                <?php
+                 <?php
                     if (empty(get_field('emoji'))) { 
                         the_post_thumbnail( 'square_m' ); 
                     } else { 
+                        echo '<span class="emoji-marker">'; 
                         the_field('emoji'); 
+                        echo "</span>"; 
                     } 
                     ?>
             </div>
         </div>
 
-
-
         <!-- <img src="https://api.mapbox.com/styles/v1/mapbox/light-v10/static/-87.0186,32.4055,14/500x300@2x?access_token=pk.eyJ1Ijoic3R1ZGlvYXJyZW5iZXJnIiwiYSI6ImNraWc5aGtjZzBtMGQyc3FrdXplcG5kZXYifQ._bNxRJxhINPtn18Y-hztEQ" alt="hello world"> -->
          <img src="https://api.mapbox.com/styles/v1/studioarrenberg/ckl9rpmct17pi17mxw1zw46h0/static/<?php echo $location['lng'].",".$location['lat'].",".$map_zoom."/".$width."x".$height; ?>@2x?access_token=pk.eyJ1Ijoic3R1ZGlvYXJyZW5iZXJnIiwiYSI6ImNraWc5aGtjZzBtMGQyc3FrdXplcG5kZXYifQ._bNxRJxhINPtn18Y-hztEQ" alt="Projekt Location">
 
+    </div>
 </div>
 
 

diff --git a/style.css b/style.css
@@ -4793,6 +4793,7 @@ a.card-link{
 .card .marker{
   width: 100px;
   height: 100px;
+  margin-bottom: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -4803,14 +4804,61 @@ a.card-link{
       0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
       0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
 
-
+
+
 }
-.card .marker img{
+
+.card .marker::before{
+  content: '';
+  z-index: 1;
+  position: absolute;
   width: 100px;
   height: 100px;
+  background: #fff;
+  border-radius: 20px;
+}
+
+.card .marker::after{
+  content: '';
+  margin-top:50px;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  transform: rotate(45deg);
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
+  0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
+  0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07)
+}
+
+
+
+.card .marker img{
+  width: 100%;
+  height: 100%;
   min-width: inherit;
   background: #fff;
   border-radius: 20px;
+  z-index: 2;
+
+}
+
+.card .marker .emoji-marker{
+  z-index: 2;
+
+}
+
+@media (max-width: 782px) {
+  .card .marker{
+    width: 50px;
+    height: 50px;
+  }
+
+  .card .marker::after{
+    margin-top: 25px;
+    width: 10px;
+    height: 10px;
+  }
 }