diff --git a/src/lib/components/profile/links.svelte b/src/lib/components/profile/links.svelte
index 3a849c6..168176b 100644
--- a/src/lib/components/profile/links.svelte
+++ b/src/lib/components/profile/links.svelte
@@ -4,7 +4,7 @@
import MediaLink from "./media_link.svelte";
-
+
@@ -26,43 +27,79 @@
.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
index 1995fbe..e90c6e3 100644
--- 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
index effba03..43d8f57 100644
--- 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%);