fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-23 15:58:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Website responsive resizing improvements

Browse Source
This commit is contained in:
Keavon Chambers
2022-02-19 02:16:30 -08:00
parent 8baa1b1213
commit 1fd8e9f0e9
14 changed files with 275 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/static/images/graphics/brush.svg
+1 -1
View File
@@ -1,4 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M13,17.1A3.719,3.719,0,0,0,9,14c-1.7.1-3.1,1.5-4,4.2a7.571,7.571,0,0,1-3.6,4c2.9,1,5.9,1.3,8.6.1A5.223,5.223,0,0,0,13,17.1Z" fill="#803847" />
<path d="M13,17.1A3.719,3.719,0,0,0,9,14c-1.7.1-3.1,1.5-4,4.2a7.571,7.571,0,0,1-3.6,4c2.9,1,5.9,1.3,8.6.1A5.223,5.223,0,0,0,13,17.1Z" fill="#473a3a" />
<path d="M22.5,1.1C21.6.3,18,3.8,14.1,8.2a34.223,34.223,0,0,0-3.6,4.6,3.9,3.9,0,0,1,1.9.8,3.887,3.887,0,0,1,1.4,1.9A29.655,29.655,0,0,0,17.5,11C20.9,6,23.5,1.9,22.5,1.1Z" fill="#473a3a" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 434 B

After

Width:  |  Height:  |  Size: 434 B

website/static/images/graphics/discord.svg
+3
View File
@@ -0,0 +1,3 @@
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path fill="#803847" d="M40.34,9.04C40.33,9.02,40.31,9,40.28,8.99C37.22,7.58,33.99,6.58,30.67,6c-0.06-0.01-0.12,0.02-0.16,0.07c-0.44,0.8-0.84,1.62-1.2,2.46c-3.58-0.54-7.22-0.54-10.8,0c-0.36-0.84-0.76-1.66-1.21-2.46C17.27,6.02,17.21,5.99,17.15,6c-3.32,0.57-6.55,1.58-9.61,2.99C7.51,9,7.49,9.02,7.47,9.04C2,16.88-0.47,26.42,0.5,35.92c0,0.04,0.03,0.08,0.06,0.11c3.56,2.64,7.55,4.66,11.79,5.96c0.06,0.02,0.13,0,0.17-0.05c0.91-1.24,1.72-2.55,2.41-3.92c0.04-0.07,0.01-0.16-0.07-0.2c0,0-0.01,0-0.02-0.01c-1.27-0.49-2.5-1.07-3.68-1.76c-0.07-0.04-0.1-0.14-0.05-0.21c0.01-0.02,0.02-0.03,0.04-0.04c0.25-0.19,0.5-0.38,0.73-0.57c0.04-0.04,0.1-0.04,0.15-0.02c7.52,3.53,16.22,3.53,23.74,0c0.05-0.02,0.11-0.02,0.16,0.02c0.24,0.2,0.48,0.39,0.73,0.58c0.07,0.05,0.08,0.14,0.03,0.21c-0.01,0.02-0.03,0.03-0.04,0.04c-1.18,0.69-2.41,1.27-3.69,1.75c-0.08,0.03-0.12,0.12-0.09,0.2c0,0.01,0,0.01,0.01,0.01c0.71,1.36,1.51,2.68,2.41,3.92c0.04,0.05,0.1,0.07,0.17,0.06c4.25-1.3,8.24-3.32,11.81-5.96c0.04-0.03,0.06-0.07,0.06-0.11C48.32,26.41,45.84,16.86,40.34,9.04z M20.33,25.8c0.14,2.48-1.76,4.61-4.24,4.76v0c-2.48-0.16-4.37-2.28-4.24-4.76c-0.14-2.49,1.76-4.62,4.24-4.76c2.48,0.13,4.38,2.24,4.25,4.72C20.33,25.77,20.33,25.79,20.33,25.8z M36.02,25.8c0.15,2.48-1.75,4.61-4.23,4.76c-0.01,0-0.01,0-0.02,0v0c-2.48-0.16-4.37-2.28-4.24-4.76c-0.14-2.49,1.76-4.62,4.24-4.76c2.48,0.13,4.38,2.24,4.25,4.72C36.02,25.77,36.02,25.79,36.02,25.8z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

