added dynamic illustration
This commit is contained in:
parent
846889e2a0
commit
01aa34da8d
18
app.vue
18
app.vue
@ -64,13 +64,15 @@ async function runMutation(payload) {
|
|||||||
<h1>Liste de naissance</h1>
|
<h1>Liste de naissance</h1>
|
||||||
<section class="intro sidebar--reverse" data-direction="rtl">
|
<section class="intro sidebar--reverse" data-direction="rtl">
|
||||||
<article v-html="homepage.content" class="editorial" />
|
<article v-html="homepage.content" class="editorial" />
|
||||||
<img
|
<div>
|
||||||
src="~/assets/images/jungle.jpg"
|
<NuxtImg
|
||||||
|
:src="`https://contenu.liste-bebe-macia-capde.fr/assets/${homepage.illustration.id}.`"
|
||||||
|
width="900"
|
||||||
|
height="563"
|
||||||
class="intro__image"
|
class="intro__image"
|
||||||
width="400"
|
|
||||||
height="600"
|
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<hr />
|
<hr />
|
||||||
<SortFilter :onSort="sortList" :onDisplay="toggleDisplay" />
|
<SortFilter :onSort="sortList" :onDisplay="toggleDisplay" />
|
||||||
@ -96,19 +98,15 @@ h1 {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.intro {
|
.intro {
|
||||||
--sidebar-target-width: 400px;
|
--sidebar-target-width: 500px;
|
||||||
--sidebar-target-grow: 0;
|
|
||||||
margin: var(--space-m-l) auto;
|
margin: var(--space-m-l) auto;
|
||||||
max-inline-size: 90ch;
|
max-inline-size: 90ch;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.intro__image {
|
.intro__image {
|
||||||
|
margin-inline: auto;
|
||||||
mix-blend-mode: multiply;
|
mix-blend-mode: multiply;
|
||||||
filter: brightness(110%);
|
|
||||||
height: 600px;
|
|
||||||
width: 400px;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
}
|
||||||
hr {
|
hr {
|
||||||
margin-block: var(--space-xs-s);
|
margin-block: var(--space-xs-s);
|
||||||
|
12129
package-lock.json
generated
12129
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -2,5 +2,8 @@ query getHomepage {
|
|||||||
homepage {
|
homepage {
|
||||||
date_updated
|
date_updated
|
||||||
content
|
content
|
||||||
|
illustration {
|
||||||
|
id
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user