generated from cms/tibi-docs
69 lines
1.7 KiB
Svelte
69 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { apiBaseURL } from "../../../config"
|
|
|
|
export let pageId: string
|
|
export let col: Column
|
|
</script>
|
|
|
|
<div class="iconBlock">
|
|
{#each col.iconBlocks as icon}
|
|
<div class="icon">
|
|
<img src="{`${apiBaseURL}page/${pageId}/${icon.icon?.src}`}" alt="img" />
|
|
<div class="text">
|
|
<em>{icon.bigText}</em>
|
|
<p>{icon.smallText}</p>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../assets/css/main.less";
|
|
.iconBlock {
|
|
display: flex;
|
|
justify-content: start;
|
|
flex-wrap: wrap;
|
|
.icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 150px;
|
|
gap: 20px;
|
|
max-width: 45%;
|
|
flex-grow: 1;
|
|
font-size: 0.9rem;
|
|
margin: 20px 0px;
|
|
@media @tablet {
|
|
max-width: initial;
|
|
flex-grow: initial;
|
|
width: 160px;
|
|
gap: 10px;
|
|
}
|
|
@media @desktop {
|
|
width: 230px;
|
|
gap: 40px;
|
|
}
|
|
img {
|
|
width: 75%;
|
|
height: auto;
|
|
}
|
|
.text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
em {
|
|
text-align: center;
|
|
font-size: 2.2rem;
|
|
font-family: "Libre Caslon Text", serif;
|
|
font-style: normal;
|
|
}
|
|
p {
|
|
text-align: center;
|
|
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|