website/static/images/graphics/github.svg
+3
View File
@@ -0,0 +1,3 @@
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path fill="#803847" d="M44.83,16.98C41.82,8.04,33.44,2.01,24,2C11.85,2,2,11.84,1.99,23.99c0,9.47,6.06,17.89,15.05,20.88c1.1,0.19,1.51-0.47,1.51-1.04c0-0.52-0.03-2.26-0.03-4.1c-5.53,1.02-6.96-1.35-7.4-2.58c-0.49-1.2-1.26-2.27-2.26-3.11c-0.77-0.41-1.87-1.43-0.03-1.46c1.73-0.03,2.97,1.6,3.38,2.26c1.98,3.33,5.14,2.39,6.41,1.82c0.09-1.12,0.59-2.16,1.4-2.94c-4.89-0.55-10.01-2.45-10.01-10.86c-0.03-2.19,0.78-4.3,2.26-5.91c-0.67-1.9-0.6-3.99,0.22-5.83c0,0,1.84-0.58,6.05,2.26c3.6-0.99,7.4-0.99,11,0c4.21-2.85,6.05-2.26,6.05-2.26c0.81,1.84,0.89,3.93,0.22,5.83c1.48,1.61,2.29,3.72,2.26,5.91c0,8.44-5.14,10.31-10.04,10.86c1.06,1.08,1.6,2.56,1.48,4.07c0,2.94-0.03,5.31-0.03,6.05c0,0.58,0.41,1.27,1.51,1.04C42.53,40.99,48.71,28.5,44.83,16.98z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 806 B

