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 0000000..367d2c0 Binary files /dev/null and b/images/lf-sprites.png differ diff --git a/index.html b/index.html index 6c377f1..5a56072 100644 --- a/index.html +++ b/index.html @@ -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> 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