70 lines
1.9 KiB
SCSS
70 lines
1.9 KiB
SCSS
nav {
|
|
.options > div {
|
|
display: grid;
|
|
place-items: center;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
border: 1px solid transparent;
|
|
transition: border .5s ease;
|
|
|
|
&:hover {
|
|
border-color: var(--content-hover-background);
|
|
}
|
|
|
|
&:active {
|
|
border-color: var(--content-border-color);
|
|
}
|
|
}
|
|
|
|
.navigation ul li a {
|
|
display: block;
|
|
padding: 5px 10px;
|
|
position: relative;
|
|
color: color-mix(in srgb, var(--content-color) 80%, transparent);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
|
|
&.active {
|
|
color: var(--primary-500);
|
|
position: relative;
|
|
top: -3px;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: calc(50% - 1px);
|
|
transform: translate(-50%);
|
|
width: 50%;
|
|
height: .1px;
|
|
background: var(--primary-500);
|
|
border-radius: 50%;
|
|
bottom: 2px;
|
|
box-shadow: 0 -3px 10px 1px var(--primary-500);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.blur {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 120px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.blur1 {
|
|
z-index: 10;
|
|
backdrop-filter: blur(3px);
|
|
mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
|
|
-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
|
|
}
|
|
|
|
.blur2 {
|
|
z-index: 20;
|
|
backdrop-filter: blur(5px);
|
|
mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
|
|
-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
|
|
} |