diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/DirectionCard.svelte | 51 |
1 files changed, 21 insertions, 30 deletions
diff --git a/src/components/DirectionCard.svelte b/src/components/DirectionCard.svelte index 7f9d76f..909feac 100644 --- a/src/components/DirectionCard.svelte +++ b/src/components/DirectionCard.svelte @@ -3,38 +3,21 @@ export let direction; </script> -<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> +<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> - {: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 class="direction-card__content col-md-8 card"> + <slot /> </div> - {/if} + </div> </section> <style> @@ -51,6 +34,14 @@ .direction-card__media { max-width: none; } + + .reverse .direction-card__media { + order: 2; + } + + .reverse .direction-card__content { + order: 1; + } } .direction-card :global(img) { |