Pigges/lbry-tech
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-tech.git synced 2025-03-03 22:47:55 +00:00
Code Issues Projects Releases Packages Wiki Activity

mote animations

Browse source
This commit is contained in:
Philip Ahlqvist 2024-09-25 18:04:20 +02:00
parent 4993831184
commit 055b01e071
3 changed files with 63 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/Featured.astro
View file

@ -71,6 +71,15 @@ import { featured, AWESOME_LBRY } from '../config';
font-weight: bold; font-weight: bold;
} }
.projects .project .text .description {
font-size: 1rem;
}
.projects .project .text .title::after {
width: 0%;
transition: 0.3s;
}
.projects .project:hover { .projects .project:hover {
transform: scale(1.1); transform: scale(1.1);
} }
@ -78,4 +87,24 @@ import { featured, AWESOME_LBRY } from '../config';
.projects .project:hover .text { .projects .project:hover .text {
transform: translateY(-100%); transform: translateY(-100%);
} }
.projects .project:hover .text .title::after {
content: "";
display: block;
height: 0.5rem;
vertical-align: bottom;
border-top: 1px solid var(--accent);
animation: forwards ease-in-out 0.3s slide ;
}
@keyframes slide {
0% {
width:0px;
}
100% {
width:calc( 100% - 1px );
}
}
</style> </style>

35
src/styles/global.scss
View file

@ -90,26 +90,36 @@ a {
} }
.button-primary { .button-primary {
display: flex;
user-select: none; user-select: none;
font-weight: bold; font-weight: bold;
width: fit-content; width: fit-content;
height: fit-content; height: fit-content;
transition: 0.3s; transition: 0.3s;
margin: 10px 0; // margin: 10px 0;
padding: 2px;
border-radius: 0.5em;
overflow: hidden;
} }
.button-primary a { .button-primary a {
font-size: 1.25rem; font-size: 1.25rem;
border-radius: 0.5em;
padding: 10px 20px; padding: 10px 20px;
border-radius: 0.5em;
background-color: var(--tertiary-background); background-color: var(--tertiary-background);
color: var(--body-text); color: var(--body-text);
transition: 0.1s;
} }
.button-primary:hover { .button-primary:hover {
transform: scale(1.1); transform: scale(1.1);
} }
.button-primary:hover a {
// border-radius: 0px;
// outline: 1px solid var(--accent);
}
// API Docs Examples // API Docs Examples
body:not(.curl, .lbrynet, .python, .cli) .commands .example:first-of-type { body:not(.curl, .lbrynet, .python, .cli) .commands .example:first-of-type {
display: block; display: block;
@ -117,4 +127,23 @@ body:not(.curl, .lbrynet, .python, .cli) .commands .example:first-of-type {
body.curl .example.curl, body.lbrynet .example.lbrynet, body.python .example.python, body.cli .example.cli { body.curl .example.curl, body.lbrynet .example.lbrynet, body.python .example.python, body.cli .example.cli {
display: block; display: block;
} }
.button-primary {
--c: var(--accent); /* the border color */
--b: 10px; /* the border thickness*/
--g: 5px; /* the gap on hover */
--_g: #0000 25%,var(--c) 0;
background:
conic-gradient(from 180deg at top var(--b) right var(--b),var(--_g))
var(--_i,200%) 0 /200% var(--_i,var(--b)) no-repeat,
conic-gradient( at bottom var(--b) left var(--b),var(--_g))
0 var(--_i,200%)/var(--_i,var(--b)) 200% no-repeat;
transition: .3s, background-position .3s;
cursor: pointer;
}
.button-primary:hover {
--_i: 100%;
transition: .3s, background-size .3s;
}

4
src/styles/markdown.css
View file

@ -125,7 +125,7 @@ h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
font-weight: var(--base-text-weight-semibold, 600); font-weight: var(--base-text-weight-semibold, 600);
padding-bottom: .3em; padding-bottom: .3em;
font-size: 2em; font-size: 2em;
border-bottom: 1px solid var(--color-border-muted); border-bottom: 1px solid var(--accent);
} }
.markdown-body mark { .markdown-body mark {
@ -333,7 +333,7 @@ h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
font-weight: var(--base-text-weight-semibold, 600); font-weight: var(--base-text-weight-semibold, 600);
padding-bottom: .3em; padding-bottom: .3em;
font-size: 1.5em; font-size: 1.5em;
border-bottom: 1px solid var(--color-border-muted); border-bottom: 1px solid var(--accent);
} }
.markdown-body h3 { .markdown-body h3 {