diff options
Diffstat (limited to 'src/components/DirectionCard.svelte')
| -rw-r--r-- | src/components/DirectionCard.svelte | 71 |
1 files changed, 48 insertions, 23 deletions
diff --git a/src/components/DirectionCard.svelte b/src/components/DirectionCard.svelte index 0097d33..909feac 100644 --- a/src/components/DirectionCard.svelte +++ b/src/components/DirectionCard.svelte @@ -1,26 +1,51 @@ <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" class:reverse={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> +</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; + } + + .reverse .direction-card__media { + order: 2; + } + + .reverse .direction-card__content { + order: 1; + } + } + + .direction-card :global(img) { + max-height: 520px; + object-fit: cover; + } +</style> |