Merge pull request #27 from GreenMan36/css-logo

technoph1le · web-flow · commit e2bf612649e6 · 2024-12-30T15:48:58.000+02:00
Update CSS logo and add aria/improve accessibility
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
     <title>QuickSnip</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" role="presentation"></div>
     <div id="modal-root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/public/icons/cpp.svg b/public/icons/cpp.svg
@@ -1,4 +1,6 @@
-<svg width="50" height="50" viewBox="0 0 256 288" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">
+<svg width="50" height="50" viewBox="0 0 256 288" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" aria-labelledby="cpp-logo-title cpp-logo-description">
+<title id="cpp-logo-title">C++ logo</title>
+<desc id="cpp-logo-description">A two tone blue hexagon with the letters C++ inside in white</desc>
 <path d="M255.569 84.72c-.002-4.83-1.035-9.098-3.124-12.761-2.052-3.602-5.125-6.621-9.247-9.008-34.025-19.619-68.083-39.178-102.097-58.817-9.17-5.294-18.061-5.101-27.163.269C100.395 12.39 32.59 51.237 12.385 62.94 4.064 67.757.015 75.129.013 84.711 0 124.166.013 163.62 0 203.076c.002 4.724.991 8.909 2.988 12.517 2.053 3.711 5.169 6.813 9.386 9.254 20.206 11.703 88.02 50.547 101.56 58.536 9.106 5.373 17.997 5.565 27.17.269 34.015-19.64 68.075-39.198 102.105-58.817 4.217-2.44 7.333-5.544 9.386-9.252 1.994-3.608 2.985-7.793 2.987-12.518 0 0 0-78.889-.013-118.345" fill="#5C8DBC"/>
 <path d="M128.182 143.509L2.988 215.593c2.053 3.711 5.169 6.813 9.386 9.254 20.206 11.703 88.02 50.547 101.56 58.536 9.106 5.373 17.997 5.565 27.17.269 34.015-19.64 68.075-39.198 102.105-58.817 4.217-2.44 7.333-5.544 9.386-9.252l-124.413-72.074" fill="#1A4674"/>
 <path d="M91.101 164.861c7.285 12.718 20.98 21.296 36.69 21.296 15.807 0 29.58-8.687 36.828-21.541l-36.437-21.107-37.081 21.352" fill="#1A4674"/>
