58 lines
2.1 KiB
Vue
58 lines
2.1 KiB
Vue
<template>
|
|
<div class="site-wrapper">
|
|
|
|
<!-- Temporary webinar banner -->
|
|
<transition name="fade">
|
|
<div style="background-color: #F8CD44; padding: 1em; color: black; display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 500" v-show="bannerShow">
|
|
<span style="margin-left: auto; margin-right: auto"><strong>Snipêtte à tête.</strong> Our next webinar is happening this Sunday! <a :href="/webinar-jun-2021/" style="color: black; text-decoration: underline;">Learn more</a>.</span>
|
|
<button style="border: 1px solid white; border-radius: 1em; background: #0000;" @click="bannerShow = false">x</button>
|
|
</div>
|
|
</transition>
|
|
<div style="height: 4em; background: black;" v-show="bannerShow"></div>
|
|
<!-- End banner -->
|
|
|
|
<!-- All the main content gets inserted here, index.vue, blogPost.vue, etc -->
|
|
<slot/>
|
|
|
|
<!-- The footer at the very bottom of the screen -->
|
|
<Footer/>
|
|
|
|
<!-- TODO Showing upon clicking the button -->
|
|
<!-- The big email subscribe modal content -->
|
|
<div v-if="Admin.site.subscribers" id="subscribe" class="subscribe-overlay">
|
|
<a class="subscribe-overlay-close" href="#"></a>
|
|
<div class="subscribe-overlay-content">
|
|
<img v-if="!Admin.site.logo" class="subscribe-overlay-logo" :src="Admin.site.logo" :alt="Admin.site.title" />
|
|
<h1 class="subscribe-overlay-title">Subscribe to {{ Admin.site.title }}</h1>
|
|
<p class="subscribe-overlay-description">Stay up to date! Get all the latest & greatest posts delivered straight to your inbox</p>
|
|
<subscribeForm placeholder="youremail@example.com" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TODO Add pagination -->
|
|
<!-- <script v-if="Admin.site.pagination" src=""></script> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Footer from '../components/Footer';
|
|
import Admin from '../../data/admin.yml';
|
|
import subscribeForm from '../components/subscribeForm'
|
|
|
|
export default {
|
|
components: {
|
|
Footer, subscribeForm
|
|
},
|
|
data() {
|
|
return {
|
|
bannerShow: true,
|
|
}
|
|
},
|
|
computed: {
|
|
Admin() {
|
|
return Admin
|
|
}
|
|
}
|
|
}
|
|
</script>
|