rayelliott
/
marc-leopold
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

content-page layout

This commit is contained in:
ManjaroOne666 2019-01-03 17:52:38 +00:00
parent 7af9423d5b
commit 2b754c6c51
2 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/scss/_globals.scss
View File

@ -3,7 +3,7 @@ $bp__m: 40em;
// layout optomised for larger screens // layout optomised for larger screens
$bp__layout: $bp__m; $bp__layout: $bp__m;
$site-menu__header-width: 3em; $site-menu__header-width: 3rem;
$site-menu__header-height: 3em; $site-menu__header-height: 3rem;
$color__bg-menu: #f00; $color__bg-menu: #f00;

33
components/ContentPage.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="content-page"> <div class="content-page">
<h1>{{ heading }}</h1> <h1 class="page-heading">{{ heading }}</h1>
<section class="content-container"> <section class="content-container">
<slot></slot> <slot></slot>
</section> </section>
@ -61,9 +61,13 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$z-index-bottom: 5;
$z-index-top: 10;
.content-page { .content-page {
position: relative; position: relative;
display: flex;
flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: $site-menu__header-width 0 0 0; padding: $site-menu__header-width 0 0 0;
@ -76,12 +80,34 @@ export default {
} }
.content-container { .content-container {
z-index: 10; z-index: $z-index-top;
position: relative; position: relative;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
@media (min-width: $bp__layout) {
position: absolute;
width: 50%;
top: 0;
right: 0;
}
} }
.background-container { .background-container {
z-index: 5; z-index: $z-index-bottom
}
.page-heading {
z-index: $z-index-top;
position: relative;
@media (min-width: $bp__layout) {
max-width: 50%;
padding-right: $site-menu__header-width;
}
} }
.background { .background {
@ -94,6 +120,7 @@ export default {
.background-img { .background-img {
background-size: cover; background-size: cover;
background-position: center center;
opacity: .5; opacity: .5;
} }
</style> </style>