LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-09 12:57:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

adjust shine

Browse Source
This commit is contained in:
tglide
2024-01-09 21:34:01 +00:00
parent b782c98b72
commit f5481f62f1
6 changed files with 104 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/routes/init/(assets)/shine-bg.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg width="1650" height="1482" viewBox="0 0 1650 1482" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_229_1180)">
<path
d="M1309.35 229.132L236.934 1137.87C219.423 1152.71 209.563 1174.67 210.111 1197.61C211.631 1261.25 286.076 1294.89 334.837 1253.97L1411.58 350.359C1438.26 327.962 1447.2 290.768 1433.61 258.689C1412.75 209.458 1350.14 194.566 1309.35 229.132Z"
fill="url(#paint0_linear_229_1180)" fill-opacity="0.12" />
</g>
<defs>
<filter id="filter0_f_229_1180" x="0.0895996" y="0.310547" width="1649.81" height="1481.56"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="105" result="effect1_foregroundBlur_229_1180" />
</filter>
<linearGradient id="paint0_linear_229_1180" x1="1307.46" y1="302.703" x2="255.921" y2="1343.69"
gradientUnits="userSpaceOnUse">
<stop offset="0.391231" stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

36
src/routes/init/(assets)/shine.svg
View File

@@ -1,16 +1,20 @@
<svg width="1650" height="1482" viewBox="0 0 1650 1482" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="910" height="958" viewBox="0 0 910 958" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_229_1180)"> <g filter="url(#filter0_f_320_6447)">
<path d="M1309.35 229.132L236.934 1137.87C219.423 1152.71 209.563 1174.67 210.111 1197.61C211.631 1261.25 286.076 1294.89 334.837 1253.97L1411.58 350.359C1438.26 327.962 1447.2 290.768 1433.61 258.689C1412.75 209.458 1350.14 194.566 1309.35 229.132Z" fill="url(#paint0_linear_229_1180)" fill-opacity="0.12"/> <path
</g> d="M561.997 215.792L179.512 665.06C152.993 696.21 154.002 742.281 181.858 772.24C213.839 806.635 268.331 806.529 300.177 772.01L700.265 338.343C737.512 297.969 731.521 234.209 687.404 201.481C648.349 172.508 593.521 178.764 561.997 215.792Z"
<defs> fill="url(#paint0_linear_320_6447)" fill-opacity="0.08" />
<filter id="filter0_f_229_1180" x="0.0895996" y="0.310547" width="1649.81" height="1481.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> </g>
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <defs>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/> <filter id="filter0_f_320_6447" x="0.274902" y="23.2871" width="884.48" height="934.681"
<feGaussianBlur stdDeviation="105" result="effect1_foregroundBlur_229_1180"/> filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
</filter> <feFlood flood-opacity="0" result="BackgroundImageFix" />
<linearGradient id="paint0_linear_229_1180" x1="1307.46" y1="302.703" x2="255.921" y2="1343.69" gradientUnits="userSpaceOnUse"> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<stop offset="0.391231" stop-color="white"/> <feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_320_6447" />
<stop offset="1" stop-color="white" stop-opacity="0"/> </filter>
</linearGradient> <linearGradient id="paint0_linear_320_6447" x1="584.53" y1="278.736" x2="221.53" y2="776.018"
</defs> gradientUnits="userSpaceOnUse">
</svg> <stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

4
src/routes/init/(components)/TicketPreview.svelte
View File

@@ -1,6 +1,6 @@
<script> <script>
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import ShineSVG from '../(assets)/shine.svg'; import ShineSVG from '../(assets)/shine-bg.svg';
</script> </script>
<div class="ticket-preview" style:opacity={browser ? '1' : '0.5'}> <div class="ticket-preview" style:opacity={browser ? '1' : '0.5'}>
@@ -38,7 +38,7 @@
position: absolute; position: absolute;
inset-block-start: -100px; inset-block-start: -100px;
inset-inline-end: -100px; inset-inline-end: -100px;
z-index: 20; z-index: -1;
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {

100
src/routes/init/(components)/ticket.svelte
View File

@@ -16,6 +16,7 @@
import { fade, type TransitionConfig } from 'svelte/transition'; import { fade, type TransitionConfig } from 'svelte/transition';
import Logo from '../(assets)/logo.svg'; import Logo from '../(assets)/logo.svg';
import BG from '../(assets)/ticket-bg.svg'; import BG from '../(assets)/ticket-bg.svg';
import ShineSvg from '../(assets)/shine.svg';
type $$Props = TicketProps; type $$Props = TicketProps;
$: ({ name, user, id, tribe, contributions } = $$props as $$Props); $: ({ name, user, id, tribe, contributions } = $$props as $$Props);
@@ -33,46 +34,49 @@
} }
</script> </script>
<div class="ticket"> <div class="wrapper">
<img src={BG} alt="" class="bg" /> <div class="ticket">
<p class="aw-title aw-u-color-text-primary">{name?.trim() || '-'}</p> <img src={BG} alt="" class="bg" />
{#if user} <p class="aw-title aw-u-color-text-primary">{name?.trim() || '-'}</p>
<p class="aw-label">@{user}</p> {#if user}
{/if} <p class="aw-label">@{user}</p>
<div class="bottom-left"> {/if}
<img src={Logo} alt="init_" /> <div class="bottom-left">
<span>JAN 22 - 27</span> <img src={Logo} alt="init_" />
</div> <span>JAN 22 - 27</span>
<div class="id">
<span>#{id}</span>
</div>
{#key tribe}
<img
class="tribe"
src={`/images/tribes/${tribe?.toLowerCase()}.svg`}
alt={tribe}
style:display={tribe ? undefined : 'none'}
in:appear
/>
{/key}
{#if contributions}
<div class="github" out:fade={{ duration: 100 }}>
{#each contributions as row}
<div class="row">
{#each row as opacity, j}
<div
style:--index={row.length - j}
data-empty={opacity ? undefined : ''}
style:--opacity={opacity}
/>
{/each}
</div>
{/each}
</div> </div>
{/if}
<div class="id">
<span>#{id}</span>
</div>
{#key tribe}
<img
class="tribe"
src={`/images/tribes/${tribe?.toLowerCase()}.svg`}
alt={tribe}
style:display={tribe ? undefined : 'none'}
in:appear
/>
{/key}
{#if contributions}
<div class="github" out:fade={{ duration: 100 }}>
{#each contributions as row}
<div class="row">
{#each row as opacity, j}
<div
style:--index={row.length - j}
data-empty={opacity ? undefined : ''}
style:--opacity={opacity}
/>
{/each}
</div>
{/each}
</div>
{/if}
</div>
<img class="shine" src={ShineSvg} alt="" />
</div> </div>
<style lang="scss"> <style lang="scss">
@@ -84,9 +88,25 @@
@return #{math.div($value, $base-width)}em; @return #{math.div($value, $base-width)}em;
} }
.wrapper {
position: relative;
font-size: var(--base-width, var(--base-width-default));
overflow: visible;
}
.shine {
position: absolute;
max-inline-size: unset;
max-block-size: unset;
inline-size: adjusted(40);
block-size: auto;
inset-block-start: adjusted(-5);
inset-inline-start: adjusted(-5);
/* background-color: red; */
}
.ticket { .ticket {
--base-width-default: clamp(12rem, 40vw, #{$base-width}rem); --base-width-default: clamp(12rem, 40vw, #{$base-width}rem);
font-size: var(--base-width, var(--base-width-default));
width: var(--base-width, var(--base-width-default)); width: var(--base-width, var(--base-width-default));
aspect-ratio: 460 / 644; aspect-ratio: 460 / 644;

12
src/routes/init/ticket/+page.svelte
View File

@@ -4,7 +4,7 @@
import FooterNav from '$lib/components/FooterNav.svelte'; import FooterNav from '$lib/components/FooterNav.svelte';
import MainFooter from '$lib/components/MainFooter.svelte'; import MainFooter from '$lib/components/MainFooter.svelte';
import Main from '$lib/layouts/Main.svelte'; import Main from '$lib/layouts/Main.svelte';
import ShineSVG from '../(assets)/shine.svg';
import Ticket from '../(components)/Ticket.svelte'; import Ticket from '../(components)/Ticket.svelte';
import TicketPreview from '../(components)/TicketPreview.svelte'; import TicketPreview from '../(components)/TicketPreview.svelte';
import { getMockContributions } from '../helpers'; import { getMockContributions } from '../helpers';
@@ -78,7 +78,6 @@
<div class="ticket-3"> <div class="ticket-3">
<Ticket name="Sara" user="sara_k" id="123123" /> <Ticket name="Sara" user="sara_k" id="123123" />
</div> </div>
<img class="shine" src={ShineSVG} alt="" />
</TicketPreview> </TicketPreview>
</div> </div>
</div> </div>
@@ -145,15 +144,6 @@
border-radius: var(--p-border-radius); border-radius: var(--p-border-radius);
z-index: 10; z-index: 10;
} }
.shine {
position: absolute;
inset-block-start: -100px;
inset-inline-end: -100px;
z-index: 20;
pointer-events: none;
}
} }
@media screen and (max-width: 511px) { @media screen and (max-width: 511px) {

3
src/routes/init/ticket/customize/+page.svelte
View File

@@ -4,7 +4,7 @@
import Main from '$lib/layouts/Main.svelte'; import Main from '$lib/layouts/Main.svelte';
import TicketPreview from '$routes/init/(components)/TicketPreview.svelte'; import TicketPreview from '$routes/init/(components)/TicketPreview.svelte';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import ShineSVG from '../../(assets)/shine.svg'; import ShineSVG from '../../(assets)/shine-bg.svg';
import Ticket from '../../(components)/Ticket.svelte'; import Ticket from '../../(components)/Ticket.svelte';
import Form from './form.svelte'; import Form from './form.svelte';
@@ -49,7 +49,6 @@
contributions={showGitHub ? data.contributions : undefined} contributions={showGitHub ? data.contributions : undefined}
/> />
</div> </div>
<img class="shine" src={ShineSVG} alt="" />
</TicketPreview> </TicketPreview>
</div> </div>