website/static/images/graphics/logotype.svg
+26
View File
@@ -0,0 +1,26 @@
<svg width="936.892" height="240" viewBox="0 0 936.89 240" xmlns="http://www.w3.org/2000/svg">
<path fill="#473a3a"
d="M934.29,139.3c-3.08,2.94-6.82,5.09-10.91,6.27c-3.49,1.06-7.1,1.63-10.74,1.71c-6.08,0.08-11.98-2.06-16.6-6.02c-4.78-4.01-7.49-10.63-8.14-19.86l48.01-6.02c0-8.68-2.58-15.71-7.73-21.08c-5.16-5.37-12.72-8.06-22.7-8.06c-7.19-0.04-14.29,1.57-20.75,4.72c-6.37,3.07-11.75,7.86-15.54,13.83c-3.91,6.08-5.86,13.46-5.86,22.14c0,8.03,1.76,14.98,5.29,20.83c3.41,5.76,8.38,10.44,14.32,13.51c6.21,3.19,13.11,4.81,20.1,4.72c9.01,0,16.14-2.2,21.41-6.59c5.51-4.74,9.78-10.74,12.45-17.5L934.29,139.3z M891.64,99.01c2.28-3.85,5.26-5.78,8.95-5.78c3.79,0,6.48,1.84,8.06,5.53c1.68,4.2,2.59,8.66,2.69,13.18l-23.6,2.93C888.06,108.15,889.37,102.86,891.64,99.01" />
<path fill="#473a3a"
d="M844.61,151.33c-7.06,0-10.58-4.34-10.58-13.02v-34.5c0-4.34,2.17-6.51,6.51-6.51h14.65v-8.62h-21.16c0-4.12,0.05-8.19,0.16-12.21c0.11-4.01,0.59-11.63,0.91-15.76l-25.49,11.81v16.16h-9.77v8.62h9.77v44.27c0,7.16,2.01,13.02,6.02,17.58c4.01,4.56,9.87,6.83,17.58,6.84c4.07,0.13,8.11-0.71,11.8-2.44c3.03-1.49,5.72-3.6,7.89-6.18c1.98-2.37,3.62-5,4.88-7.81l-2.6-2.6C852.42,149.81,848.59,151.4,844.61,151.33" />
<path fill="#473a3a"
d="M783.25,154.67c-0.64-2.97-0.91-6-0.81-9.03v-38.9c0-5.21,0.08-9.52,0.24-12.94s0.3-5.94,0.41-7.57l-0.98-0.98l-35.48,16.44l1.63,3.74c1.09-0.4,2.2-0.73,3.34-0.98c0.94-0.21,1.89-0.31,2.85-0.32c0.97-0.07,1.92,0.22,2.69,0.81c0.59,0.54,0.89,1.63,0.9,3.26v37.43c0.08,3.03-0.14,6.05-0.65,9.03c-0.44,2.01-1.2,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.39,1.14v3.74h41.5v-3.74c-2.06,0-4.1-0.39-6.02-1.14C784.64,157.85,783.56,156.38,783.25,154.67 M771.04,77.28c3.74,0.07,7.35-1.44,9.93-4.15c2.64-2.59,4.11-6.15,4.07-9.85c0.03-3.72-1.44-7.3-4.07-9.93c-2.56-2.75-6.17-4.29-9.93-4.23c-3.81-0.09-7.48,1.45-10.09,4.23c-2.64,2.63-4.1,6.21-4.07,9.93c0.02,7.75,6.32,14.02,14.07,14C770.98,77.29,771.01,77.29,771.04,77.28" />
<path fill="#473a3a"
d="M732.15,154.68c-0.64-2.97-0.91-6-0.81-9.03v-39.22c0-7.05-1.57-12.18-4.72-15.38c-3.15-3.2-8.08-4.8-14.81-4.8c-4.06,0.01-8.07,0.84-11.8,2.44c-3.08,1.21-6.03,2.75-8.79,4.57c-3.07,2.01-5.99,4.25-8.71,6.72V61.55c0-5.21,0.08-9.52,0.24-12.94c0.16-3.42,0.3-5.94,0.41-7.57L682.11,40l-35.45,16.42l1.66,3.82c1.09-0.4,2.2-0.73,3.34-0.98c0.94-0.21,1.89-0.32,2.85-0.33c0.96-0.07,1.92,0.22,2.68,0.81c0.6,0.55,0.9,1.63,0.9,3.26v82.63c0.08,3.03-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.4,1.14v3.74h41.5v-3.74c-2.06,0-4.1-0.38-6.02-1.14c-1.54-0.81-2.62-2.28-2.93-3.99c-0.64-2.97-0.91-6-0.82-9.03v-37.92c2.72-1.87,5.71-3.29,8.87-4.23c2.26-0.61,4.58-0.94,6.92-0.98c3.79,0,6.18,1,7.16,3.01c1.06,2.43,1.56,5.08,1.46,7.73v32.39c0.08,3.03-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.4,1.14v3.74h41.5v-3.74c-2.06,0-4.1-0.38-6.02-1.14c-1.54-0.81-2.62-2.28-2.93-3.99" />
<path fill="#473a3a"
d="M624.97,90.71c-4.3-2.92-9.37-4.48-14.57-4.48c-5.74-0.16-11.38,1.43-16.19,4.56c-4.26,2.76-7.67,6.65-9.85,11.23h-0.32c0-3.26,0.12-6.35,0.39-9.49c0.14-2.07,0.38-4.14,0.73-6.18l-0.98-0.98l-33.84,15.68l1.63,3.74c1.49-0.4,3.02-0.62,4.56-0.65c0.97-0.07,1.92,0.22,2.69,0.81c0.6,0.54,0.9,1.63,0.9,3.25v73.9c0.08,3.02-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.72-2.86,1.11-4.39,1.14V200h43.12v-3.74c-2.46,0.01-4.9-0.38-7.24-1.14c-1.71-0.68-2.96-2.18-3.33-3.99c-0.64-2.97-0.91-6-0.81-9.03v-16.76c1.52,0.22,3.17,0.38,4.96,0.49s3.77,0.16,5.94,0.16c5.18-0.03,10.33-0.8,15.3-2.28c5.21-1.52,10.1-4.01,14.4-7.32c4.5-3.5,8.15-7.98,10.66-13.1c2.71-5.37,4.07-11.96,4.07-19.78c0-7.81-1.36-14.49-4.07-20.02C633.4,98.33,629.66,93.92,624.97,90.71 M608.94,150.61c-3.26,5.04-7.27,7.57-12.04,7.57c-5.21,0-9.33-2.39-12.37-7.16v-43.3c1.7-1.75,3.75-3.11,6.02-3.99c2.03-0.79,4.18-1.2,6.35-1.22c4.77,0,8.79,2.31,12.04,6.92c3.26,4.61,4.88,11.64,4.88,21.08C613.82,138.86,612.19,145.57,608.94,150.61" />
<path fill="#473a3a"
d="M541.31,150.61c-1.17,0.45-2.41,0.7-3.66,0.73c-1.95,0-3.25-0.68-3.91-2.03c-0.74-1.83-1.07-3.81-0.98-5.78v-35.48c0-12.25-7.16-19.5-19.95-21.8c-8.97-1.62-19.39-1.04-28.28,0.57c-5.06,0.92-10.37,2.79-13.57,5.49v23.95h3.71c0.91-5.48,3.36-10.58,7.07-14.72c3.2-3.81,7.96-5.97,12.94-5.86c3.8,0,6.75,1.11,8.87,3.34c2.12,2.23,3.17,5.89,3.17,10.99v8.63c-13.78,3.69-23.95,7.76-30.52,12.21s-9.85,10.25-9.85,17.42c-0.06,4.5,1.47,8.88,4.31,12.36c2.87,3.58,7.29,5.37,13.27,5.37c4.5-0.01,8.92-1.16,12.86-3.34c4.18-2.27,7.62-5.69,9.93-9.85h0.33c0.95,3.66,3.1,6.9,6.1,9.2c2.87,2.12,6.97,3.17,12.29,3.17c4.71,0.08,9.34-1.19,13.35-3.66c4.15-2.73,7.43-6.6,9.44-11.15l-2.6-2.6C544.39,148.99,542.93,149.96,541.31,150.61 M506.73,146.3c-1.27,1.36-2.72,2.54-4.31,3.5c-1.74,1.05-3.75,1.58-5.78,1.54c-2.11,0.12-4.16-0.75-5.53-2.36c-1.32-1.63-2.02-3.68-1.95-5.78c0.09-1.95,0.5-3.88,1.22-5.7c1.09-2.66,2.82-5.01,5.05-6.84c2.55-2.28,6.32-4.12,11.31-5.53L506.73,146.3z" />
<path fill="#473a3a"
d="M440.68,91.63c-4.8,1.93-9.07,4.75-11.91,9.87h-0.33c-0.02-2.98,0.11-5.96,0.41-8.92c0.13-2.13,0.37-4.25,0.73-6.35l-0.98-0.98l-33.85,15.79l1.63,3.74c1.49-0.4,3.02-0.62,4.56-0.65c0.97-0.07,1.92,0.22,2.69,0.82c0.59,0.54,0.89,1.63,0.9,3.25v37.44c0.08,3.03-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.4,1.14v3.74h43.13v-3.74c-2.46,0.01-4.9-0.38-7.24-1.14c-1.71-0.68-2.97-2.18-3.34-3.99c-0.64-2.97-0.91-6-0.82-9.03v-36.29c2.1-1.79,4.53-3.15,7.16-3.99c2.49-0.72,5.06-1.08,7.65-1.06c2.42,0.01,4.78,0.68,6.84,1.95c2.17,1.3,3.71,5.12,4.48,10h4.1V92.3C455.3,89.03,446.61,89.25,440.68,91.63" />
<path fill="#473a3a"
d="M344.13,115.53c2.68,0.05,5.32,0.57,7.81,1.55c1.73,0.81,2.9,2.6,3.5,5.37c0.72,4.38,1.02,8.82,0.9,13.26c0,3.8-0.04,6.29-0.2,9.22c-0.16,2.93-0.39,4.51-1.58,6.47c-1.63,2.71-4.43,4-7.41,4.59c-2.7,0.57-5.46,0.87-8.22,0.9c-6.29,0-12.7-1.98-16.81-5.14c-5.27-4.05-9.38-11.35-12.04-19.92c-2.4-8.27-3.58-16.84-3.51-25.45c0-14.54,4.01-24.17,9.38-31.43c5.46-7.37,14.61-11.25,25-11.89c4.13-0.21,8.27,0.21,12.28,1.25c3.63,1.12,7.4,2.65,10.43,6.07c3.03,3.42,4.67,7.11,6.85,13.4h3.74v-24.9c-4.86-1.84-9.87-3.25-14.97-4.23c-5.73-1.18-11.56-1.78-17.41-1.79c-8.11-0.06-16.17,1.23-23.85,3.82c-7.23,2.44-13.91,6.25-19.69,11.23c-5.77,5.04-10.36,11.29-13.43,18.31c-3.38,7.91-5.05,16.46-4.88,25.07c0,10.96,2.39,20.57,7.16,28.81c4.6,8.07,11.36,14.7,19.53,19.12c8.5,4.57,18.02,6.89,27.67,6.76c7.53,0.11,15.02-0.97,22.22-3.18c5.71-1.74,11.2-4.14,16.36-7.16c3.26-1.87,6.32-4.08,9.11-6.59c-0.63-2.67-1.01-5.4-1.14-8.14c-0.11-2.61-0.16-5.37-0.16-8.3v-9.44c0-2.82,0.3-4.77,0.9-5.86c0.66-1.12,1.87-1.81,3.17-1.79v-3.74h-40.7V115.53z" />
<path fill="#f1decd"
d="M205.27,93.21l-43.55-75.43c-1.82-2.78-4.85-4.53-8.17-4.72h-87.1c-3.32,0.19-6.35,1.94-8.17,4.72L14.72,93.21c-1.49,2.97-1.49,6.46,0,9.43l43.56,75.44c1.82,2.78,4.85,4.53,8.17,4.71h87.1c3.32-0.18,6.35-1.93,8.17-4.71l43.56-75.44C206.76,99.67,206.76,96.18,205.27,93.21z" />
<polygon fill="#3ea8ff" points="174.28,33.39 160.62,9.74 84.53,9.74 149.31,121.45 206.4,89.03" />
<polygon fill="#2180ce" points="128.69,59.7 99.86,9.74 60.78,9.74 48.73,26.46 83.12,86.01 113.96,139.45 159.89,113.73" />
<polygon fill="#deba92" points="208.65,92.93 154.93,119.15 221.23,219.97" />
<polygon fill="#d49b64" points="161.23,116.05 115.65,142.37 209.23,199.18" />
<path fill="#473a3a"
d="M231.18,218.98l-0.07-0.69c-0.86-9.39-11.15-121.38-11.18-121.86c-0.23-2.84-1.07-5.6-2.45-8.09c-0.03-0.09-0.07-0.17-0.11-0.25l-0.06-0.15l-0.03,0.03l-0.02-0.01l0.04-0.02L205.5,67.5L172.31,10c-3.58-6.19-10.18-10-17.33-10H64.99c-7.14,0-13.74,3.81-17.32,10l-45,77.93c-3.57,6.19-3.57,13.81,0,20l45,77.93c3.57,6.19,10.17,10,17.32,10h89.99c3.86-0.03,7.63-1.19,10.85-3.32l38.59,27.68c-6.97-2.18-14.18-3.47-21.47-3.83c-18.11-0.87-71.2-0.28-131.42,4.63c-24.71,2.01-36.39,7.88-35.03,9.03c3.49,2.98,7.62,4.16,28.2,4.08c18.32-0.06,71.65,1.91,87.76,2.9c11.41,0.71,23.41,2.88,32.04,2.97c9.2-0.12,18.37-0.82,27.48-2.1c13.74-1.89,31.96-5.7,36.15-10.77C230.34,225.03,231.47,222.02,231.18,218.98z M62.49,24.32c1.67-2.55,4.45-4.16,7.5-4.33h79.99c3.04,0.17,5.81,1.77,7.49,4.31l33.26,57.61c-4.99,5.2-9.32,11-12.89,17.26l-24.77,2.75L138.3,122c-7.21-0.04-14.4,0.82-21.4,2.54L60.77,27.31L62.49,24.32z M69.99,175.86c-3.05-0.17-5.83-1.78-7.5-4.33l-40-69.27c-1.37-2.72-1.37-5.94,0-8.66l26.73-46.28l59.6,103.24l0.04-0.02c0.69,1.24,1.64,2.31,2.79,3.15l30.93,22.18L69.99,175.86z M186.75,182.93l-57.9-41.53c6.39-1.39,12.91-2.09,19.45-2.09l14.77-20.07l24.77-2.75c3.26-5.66,7.13-10.95,11.52-15.79l7.03,70.9C198.07,170.71,190.13,175.29,186.75,182.93z M81.64,154.71c1.49,2.33,0.8,5.42-1.52,6.91c-2.33,1.49-5.42,0.8-6.91-1.52c-0.08-0.12-0.15-0.25-0.22-0.38l-35-60.61c-1.49-2.33-0.8-5.42,1.52-6.91c2.33-1.49,5.42-0.8,6.91,1.52c0.08,0.12,0.15,0.25,0.22,0.38L81.64,154.71z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

