diff options
| author | Elizabeth Hunt <me@liz.coffee> | 2026-01-01 18:32:49 -0800 |
|---|---|---|
| committer | Elizabeth Hunt <me@liz.coffee> | 2026-01-01 18:32:49 -0800 |
| commit | 9af1854a7e35785a8e86426c4fb1edd465f164a3 (patch) | |
| tree | 8a070c6a9498d952c9ef4ba045f2ebfb25f7b335 /src/components/DirectionCard.svelte | |
| parent | 0248a3899ed910f005dccaeefc1d9dcb893e8154 (diff) | |
| download | mistymountainstherapy-9af1854a7e35785a8e86426c4fb1edd465f164a3.tar.gz mistymountainstherapy-9af1854a7e35785a8e86426c4fb1edd465f164a3.zip | |
Massive refactor courtesy of 5 dollars of AI tokens
Diffstat (limited to 'src/components/DirectionCard.svelte')
| -rw-r--r-- | src/components/DirectionCard.svelte | 80 |
1 files changed, 57 insertions, 23 deletions
diff --git a/src/components/DirectionCard.svelte b/src/components/DirectionCard.svelte index 0097d33..7f9d76f 100644 --- a/src/components/DirectionCard.svelte +++ b/src/components/DirectionCard.svelte @@ -1,26 +1,60 @@ <script> - export let imageSpec; - export let direction; + export let imageSpec; + export let direction; </script> -<main> - {#if direction == 'right'} - <div class="row d-flex align-items-center my-2"> - <div class="col-md-4 text-center order-sm-1"> - <img class="img-fluid rounded shadow" src={imageSpec.image} alt={imageSpec.alt} /> - </div> - <div class="col-md-8 border p-4 bg-light rounded shadow order-sm-2"> - <slot /> - </div> - </div> - {:else} - <div class="row d-flex align-items-center my-2"> - <div class="col-md-8 border p-4 bg-light rounded shadow order-md-first order-last"> - <slot /> - </div> - <div class="col-md-4 text-center"> - <img class="img-fluid rounded shadow" src={imageSpec.image} alt={imageSpec.alt} /> - </div> - </div> - {/if} -</main> +<section class="direction-card"> + {#if direction === 'right'} + <div class="direction-card__row row my-2"> + <div class="direction-card__media col-md-4"> + <img + class="img-fluid rounded shadow" + src={imageSpec.image} + alt={imageSpec.alt} + loading="lazy" + decoding="async" + /> + </div> + <div class="direction-card__content col-md-8 card"> + <slot /> + </div> + </div> + {:else} + <div class="direction-card__row row my-2"> + <div class="direction-card__content col-md-8 card"> + <slot /> + </div> + <div class="direction-card__media col-md-4"> + <img + class="img-fluid rounded shadow" + src={imageSpec.image} + alt={imageSpec.alt} + loading="lazy" + decoding="async" + /> + </div> + </div> + {/if} +</section> + +<style> + .direction-card__row { + align-items: center; + } + + .direction-card__media { + max-width: 420px; + margin-inline: auto; + } + + @media (min-width: 768px) { + .direction-card__media { + max-width: none; + } + } + + .direction-card :global(img) { + max-height: 520px; + object-fit: cover; + } +</style> |