fix icons and some animations

This commit is contained in:
Torsten Dittmann
2023-09-25 15:28:34 +02:00
parent 13fe1c8554
commit b9b3ff7dd2
14 changed files with 23 additions and 32 deletions

View File

@@ -1,5 +1,3 @@
// @ts-expect-error missing types
import SVGFixer from 'oslllo-svg-fixer';
import svgtofont from 'svgtofont'; import svgtofont from 'svgtofont';
import { resolve } from 'path'; import { resolve } from 'path';

View File

@@ -1 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="" stroke="none" fill-rule="evenodd" fill="black"></path></svg> <svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 166 B

After

Width:  |  Height:  |  Size: 430 B

View File

@@ -1,6 +1,4 @@
<script lang="ts"> <script lang="ts">
import { toScale, type Scale } from '$lib/utils/toScale';
import { spring, type AnimationListOptions, type SpringOptions } from 'motion'; import { spring, type AnimationListOptions, type SpringOptions } from 'motion';
import { animation, createScrollHandler, scroll, type Animation } from '.'; import { animation, createScrollHandler, scroll, type Animation } from '.';
@@ -71,13 +69,10 @@
} }
]; ];
const animScale: Scale = [0, animations.length - 1];
const percentScale: Scale = [0.1, 0.9];
const scrollHandler = createScrollHandler( const scrollHandler = createScrollHandler(
animations.map(({ mobile, desktop }, i) => { animations.map(({ mobile, desktop }, i) => {
return { return {
percentage: toScale(i, animScale, percentScale), percentage: 0.1,
whenAfter() { whenAfter() {
const { main, reversed } = isMobile() ? mobile : desktop; const { main, reversed } = isMobile() ? mobile : desktop;
@@ -109,10 +104,6 @@
> >
<div class="sticky-wrapper"> <div class="sticky-wrapper">
<h3 class="aw-display aw-u-color-text-primary">Powered by Open Source</h3> <h3 class="aw-display aw-u-color-text-primary">Powered by Open Source</h3>
<p class="aw-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ultrices lacus. Duis
pellentesque quis purus.
</p>
<div class="cards-wrapper"> <div class="cards-wrapper">
<a <a
@@ -171,7 +162,7 @@
<style lang="scss"> <style lang="scss">
#open-source { #open-source {
height: 3500px; height: 1500px;
position: relative; position: relative;
} }
@@ -203,10 +194,6 @@
inset: 0; inset: 0;
} }
p {
max-width: 48.875rem;
}
.cards-wrapper { .cards-wrapper {
position: relative; position: relative;
height: 22.5rem; height: 22.5rem;

View File

@@ -44,7 +44,7 @@
title: 'Databases', title: 'Databases',
subtitle: 'Store, query and manage your data', subtitle: 'Store, query and manage your data',
description: description:
'Store, query and manage access to your apps data in real-time with a robust and scalable database.', "Store, query and manage access to your app's data in real-time with a robust and scalable database.",
features: ['Relationships are a big deal'], features: ['Relationships are a big deal'],
shot: './images/products/Databases.svg' shot: './images/products/Databases.svg'
}, },
@@ -184,11 +184,6 @@
}} }}
> >
<div class="sticky-wrapper"> <div class="sticky-wrapper">
<!-- <div class="debug">
<pre>{JSON.stringify({ active })}</pre>
<pre>{JSON.stringify({ scrollInfo })}</pre>
</div> -->
{#if scrollInfo.percentage < 0.1} {#if scrollInfo.percentage < 0.1}
<div <div
class="main-text" class="main-text"
@@ -329,9 +324,8 @@
<style lang="scss"> <style lang="scss">
#products { #products {
min-height: 500vh; min-height: 500vh;
height: 6000px; height: 5000px;
position: relative; position: relative;
padding-block-end: 20rem;
--debug-bg: transparent; --debug-bg: transparent;
@@ -361,13 +355,12 @@
top: 0; top: 0;
min-height: 58rem; min-height: 58rem;
height: 100vh;
overflow: hidden; overflow: hidden;
padding-inline: 1.25rem; padding-inline: 1.25rem;
width: 100%; width: 100%;
height: 100vh; height: 80vh;
> .main-text { > .main-text {
position: absolute; position: absolute;

View File

@@ -13,7 +13,7 @@
onMount(() => { onMount(() => {
let frame: number | null = null; let frame: number | null = null;
const ease = () => { const ease = () => {
easedPercentage += (percentage - easedPercentage) * 0.1; easedPercentage += (percentage - easedPercentage) * 1;
frame = window.requestAnimationFrame(ease); frame = window.requestAnimationFrame(ease);
}; };
ease(); ease();

View File

@@ -9,6 +9,13 @@
import '@fontsource/inter/800.css'; import '@fontsource/inter/800.css';
import '@fontsource/inter/900.css'; import '@fontsource/inter/900.css';
import '$scss/index.scss'; import '$scss/index.scss';
import { dev } from '$app/environment';
</script> </script>
<svelte:head>
{#if !dev}
<script defer data-domain="appwrite.io" src="https://plausible.io/js/script.js"></script>
{/if}
</svelte:head>
<slot /> <slot />

View File

@@ -7,7 +7,8 @@
align-self:center; color:hsl(var(--color-neutral-0)); align-self:center; color:hsl(var(--color-neutral-0));
padding-block:pxToRem(6); padding-inline:pxToRem(12); border-radius:pxToRem(6); padding-block:pxToRem(6); padding-inline:pxToRem(12); border-radius:pxToRem(6);
background: linear-gradient(175deg, hsl(var(--aw-color-pink-500)) 25.03%, hsl(var(--aw-color-secondary-100)) 100%); // background: linear-gradient(175deg, hsl(var(--aw-color-pink-500)) 25.03%, hsl(var(--aw-color-secondary-100)) 100%);
background: radial-gradient(98.13% 199.7% at 98.13% 100%, #FE6947 0%, #FD366E 41.6%, #FD366E 100%);
-webkit-backdrop-filter:blur(pxToRem(40)); -webkit-backdrop-filter:blur(pxToRem(40));
backdrop-filter:blur(pxToRem(40)); backdrop-filter:blur(pxToRem(40));

View File

@@ -11,6 +11,7 @@
line-height: var(--p-line-height); line-height: var(--p-line-height);
letter-spacing: var(--p-letter-spacing); letter-spacing: var(--p-letter-spacing);
font-weight: var(--p-font-weight); font-weight: var(--p-font-weight);
color: hsl(var(--aw-color-secondary));
@media #{$break2open} { @media #{$break2open} {
--p-font-size: var(--aw-font-size-large); --p-font-size: var(--aw-font-size-large);

Binary file not shown.

View File

@@ -108,7 +108,7 @@
horiz-adv-x="1000" d="M636.5152787342303 658.620853271609C571.1652787342302 644.520853271609 519.6152787342302 599.0708532716089 498.4152787342302 536.870853271609C489.4652787342303 510.620853271609 486.6652787342303 476.8208532716091 491.2652787342302 450.670853271609L493.3652787342302 438.620853271609L485.7152787342303 438.620853271609C473.9652787342302 438.620853271609 438.8152787342302 443.270853271609 415.6652787342303 447.870853271609C305.1652787342303 469.920853271609 199.5652787342303 529.6208532716089 127.2652787342303 610.920853271609L111.5152787342303 628.620853271609L108.6152787342303 624.870853271609C103.9652787342303 618.870853271609 92.8652787342303 589.020853271609 89.8152787342303 574.420853271609C75.8652787342303 507.120853271609 101.0152787342303 438.270853271609 155.3652787342303 394.9708532716091L167.5652787342303 385.270853271609L161.6652787342303 385.270853271609C146.2152787342303 385.270853271609 108.9652787342303 395.2208532716089 91.7652787342303 403.9208532716091C88.2152787342303 405.7208532716091 84.9152787342303 406.7208532716091 84.3152787342303 406.1708532716091C82.4152787342303 404.270853271609 87.1652787342303 371.0708532716091 91.4652787342303 356.270853271609C109.2652787342303 295.0708532716091 157.5152787342303 247.1208532716091 218.7152787342303 229.7208532716091L232.6652787342303 225.770853271609L222.0652787342303 223.4708532716091C215.1152787342303 221.920853271609 201.1152787342303 221.120853271609 181.0652787342303 221.120853271609C161.4152787342303 221.120853271609 150.6652787342303 220.520853271609 150.6652787342303 219.370853271609C150.6652787342303 215.270853271609 169.6152787342303 180.120853271609 177.1652787342303 170.170853271609C194.1652787342303 147.770853271609 217.9652787342303 128.120853271609 243.5652787342303 115.4208532716091C264.5652787342302 104.970853271609 279.1652787342303 100.970853271609 315.3152787342303 95.870853271609C318.3152787342302 95.4708532716091 320.3652787342303 94.4708532716091 319.9152787342303 93.7208532716091C317.9652787342303 90.620853271609 284.7652787342303 69.670853271609 267.0652787342303 60.370853271609C238.3652787342303 45.320853271609 206.3152787342303 33.620853271609 173.5152787342303 26.070853271609C142.7652787342303 19.070853271609 93.6652787342303 15.4708532716091 65.6652787342303 18.2208532716091C56.9652787342303 19.070853271609 49.6652787342303 19.670853271609 49.4652787342303 19.520853271609C48.5652787342303 18.870853271609 80.2152787342303 1.1708532716091 98.1652787342303 -7.729146728391C153.8152787342303 -35.2791467283909 217.2652787342303 -53.3291467283909 281.5152787342303 -59.8291467283911C309.3652787342303 -62.629146728391 369.1652787342303 -62.1791467283909 396.3152787342303 -58.9791467283909C499.2152787342303 -46.7291467283911 582.4652787342302 -13.3291467283909 660.6652787342302 46.9708532716089C681.2152787342303 62.820853271609 726.4652787342302 108.020853271609 743.9152787342302 130.120853271609C792.4652787342303 191.5708532716091 825.6152787342302 258.670853271609 844.9152787342304 334.5708532716091C855.4152787342302 375.7208532716091 859.0652787342302 402.5708532716091 860.1652787342304 446.120853271609L861.1152787342302 482.8208532716091L870.4652787342303 489.720853271609C890.3652787342303 504.370853271609 920.3652787342302 534.1208532716089 938.7652787342302 557.470853271609C954.5652787342302 577.5708532716089 954.5652787342302 577.520853271609 938.2652787342302 571.0708532716089C920.9152787342302 564.270853271609 899.5652787342303 557.970853271609 879.8152787342301 553.770853271609C862.7152787342302 550.170853271609 849.0152787342302 548.0708532716089 849.0152787342302 549.120853271609C849.0152787342302 549.470853271609 853.1152787342302 552.520853271609 858.1152787342303 555.870853271609C881.2652787342302 571.220853271609 905.3652787342302 599.370853271609 918.1152787342302 625.970853271609C930.0652787342304 650.920853271609 930.5152787342302 650.220853271609 908.7152787342304 639.3208532716089C879.9652787342302 624.870853271609 854.3152787342302 615.470853271609 822.7652787342303 607.870853271609L810.7152787342303 604.920853271609L800.2652787342303 614.420853271609C778.6652787342302 633.970853271609 751.0652787342302 648.920853271609 722.6652787342302 656.420853271609C700.0652787342302 662.420853271609 658.8152787342302 663.470853271609 636.5152787342303 658.620853271609" /> horiz-adv-x="1000" d="M636.5152787342303 658.620853271609C571.1652787342302 644.520853271609 519.6152787342302 599.0708532716089 498.4152787342302 536.870853271609C489.4652787342303 510.620853271609 486.6652787342303 476.8208532716091 491.2652787342302 450.670853271609L493.3652787342302 438.620853271609L485.7152787342303 438.620853271609C473.9652787342302 438.620853271609 438.8152787342302 443.270853271609 415.6652787342303 447.870853271609C305.1652787342303 469.920853271609 199.5652787342303 529.6208532716089 127.2652787342303 610.920853271609L111.5152787342303 628.620853271609L108.6152787342303 624.870853271609C103.9652787342303 618.870853271609 92.8652787342303 589.020853271609 89.8152787342303 574.420853271609C75.8652787342303 507.120853271609 101.0152787342303 438.270853271609 155.3652787342303 394.9708532716091L167.5652787342303 385.270853271609L161.6652787342303 385.270853271609C146.2152787342303 385.270853271609 108.9652787342303 395.2208532716089 91.7652787342303 403.9208532716091C88.2152787342303 405.7208532716091 84.9152787342303 406.7208532716091 84.3152787342303 406.1708532716091C82.4152787342303 404.270853271609 87.1652787342303 371.0708532716091 91.4652787342303 356.270853271609C109.2652787342303 295.0708532716091 157.5152787342303 247.1208532716091 218.7152787342303 229.7208532716091L232.6652787342303 225.770853271609L222.0652787342303 223.4708532716091C215.1152787342303 221.920853271609 201.1152787342303 221.120853271609 181.0652787342303 221.120853271609C161.4152787342303 221.120853271609 150.6652787342303 220.520853271609 150.6652787342303 219.370853271609C150.6652787342303 215.270853271609 169.6152787342303 180.120853271609 177.1652787342303 170.170853271609C194.1652787342303 147.770853271609 217.9652787342303 128.120853271609 243.5652787342303 115.4208532716091C264.5652787342302 104.970853271609 279.1652787342303 100.970853271609 315.3152787342303 95.870853271609C318.3152787342302 95.4708532716091 320.3652787342303 94.4708532716091 319.9152787342303 93.7208532716091C317.9652787342303 90.620853271609 284.7652787342303 69.670853271609 267.0652787342303 60.370853271609C238.3652787342303 45.320853271609 206.3152787342303 33.620853271609 173.5152787342303 26.070853271609C142.7652787342303 19.070853271609 93.6652787342303 15.4708532716091 65.6652787342303 18.2208532716091C56.9652787342303 19.070853271609 49.6652787342303 19.670853271609 49.4652787342303 19.520853271609C48.5652787342303 18.870853271609 80.2152787342303 1.1708532716091 98.1652787342303 -7.729146728391C153.8152787342303 -35.2791467283909 217.2652787342303 -53.3291467283909 281.5152787342303 -59.8291467283911C309.3652787342303 -62.629146728391 369.1652787342303 -62.1791467283909 396.3152787342303 -58.9791467283909C499.2152787342303 -46.7291467283911 582.4652787342302 -13.3291467283909 660.6652787342302 46.9708532716089C681.2152787342303 62.820853271609 726.4652787342302 108.020853271609 743.9152787342302 130.120853271609C792.4652787342303 191.5708532716091 825.6152787342302 258.670853271609 844.9152787342304 334.5708532716091C855.4152787342302 375.7208532716091 859.0652787342302 402.5708532716091 860.1652787342304 446.120853271609L861.1152787342302 482.8208532716091L870.4652787342303 489.720853271609C890.3652787342303 504.370853271609 920.3652787342302 534.1208532716089 938.7652787342302 557.470853271609C954.5652787342302 577.5708532716089 954.5652787342302 577.520853271609 938.2652787342302 571.0708532716089C920.9152787342302 564.270853271609 899.5652787342303 557.970853271609 879.8152787342301 553.770853271609C862.7152787342302 550.170853271609 849.0152787342302 548.0708532716089 849.0152787342302 549.120853271609C849.0152787342302 549.470853271609 853.1152787342302 552.520853271609 858.1152787342303 555.870853271609C881.2652787342302 571.220853271609 905.3652787342302 599.370853271609 918.1152787342302 625.970853271609C930.0652787342304 650.920853271609 930.5152787342302 650.220853271609 908.7152787342304 639.3208532716089C879.9652787342302 624.870853271609 854.3152787342302 615.470853271609 822.7652787342303 607.870853271609L810.7152787342303 604.920853271609L800.2652787342303 614.420853271609C778.6652787342302 633.970853271609 751.0652787342302 648.920853271609 722.6652787342302 656.420853271609C700.0652787342302 662.420853271609 658.8152787342302 663.470853271609 636.5152787342303 658.620853271609" />
<glyph glyph-name="x" <glyph glyph-name="x"
unicode="&#xEA22;" unicode="&#xEA22;"
horiz-adv-x="1000" d="" /> horiz-adv-x="1000" d="M593.042379788101 376.5289323553382L957.1230643846782 799.7432762836186H870.8475957620212L554.7163814180929 432.2722086389568L302.2233088834556 799.7432762836186H11.0024449877751L392.8215158924205 244.0619396903015L11.0024449877751 -199.7432762836185H97.2828035859821L431.1255093724531 188.3186634066829L697.7766911165445 -199.7432762836185H988.9975550122248L593.0211898940504 376.5289323553382H593.042379788101zM474.8696006519967 239.1662591687042L436.1833740831296 294.4995925020375L128.3708231458843 734.7926650366749H260.8924205378973L509.3007334963325 379.4621026894866L547.9869600651996 324.1287693561532L870.888345558272 -137.7465362673186H738.3667481662592L474.8696006519967 239.1450692746535V239.1662591687042z" />
<glyph glyph-name="youtube" <glyph glyph-name="youtube"
unicode="&#xEA23;" unicode="&#xEA23;"
horiz-adv-x="1000" d="M360.8906375550839 596.5705411368683C256.0906375550839 594.5705411368683 193.5406375550838 590.7705411368684 170.4906375550838 584.8705411368685C156.3906375550839 581.3205411368683 139.2906375550838 572.7705411368684 128.2906375550838 563.7705411368684C95.5906375550839 537.2205411368684 79.7906375550839 474.3705411368684 75.0906375550839 352.4705411368684C71.8406375550839 267.4705411368685 79.1906375550838 145.3705411368685 90.0906375550839 102.7205411368685C94.2906375550839 86.2705411368684 101.0406375550838 69.4705411368684 107.6406375550838 59.1705411368684C120.0406375550839 39.6705411368684 144.0906375550839 23.4705411368684 170.3406375550839 16.8205411368685C233.4406375550839 0.8705411368684 534.3906375550838 -3.0294588631315 757.6406375550838 9.2205411368683C821.7406375550837 12.7205411368683 832.3906375550838 14.3705411368684 850.9906375550838 23.7705411368684C881.7906375550838 39.3205411368684 895.3906375550838 59.6205411368684 907.6906375550838 108.3705411368684C927.1906375550838 185.4705411368684 931.4406375550838 325.7205411368684 917.4906375550838 434.1705411368684C911.0406375550838 484.4705411368684 898.6406375550838 530.3705411368685 886.9906375550837 547.0205411368684C875.2406375550837 563.8705411368685 851.9906375550837 578.8205411368683 828.0906375550838 584.8705411368685C803.8906375550838 591.0705411368683 749.1906375550838 594.2205411368684 625.9906375550838 596.6705411368685C534.0906375550838 598.4705411368684 459.5406375550839 598.4205411368685 360.8906375550839 596.5705411368683M478.4906375550839 397.2705411368684C491.7906375550839 390.3705411368685 533.9406375550838 367.7205411368684 572.2406375550838 346.9205411368685C633.4406375550839 313.7205411368684 641.4906375550838 308.9205411368685 638.8906375550838 307.0205411368684C632.8906375550838 302.5705411368685 561.2406375550838 264.9705411368684 448.0406375550839 206.9705411368684L415.1406375550839 190.0705411368684L415.1406375550839 309.1705411368684L415.1406375550839 428.2205411368684L434.7406375550839 419.0205411368684C445.4906375550839 413.9705411368684 465.1906375550839 404.1705411368685 478.4906375550839 397.2705411368684" /> horiz-adv-x="1000" d="M360.8906375550839 596.5705411368683C256.0906375550839 594.5705411368683 193.5406375550838 590.7705411368684 170.4906375550838 584.8705411368685C156.3906375550839 581.3205411368683 139.2906375550838 572.7705411368684 128.2906375550838 563.7705411368684C95.5906375550839 537.2205411368684 79.7906375550839 474.3705411368684 75.0906375550839 352.4705411368684C71.8406375550839 267.4705411368685 79.1906375550838 145.3705411368685 90.0906375550839 102.7205411368685C94.2906375550839 86.2705411368684 101.0406375550838 69.4705411368684 107.6406375550838 59.1705411368684C120.0406375550839 39.6705411368684 144.0906375550839 23.4705411368684 170.3406375550839 16.8205411368685C233.4406375550839 0.8705411368684 534.3906375550838 -3.0294588631315 757.6406375550838 9.2205411368683C821.7406375550837 12.7205411368683 832.3906375550838 14.3705411368684 850.9906375550838 23.7705411368684C881.7906375550838 39.3205411368684 895.3906375550838 59.6205411368684 907.6906375550838 108.3705411368684C927.1906375550838 185.4705411368684 931.4406375550838 325.7205411368684 917.4906375550838 434.1705411368684C911.0406375550838 484.4705411368684 898.6406375550838 530.3705411368685 886.9906375550837 547.0205411368684C875.2406375550837 563.8705411368685 851.9906375550837 578.8205411368683 828.0906375550838 584.8705411368685C803.8906375550838 591.0705411368683 749.1906375550838 594.2205411368684 625.9906375550838 596.6705411368685C534.0906375550838 598.4705411368684 459.5406375550839 598.4205411368685 360.8906375550839 596.5705411368683M478.4906375550839 397.2705411368684C491.7906375550839 390.3705411368685 533.9406375550838 367.7205411368684 572.2406375550838 346.9205411368685C633.4406375550839 313.7205411368684 641.4906375550838 308.9205411368685 638.8906375550838 307.0205411368684C632.8906375550838 302.5705411368685 561.2406375550838 264.9705411368684 448.0406375550839 206.9705411368684L415.1406375550839 190.0705411368684L415.1406375550839 309.1705411368684L415.1406375550839 428.2205411368684L434.7406375550839 419.0205411368684C445.4906375550839 413.9705411368684 465.1906375550839 404.1705411368685 478.4906375550839 397.2705411368684" />

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 84 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.