nick12
/
hmn
forked from hmn/hmn
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Don't do clever hue-rotating trick with waterline image

This commit is contained in:
Ben Visness 2022-06-12 08:39:44 -05:00
parent d1e63f745b
commit 7dd4a1af31
3 changed files with 10 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/waterline.svg → public/waterline-dark.svg
View File

@ -2,6 +2,6 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 734 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <svg width="100%" height="100%" viewBox="0 0 734 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.412851,0,0,0.412851,-164.727,-144.911)"> <g transform="matrix(0.412851,0,0,0.412851,-164.727,-144.911)">
<path d="M399,404C477.667,404 563.667,422.167 640,421C712.766,419.888 784.237,398.26 857,397C934,395.667 1021,413.167 1102,413C1182.53,412.834 1262.47,395.225 1343,396C1482.5,397.343 1719.83,418.976 1861,421.056C1915.68,421.862 2097.72,404.026 2176.88,404.026L2176.88,351.026L399,351L399,404Z" style="fill:rgb(255,0,0);"/> <path d="M399,404C477.667,404 563.667,422.167 640,421C712.766,419.888 784.237,398.26 857,397C934,395.667 1021,413.167 1102,413C1182.53,412.834 1262.47,395.225 1343,396C1482.5,397.343 1719.83,418.976 1861,421.056C1915.68,421.862 2097.72,404.026 2176.88,404.026L2176.88,351.026L399,351L399,404Z" style="fill:rgb(55,83,123);"/>
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 859 B

After

Width:  |  Height:  |  Size: 861 B

7
public/waterline-light.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 734 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.412851,0,0,0.412851,-164.727,-144.911)">
<path d="M399,404C477.667,404 563.667,422.167 640,421C712.766,419.888 784.237,398.26 857,397C934,395.667 1021,413.167 1102,413C1182.53,412.834 1262.47,395.225 1343,396C1482.5,397.343 1719.83,418.976 1861,421.056C1915.68,421.862 2097.72,404.026 2176.88,404.026L2176.88,351.026L399,351L399,404Z" style="fill:rgb(183,218,255);"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 863 B

18
src/templates/src/fishbowl.html
View File

@ -41,24 +41,10 @@
<style> <style>
.fishbowl-banner { .fishbowl-banner {
background-color: {{ eq .Theme "dark" | ternary "#254464" "#a0c8f2" }}; background-color: {{ eq .Theme "dark" | ternary "#254464" "#a0c8f2" }};
position: relative; background-image: url({{ static (eq .Theme "dark" | ternary "waterline-dark.svg" "waterline-light.svg") }});
overflow: hidden;
padding-top: 30px;
}
.fishbowl-banner::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
background-image: url({{ static "waterline.svg" }});
background-size: 734px 30px; background-size: 734px 30px;
background-repeat: repeat-x; background-repeat: repeat-x;
{{ if eq .Theme "dark" }} padding-top: 30px;
filter: hue-rotate(210deg) saturate(0.3) brightness(1.1);
{{ else }}
filter: hue-rotate(210deg) saturate(0.15) brightness(2.9);
{{ end }}
} }
.fishbowl-banner a { .fishbowl-banner a {