<template>
  <div>
    <BaseLogo id="logo" size="smaller" center class="space-top" />
    <BaseContainer :width="width" center class="space-bottom">
      <BaseTitle v-if="title" center size="huge" class="centered">
        {{ title }}
      </BaseTitle>
      <slot />
    </BaseContainer>
  </div>
</template>

<script>
import BaseContainer from "@/components/base/BaseContainer";
import BaseLogo from "@/components/base/BaseLogo";
import BaseTitle from "@/components/base/BaseTitle";

export default {
  name: "LayoutMinimal",
  components: {
    BaseContainer,
    BaseLogo,
    BaseTitle
  },
  props: {
    width: {
      default: "",
      type: String
    },
    title: {
      default: "",
      type: String
    }
  }
};
</script>

<style lang="sass" scoped>
.space-top
  margin-top: 5rem

.space-bottom
  margin-bottom: 5rem
</style>
