Page.vue 795 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <script setup lang="ts">
  2. import PageFooter from './PageFooter.vue'
  3. import NextAndPrevLinks from './NextAndPrevLinks.vue'
  4. </script>
  5. <template>
  6. <main class="page">
  7. <div class="container">
  8. <slot name="top" />
  9. <Content class="content" />
  10. <PageFooter />
  11. <NextAndPrevLinks />
  12. <slot name="bottom" />
  13. </div>
  14. </main>
  15. </template>
  16. <style scoped>
  17. .page {
  18. padding-top: var(--header-height);
  19. }
  20. @media (min-width: 720px) {
  21. .page {
  22. margin-left: 16.4rem;
  23. }
  24. }
  25. @media (min-width: 960px) {
  26. .page {
  27. margin-left: 20rem;
  28. }
  29. }
  30. .container {
  31. margin: 0 auto;
  32. padding: 0 1.5rem 4rem;
  33. max-width: 48rem;
  34. }
  35. .content {
  36. padding-bottom: 1.5rem;
  37. }
  38. @media (max-width: 420px) {
  39. .content {
  40. /* fix carbon ads display */
  41. clear: both;
  42. }
  43. }
  44. </style>