mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-10-04 18:43:39 -04:00
41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="main-asides d-flex flex-column flex-xxl-row justify-content-center align-items-center align-items-xxl-start">
|
|
<aside class="aside-left p-0 p-xxl-3">
|
|
<slot name="aside-left">
|
|
<AdPlaceholder phkey="aside-left-middle" class="d-none d-xxl-block"/>
|
|
</slot>
|
|
</aside>
|
|
<main>
|
|
<slot/>
|
|
</main>
|
|
<aside class="aside-right">
|
|
<slot name="aside-right">
|
|
<AdPlaceholder phkey="aside-right-middle"/>
|
|
</slot>
|
|
</aside>
|
|
</div>
|
|
<div class="d-flex justify-content-center">
|
|
<main><slot name="below"></slot></main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "assets/variables";
|
|
|
|
main, aside {
|
|
width: 100%;
|
|
max-width: $container-width;
|
|
padding: $spacer;
|
|
margin-inline-start: $spacer;
|
|
margin-inline-end: $spacer;
|
|
}
|
|
|
|
@include media-breakpoint-up('xxl', $grid-breakpoints) {
|
|
aside {
|
|
max-width: $aside-width;
|
|
}
|
|
}
|
|
</style>
|