65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="side-by-side">
|
||
|
|
<img
|
||
|
|
v-if="itemType === 'construction'"
|
||
|
|
src="~/assets/osha-certified-fox.webp"
|
||
|
|
alt="A blob-like fox with a hard hat"
|
||
|
|
class="side-image"
|
||
|
|
/>
|
||
|
|
<div class="side-content">
|
||
|
|
<slot> </slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { defineProps } from "vue";
|
||
|
|
|
||
|
|
defineProps<{
|
||
|
|
itemType: "construction";
|
||
|
|
}>();
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.side-by-side {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 20px;
|
||
|
|
|
||
|
|
&:not(:first-child) {
|
||
|
|
border-top: 1px solid $primary-surface;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:not(:last-child) {
|
||
|
|
border-bottom: 1px solid $primary-surface;
|
||
|
|
}
|
||
|
|
|
||
|
|
& .side-image {
|
||
|
|
width: 160px;
|
||
|
|
height: 160px;
|
||
|
|
}
|
||
|
|
|
||
|
|
& .side-content {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media all and (max-width: 500px) {
|
||
|
|
gap: 0;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: auto;
|
||
|
|
|
||
|
|
& .side-image {
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
justify-self: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
& .side-content {
|
||
|
|
h2 {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|