diff options
| author | Elizabeth Hunt <me@liz.coffee> | 2026-01-01 20:27:47 -0800 |
|---|---|---|
| committer | Elizabeth Hunt <me@liz.coffee> | 2026-01-01 20:31:42 -0800 |
| commit | b1423571d5fe50c342e651959ba427eb7b2c798b (patch) | |
| tree | e718ac48ee92eff4c1dc4340e826a8d0b979ee22 /src/components | |
| parent | 2178129cf089a17e3d519edcf87f8e218cf33244 (diff) | |
| download | mistymountainstherapy-b1423571d5fe50c342e651959ba427eb7b2c798b.tar.gz mistymountainstherapy-b1423571d5fe50c342e651959ba427eb7b2c798b.zip | |
Fix mobile direction card
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) { |