Skip to content
Commits on Source (2)
Hide whitespace changes
Inline Side-by-side
src/app/common/components/marketing/footer.component.scss
View file @ 789b70d3
......@@ -4,10 +4,14 @@ m-marketing__footer {
display: block;
margin-top: 105px;
@media screen and (max-width: $m-grid-min-vp) {
margin-top: 80px;
}
@include m-theme() {
background: linear-gradient(
180deg,
themed($m-grey-50) 0.01%,
themed($m-bg-gradient-start) 0%,
themed($m-white) 100%
);
}
......
src/app/common/components/marketing/marketing-styles.scss 0 → 100644
View file @ 789b70d3
.m-marketing__main,
.m-marketing__section {
// Common
.m-marketing--title,
h1 {
font-weight: 900;
font-size: 42px;
line-height: 44px;
margin: 0 0 23px;
&.m-marketing--title__bigger-title {
font-size: 48px;
line-height: 53px;
margin-bottom: 26px;
}
em {
font-style: inherit;
text-decoration: inherit;
white-space: nowrap;
position: relative;
&::after {
content: '';
display: inline-block;
position: absolute;
background: rgba(80, 226, 195, 0.3);
top: 0.36em;
left: -0.03em;
right: -0.03em;
bottom: 0.22em;
pointer-events: none;
}
}
}
p.m-marketing__description {
font-size: 18px;
line-height: 27px;
margin: 0 0 36px;
}
ul.m-marketing__points {
list-style: disc;
margin: 0 0 45px;
padding: 0 0 0 1em;
font-size: 16px;
line-height: 21px;
> li {
margin-bottom: 19px;
&:last-child {
margin-bottom: 0;
}
}
}
// Style 1
.m-marketing__section--style-1 {
@include m-theme() {
background: linear-gradient(
180deg,
themed($m-white) 0%,
themed($m-bg-gradient-start) 100%
);
}
.m-marketing__wrapper {
padding: 95px 0 85px;
}
}
}
src/app/common/components/marketing/marketing.component.html
View file @ 789b70d3
<div class="m-marketing">
<ng-content select=".m-marketing__main"></ng-content>
<div class="m-marketing__mainWrapper">
<ng-content select=".m-marketing__main"></ng-content>
</div>
<div class="m-marketing__sep" *ngIf="bodyWrapper?.children?.length > 0"></div>
<div class="m-marketing__bodyWrapper" #bodyWrapper>
<ng-content select=".m-marketing__body"></ng-content>
<div class="m-marketing__extrasWrapper" #bodyWrapper>
<ng-content select=".m-marketing__extras"></ng-content>
</div>
</div>
......
src/app/common/components/marketing/marketing.component.scss
View file @ 789b70d3
......@@ -37,11 +37,10 @@ m-marketing {
}
}
.m-marketing__body {
> * > * {
max-width: 1084px;
margin: 0 auto;
box-sizing: border-box;
}
.m-marketing__wrapper,
.m-marketing__extras > * > * {
max-width: 1084px;
margin: 0 auto;
box-sizing: border-box;
}
}
src/app/foundation/buttons.scss
View file @ 789b70d3
@import './grid-values';
@import '../../stylesheets/themes';
.mf-button {
display: inline-block;
padding: 14px 32px;
font: inherit;
font-size: 18px;
line-height: 24px;
border: 1px solid;
......@@ -8,6 +12,10 @@
font-weight: 400;
cursor: pointer;
user-select: none;
white-space: nowrap;
text-align: center;
appearance: none;
text-decoration: none;
@include m-theme() {
background: themed($m-blue);
......@@ -15,6 +23,18 @@
border-color: themed($m-blue);
}
@media screen and (max-width: $m-grid-min-vp) {
display: block;
font-size: 15px;
padding: 12px 15px;
}
&.mf-button--always-inline {
@media screen and (max-width: $m-grid-min-vp) {
display: inline-block;
}
}
&.mf-button--hollow {
@include m-theme() {
background: themed($m-white);
......
src/app/modules/upgrades/buy-tokens.component.html
View file @ 789b70d3
<div class="m-upgrades__buyTokens">
<div class="m-upgradesBuyTokens__body">
<h2>Buy Tokens</h2>
<ng-template #buyTokensRateTpl>
32 tokens = 32,000 page views
</ng-template>
<p class="m-upgradesBuyTokens__description">
Expand your reach with Boost and support your favorite channels with Wire.
</p>
<div class="m-upgrades__buyTokens">
<div class="m-upgradesBuyTokens__wrapper">
<div class="m-upgradesBuyTokens__body">
<h2>Buy Tokens</h2>
<p>
<a>Learn more about tokens</a>
</p>
</div>
<p class="m-upgradesBuyTokens__description">
Expand your reach with Boost and support your favorite channels with
Wire.
</p>
<div class="m-upgradesBuyTokens__form">
<div class="upgradesBuyTokens__amount">
<label for="m-upgradesBuyTokens__amountInput">$</label>
<input
type="number"
name="amount"
id="m-upgradesBuyTokens__amountInput"
/>
<p>
<a>Learn more about tokens</a>
</p>
</div>
<div class="upgradesBuyTokens__rate">
32 tokens = 32,000 page views
<div class="m-upgradesBuyTokens__form">
<div class="upgradesBuyTokens__amount">
<label for="m-upgradesBuyTokens__amountInput">$</label>
<input
type="number"
name="amount"
id="m-upgradesBuyTokens__amountInput"
/>
</div>
<div class="upgradesBuyTokens__rate">
<ng-container *ngTemplateOutlet="buyTokensRateTpl"></ng-container>
</div>
<div class="upgradesBuyTokens__action">
<button class="mf-button">Buy Tokens</button>
</div>
</div>
<div class="upgradesBuyTokens__action">
<button class="m-upgrades__button">Buy Tokens</button>
<div class="m-upgradesBuyTokens__overflownRate">
<ng-container *ngTemplateOutlet="buyTokensRateTpl"></ng-container>
</div>
</div>
</div>
src/app/modules/upgrades/buy-tokens.component.scss
View file @ 789b70d3
......@@ -3,17 +3,28 @@ m-upgrades__buyTokens {
}
.m-upgrades__buyTokens {
position: relative;
padding: 40px 60px 60px;
margin-bottom: 105px;
background: #726061;
color: #ffffff;
.m-upgradesBuyTokens__wrapper {
padding: 40px 60px 60px;
background: url('http://placekitten.com/591/362') no-repeat right center
#726061;
background-size: contain;
color: #ffffff;
@media screen and (max-width: $m-grid-min-vp) {
background-image: none;
padding: 30px;
margin: 0 20px;
}
}
.m-upgradesBuyTokens__body {
max-width: 320px;
}
h2 {
margin: 0 0 12px;
font-size: 32px;
font-weight: 900;
line-height: 43px;
......@@ -27,6 +38,7 @@ m-upgrades__buyTokens {
}
&.m-upgradesBuyTokens__description {
margin-bottom: 25px;
opacity: 0.6;
}
}
......@@ -51,6 +63,10 @@ m-upgrades__buyTokens {
@include m-theme() {
color: themed($m-grey-300);
}
@media screen and (max-width: $m-grid-min-vp) {
display: none;
}
}
.upgradesBuyTokens__amount {
......@@ -93,7 +109,21 @@ m-upgrades__buyTokens {
box-shadow: 0 1px 0 rgba(themed($m-black), 0.2);
}
}
@media screen and (max-width: $m-grid-min-vp) {
max-width: calc(100% - 20px);
}
}
}
}
.m-upgradesBuyTokens__overflownRate {
display: none;
margin: 24px 0 0;
color: #9b9b9b;
@media screen and (max-width: $m-grid-min-vp) {
display: block;
}
}
}
src/app/modules/upgrades/upgrade-options.component.scss
View file @ 789b70d3
......@@ -11,7 +11,7 @@ m-upgrades__upgradeOptions {
@media screen and (max-width: $m-grid-min-vp) {
display: block;
margin: 0 40px 25px;
margin: 0 40px 20px;
}
h2 {
......@@ -147,7 +147,6 @@ m-upgrades__upgradeOptions {
}
.m-upgradesUpgradeOptionsPlan__action {
display: inline-block;
margin-top: 25px;
}
}
......
src/app/modules/upgrades/upgrades.component.html
View file @ 789b70d3
<m-marketing class="m-upgrades" pageTitle="Upgrade your account" i18n-pageTitle>
<div class="m-marketing__main">
<section class="m-upgrades__grid m-upgrades__mainFeatures">
<div class="m-upgrades__gridColumn--5">
<h1>Upgrade your Minds experience</h1>
<div class="m-marketing__main m-marketing__section--style-1">
<div class="m-marketing__wrapper">
<h1 class="m-marketing--title__bigger-title" i18n>
Upgrade you Minds experience
</h1>
<p class="m-upgrades__description">
Minds offers a unique range of powerful upgrades that will supercharge
your Minds experience.
</p>
<p class="m-marketing__description" i18n>
Minds offers a unique range of powerful upgrades that will supercharge
your Minds experience.
</p>
<ul class="m-upgrades__features">
<li>
TBD
</li>
<li>
TBD
</li>
<li>
TBD
</li>
</ul>
<p>
<a class="m-upgrades__button m-upgrades__button--hollow"
>Upgrade Now</a
>
</p>
</div>
<div class="m-upgrades__gridColumn--7">
<!-- Main assets here -->
</div>
</section>
<section class="m-upgrades__grid">
<ul class="m-upgrades__gridColumn--12 m-upgrades__featuredIn">
<li>As featured in</li>
<li class="m-upgrades__featuredInItem--big">
<img src="" alt="BBC" />
</li>
<li><img src="" alt="Fox News" /></li>
<li><img src="" alt="Forbes" /></li>
<li><img src="" alt="TechCrunch" /></li>
<li><img src="" alt="Reuters" /></li>
<li><img src="" alt="Wired" /></li>
<li><img src="" alt="The Joe Rogan Experience" /></li>
<ul class="m-marketing__points">
<li>Lorem ipsum dolor sit amet.</li>
<li>Aliquam eveniet impedit maiores sapiente.</li>
<li>Aperiam laudantium nemo non soluta.</li>
</ul>
</section>
<a class="mf-button mf-button--hollow" i18n>
Upgrade now
</a>
</div>
</div>
<div class="m-marketing__body">
<div class="m-marketing__extras">
<m-upgrades__upgradeOptions></m-upgrades__upgradeOptions>
</div>
<div class="m-marketing__body">
<div class="m-marketing__extras">
<m-upgrades__buyTokens></m-upgrades__buyTokens>
</div>
</m-marketing>
src/app/modules/upgrades/upgrades.component.scss
View file @ 789b70d3
......@@ -73,5 +73,9 @@
m-upgrades__upgradeOptions {
margin-bottom: 110px;
@media screen and (max-width: $m-grid-min-vp) {
margin-bottom: 40px;
}
}
}
src/stylesheets/themes.scss
View file @ 789b70d3
......@@ -121,6 +121,7 @@ $themes: (
m-white: $white,
m-white-always: $white,
m-body-bg: #f8f8f8,
m-bg-gradient-start: #f9fafc,
m-warn-bg: $amber-light,
m-warn-fg: $black,
m-facebook: $facebook,
......@@ -159,6 +160,7 @@ $themes: (
m-white: lighten($grey-990, $percent),
m-white-always: $white,
m-body-bg: lighten(#080808, $percent),
m-bg-gradient-start: #292827,
m-blue-dark: lighten($blue-bright, 15%),
m-blue: $blue-bright,
m-blue-light: $blue-dark,
......@@ -215,6 +217,7 @@ $m-black-always: 'm-black-always';
$m-white: 'm-white';
$m-white-always: 'm-white-always';
$m-body-bg: 'm-body-bg';
$m-bg-gradient-start: 'm-bg-gradient-start';
$m-blue-dark: 'm-blue-dark';
$m-blue: 'm-blue';
......