curben
/
blog
mirror of https://gitlab.com/curben/blog
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor: use image file instead of inline

This commit is contained in:
curben 2019-05-21 13:10:40 +09:30
parent 2ac754fa4d
commit bc4082ac06
4 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
themes/typing/layout/_partial/header.ejs
View File

@ -7,7 +7,7 @@
<div class="searchContainer">
<input class="searchBox" type="text" id="search" placeholder="Search...">
<a class="searchBtn no-underline" href="#" onClick="window.open(`https://gitlab.com/search?utf8=%E2%9C%93&search=` + document.getElementById(`search`).value + `&group_id=&project_id=8306723&search_code=true&repository_ref=master`)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg><!-- Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --></a>
<a class="searchBtn no-underline" href="#" onClick="window.open(`https://gitlab.com/search?utf8=%E2%9C%93&search=` + document.getElementById(`search`).value + `&group_id=&project_id=8306723&search_code=true&repository_ref=master`)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><use href="/svg/search.svg#search" title="Search"/></svg></a>
</div>
</nav>
<%/* Nav menu for mobile */%>

2
themes/typing/scripts/cloudinary.js
View File

@ -9,5 +9,5 @@
* https://cloudinary.com/documentation/responsive_images
*/
hexo.extend.tag.register('cloudinary', (fileName) => {
return '<img class="cld-responsive" data-src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_500/' + fileName + '" src="/loading.svg" />'
return '<img class="cld-responsive" data-src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_500/' + fileName + '" src="/svg/loading.svg" />'
})

2
themes/typing/source/loading.svg → themes/typing/source/svg/loading.svg
View File

@ -1 +1 @@
<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ripple" style="background:0% 0%"><circle cx="50" cy="50" r="0" fill="none" stroke="#fc4309" stroke-width="2"><animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="1" keySplines="0 0.2 0.8 1" begin="-0.5s" repeatCount="indefinite"/><animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1" keySplines="0.2 0 0.8 1" begin="-0.5s" repeatCount="indefinite"/></circle><circle cx="50" cy="50" r="0" fill="none" stroke="#ff765c" stroke-width="2"><animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="1" keySplines="0 0.2 0.8 1" begin="0s" repeatCount="indefinite"/><animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1" keySplines="0.2 0 0.8 1" begin="0s" repeatCount="indefinite"/></circle></svg>
<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ripple" style="background:0% 0%"><circle cx="50" cy="50" r="0" fill="none" stroke="#fc4309" stroke-width="2"><animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="1" keySplines="0 0.2 0.8 1" begin="-0.5s" repeatCount="indefinite"/><animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1" keySplines="0.2 0 0.8 1" begin="-0.5s" repeatCount="indefinite"/></circle><circle cx="50" cy="50" r="0" fill="none" stroke="#ff765c" stroke-width="2"><animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="1" keySplines="0 0.2 0.8 1" begin="0s" repeatCount="indefinite"/><animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1" keySplines="0.2 0 0.8 1" begin="0s" repeatCount="indefinite"/></circle></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 928 B

After

Width:  |  Height:  |  Size: 929 B

8
themes/typing/source/svg/search.svg Normal file
View File

@ -0,0 +1,8 @@
<!-- Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
<!--
id attribute is added as a workaround for <use> element
<use href="search.svg"/> # does not work
<use href="search.svg#search"/> # working
ref: https://css-tricks.com/svg-use-external-source/
-->
<svg id="search" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 839 B