-
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #13 from languageXchange/template
v1
- Loading branch information
Showing
109 changed files
with
5,271 additions
and
292 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| <script lang="ts"> | ||
| import { HttpRegex } from '$lib/utils/regex'; | ||
| export let color: 'primary' | 'secondary' = 'primary'; | ||
| export let style: 'solid' | 'understated' | 'clear' = 'solid'; | ||
| export let size: 'small' | 'medium' | 'large' = 'medium'; | ||
| export let href: string | undefined = undefined; | ||
| export let additionalClass: string | undefined = undefined; | ||
| const isExternalLink = !!href && HttpRegex.test(href); | ||
| export let target: '_self' | '_blank' = isExternalLink ? '_blank' : '_self'; | ||
| export let rel = isExternalLink ? 'noopener noreferrer' : undefined; | ||
| $: tag = href ? 'a' : 'button'; | ||
| $: linkProps = { | ||
| href, | ||
| target, | ||
| rel | ||
| }; | ||
| </script> | ||
|
|
||
| <svelte:element | ||
| this={tag} | ||
| {...linkProps} | ||
| class={['button', `style--${style}`, `size--${size}`, `color--${color}`, additionalClass].join( | ||
| ' ' | ||
| )} | ||
| data-sveltekit-preload-data | ||
| on:click | ||
| {...$$restProps} | ||
| > | ||
| {#if $$slots['icon']} | ||
| <div class="icon"> | ||
| <slot name="icon" /> | ||
| </div> | ||
| {/if} | ||
| <slot /> | ||
| </svelte:element> | ||
|
|
||
| <style lang="scss"> | ||
| .button { | ||
| --main-color: red; | ||
| --light-color: blue; | ||
| --contrast-color: green; | ||
| -webkit-appearance: none; | ||
| appearance: none; | ||
| cursor: pointer; | ||
| text-decoration: none; | ||
| transition: all 0.2s ease-in-out; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 5px; | ||
| border: none; | ||
| border-radius: 20px; | ||
| font-weight: 700; | ||
| .icon { | ||
| width: 24px; | ||
| height: 24px; | ||
| } | ||
| &.color { | ||
| &--primary { | ||
| --main-color: var(--color--primary-rgb); | ||
| --light-color: var(--color--primary-tint-rgb); | ||
| --contrast-color: var(--color--primary-contrast); | ||
| } | ||
| &--secondary { | ||
| --main-color: var(--color--secondary-rgb); | ||
| --light-color: var(--color--secondary-tint-rgb); | ||
| --contrast-color: var(--color--secondary-contrast); | ||
| } | ||
| } | ||
| &.style { | ||
| &--solid { | ||
| background-color: rgb(var(--main-color)); | ||
| color: var(--contrast-color); | ||
| &:hover { | ||
| box-shadow: 0px 0px 1px 7px rgba(var(--main-color), 0.3); | ||
| } | ||
| } | ||
| &--understated { | ||
| background-color: rgb(var(--light-color)); | ||
| color: rgb(var(--main-color)); | ||
| &:hover { | ||
| box-shadow: 0px 0px 1px 7px rgba(var(--main-color), 0.3); | ||
| } | ||
| } | ||
| &--clear { | ||
| background-color: transparent; | ||
| color: rgb(var(--main-color)); | ||
| &:hover { | ||
| background-color: rgb(var(--light-color)); | ||
| } | ||
| } | ||
| } | ||
| &.size { | ||
| &--small { | ||
| padding: 5px 10px; | ||
| font-size: 0.75rem; | ||
| .icon { | ||
| width: 20px; | ||
| height: 20px; | ||
| } | ||
| } | ||
| &--medium { | ||
| padding: 10px 20px; | ||
| font-size: 1rem; | ||
| } | ||
| &--large { | ||
| padding: 15px 30px; | ||
| font-size: 1.15rem; | ||
| .icon { | ||
| width: 28px; | ||
| height: 28px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| <script lang="ts"> | ||
| import { HttpRegex } from '$lib/utils/regex'; | ||
| export let additionalClass: string | undefined = undefined; | ||
| export let href: string | undefined = undefined; | ||
| const isExternalLink = !!href && HttpRegex.test(href); | ||
| export let target: '_self' | '_blank' = isExternalLink ? '_blank' : '_self'; | ||
| export let rel = isExternalLink ? 'noopener noreferrer' : undefined; | ||
| $: tag = href ? 'a' : 'article'; | ||
| $: linkProps = { | ||
| href, | ||
| target, | ||
| rel | ||
| }; | ||
| </script> | ||
|
|
||
| <svelte:element | ||
| this={tag} | ||
| class="card {additionalClass}" | ||
| {...linkProps} | ||
| data-sveltekit-preload-data | ||
| {...$$restProps} | ||
| > | ||
| {#if $$slots.image} | ||
| <div class="image"> | ||
| <slot name="image" /> | ||
| </div> | ||
| {/if} | ||
| <div class="body"> | ||
| <div class="content"> | ||
| <slot name="content" /> | ||
| </div> | ||
| {#if $$slots.footer} | ||
| <div class="footer"> | ||
| <slot name="footer" /> | ||
| </div> | ||
| {/if} | ||
| </div> | ||
| </svelte:element> | ||
|
|
||
| <style lang="scss"> | ||
| .card { | ||
| background: var(--color--card-background); | ||
| box-shadow: var(--card-shadow); | ||
| color: var(--color--text); | ||
| border-radius: 10px; | ||
| transition: all 0.4s ease; | ||
| position: relative; | ||
| overflow: hidden; | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| text-decoration: none; | ||
| &[href], | ||
| &[onclick] { | ||
| cursor: pointer; | ||
| &:hover { | ||
| box-shadow: var(--card-shadow-hover); | ||
| transform: scale(1.01); | ||
| } | ||
| } | ||
| } | ||
| .body { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| gap: 10px; | ||
| padding: 20px 20px; | ||
| flex: 1 0 50%; | ||
| .content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex: 1; | ||
| } | ||
| } | ||
| .image { | ||
| position: relative; | ||
| flex: 1 0 max(50%, 330px); | ||
| // height: min(100%, 300px); | ||
| min-height: 280px; | ||
| max-height: 350px; | ||
| } | ||
| :global(.card [slot='image']) { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| position: absolute; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| <script lang="ts"> | ||
| import { dev } from '$app/environment'; | ||
| export let src: string; | ||
| export let alt: string; | ||
| export let fullBleed: boolean | undefined = undefined; | ||
| export let formats: string[] = ['avif', 'webp', 'png']; | ||
| export let widths: string[] | undefined = undefined; | ||
| $: fileName = src.split('.')[0]; | ||
| function buildSrcset() { | ||
| if (dev) return; | ||
| let srcset = ''; | ||
| if (widths) { | ||
| for (let i = 0; i < widths.length; i++) { | ||
| srcset += `${fileName}-${widths[i]}.${formats[0]} ${widths[i]}w`; | ||
| if (i < widths.length - 1) { | ||
| srcset += ', '; | ||
| } | ||
| } | ||
| } else { | ||
| for (let i = 0; i < formats.length; i++) { | ||
| srcset += `${fileName}.${formats[i]}`; | ||
| if (i < formats.length - 1) { | ||
| srcset += ', '; | ||
| } | ||
| } | ||
| } | ||
| return srcset; | ||
| } | ||
| </script> | ||
|
|
||
| <img {src} {alt} loading="lazy" decoding="async" class:full-bleed={fullBleed} /> | ||
|
|
||
| <!-- | ||
| <img | ||
| srcset={buildSrcset()} | ||
| {src} | ||
| {alt} | ||
| loading="lazy" | ||
| decoding="async" | ||
| class:full-bleed={fullBleed} | ||
| /> | ||
| --> | ||
|
|
||
| <style lang="scss"> | ||
| img { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: contain; | ||
| } | ||
| </style> |
Oops, something went wrong.