diff --git a/public/icons/css.svg b/public/icons/css.svg
@@ -1,8 +1,6 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.34922 44.5793L3.42188 0.528137H46.5781L42.6469 44.5727L24.9738 49.4723L7.34922 44.5793Z" fill="#1572B6"/>
-<path d="M25.0004 45.7274L39.2812 41.768L42.641 4.1297H25.0004V45.7274Z" fill="#33A9DC"/>
-<path d="M25.0004 20.0895H32.1496L32.6433 14.557H25.0004V9.1543H38.548L38.4183 10.6039L37.0902 25.4922H25.0004V20.0895Z" fill="white"/>
-<path d="M25.0324 34.1207L25.0086 34.1277L18.9918 32.5031L18.607 28.1942H13.1844L13.941 36.6774L25.0078 39.7488L25.0324 39.7418V34.1207Z" fill="#EBEBEB"/>
-<path d="M31.6902 25.2637L31.0395 32.4988L25.0137 34.1254V39.7465L36.0895 36.677L36.1707 35.7641L37.1105 25.2637H31.6902Z" fill="white"/>
-<path d="M25.0188 9.1543V14.557H11.9688L11.8606 13.343L11.6145 10.6039L11.4852 9.1543H25.0188ZM25.0004 20.0902V25.493H19.0594L18.9512 24.2789L18.7047 21.5398L18.5758 20.0902H25.0004Z" fill="#EBEBEB"/>
-</svg>
+<svg width="50" height="50" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="css-logo-title css-logo-description">
+<title id="css-logo-title">CSS Logo Square</title>
+<desc id="css-logo-description">A purple square with the letters CSS inside in white</desc>
+<path id="bg" fill="#639" d="M0,0H1000V1000H0Z" />
+<path id="fg" fill="#fff" d="m358.1,920c-64.23-.06-103.86-36.23-103.1-102.79,0,0,0-168.39,0-168.39,0-33.74,9.88-59.4,29.64-76.96,35.49-34.19,117.83-36.27,152.59.52,21.42,18.89,29.5,57.48,27.58,93.49h-73.72c.56-14.15-.19-35.58-8.51-43.65-10.81-14.63-39.36-12.91-46.91,2.32-4.64,8.26-6.96,20.49-6.96,36.67v146.18c0,30.65,10.65,46.15,31.96,46.49,9.96,0,17.53-3.62,22.68-10.85,7.19-8.58,8.31-27.58,7.73-41.32h73.72c5.04,70.07-36.32,119.16-106.71,118.29Zm234.04,0c-71.17.98-103.01-49.66-101.04-118.29h69.59c-1.93,29.92,8.35,57.17,32.99,55.27,10.99,0,18.73-3.44,23.2-10.33,8.5-12.59,10.09-48.95-2.06-63.02-8.49-13.55-39.03-25.51-55.16-33.57-23.03-11.02-39.61-24.1-49.75-39.26-22.87-33.64-20.75-107.48,11.34-137.4,31.18-36.92,112.61-38.62,143.82-.77,19.25,19.51,27.66,57.9,26.03,93.23h-67.02c.57-14.52-.8-37.95-6.44-46.49-3.95-7.23-11.43-10.85-22.42-10.85-19.59,0-29.38,11.71-29.38,35.12.21,24.86,9.9,35.06,32.48,45.45,29.24,11.36,66.42,30.76,79.9,54.24,40.2,71.54,12.62,180.82-86.09,176.65Zm224.76,0c-71.17.98-103.01-49.66-101.04-118.29h69.59c-1.93,29.92,8.35,57.17,32.99,55.27,10.99,0,18.73-3.44,23.2-10.33,8.5-12.59,10.09-48.95-2.06-63.02-8.49-13.55-39.03-25.51-55.16-33.57-23.03-11.02-39.61-24.1-49.75-39.26-22.87-33.64-20.75-107.48,11.34-137.4,31.18-36.92,112.61-38.62,143.82-.77,19.25,19.51,27.66,57.9,26.03,93.23h-67.02c.57-14.52-.8-37.95-6.44-46.49-3.95-7.23-11.43-10.85-22.42-10.85-19.59,0-29.38,11.71-29.38,35.12.21,24.86,9.9,35.06,32.48,45.45,29.24,11.36,66.42,30.76,79.9,54.24,40.2,71.54,12.62,180.82-86.09,176.65Z" />
+</svg>
diff --git a/public/icons/javascript.svg b/public/icons/javascript.svg
@@ -1,4 +1,6 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="js-logo-title js-logo-description">
+<title id="js-logo-title">JS Logo Square</title>
+<desc id="js-logo-description">A yellow square with the letters JS inside in white</desc>
 <path d="M3.125 3.125H46.875V46.875H3.125V3.125Z" fill="#F5DE19"/>
 <path d="M32.5141 37.3047C32.8874 38.0614 33.4667 38.6974 34.1853 39.1396C34.904 39.5819 35.7328 39.8124 36.5766 39.8047C38.2797 39.8047 39.3687 38.9531 39.3687 37.7734C39.3687 36.3672 38.25 35.8641 36.375 35.0437L35.3469 34.6031C32.3781 33.3391 30.4094 31.7562 30.4094 28.4094C30.4094 25.3266 32.7531 22.9781 36.4297 22.9781C37.6198 22.8924 38.8089 23.1588 39.8486 23.7443C40.8883 24.3297 41.7327 25.2082 42.2765 26.2703L39.0625 28.325C38.853 27.7984 38.4884 27.348 38.0171 27.0332C37.5459 26.7185 36.9901 26.5543 36.4234 26.5625C36.1762 26.5377 35.9265 26.5648 35.6903 26.6418C35.454 26.7189 35.2364 26.8444 35.0514 27.0102C34.8663 27.176 34.7178 27.3785 34.6153 27.6049C34.5129 27.8313 34.4587 28.0765 34.4562 28.325C34.4562 29.5578 35.2203 30.0578 36.9844 30.825L38.0125 31.2656C41.5062 32.7641 43.4812 34.2906 43.4812 37.7234C43.4812 41.425 40.5734 43.4531 36.6687 43.4531C35.1475 43.5491 33.6309 43.2032 32.3017 42.4572C30.9724 41.7113 29.8872 40.5969 29.1766 39.2484L32.5141 37.3047ZM17.9906 37.6609C18.6359 38.8062 19.2234 39.775 20.6359 39.775C21.9859 39.775 22.8391 39.2469 22.8391 37.1922V23.2125H26.95V37.2469C26.95 41.5031 24.45 43.4406 20.8109 43.4406C19.5246 43.5109 18.2471 43.1904 17.1464 42.5211C16.0456 41.8517 15.1732 40.865 14.6437 39.6906L17.9906 37.6609Z" fill="black"/>
 </svg>
