LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Updated styling and structure of newsletter signup

Browse source
This commit is contained in:
ポール ウェッブ 2018-06-06 17:01:29 -05:00
parent ecf6ba62a6
commit 99b357889e
3 changed files with 103 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
content/.vuepress/components/EmailSubscribe.vue
View file

@ -1,9 +1,11 @@
<template> <template>
<div id="email-subscribe"> <div id="email-subscribe" class="newsletter-cta">
<h3 class="title">Subscribe to our developer newsletter!</h3> <h3 class="newsletter-cta__title">Subscribe to our developer newsletter</h3>
<input type="text" class="input" v-model="emailAddress" placeholder="your@email.com"> <div>
<a class="__button-black" href="#" v-on:click.prevent="subscribe">Subscribe</a> <input type="text" class="newsletter-cta__input" v-model="emailAddress" placeholder="you@domain.tld">
<p v-if="message" class="message">{{ message }}</p> <a class="newsletter-cta__submit" href="#" v-on:click.prevent="subscribe">Subscribe</a>
</div>
<p v-if="message" class="newsletter-cta__message">{{ message }}</p>
</div> </div>
</template> </template>
@ -47,24 +49,84 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "../scss/init/colors";
@import "../scss/init/extends";
@import "../scss/init/mixins";
#email-subscribe { .newsletter-cta {
background: #ddd; background-color: rgba($black, 0.2);
padding: 1rem 0; padding-top: 1rem;
padding-bottom: 1rem;
text-align: center; text-align: center;
.title {
margin-bottom: 0.5rem; > div:first-of-type {
margin-right: auto;
margin-left: auto;
width: 500px;
} }
.input {
border: 1px solid black; &::after {
padding: 0.65rem; @include clearfix;
background: white;
margin-right: 1rem;
width: 18rem;
}
.message {
margin-top: 1rem;
} }
} }
.newsletter-cta__title {
font-size: 0.8rem;
letter-spacing: 0.05rem;
margin-bottom: 0.75rem;
text-transform: uppercase;
}
.newsletter-cta__input,
.newsletter-cta__submit {
@extend .__button-padding-horizontal;
border-style: solid;
border-width: 1px;
}
.newsletter-cta__input {
width: calc(100% - 112px); height: 38px;
background-color: $white;
float: left;
transition: border 0.2s;
&:not(:focus) {
border-top-color: $black;
border-right-color: transparent;
border-bottom-color: $black;
border-left-color: $black;
}
&:focus {
border-top-color: mix($black, $teal, 20%);
border-right-color: transparent;
border-bottom-color: mix($black, $teal, 20%);
border-left-color: mix($black, $teal, 20%);
}
}
.newsletter-cta__submit {
@extend .__button-basic;
@extend .__button-padding-vertical;
color: $white;
float: right;
left: -1px;
width: 112px;
&:not(:hover) {
background-color: $black;
border-color: $black;
}
&:hover {
background-color: $teal;
border-color: mix($black, $teal, 20%);
}
}
.newsletter-cta__message {
padding-top: 1rem;
padding-bottom: 1rem;
}
</style> </style>

4
content/.vuepress/scss/init/_extends.scss
View file

@ -11,8 +11,10 @@
.__button-basic { .__button-basic {
@extend .__button-base; @extend .__button-base;
@extend .__button-padding-vertical; }
.__button-plain {
@extend .__button-base;
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;

13
content/.vuepress/scss/partials/_footer.scss
View file

@ -4,6 +4,19 @@
font-size: 1rem; font-size: 1rem;
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
position: relative;
@media (max-width: 980px) {
&::before {
width: 3rem; height: 100%;
bottom: 0; right: 0;
background-image: linear-gradient(90deg, rgba($black, 0), $black 50%, $black); // iOS Safari cannot handle `transparent`
content: "";
position: absolute;
z-index: 2;
}
}
> div:first-of-type { > div:first-of-type {
@media (max-width: 980px) { @media (max-width: 980px) {