website/static/images/graphics/reddit.svg
+3
View File
@@ -0,0 +1,3 @@
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path fill="#803847" d="M29.51,31.49c0.19,0.26,0.17,0.62-0.05,0.85c-0.83,0.75-1.87,1.25-2.98,1.42c-0.81,0.16-1.63,0.25-2.46,0.25c-0.83,0-1.65-0.09-2.46-0.26c-1.1-0.18-2.13-0.67-2.96-1.42c-0.23-0.24-0.23-0.61,0-0.85c0.24-0.23,0.61-0.23,0.85,0c0.6,0.52,1.32,0.88,2.1,1.04c0.82,0.2,1.66,0.3,2.51,0.3c1.49,0,3.59-0.35,4.61-1.34C28.9,31.25,29.27,31.25,29.51,31.49zM21.25,26.29c0-1.26-1.03-2.29-2.29-2.29c-1.26,0-2.29,1.03-2.29,2.29c0,1.26,1.03,2.29,2.29,2.29C20.22,28.58,21.25,27.55,21.25,26.29z M29.04,24c-1.26,0-2.29,1.03-2.29,2.29c0,1.26,1.03,2.29,2.29,2.29c1.26,0,2.29-1.03,2.29-2.29C31.33,25.03,30.31,24,29.04,24z M29.04,28.58C29.04,28.58,29.04,28.58,29.04,28.58C29.04,28.58,29.04,28.58,29.04,28.58L29.04,28.58z M42.24,36.3c-2.39,3.54-5.75,6.31-9.68,7.97C29.85,45.42,26.94,46.01,24,46c-4.38,0.01-8.67-1.3-12.3-3.76c-3.54-2.39-6.31-5.75-7.97-9.68c-2.9-6.85-2.14-14.7,2.03-20.86c2.39-3.54,5.75-6.31,9.68-7.97c6.85-2.9,14.7-2.14,20.86,2.03c3.54,2.39,6.31,5.75,7.97,9.68C47.17,22.29,46.41,30.14,42.24,36.3z M38.67,24c0-1.78-1.44-3.21-3.22-3.22c-0.83-0.01-1.63,0.32-2.21,0.9c-2.53-1.72-5.51-2.66-8.57-2.73l1.47-6.87l4.76,1c0.05,1.26,1.12,2.25,2.39,2.19c1.26-0.05,2.25-1.12,2.19-2.38c-0.05-1.23-1.06-2.2-2.29-2.2c-0.87-0.01-1.67,0.5-2.03,1.29l-5.33-1.14c-0.04-0.01-0.08-0.01-0.12-0.01c-0.27-0.01-0.52,0.18-0.58,0.45l-1.62,7.67c-3.11,0.02-6.14,0.97-8.7,2.73c-0.6-0.57-1.39-0.89-2.21-0.9c-1.78,0-3.22,1.43-3.22,3.21c0,1.27,0.75,2.42,1.91,2.94c-0.05,0.32-0.08,0.65-0.08,0.98c0,2.39,1.33,4.63,3.76,6.32c2.7,1.76,5.86,2.67,9.08,2.61c3.22,0.06,6.39-0.85,9.08-2.61c2.42-1.68,3.76-3.93,3.76-6.32c0-0.32-0.02-0.64-0.08-0.95C37.94,26.41,38.66,25.26,38.67,24z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

