From 24837f01a2212770054ee6a62bfeb1d4e9348eca Mon Sep 17 00:00:00 2001 From: Alina Marquardt Date: Mon, 6 Mar 2023 19:49:12 +0000 Subject: [PATCH] animated icons --- css/main.css | 26 +++++++++++++++++++------- images/lf-sprites.png | Bin 0 -> 1199 bytes index.html | 6 +++--- sass/main.scss | 23 ++++++++++++++++------- 4 files changed, 38 insertions(+), 17 deletions(-) create mode 100644 images/lf-sprites.png diff --git a/css/main.css b/css/main.css index 078b57f..b4e30b3 100644 --- a/css/main.css +++ b/css/main.css @@ -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 */ diff --git a/images/lf-sprites.png b/images/lf-sprites.png new file mode 100644 index 0000000000000000000000000000000000000000..367d2c0530352ee57bbd372443e2a479f28057ec GIT binary patch literal 1199 zcmeAS@N?(olHy`uVBq!ia0y~yV9Wrrw{S26$-WJ4>_CdKILO_JVcj{Imp~3@fKQ0) ze=q>4_;UCSkYX+g@(X78U%&E2C?f*{i>s%LV@SoEw{uPwEin*qY5e~`Lw-SKWKd}1 zwUE+h3lA?oKB=m20^{SGW^IWxF1>LqnU%LeJ+e>ic7?a*t_#Pay)L$z-Mgf3*XL|s zxQnr4P133}9@_&QG-oaPeK~Vc^$Ht1NgwU~yuT)LYq$n)3BQ=S^_=p&`H`z$yzrVD z_Vs=nlh;L&zuAl4?>c(r%EiuUrOPt9mc0mDbT}uw+)fQLgYep~s?&LZe>UmM1pV%+iYK8pt%BM z^b9TDi!-+NT$;Z(z9GgXAwQL-(uPW4jmjG}6_yPL0? zXGZvIS#}3~QSiFx{9>Mqe1AsOrbjbQIjy=o#S*Xgz;>gMjzr z^i9oEPs$mrO1x$^`}`si--|n?{L@&qe$|z2u3yyO&Yr7n^;<*}L;B3wMJr!DUOC-w z;wta2B_T z2X@K1Kx9Mq!~`EZnp}DUNynG2jr&eiyT<=G(IVfOw(teF{K6NGFO{nJKW)44@#o)? zAD!~4r*`#9d0q4mR9*UF`HDGh4m(XQ_Sd~L{V{93MfD^duiPsEz=+SAsSp)DM~o}m za=~%+^*JISF~yRm7dwT^{Gst4cp>VaMuu*^$d+mLRS!R}4EW)BYZ@#WL{DqAo@}-d zm^{GBUL2iZ&lPoA9+Y(I{%=y{%8Z6_jd%_l@Eqnj_5E7w7Ij$C+Fs9Z=dl}R!nZT22X(3OFO@Ki^Juld2h-s(S2(^Kh#P;vg+tL?`d%xKZ|X8(>Xif z?;g{VsStrlOT*v%dB5MtvT4iGUzOP}wB}CN*_-rS)qDMonTZn1RK8C=`}h2dE_cc4 zW_g!fRxQ6Cb|D6sJ?2U;0cMJfuD(yjix$sTO^vy=Lucxu_fo%l(gK0ub7z6}#rvs8 zrKX$dc`wZD&AqsmIIpH@!u{??G!iNdT;Wro6k0b@@iE7qSMY7Mea5PebKn+KEb!bG*>uI wC%ZIp`n+>%zAq`;_EQJwxV6`!y}!t3&o1jdrK@ZPEMFKrUHx3vIVCg!0Mt-L;Q#;t literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 6c377f1..5a56072 100644 --- a/index.html +++ b/index.html @@ -60,7 +60,7 @@

music.mp3

+ >audio/music.m3u

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Praesent commodo cursus magna, 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.

@@ -69,7 +69,7 @@

code.py

+ >code/experiment.inc

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Praesent commodo cursus magna, 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.

@@ -77,7 +77,7 @@

videos/playlist.m3u

+ >videos/playlist.pls

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Praesent commodo cursus magna, 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.

diff --git a/sass/main.scss b/sass/main.scss index 7dbb5cd..7256a8b 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -64,11 +64,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 { @@ -113,7 +113,7 @@ article { } width: 595px; h1::before { - background-position: 120px 0; + background-position: 0px 120px; } .content { overflow-y: scroll; @@ -126,7 +126,7 @@ article { z-index: 29; width: calc( 100% - 460px ); h1::before { - background-position: 150px 0; + background-position: 0px 150px; } } @@ -136,7 +136,7 @@ article { z-index: 28; width: calc( 100% - 600px ); h1::before { - background-position: 60px 0; + background-position: 0px 60px; } } @@ -147,7 +147,7 @@ article { z-index: 27; width: calc( 100% - 600px ); h1::before { - background-position: 90px 0; + background-position: 0px 90px; } } @@ -184,4 +184,13 @@ article { margin: 0; display: block; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqgAAAGQCAMAAABVp2IzAAABHVBMVEUziES7AERE0XD/LVq7RDO1uxZ3nqPMzP+7dzOIdzPRd2D/zP8AMzPMcBZ30XD/zMwWzHAWzKMtiFqeRC1EAIiIYNFg0US1iBa1Wne1WkQAiHfojUREnqMzu0Tou0kAiESeuy0AADPRiC1J/6OeiGAtu1oziHfM/8zRRGB3AIiIdwBE0aNwRNFEALt30aMAAABEtY3/cBb/oxYW/6MW/3CIRABJ/3BE6I3/o0m7dwD//8xE6FozMwB36I3Moxb///8AMwB36FrRuy1EtVqeiC0Au0TRu2C7RACeu2B3tY3MzMwAu3czAADoiBbRRC3oWkTM///ouxajRJ7ojXdEnnC7YNG7LdHoWne7LZ61jXeILdEzMzN3ALuILZ4mRcnmMYgpAAAAX3RSTlP/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AJOaXywAAAAJcEhZcwAADsQAAA7EAZUrDhsAABY1SURBVHic7Z0Le1PH1UZTWmoaMDZtWsCmcUXSGzSIxFxixQ2CYpzacu0UEr6Ur///b1Rb4/GZc9XMuc621nqelst7ZOnMWTw7M5rLRy8AFPDR0B8AwAdEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooIJoRB0vuNzv6E/Mn60Nwu8PUaMk5s/WBqpFTf96Gd/Rn5g/WxuE3x+iRilDzJ+tDZSKurYmH3ltbdwzo5E01Gg09P3nkc/Vd2v0S2jbIyqiDoJK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'); +} + +@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; } \ No newline at end of file