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

page headings

This commit is contained in:
ManjaroOne666 2019-01-24 09:44:26 +00:00
parent 729c57481d
commit a9806efb60
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/ContentPage.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<article class="content-page"> <article class="content-page">
<h1 class="page-heading">{{ heading }}</h1> <h1 v-if="heading !== ''" class="page-heading title">{{ heading }}</h1>
<section class="content-container"> <section class="content-container">
<div v-if="$slots.default" class="content"> <div v-if="$slots.default" class="content">
<slot></slot> <slot></slot>
@ -17,7 +17,8 @@ export default {
props: { props: {
heading: { heading: {
type: String, type: String,
required: true required: false,
default: '',
} }
}, },
@ -78,7 +79,7 @@ $z-index-top: 10;
@media (min-width: $bp__layout) { @media (min-width: $bp__layout) {
width: 50%; width: 50%;
padding: 2rem; padding: 1rem;
background-color: rgba(0, 0, 0, .3); background-color: rgba(0, 0, 0, .3);
} }
@ -89,10 +90,21 @@ $z-index-top: 10;
.page-heading { .page-heading {
z-index: $z-index-top; z-index: $z-index-top;
position: relative; position: relative;
margin: 2rem 1rem 1rem 2rem;
@media (min-width: $bp__layout) { @media (min-width: $bp__layout) {
max-width: 50%; width: 14em;
padding-right: $site-menu__header-width; max-width: calc(50% - #{$site-menu__header-width} - 3rem);
}
}
.title {
@include font-title();
color: $color__neutral-900;
font-size: 3.7vw;
@media (min-width: 90em) {
font-size: 3.5rem;
} }
} }

2
pages/services.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ContentPage heading="The Services Page Heading"> <ContentPage heading="My Services">
<!-- TODO need to disable this if on mobile --> <!-- TODO need to disable this if on mobile -->
<BackgroundImagePreloader slot="background" <BackgroundImagePreloader slot="background"
class="background-preloader" class="background-preloader"