diff --git a/public/icons/python.svg b/public/icons/python.svg
@@ -1,4 +1,6 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="python-logo-title python-logo-description">
+<title id="python-logo-title">Python Logo</title>
+<desc id="python-logo-description">A blue and yellow snake symbol forming a plus with a somewhat circular or rounded shape</desc>
 <path d="M24.7621 4.78437C23.1129 4.79218 21.5387 4.93242 20.1528 5.17773C16.0707 5.89882 15.3301 7.4082 15.3301 10.1922V13.8684H24.9758V15.0937H11.7098C8.90666 15.0937 6.45197 16.7785 5.684 19.9848C4.79806 23.6586 4.759 25.9516 5.684 29.7879C6.36955 32.6437 8.00705 34.6781 10.8106 34.6781H14.1274V30.2711C14.1274 27.0871 16.8817 24.2789 20.1531 24.2789H29.7879C32.4699 24.2789 34.6106 22.0703 34.6106 19.3773V10.1926C34.6106 7.57812 32.4051 5.61445 29.7879 5.17812C28.1301 4.90234 26.411 4.77695 24.7621 4.78437ZM19.5457 7.74101C20.5418 7.74101 21.3559 8.56796 21.3559 9.58515C21.3559 10.598 20.5422 11.4172 19.5457 11.4172C18.5457 11.4172 17.736 10.598 17.736 9.58515C17.7356 8.56796 18.5457 7.74101 19.5457 7.74101Z" fill="url(#paint0_linear_98_155)"/>
 <path d="M35.8133 15.0937V19.3773C35.8133 22.6977 32.9977 25.4926 29.7875 25.4926H20.1527C17.5137 25.4926 15.3301 27.7516 15.3301 30.3945V39.5801C15.3301 42.1937 17.6027 43.7316 20.1527 44.4812C23.2059 45.3785 26.134 45.541 29.7875 44.4812C32.2156 43.7777 34.6102 42.3629 34.6102 39.5801V35.9035H24.9758V34.6777H39.4336C42.2367 34.6777 43.282 32.7227 44.257 29.7875C45.2641 26.766 45.2207 23.8602 44.257 19.9844C43.5641 17.1934 42.241 15.0934 39.4336 15.0934L35.8133 15.0937ZM30.3941 38.3543C31.3945 38.3543 32.2043 39.1734 32.2043 40.1871C32.2043 41.2035 31.3941 42.0305 30.3941 42.0305C29.398 42.0305 28.5844 41.2035 28.5844 40.1871C28.5844 39.1734 29.398 38.3543 30.3941 38.3543Z" fill="url(#paint1_linear_98_155)"/>
 <path opacity="0.444" d="M38.0113 46.7176C38.0113 48.1016 32.2238 49.2238 25.0851 49.2238C17.9461 49.2238 12.1586 48.1016 12.1586 46.7176C12.1586 45.3336 17.9457 44.2109 25.0851 44.2109C32.2238 44.2109 38.0113 45.3328 38.0113 46.7176Z" fill="url(#paint2_radial_98_155)"/>
diff --git a/public/icons/rust.svg b/public/icons/rust.svg
@@ -1,5 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" version="1.1">
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="rust-logo-title rust-logo-description">
+<title id="rust-logo-title">Rust Logo</title>
+<desc id="rust-logo-description">A black gear with the letter R in the center</desc>
 <g id="surface1">
 <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 24.671875 8.222656 C 15.621094 8.222656 8.257812 15.589844 8.257812 24.636719 C 8.257812 33.679688 15.625 41.046875 24.671875 41.046875 C 33.714844 41.046875 41.082031 33.679688 41.082031 24.636719 C 41.082031 15.589844 33.714844 8.222656 24.671875 8.222656 Z M 24.644531 9.679688 C 25.230469 9.695312 25.695312 10.175781 25.695312 10.761719 C 25.695312 11.355469 25.210938 11.839844 24.613281 11.839844 C 24.019531 11.839844 23.535156 11.355469 23.535156 10.761719 C 23.535156 10.46875 23.652344 10.1875 23.863281 9.984375 C 24.070312 9.78125 24.355469 9.671875 24.644531 9.679688 Z M 27.117188 11.457031 C 30.953125 12.175781 34.28125 14.546875 36.214844 17.9375 L 34.941406 20.8125 C 34.722656 21.308594 34.949219 21.890625 35.441406 22.113281 L 37.890625 23.203125 C 37.96875 23.96875 37.976562 24.738281 37.921875 25.507812 L 36.554688 25.507812 C 36.421875 25.507812 36.363281 25.597656 36.363281 25.730469 L 36.363281 26.355469 C 36.363281 27.828125 35.535156 28.148438 34.804688 28.230469 C 34.109375 28.308594 33.34375 27.9375 33.246094 27.515625 C 32.835938 25.210938 32.15625 24.722656 31.078125 23.871094 C 32.417969 23.023438 33.804688 21.769531 33.804688 20.097656 C 33.804688 18.289062 32.566406 17.148438 31.722656 16.589844 C 30.535156 15.808594 29.222656 15.652344 28.867188 15.652344 L 14.769531 15.652344 C 16.71875 13.476562 19.332031 12 22.203125 11.457031 L 23.867188 13.203125 C 24.242188 13.59375 24.863281 13.609375 25.257812 13.234375 Z M 11.769531 19.453125 C 12.355469 19.46875 12.820312 19.945312 12.820312 20.53125 C 12.820312 21.128906 12.335938 21.609375 11.738281 21.609375 C 11.144531 21.609375 10.660156 21.128906 10.660156 20.53125 C 10.660156 20.238281 10.777344 19.960938 10.988281 19.757812 C 11.195312 19.554688 11.480469 19.441406 11.769531 19.453125 Z M 37.515625 19.5 C 38.101562 19.515625 38.566406 19.996094 38.566406 20.578125 C 38.566406 21.175781 38.082031 21.660156 37.484375 21.660156 C 36.890625 21.660156 36.40625 21.175781 36.40625 20.578125 C 36.40625 20.289062 36.523438 20.007812 36.734375 19.804688 C 36.941406 19.601562 37.226562 19.492188 37.515625 19.5 Z M 13.804688 19.671875 L 15.6875 19.671875 L 15.6875 28.160156 L 11.890625 28.160156 C 11.417969 26.511719 11.273438 24.789062 11.457031 23.085938 L 13.785156 22.050781 C 14.28125 21.828125 14.507812 21.25 14.285156 20.753906 Z M 21.660156 19.765625 L 26.140625 19.765625 C 26.375 19.765625 27.777344 20.03125 27.777344 21.082031 C 27.777344 21.953125 26.703125 22.265625 25.816406 22.265625 L 21.65625 22.265625 Z M 21.660156 25.859375 L 25.09375 25.859375 C 25.40625 25.859375 26.769531 25.953125 27.203125 27.695312 C 27.339844 28.230469 27.640625 29.972656 27.847656 30.53125 C 28.050781 31.15625 28.882812 32.40625 29.765625 32.40625 L 35.371094 32.40625 C 34.996094 32.910156 34.585938 33.386719 34.140625 33.828125 L 31.859375 33.339844 C 31.328125 33.226562 30.804688 33.566406 30.691406 34.097656 L 30.148438 36.625 C 26.625 38.222656 22.578125 38.203125 19.070312 36.574219 L 18.527344 34.046875 C 18.414062 33.515625 17.890625 33.171875 17.359375 33.289062 L 15.128906 33.765625 C 14.714844 33.339844 14.328125 32.886719 13.976562 32.40625 L 24.832031 32.40625 C 24.953125 32.40625 25.039062 32.386719 25.039062 32.269531 L 25.039062 28.429688 C 25.039062 28.320312 24.953125 28.296875 24.832031 28.296875 L 21.65625 28.296875 Z M 16.648438 34.65625 C 17.234375 34.671875 17.699219 35.152344 17.699219 35.734375 C 17.699219 36.332031 17.214844 36.816406 16.617188 36.816406 C 16.023438 36.816406 15.539062 36.332031 15.539062 35.734375 C 15.539062 35.445312 15.65625 35.164062 15.867188 34.960938 C 16.074219 34.757812 16.359375 34.648438 16.648438 34.65625 Z M 32.640625 34.703125 C 33.222656 34.722656 33.6875 35.199219 33.6875 35.785156 C 33.6875 36.382812 33.203125 36.863281 32.609375 36.863281 C 32.011719 36.863281 31.527344 36.382812 31.527344 35.785156 C 31.527344 35.492188 31.644531 35.214844 31.855469 35.011719 C 32.0625 34.804688 32.347656 34.695312 32.640625 34.703125 Z M 32.640625 34.703125 "/>
 <path style="fill-rule:evenodd;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 115.68375 70.95375 C 115.68375 95.6025 95.70375 115.5825 71.055 115.5825 C 46.40625 115.5825 26.415 95.6025 26.415 70.95375 C 26.415 46.305 46.40625 26.325 71.055 26.325 C 95.70375 26.325 115.68375 46.305 115.68375 70.95375 Z M 114.84 66.645 L 121.80375 70.95375 L 114.84 75.2625 L 120.825 80.85375 L 113.16375 83.7225 L 117.945 90.37125 L 109.845 91.6875 L 113.25375 99.14625 L 105.06375 98.865 L 106.9425 106.84125 L 98.955 104.9625 L 99.2475 113.1525 L 91.78875 109.755 L 90.4725 117.84375 L 83.82375 113.0625 L 80.955 120.72375 L 75.36375 114.73875 L 71.055 121.7025 L 66.735 114.73875 L 61.155 120.72375 L 58.275 113.0625 L 51.62625 117.84375 L 50.31 109.755 L 42.85125 113.1525 L 43.14375 104.9625 L 35.15625 106.84125 L 37.035 98.865 L 28.845 99.14625 L 32.25375 91.6875 L 24.165 90.37125 L 28.935 83.7225 L 21.285 80.85375 L 27.25875 75.2625 L 20.295 70.95375 L 27.25875 66.645 L 21.285 61.05375 L 28.935 58.185 L 24.165 51.525 L 32.25375 50.20875 L 28.845 42.75 L 37.035 43.0425 L 35.15625 35.055 L 43.14375 36.945 L 42.85125 28.755 L 50.31 32.1525 L 51.62625 24.06375 L 58.275 28.845 L 61.155 21.18375 L 66.735 27.1575 L 71.055 20.205 L 75.36375 27.1575 L 80.955 21.18375 L 83.82375 28.845 L 90.4725 24.06375 L 91.78875 32.1525 L 99.2475 28.755 L 98.955 36.945 L 106.9425 35.055 L 105.06375 43.0425 L 113.25375 42.75 L 109.845 50.20875 L 117.945 51.525 L 113.16375 58.185 L 120.825 61.05375 Z M 114.84 66.645 " transform="matrix(0.347222,0,0,0.347222,0,0)"/>
diff --git a/public/icons/sass.svg b/public/icons/sass.svg
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
