Add animated link highlight

main
mat ess 2023-01-27 22:03:35 -05:00
parent 3bf137fa3b
commit 5f7beb1de6
2 changed files with 23 additions and 9 deletions

View File

@ -38,7 +38,7 @@
{ {
packages.default = with pkgs; stdenv.mkDerivation { packages.default = with pkgs; stdenv.mkDerivation {
pname = "personal-site"; pname = "personal-site";
version = "2022-12-21"; version = "2023-01-27";
src = gitignoreSource ./.; src = gitignoreSource ./.;
nativeBuildInputs = [ optimize-images update-date zola ]; nativeBuildInputs = [ optimize-images update-date zola ];
configurePhase = '' configurePhase = ''

View File

@ -11,12 +11,6 @@
background-color: var(--primary-color); background-color: var(--primary-color);
} }
::-moz-selection {
background: var(--primary-color);
color: var(--hover-color);
text-shadow: none;
}
::selection { ::selection {
background: var(--primary-color); background: var(--primary-color);
color: var(--hover-color); color: var(--hover-color);
@ -40,14 +34,34 @@ blockquote {
} }
a { a {
border-bottom: 3px solid var(--primary-color);
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
position: relative;
transition: all .2s ease-in;
} }
a:hover { a:hover {
background-color: var(--primary-color);
color: var(--hover-color); color: var(--hover-color);
transition: all .2s ease;
}
a::after {
content: "";
display: inline-block;
position: absolute;
z-index: -1;
bottom: -3px;
left: 0;
width: 100%;
height: 3px;
background-color: var(--primary-color);
transition: all .2s ease-in;
}
a:hover::after {
height: 100%;
transform: translateY(-3px);
transition: all .2s ease;
} }
time { time {