website/static/images/graphics/twitter.svg
+3
View File
@@ -0,0 +1,3 @@
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path fill="#803847" d="M41.94,11.34c1.95-1.16,3.4-3,4.1-5.16c-1.83,1.09-3.83,1.85-5.92,2.26C36.6,4.69,30.7,4.51,26.95,8.03c-1.88,1.76-2.94,4.22-2.94,6.79c0,0.71,0.08,1.42,0.24,2.12c-7.49-0.37-14.48-3.91-19.21-9.74c-2.47,4.26-1.21,9.71,2.88,12.44C6.44,19.6,4.99,19.2,3.7,18.49v0.12c0,4.44,3.13,8.26,7.47,9.14c-1.37,0.37-2.81,0.42-4.21,0.16c1.22,3.79,4.72,6.39,8.7,6.47c-3.3,2.59-7.37,3.99-11.57,3.98c-0.74,0-1.49-0.04-2.22-0.13c4.26,2.74,9.22,4.19,14.28,4.19c17.14,0,26.51-14.2,26.51-26.51c0-0.4-0.01-0.8-0.03-1.2c1.82-1.32,3.4-2.95,4.65-4.82l0-0.01C45.59,10.63,43.78,11.12,41.94,11.34z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 660 B

website/static/js/carousel.js
+10 -6
View File
@@ -1,14 +1,17 @@
const FLING_VELOCITY_THRESHOLD = 10;
const FLING_VELOCITY_WINDOW_SIZE = 20;
let carouselImages;
let carouselDirectionPrev;
let carouselDirectionNext;
let carouselDots;
let carouselDescriptions;
let carouselDragLastClientX;
let velocityDeltaWindow = Array.from({ length: 20 }, () => ({ time: 0, delta: 0 }));
let velocityDeltaWindow = Array.from({ length: FLING_VELOCITY_WINDOW_SIZE }, () => ({ time: 0, delta: 0 }));
window.addEventListener("DOMContentLoaded", initializeCarousel);
window.addEventListener("pointerup", dragEnd);
window.addEventListener("scroll", dragEnd);
window.addEventListener("pointerup", () => dragEnd(false));
window.addEventListener("scroll", () => dragEnd(true));
window.addEventListener("pointermove", dragMove);
function initializeCarousel() {
@@ -87,7 +90,7 @@ function dragBegin(event) {
document.querySelector("#screenshots").classList.add("dragging");
}
function dragEnd() {
function dragEnd(dropWithoutVelocity) {
if (!carouselImages) return;
carouselDragLastClientX = undefined;
@@ -108,7 +111,7 @@ function dragEnd() {
const activeDotIndex = currentActiveDotIndex();
// If the speed is fast enough, slide to the next or previous image in that direction
if (Math.abs(recentVelocity) > 10) {
if (Math.abs(recentVelocity) > FLING_VELOCITY_THRESHOLD && !dropWithoutVelocity) {
// Positive velocity should go to the previous image
if (recentVelocity > 0) {
// Don't apply the velocity-based fling if we're already snapping to the next image
@@ -128,6 +131,7 @@ function dragEnd() {
}
// If we didn't slide in a direction due to clear velocity, just snap to the closest image
// This can be reached either by not entering the if statement above, or by its inner if statements not returning early and exiting back to this scope
slideTo(clamp(closestImageIndex, 0, carouselDots.length - 1), true);
}
@@ -138,7 +142,7 @@ function dragMove(event) {
const LEFT_MOUSE_BUTTON = 1;
if (!(event.buttons & LEFT_MOUSE_BUTTON)) {
dragEnd();
dragEnd(false);
return;
}
website/static/js/navbar.js
+34 -34
View File
@@ -15,40 +15,6 @@ let activeRippleIndex;
window.addEventListener("DOMContentLoaded", initializeRipples);
window.addEventListener("resize", () => animate(true));
function setRipples(mediaQueryScaleFactor) {
const rippleSvgRect = rippleSvg.getBoundingClientRect();
const rippleSvgLeft = rippleSvgRect.left;
const rippleSvgWidth = rippleSvgRect.width;
let path = `M 0,${fullRippleHeight + 3} `;
ripples.forEach((ripple) => {
if (!ripple.animationStartTime || !ripple.animationEndTime) return;
const t = Math.min((Date.now() - ripple.animationStartTime) / (ripple.animationEndTime - ripple.animationStartTime), 1);
const height = fullRippleHeight * (ripple.goingUp ? ease(t) : 1 - ease(t));
const buttonRect = ripple.element.getBoundingClientRect();
const buttonCenter = buttonRect.width / 2;
const rippleCenter = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
const rippleOffset = rippleCenter - buttonCenter;
const rippleStartX = buttonRect.left - rippleSvgLeft - rippleOffset;
const rippleRadius = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
const handleRadius = rippleRadius * HANDLE_STRETCH;
path += `L ${rippleStartX},${fullRippleHeight + 3} `;
path += `c ${handleRadius},0 ${rippleRadius - handleRadius},-${height} ${rippleRadius},-${height} `;
path += `s ${rippleRadius - handleRadius},${height} ${rippleRadius},${height} `;
});
path += `l ${rippleSvgWidth},0`;
ripplePath.setAttribute("d", path);
}
function initializeRipples() {
ripplesInitialized = true;
@@ -110,6 +76,40 @@ function animate(forceRefresh) {
}
}
function setRipples(mediaQueryScaleFactor) {
const rippleSvgRect = rippleSvg.getBoundingClientRect();
const rippleSvgLeft = rippleSvgRect.left;
const rippleSvgWidth = rippleSvgRect.width;
let path = `M 0,${fullRippleHeight + 3} `;
ripples.forEach((ripple) => {
if (!ripple.animationStartTime || !ripple.animationEndTime) return;
const t = Math.min((Date.now() - ripple.animationStartTime) / (ripple.animationEndTime - ripple.animationStartTime), 1);
const height = fullRippleHeight * (ripple.goingUp ? ease(t) : 1 - ease(t));
const buttonRect = ripple.element.getBoundingClientRect();
const buttonCenter = buttonRect.width / 2;
const rippleCenter = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
const rippleOffset = rippleCenter - buttonCenter;
const rippleStartX = buttonRect.left - rippleSvgLeft - rippleOffset;
const rippleRadius = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
const handleRadius = rippleRadius * HANDLE_STRETCH;
path += `L ${rippleStartX},${fullRippleHeight + 3} `;
path += `c ${handleRadius},0 ${rippleRadius - handleRadius},-${height} ${rippleRadius},-${height} `;
path += `s ${rippleRadius - handleRadius},${height} ${rippleRadius},${height} `;
});
path += `l ${rippleSvgWidth},0`;
ripplePath.setAttribute("d", path);
}
function ease(x) {
return 1 - (1 - x) * (1 - x);
}