114 lines
1.7 KiB
SCSS
114 lines
1.7 KiB
SCSS
@use "sass:map";
|
|
@use "theme";
|
|
|
|
html, body { height: 100vh; }
|
|
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
|
*, html {scroll-behavior: smooth !important;}
|
|
|
|
mat-drawer > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
display: none;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #484c52;
|
|
border-radius: 2.5px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #5b6067;
|
|
}
|
|
|
|
@function css-function( $function, $values... ) {
|
|
@return
|
|
$function
|
|
+ unquote( '(' )
|
|
+ $values
|
|
+ unquote( ')' )
|
|
;
|
|
}
|
|
|
|
@function css-min( $values... ) {
|
|
@return css-function( min, $values );
|
|
}
|
|
|
|
@function css-max( $values... ) {
|
|
@return css-function( max, $values );
|
|
}
|
|
|
|
@function css-clamp( $values... ) {
|
|
@return css-function( clamp, $values );
|
|
}
|
|
|
|
.technologies-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.artwork {
|
|
position: absolute;
|
|
left: 55%;
|
|
top: 19vh;
|
|
|
|
.circle {
|
|
position: absolute;
|
|
aspect-ratio: 1 / 1;
|
|
z-index: -1;
|
|
background: theme.$gradient-angled;
|
|
border-radius: 50%;
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 1px;
|
|
background-color: map.get(theme.$background, 'background');
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.big-circle {
|
|
left: 0;
|
|
top: 0;
|
|
width: 400px;
|
|
}
|
|
|
|
.small-circle {
|
|
top: 100px;
|
|
left: 350px;
|
|
width: 150px;
|
|
|
|
&:after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.image {
|
|
top: -50px;
|
|
left: 170px;
|
|
width: 250px;
|
|
|
|
&:after {
|
|
background-image: url("/favicon.ico");
|
|
background-size: 112%;
|
|
background-position: -15px -15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|