Most features done
This commit is contained in:
parent
cdaa423b8a
commit
c8679b77bf
43 changed files with 803 additions and 648 deletions
|
|
@ -1,4 +1,5 @@
|
|||
@import "style/vars";
|
||||
@import "style/mixins";
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
|
|
@ -28,14 +29,22 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: $background-end;
|
||||
}
|
||||
|
||||
body {
|
||||
width: $body-width;
|
||||
margin: auto;
|
||||
font: $text-font;
|
||||
@include main-font();
|
||||
|
||||
& > * {
|
||||
margin-top: $normal-margin;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track,
|
||||
&::-webkit-scrollbar {
|
||||
background-color: $scrollbar-color;
|
||||
background-color: transparent;
|
||||
width: 12px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
|
|
@ -48,27 +57,53 @@ img,
|
|||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@include insignificant-font();
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-bottom: solid $line-width $light-accent-color;
|
||||
color: $accent-color;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
$border-shift: 10px;
|
||||
|
||||
transition: transform $slow-transition-time;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: $line-width;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
$card-color 0,
|
||||
transparentize($card-color, 1) 4px,
|
||||
transparentize($card-color, 1) calc(100% - 4px),
|
||||
$card-color 100%
|
||||
);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: $line-width;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -$line-width;
|
||||
background-color: $accent-color;
|
||||
transition: width $transition-time;
|
||||
display: block;
|
||||
width: calc(100% + #{$border-shift});
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
border-bottom: $line-width dotted $accent-color;
|
||||
transition: transform $slow-transition-time;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: 100%;
|
||||
&:hover {
|
||||
&:after {
|
||||
transform: translateX(-$border-shift);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue