commit 0f0c33a67407e2fff846934e8a1dda1ae3957d7e
parent 3351c1cab59d0e7018b75e87b559ce48beab2a8a
Author: George Francis <georgedoescode@gmail.com>
Date: Fri, 10 Jul 2020 12:17:40 +0100
colors everywhere
Diffstat:
14 files changed, 84 insertions(+), 38 deletions(-)
diff --git a/public/og-image.png b/public/og-image.png
Binary files differ.
diff --git a/src/App.vue b/src/App.vue
@@ -33,6 +33,7 @@ export default {
<TheSquircleExplosion />
<div class="app__content">
<TheGenerator />
+
<TheInfoSection />
</div>
</div>
diff --git a/src/assets/img/favicon.svg b/src/assets/img/favicon.svg
@@ -1,5 +1,5 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M93.9978 50.004L93.9245 50.8144L93.7052 52.0423L93.3404 53.494L92.8325 55.1058L92.1835 56.8391L91.3974 58.6669L90.4774 60.5662L89.4288 62.5191L88.2565 64.5079L86.967 66.5172L85.5663 68.5335L84.0619 70.5425L82.4617 72.532L80.774 74.49L79.0085 76.4044L77.174 78.2649L75.2809 80.0608L73.3402 81.7823L71.3627 83.4202L69.3607 84.9657L67.3463 86.4107L65.3329 87.7476L63.3338 88.9697L61.3648 90.0708L59.4413 91.045L57.5816 91.8873L55.8065 92.5938L54.1404 93.1611L52.6169 93.5857L51.2852 93.8658L50.2497 94L49.6022 93.9875L48.5033 93.8288L47.1345 93.5244L45.5842 93.0756L43.8979 92.4849L42.1068 91.7553L40.2351 90.8903L38.3028 89.8944L36.3275 88.7724L34.3252 87.5305L32.3105 86.175L30.2972 84.7123L28.2985 83.1511L26.3264 81.4985L24.3929 79.7638L22.5091 77.9561L20.6855 76.0861L18.9323 74.1633L17.2588 72.1995L15.6742 70.2059L14.1867 68.1947L12.8042 66.1784L11.5337 64.1713L10.3818 62.1876L9.35448 60.2428L8.45682 58.3538L7.69341 56.5406L7.06811 54.8253L6.58405 53.2373L6.24367 51.8176L6.04866 50.638L6 49.9289L6.09794 49.0074L6.34198 47.7351L6.73091 46.253L7.26277 44.6188L7.93491 42.8676L8.74392 41.0265L9.68573 39.1167L10.7556 37.1569L11.948 35.1636L13.257 33.1519L14.6756 31.1361L16.1967 29.1293L17.8121 27.1443L19.5134 25.193L21.2914 23.2868L23.1364 21.4366L25.0381 19.6525L26.9859 17.9445L28.9683 16.3216L30.9733 14.7924L32.9885 13.365L35.0006 12.0468L36.9956 10.8447L38.9583 9.76464L40.8723 8.81224L42.7191 7.99233L44.478 7.30903L46.1225 6.76578L47.6181 6.36531L48.9103 6.10962L49.8717 6L50.5522 6.03699L51.7072 6.22041L53.1108 6.54933L54.6867 7.02212L56.3925 7.6364L58.1987 8.38909L60.0819 9.27639L62.0226 10.2938L64.0034 11.4362L66.009 12.6977L68.0242 14.0719L70.0361 15.5516L72.0312 17.129L73.9976 18.796L75.9233 20.5436L77.7977 22.3623L79.6105 24.2421L81.3507 26.1724L83.0099 28.1422L84.5789 30.1397L86.0492 32.1526L87.4132 34.1681L88.6643 36.1723L89.7954 38.1507L90.8016 40.0875L91.6768 41.965L92.4175 43.7637L93.0192 45.4596L93.479 47.0227L93.795 48.4083L93.9655 49.5351L93.9978 50.004Z" fill="#1F2933"/>
+<path d="M93.9978 50.004L93.9245 50.8144L93.7052 52.0423L93.3404 53.494L92.8325 55.1058L92.1835 56.8391L91.3974 58.6669L90.4774 60.5662L89.4288 62.5191L88.2565 64.5079L86.967 66.5172L85.5663 68.5335L84.0619 70.5425L82.4617 72.532L80.774 74.49L79.0085 76.4044L77.174 78.2649L75.2809 80.0608L73.3402 81.7823L71.3627 83.4202L69.3607 84.9657L67.3463 86.4107L65.3329 87.7476L63.3338 88.9697L61.3648 90.0708L59.4413 91.045L57.5816 91.8873L55.8065 92.5938L54.1404 93.1611L52.6169 93.5857L51.2852 93.8658L50.2497 94L49.6022 93.9875L48.5033 93.8288L47.1345 93.5244L45.5842 93.0756L43.8979 92.4849L42.1068 91.7553L40.2351 90.8903L38.3028 89.8944L36.3275 88.7724L34.3252 87.5305L32.3105 86.175L30.2972 84.7123L28.2985 83.1511L26.3264 81.4985L24.3929 79.7638L22.5091 77.9561L20.6855 76.0861L18.9323 74.1633L17.2588 72.1995L15.6742 70.2059L14.1867 68.1947L12.8042 66.1784L11.5337 64.1713L10.3818 62.1876L9.35448 60.2428L8.45682 58.3538L7.69341 56.5406L7.06811 54.8253L6.58405 53.2373L6.24367 51.8176L6.04866 50.638L6 49.9289L6.09794 49.0074L6.34198 47.7351L6.73091 46.253L7.26277 44.6188L7.93491 42.8676L8.74392 41.0265L9.68573 39.1167L10.7556 37.1569L11.948 35.1636L13.257 33.1519L14.6756 31.1361L16.1967 29.1293L17.8121 27.1443L19.5134 25.193L21.2914 23.2868L23.1364 21.4366L25.0381 19.6525L26.9859 17.9445L28.9683 16.3216L30.9733 14.7924L32.9885 13.365L35.0006 12.0468L36.9956 10.8447L38.9583 9.76464L40.8723 8.81224L42.7191 7.99233L44.478 7.30903L46.1225 6.76578L47.6181 6.36531L48.9103 6.10962L49.8717 6L50.5522 6.03699L51.7072 6.22041L53.1108 6.54933L54.6867 7.02212L56.3925 7.6364L58.1987 8.38909L60.0819 9.27639L62.0226 10.2938L64.0034 11.4362L66.009 12.6977L68.0242 14.0719L70.0361 15.5516L72.0312 17.129L73.9976 18.796L75.9233 20.5436L77.7977 22.3623L79.6105 24.2421L81.3507 26.1724L83.0099 28.1422L84.5789 30.1397L86.0492 32.1526L87.4132 34.1681L88.6643 36.1723L89.7954 38.1507L90.8016 40.0875L91.6768 41.965L92.4175 43.7637L93.0192 45.4596L93.479 47.0227L93.795 48.4083L93.9655 49.5351L93.9978 50.004Z" fill="#4d3df7"/>
<path d="M25.248 44.4956C27.2685 35.9083 39.4906 35.9675 41.748 44.4956" stroke="white" stroke-width="2.75"/>
<path d="M58.2477 44.4956C60.2684 35.9083 72.4905 35.9675 74.7477 44.4956" stroke="white" stroke-width="2.75"/>
</svg>
diff --git a/src/assets/img/squircle-demo.svg b/src/assets/img/squircle-demo.svg
@@ -1,8 +1,10 @@
<svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="400" height="400" fill="white"/>
-<path d="M376 200.006L375.883 329.454L375.528 341.894L374.931 349.608L374.081 355.215L372.962 359.578L371.552 363.097L369.82 365.989L367.72 368.386L365.189 370.373L362.13 372.007L358.392 373.33L353.719 374.368L347.622 375.143L338.959 375.668L323.629 375.953L90.1092 376.002L66.0592 375.815L55.537 375.391L48.5815 374.721L43.3975 373.795L39.3109 372.593L35.9923 371.093L33.2555 369.259L30.9856 367.041L29.1068 364.367L27.5672 361.129L26.3305 357.152L25.3708 352.13L24.67 345.454L24.2156 335.568L24 315.186L24.0197 79.4958L24.2751 62.4154L24.7703 53.2748L25.5137 46.9445L26.5185 42.1291L27.8041 38.2924L29.3978 35.159L31.3382 32.5684L33.6806 30.4193L36.5057 28.6441L39.9378 27.1963L44.1801 26.0428L49.5999 25.1603L56.9734 24.5325L68.5141 24.1484L101.979 24.0018L327.185 24.0901L340.691 24.4149L348.781 24.9815L354.586 25.7996L359.077 26.8841L362.686 28.2563L365.648 29.9467L368.101 31.9978L370.135 34.4712L371.811 37.4581L373.17 41.1007L374.242 45.6377L375.049 51.517L375.604 59.7498L375.919 73.6875L376 200.006Z" fill="#F5F7FA"/>
-<path d="M344 200.006L343.82 280.955L343.277 296.15L342.364 306.185L341.07 313.767L339.374 319.838L337.252 324.84L334.664 329.024L331.559 332.539L327.86 335.486L323.456 337.933L318.173 339.928L311.721 341.504L303.556 342.685L292.454 343.489L274.256 343.925L140.452 344L113.701 343.714L100.556 343.064L91.39 342.042L84.3143 340.633L78.5899 338.816L73.8463 336.562L69.8707 333.83L66.5296 330.56L63.7343 326.67L61.4236 322.031L59.5543 316.444L58.0957 309.565L57.0261 300.723L56.3305 288.271L56 265.036L56.0303 129.221L56.4218 109.249L57.1794 97.6169L58.3133 89.1783L59.8392 82.5509L61.7802 77.1421L64.169 72.6406L67.0512 68.8618L70.4919 65.6879L74.5857 63.0396L79.4763 60.8618L85.3959 59.1153L92.7556 57.7722L102.401 56.8131L116.643 56.2249L151.937 56L278.311 56.1355L294.627 56.6332L305.086 57.4994L312.906 58.7458L319.134 60.3901L324.253 62.4579L328.528 64.9852L332.12 68.0226L335.134 71.6424L337.64 75.9509L339.688 81.1122L341.315 87.3976L342.544 95.3049L343.394 105.925L343.875 122.689L344 200.006Z" fill="#E4E7EB"/>
-<path d="M312 200.01L311.72 235.402L310.878 249.937L309.47 260.903L307.488 269.91L304.919 277.569L301.748 284.18L297.947 289.916L293.481 294.882L288.298 299.149L282.319 302.762L275.424 305.755L267.41 308.151L257.915 309.964L246.16 311.206L229.77 311.883L180.833 312L159.765 311.556L146.579 310.549L136.28 308.975L127.71 306.823L120.38 304.081L114.038 300.729L108.535 296.739L103.779 292.07L99.7067 286.665L96.2769 280.434L93.4601 273.238L91.2359 264.841L89.5902 254.799L88.5135 242.089L88 222.851L88.0471 172.946L88.655 155.521L89.8269 143.385L91.5692 133.667L93.8918 125.496L96.81 118.475L100.346 112.391L104.529 107.115L109.406 102.564L115.042 98.6833L121.538 95.4354L129.055 92.7938L137.872 90.7399L148.543 89.2613L162.46 88.3496L187.507 88L233.113 88.2107L248.356 88.9828L259.64 90.3203L268.848 92.2307L276.654 94.7252L283.385 97.8208L289.223 101.542L294.281 105.922L298.631 111.012L302.324 116.886L305.393 123.659L307.861 131.518L309.746 140.799L311.059 152.202L311.806 167.721L312 200.01Z" fill="#CBD2D9"/>
-<path d="M280 200.014L279.6 208.003L278.405 215.912L276.425 223.662L273.682 231.175L270.202 238.378L266.021 245.197L261.179 251.564L255.726 257.417L249.716 262.696L243.208 267.349L236.269 271.329L228.967 274.596L221.375 277.118L213.569 278.87L205.627 279.834L197.628 280L189.653 279.367L181.781 277.941L174.091 275.737L166.659 272.776L159.56 269.088L152.865 264.71L146.64 259.685L140.948 254.065L135.846 247.904L131.385 241.264L127.608 234.213L124.555 226.82L122.255 219.159L120.732 211.306L120 203.341L120.067 195.343L120.933 187.391L122.588 179.566L125.016 171.944L128.194 164.603L132.088 157.616L136.661 151.053L141.866 144.979L147.651 139.455L153.96 134.535L160.728 130.27L167.888 126.702L175.368 123.867L183.094 121.792L190.989 120.499L198.974 120L206.968 120.301L214.893 121.398L222.668 123.281L230.217 125.93L237.463 129.32L244.335 133.416L250.763 138.177L256.683 143.557L262.037 149.5L266.771 155.948L270.838 162.836L274.196 170.096L276.812 177.655L278.661 185.437L279.723 193.365L280 200.014Z" fill="#9AA5B1"/>
-<path d="M248 200.011L247.68 202.235L246.728 205.577L245.161 209.463L243.013 213.666L240.325 218.028L237.154 222.42L233.566 226.727L229.636 230.845L225.451 234.683L221.108 238.156L216.711 241.192L212.38 243.726L208.25 245.709L204.494 247.098L201.377 247.867L199.54 248L196.847 247.494L193.314 246.36L189.316 244.62L185.051 242.31L180.666 239.476L176.287 236.176L172.023 232.481L167.977 228.468L164.236 224.228L160.883 219.858L157.987 215.469L155.608 211.182L153.795 207.143L152.584 203.539L152 200.703L152.054 198.924L152.745 195.919L154.059 192.225L155.97 188.132L158.439 183.819L161.417 179.425L164.84 175.07L168.638 170.861L172.728 166.896L177.018 163.261L181.406 160.036L185.78 157.286L190.011 155.068L193.947 153.428L197.375 152.399L199.835 152L201.838 152.24L205.09 153.115L208.924 154.607L213.098 156.685L217.449 159.308L221.845 162.421L226.169 165.961L230.317 169.852L234.195 174.009L237.719 178.338L240.813 182.733L243.413 187.078L245.467 191.24L246.932 195.053L247.779 198.27L248 200.011Z" fill="#7B8794"/>
+<path d="M376 200.006L375.883 329.454L375.528 341.894L374.931 349.608L374.081 355.215L372.962 359.578L371.552 363.097L369.82 365.989L367.72 368.386L365.189 370.373L362.13 372.007L358.392 373.33L353.719 374.368L347.622 375.143L338.959 375.668L323.629 375.953L90.1092 376.002L66.0592 375.815L55.537 375.391L48.5815 374.721L43.3975 373.795L39.3109 372.593L35.9923 371.093L33.2555 369.259L30.9856 367.041L29.1068 364.367L27.5672 361.129L26.3305 357.152L25.3708 352.13L24.67 345.454L24.2156 335.568L24 315.186L24.0197 79.4958L24.2751 62.4154L24.7703 53.2748L25.5137 46.9445L26.5185 42.1291L27.8041 38.2924L29.3978 35.159L31.3382 32.5684L33.6806 30.4193L36.5057 28.6441L39.9378 27.1963L44.1801 26.0428L49.5999 25.1603L56.9734 24.5325L68.5141 24.1484L101.979 24.0018L327.185 24.0901L340.691 24.4149L348.781 24.9815L354.586 25.7996L359.077 26.8841L362.686 28.2563L365.648 29.9467L368.101 31.9978L370.135 34.4712L371.811 37.4581L373.17 41.1007L374.242 45.6377L375.049 51.517L375.604 59.7498L375.919 73.6875L376 200.006Z" fill="#5D55FA"/>
+<path d="M344 200.006L343.82 280.955L343.277 296.15L342.364 306.185L341.07 313.767L339.374 319.838L337.252 324.84L334.664 329.024L331.559 332.539L327.86 335.486L323.456 337.933L318.173 339.928L311.721 341.504L303.556 342.685L292.454 343.489L274.256 343.925L140.452 344L113.701 343.714L100.556 343.064L91.39 342.042L84.3143 340.633L78.5899 338.816L73.8463 336.562L69.8707 333.83L66.5296 330.56L63.7343 326.67L61.4236 322.031L59.5543 316.444L58.0957 309.565L57.0261 300.723L56.3305 288.271L56 265.036L56.0303 129.221L56.4218 109.249L57.1794 97.6169L58.3133 89.1783L59.8392 82.5509L61.7802 77.1421L64.169 72.6406L67.0512 68.8618L70.4919 65.6879L74.5857 63.0396L79.4763 60.8618L85.3959 59.1153L92.7556 57.7722L102.401 56.8131L116.643 56.2249L151.937 56L278.311 56.1355L294.627 56.6332L305.086 57.4994L312.906 58.7458L319.134 60.3901L324.253 62.4579L328.528 64.9852L332.12 68.0226L335.134 71.6424L337.64 75.9509L339.688 81.1122L341.315 87.3976L342.544 95.3049L343.394 105.925L343.875 122.689L344 200.006Z" fill="#7069FA"/>
+<path d="M312 200.01L311.72 235.402L310.878 249.937L309.47 260.903L307.488 269.91L304.919 277.569L301.748 284.18L297.947 289.916L293.481 294.882L288.298 299.149L282.319 302.762L275.424 305.755L267.41 308.151L257.915 309.964L246.16 311.206L229.77 311.883L180.833 312L159.765 311.556L146.579 310.549L136.28 308.975L127.71 306.823L120.38 304.081L114.038 300.729L108.535 296.739L103.779 292.07L99.7067 286.665L96.2769 280.434L93.4601 273.238L91.2359 264.841L89.5902 254.799L88.5135 242.089L88 222.851L88.0471 172.946L88.655 155.521L89.8269 143.385L91.5692 133.667L93.8918 125.496L96.81 118.475L100.346 112.391L104.529 107.115L109.406 102.564L115.042 98.6833L121.538 95.4354L129.055 92.7938L137.872 90.7399L148.543 89.2613L162.46 88.3496L187.507 88L233.113 88.2107L248.356 88.9828L259.64 90.3203L268.848 92.2307L276.654 94.7252L283.385 97.8208L289.223 101.542L294.281 105.922L298.631 111.012L302.324 116.886L305.393 123.659L307.861 131.518L309.746 140.799L311.059 152.202L311.806 167.721L312 200.01Z" fill="#8888FC"/>
+<path d="M280 200.014L279.6 208.003L278.405 215.912L276.425 223.662L273.682 231.175L270.202 238.378L266.021 245.197L261.179 251.564L255.726 257.417L249.716 262.696L243.208 267.349L236.269 271.329L228.967 274.596L221.375 277.118L213.569 278.87L205.627 279.834L197.628 280L189.653 279.367L181.781 277.941L174.091 275.737L166.659 272.776L159.56 269.088L152.865 264.71L146.64 259.685L140.948 254.065L135.846 247.904L131.385 241.264L127.608 234.213L124.555 226.82L122.255 219.159L120.732 211.306L120 203.341L120.067 195.343L120.933 187.391L122.588 179.566L125.016 171.944L128.194 164.603L132.088 157.616L136.661 151.053L141.866 144.979L147.651 139.455L153.96 134.535L160.728 130.27L167.888 126.702L175.368 123.867L183.094 121.792L190.989 120.499L198.974 120L206.968 120.301L214.893 121.398L222.668 123.281L230.217 125.93L237.463 129.32L244.335 133.416L250.763 138.177L256.683 143.557L262.037 149.5L266.771 155.948L270.838 162.836L274.196 170.096L276.812 177.655L278.661 185.437L279.723 193.365L280 200.014Z" fill="
+#A2A5FC"/>
+<path d="M248 200.011L247.68 202.235L246.728 205.577L245.161 209.463L243.013 213.666L240.325 218.028L237.154 222.42L233.566 226.727L229.636 230.845L225.451 234.683L221.108 238.156L216.711 241.192L212.38 243.726L208.25 245.709L204.494 247.098L201.377 247.867L199.54 248L196.847 247.494L193.314 246.36L189.316 244.62L185.051 242.31L180.666 239.476L176.287 236.176L172.023 232.481L167.977 228.468L164.236 224.228L160.883 219.858L157.987 215.469L155.608 211.182L153.795 207.143L152.584 203.539L152 200.703L152.054 198.924L152.745 195.919L154.059 192.225L155.97 188.132L158.439 183.819L161.417 179.425L164.84 175.07L168.638 170.861L172.728 166.896L177.018 163.261L181.406 160.036L185.78 157.286L190.011 155.068L193.947 153.428L197.375 152.399L199.835 152L201.838 152.24L205.09 153.115L208.924 154.607L213.098 156.685L217.449 159.308L221.845 162.421L226.169 165.961L230.317 169.852L234.195 174.009L237.719 178.338L240.813 182.733L243.413 187.078L245.467 191.24L246.932 195.053L247.779 198.27L248 200.011Z" fill="
+#fff"/>
</svg>
diff --git a/src/assets/img/wiggle.svg b/src/assets/img/wiggle.svg
@@ -1,6 +1,7 @@
<svg width="300" height="60" viewBox="0 0 300 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
-<path d="M0 20C30 20 45 40 75 40C105 40 120 20 150 20C180 20 195 40 225 40C255 40 270 20 300 20" stroke="#1F2933" stroke-width="16"/>
+<path d="M0 20C30 20 45 40 75 40C105 40 120 20 150 20C180 20 195 40 225 40C255 40 270 20 300 20" stroke="
+#0C008C" stroke-width="16"/>
</g>
<defs>
<clipPath id="clip0">
diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
@@ -55,6 +55,10 @@ button {
background-color: transparent;
}
+button > * {
+ pointer-events: none;
+}
+
embed,
iframe,
img,
@@ -107,16 +111,16 @@ table {
--spacing-15: 48rem;
/* Colors - Grey */
- --grey-900: #1f2933;
- --grey-800: #323f4b;
- --grey-700: #3e4c59;
- --grey-600: #52606d;
- --grey-500: #616e7c;
- --grey-400: #7b8794;
- --grey-300: #9aa5b1;
- --grey-200: #cbd2d9;
- --grey-100: #e4e7eb;
- --grey-000: #f5f7fa;
+ --grey-900: #102a43;
+ --grey-800: #243b53;
+ --grey-700: #334e68;
+ --grey-600: #486581;
+ --grey-500: #627d98;
+ --grey-400: #829ab1;
+ --grey-300: #9fb3c8;
+ --grey-200: #bcccdc;
+ --grey-100: #d9e2ec;
+ --grey-000: #f0f4f8;
}
/* Global Styles */
@@ -131,9 +135,9 @@ body:not(.user-is-tabbing) textarea:focus {
body {
font-family: var(--font-family);
line-height: 1;
- color: var(--grey-900);
+ color: #0c008c;
-webkit-font-smoothing: antialiased;
- -moz-osx-font-smothing: grayscale;
+ -moz-osx-font-smoothing: grayscale;
background: var(--grey-000);
overflow-x: hidden;
}
diff --git a/src/components/BaseRangeInput.vue b/src/components/BaseRangeInput.vue
@@ -61,7 +61,7 @@ input[type='range'] {
--thumb-width: 16px;
--thumb-height: 32px;
--thumb-radius: 16px;
- --thumb-bg: var(--grey-900);
+ --thumb-bg: #4d3df7;
--thumb-scale: 1;
--track-height: 4px;
--track-radius: 2px;
@@ -69,7 +69,6 @@ input[type='range'] {
}
input[type='range']:hover {
- --track-bg: var(--grey-100);
--thumb-scale: 1.125;
}
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -97,6 +97,24 @@ export default {
/>
<VSwatches
v-model="fill"
+ :swatches="[
+ '#199473',
+ '#65D6AD',
+ '#C6F7E2',
+ '#EFFCF6',
+ '#035388',
+ '#1992D4',
+ '#5ED0FA',
+ '#E3F8FF',
+ '#8A041A',
+ '#E12D39',
+ '#F86A6A',
+ '#FFE3E3',
+ '#DE911D',
+ '#F0B429',
+ '#FADB5F',
+ '#FFF3C4',
+ ]"
:trigger-style="{
width: '64px',
height: '48px',
@@ -165,6 +183,7 @@ export default {
.generator-conrols__swatch-text {
position: relative;
width: 100%;
+ min-width: 0;
text-transform: uppercase;
height: 100%;
padding-left: var(--spacing-3);
@@ -175,7 +194,7 @@ export default {
transition: border 125ms ease-in-out;
}
-.generator-conrols__swatch-text:hover {
+.generator-controls__swatch:hover .generator-conrols__swatch-text {
border: 2px solid var(--grey-100);
border-right: 0;
}
@@ -229,7 +248,7 @@ hr {
transition: transform 125ms ease-in-out;
}
-.vue-swatches__trigger__wrapper:hover {
+.generator-controls__swatch:hover .vue-swatches__trigger__wrapper {
transform: scaleX(1.125);
}
</style>
diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue
@@ -49,7 +49,9 @@ export default {
class="generator-export-controls__btn"
@click="copySVGToClipBoard"
>
- Copy
+ <span>
+ Copy
+ </span>
<ClipBoardIcon />
</button>
</div>
@@ -75,9 +77,13 @@ export default {
background: #fff;
border-radius: 12px;
font-weight: 700;
- border: 2px solid var(--grey-100);
- color: var(--grey-900);
- transition: background-color 125ms ease-in-out;
+ border: 2px solid #4d3df7;
+ color: #4d3df7;
+ transition: transform 125ms ease-in-out;
+}
+
+.generator-export-controls__btn span {
+ transition: transform 125ms ease-in-out;
}
.generator-export-controls__btn svg {
@@ -85,15 +91,12 @@ export default {
height: 24px;
stroke-width: 1.5px;
margin-left: var(--spacing-2);
- stroke: var(--grey-900);
+ stroke: #4d3df7;
transition: stroke 125ms ease-in-out, transform 125ms ease-in-out;
}
-.generator-export-controls__btn:hover {
- color: var(--grey-900);
- font-weight: 700;
- border-color: var(--grey-100);
- background: var(--grey-000);
+.generator-export-controls__btn:hover svg {
+ transform: scale(1.125);
}
.generator-export-controls__btn:active svg {
@@ -102,5 +105,12 @@ export default {
.generator-export-controls__btn:first-child {
margin-left: 0;
+ background: #4d3df7;
+ color: #e6e6ff;
+ border: 0;
+}
+
+.generator-export-controls__btn:first-child svg {
+ stroke: #e6e6ff;
}
</style>
diff --git a/src/components/SocialSharing.vue b/src/components/SocialSharing.vue
@@ -56,7 +56,7 @@ export default {
.social-sharing__icon svg {
width: 100%;
height: 100%;
- fill: var(--grey-900);
+ fill: #0c008c;
transition: fill 125ms ease-in-out, transform 125ms ease-in-out;
}
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -13,7 +13,7 @@ export default {
squircleOpts: {
curvature: 0.5,
scale: '100',
- fill: '#1f2933',
+ fill: '#FADB5F',
},
path: '',
};
@@ -72,7 +72,7 @@ export default {
grid-gap: var(--spacing-6);
padding: var(--spacing-5);
background: #fff;
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.075);
+ box-shadow: 0 24px 32px rgba(16, 42, 67, 0.075);
border-radius: 48px;
}
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -42,7 +42,7 @@ export default {
.header__logo svg {
width: 100%;
height: 100%;
- fill: var(--grey-900);
+ fill: #4d3df7;
}
.header__title {
diff --git a/src/components/TheInfoSection.vue b/src/components/TheInfoSection.vue
@@ -56,6 +56,7 @@ export default {
grid-column: 9 / 13;
grid-row: 1;
margin-top: 0;
+ width: 100%;
}
.info-section__squiggle {
@@ -93,5 +94,9 @@ export default {
.info-section__paragraph {
font-size: var(--font-size-3);
}
+
+ .info-section__squiggle {
+ margin-bottom: var(--spacing-6);
+ }
}
</style>
diff --git a/src/components/TheSquircleExplosion.vue b/src/components/TheSquircleExplosion.vue
@@ -33,7 +33,8 @@ export default {
position: absolute;
width: 64px;
height: 64px;
- fill: var(--grey-100);
+ fill: #7069fa;
+ opacity: 0.75;
}
.squircle-explosion__squircle:nth-of-type(1) {
@@ -46,6 +47,7 @@ export default {
top: var(--spacing-11);
right: var(--spacing-5);
transform: rotate(32deg);
+ fill: #f86a6a;
}
.squircle-explosion__squircle:nth-of-type(3) {
@@ -54,6 +56,7 @@ export default {
top: var(--spacing-13);
left: var(--spacing-9);
transform: rotate(54deg);
+ fill: #fadb5f;
}
.squircle-explosion__squircle:nth-of-type(4) {
@@ -62,6 +65,7 @@ export default {
top: var(--spacing-13);
right: var(--spacing-8);
transform: rotate(128deg);
+ fill: #fadb5f;
}
.squircle-explosion__squircle:nth-of-type(5) {
@@ -70,6 +74,7 @@ export default {
top: var(--spacing-8);
right: var(--spacing-12);
transform: rotate(128deg);
+ fill: #7069fa;
}
@media only screen and (max-width: 72rem) {
