alina
/
lastfuture-de
1
0
Fork 0
Code Issues Projects Releases Activity

animated icons

main
Alina Marquardt 2023-03-06 19:49:12 +00:00
parent 587a528870
commit 24837f01a2
4 changed files with 38 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
css/main.css
View File

@ -50,11 +50,11 @@ h1::before, #logo span::before {
position: relative;
vertical-align: -6px;
margin: 0 6px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAAeCAMAAACylMSIAAAACVBMVEX///8AAAD///9+749PAAAAAnRSTlMAf7YpoZUAAAC3SURBVHja7ZbRCoQwDATd/v9HHxQM4SYJxYNehcyDD013O4qI107G5Peelt4sPRz1toX4w35GsoaW/pe0pKI3PHWAbKqJH7X066QL70LLgn5KXQbXpXXT0rulQVbEW7IiZkeCBeuzsufV0sdKs46v76K0927pl0ozY1oe3TAl6evKDeufvJY+TZrrJJwGxhMY4wis2HpLnyYtyQ54/KvNcits6cOlBcINV06RIjYNd4Yrklp6u/QHWCYPKBXAoUwAAAAASUVORK5CYII=");
background-image: url(../images/lf-sprites.png);
width: 30px;
height: 30px;
background-size: 180px 30px;
background-position: 30px 0;
background-size: 360px 180px;
background-position: 0px 150px;
}
article {
@ -103,7 +103,7 @@ article pre {
padding: 0px;
}
#article1 h1::before {
background-position: 120px 0;
background-position: 0px 120px;
}
#article1 .content {
overflow-y: scroll;
@ -116,7 +116,7 @@ article pre {
width: calc(100% - 460px);
}
#article2 h1::before {
background-position: 150px 0;
background-position: 0px 150px;
}
#article3 {
@ -126,7 +126,7 @@ article pre {
width: calc(100% - 600px);
}
#article3 h1::before {
background-position: 60px 0;
background-position: 0px 60px;
}
#article4 {
@ -137,7 +137,7 @@ article pre {
width: calc(100% - 600px);
}
#article4 h1::before {
background-position: 90px 0;
background-position: 0px 90px;
}
#logo {
@ -176,4 +176,16 @@ article pre {
background-position: 0px 0;
}
@keyframes animatedIcon {
0% {
background-position-x: 360px;
}
100% {
background-position-x: 0px;
}
}
article h1:hover::before, #logo span:hover::before {
animation: animatedIcon 0.8s steps(12, end) infinite;
}
/*# sourceMappingURL=main.css.map */

BIN
images/lf-sprites.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

6
index.html
View File

@ -60,7 +60,7 @@
<article id="article2" @winchange.window="expanded = false" :class="{ 'expanded': expanded }" x-data="article">
<h1
@click="if(!expanded) $dispatch('winchange'); toggle()"
>music.mp3</h1>
>audio/music.m3u</h1>
<div class="content" x-cloak x-show="expanded">
<p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. <a href="//google.com/">Praesent commodo cursus magna</a>, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>
</div>
@ -69,7 +69,7 @@
<article id="article3" @winchange.window="expanded = false" :class="{ 'expanded': expanded }" x-data="article">
<h1
@click="if(!expanded) $dispatch('winchange'); toggle()"
>code.py</h1>
>code/experiment.inc</h1>
<div class="content" x-cloak x-show="expanded">
<p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. <a href="//google.com/">Praesent commodo cursus magna</a>, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>
</div>
@ -77,7 +77,7 @@
<article id="article4" @winchange.window="expanded = false" :class="{ 'expanded': expanded }" x-data="article">
<h1
@click="if(!expanded) $dispatch('winchange'); toggle()"
>videos/playlist.m3u</h1>
>videos/playlist.pls</h1>
<div class="content" x-cloak x-show="expanded">
<p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. <a href="//google.com/">Praesent commodo cursus magna</a>, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>
</div>

23
sass/main.scss
View File

File diff suppressed because one or more lines are too long