Links frosted glass effect

ironkayman · Mar 23, 2024 · 6321b9e · 6321b9e
1 parent 5ad559c
commit 6321b9e
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 15 deletions.
diff --git a/src/lib/components/profile/links.svelte b/src/lib/components/profile/links.svelte
@@ -4,7 +4,7 @@
     import MediaLink from "./media_link.svelte";
 </script>
 
-<div class="link-array-warpper">
+<div class="link-array-wrapper">
     <div class="link-array">
         <MediaLink url="https://twitter.com/ironkayman" label="Twitter">
             <Twitter height="42" width="42"/>
@@ -19,50 +19,87 @@
             <Mailbox2 height="42" width="42"/>
         </MediaLink>
     </div>
+    <div class="wrapper-blur"></div>
 </div>
 
 
 <style>
 
 .link-array {
     padding: 2rem 0rem;
-    /* margin: 0.8rem 0rem; */
+    /* padding-right: -4px; */
     height: fit-content;
-    gap: 0.8rem;
+    gap: 1.05rem;
     display: flex;
-    align-items: center;
     vertical-align: middle;
     flex-direction: column;
     justify-content: space-between;
     flex-wrap: wrap;
+    width: 13.3rem;
+    margin-left: 1.5rem;
+    position: absolute;
+    z-index: 2;
+    /* background-color: hsla(4, 26%, 0%, 0.2) */
 }
 
-.link-array-warpper{
+.link-array-wrapper {
     /* background: hsl(236, 16%, 33%); */
     background-image: url("/img/mnt.png");
     animation: show 160s infinite;
     -webkit-animation: show 160s infinite;
-    /* height: 60vh; */
+    min-height: 64.8vh;
 }
 
-@-webkit-keyframes show {
-    0%      {background-position: 12% 45%;}
-    40%     {background-position: 18% 60%;}
+.wrapper-blur {
+    position: absolute;
+    opacity: 0.98;
+    z-index: 1;
+    top: -20px;
+    margin-left: -10px;
+    background-image: url("/img/mnt.png");
+    --effect: blur(4px) brightness(50%);
+    -webkit-filter: var(--effect);
+    -moz-filter: var(--effect);
+    -o-filter: var(--effect);
+    -ms-filter: var(--effect);
+    filter: var(--effect);
+    height: 110%;
+    width: 16.1rem;
+    position: absolute;
+    animation: show 160s infinite;
+    -webkit-animation: show 160s infinite;
+}
+
+@media (max-width: 540px) {
+    .wrapper-blur {
+        width: 110%;
+    }
+    .link-array {
+        align-items: center;
+        width: 100%;
+        margin-left: 0px;
+    }
+}
+
+@keyframes show {
+    0%      {background-position: 2% 45%;}
+    40%     {background-position: 8% 60%;}
     50%    {background-position: 50% 70%;}
     60%    {background-position: 75% 60%;}
     80%    {background-position: 80% 45%;}
     90%    {background-position: 40% 40%;}
-    100%    {background-position: 12% 45%;}
+    100%    {background-position: 2% 45%;}
 }
 
-@keyframes show {
-    0%      {background-position: 10% 45%;}
-    40%     {background-position: 15% 60%;}
+
+@-webkit-keyframes show {
+    0%      {background-position: 2% 45%;}
+    40%     {background-position: 8% 60%;}
     50%    {background-position: 50% 70%;}
     60%    {background-position: 75% 60%;}
     80%    {background-position: 80% 45%;}
     90%    {background-position: 40% 40%;}
-    100%    {background-position: 10% 45%;}
+    100%    {background-position: 2% 45%;}
 }
 
 

diff --git a/src/lib/components/profile/mastermenu.svelte b/src/lib/components/profile/mastermenu.svelte
@@ -140,6 +140,7 @@ onMount(() => {
 }
 
 .menu-space {
+  z-index: 3;
   display: flex;
   overflow-x: auto;
 }

diff --git a/src/lib/components/profile/media_link.svelte b/src/lib/components/profile/media_link.svelte
@@ -32,7 +32,7 @@
         }
         & svg,img {
             color: hsl(278, 33%, 6%);
-            margin-right: 0.7em;
+            margin-right: 0.25em;
         }
     }
 
@@ -59,6 +59,15 @@
         padding-bottom: 2px;
         margin-top: calc(0.5rem + 2px);
 
+        & span::after {
+            content: '*';
+            padding-left: 4px;
+            font-size: 0.8rem;
+            position: absolute;
+            color: hsl(0, 0%, 70%, 0.5);
+            margin-top: 14px;
+        }
+
         &:active {
             background-color: hsl(0, 8%, 23%);
             box-shadow: 0px 6px hsl(0, 8%, 16%);