asr/biocircuits
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More fancy styles

Browse source
This commit is contained in:
Aleks Rūtiņš 2024-06-02 19:29:39 -04:00
parent 86b982ecca
commit 27390b6e77
2 changed files with 14 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/site.css
View file

@ -1,5 +1,9 @@
@import url(https://fonts.bunny.net/css?family=fira-mono:400|josefin-sans:300,300i,400,400i,700,700i); @import url(https://fonts.bunny.net/css?family=fira-mono:400|josefin-sans:300,300i,400,400i,700,700i);
@view-transition {
navigation: auto;
}
:root { :root {
--font-body: 'Josefin Sans', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, --font-body: 'Josefin Sans', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

13
components/section-link.html
View file

@ -18,16 +18,17 @@
text-decoration: none !important; text-decoration: none !important;
text-transform: uppercase; text-transform: uppercase;
color: inherit; color: inherit;
--bg-hover: black;
background-image: linear-gradient(135deg, background-image: linear-gradient(135deg,
black 0%, var(--bg-hover) 0%,
black 50%, var(--bg-hover) 50%,
transparent 50%, transparent 50%,
transparent 100% transparent 100%
); );
background-size: 250%; background-size: 250%;
background-position: 90% 90%; background-position: 90% 90%;
border: 2px solid; border: 2px solid;
transition-property: color, border-color, background-position; transition-property: color, border-color, background-position, background-color, background-image;
transition-duration: .75s; transition-duration: .75s;
} }
a span, a svg { a span, a svg {
@ -38,4 +39,10 @@
background-position: 0% 0%; background-position: 0% 0%;
border-color: black; border-color: black;
} }
a:active {
--bg-hover: var(--color-theme-1);
border-color: var(--color-theme-1);
color: var(--color-theme-1);
background-position: -75% -75%;
}
</style> </style>