joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-27 07:16:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed dash school

Browse source
This commit is contained in:
Lee Wong 2017-07-03 22:54:43 +07:00 • committed by tungfa
parent 5520cd4cac
commit 672d2bf126
5 changed files with 181 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

8
_includes/hero/school.html
View file

@ -1,5 +1,5 @@
<div class="hero" id="hero"> <div class="hero" id="hero">
<div class="hero__background hero__background_school"> <div class="hero__background">
{% srcset hero/community.jpg ppi:1,2 class="hero__background-image" %} {% srcset hero/community.jpg ppi:1,2 class="hero__background-image" %}
{% srcset_source width:1920 %} {% srcset_source width:1920 %}
{% srcset_source width:960 %} {% srcset_source width:960 %}
@ -15,11 +15,11 @@
<p class="hero__lead">by Amanda B. Johnson</p> <p class="hero__lead">by Amanda B. Johnson</p>
<div class="hero__buttons"> <div class="hero__buttons">
<a href="#" class="btn-green">Watch now</a> <a href="https://youtu.be/e7UwwcCKj4Y?list=PLiFMZOlhgsYKKOUOVjQjESCXfR1cCYCod" class="btn-white-solid" target="_blank">Watch now</a>
<a href="#" class="btn-green">Youtube</a> <a href="https://www.youtube.com/channel/UCAzD2v9Yx4a4iS2_-unODkA" class="btn-transparent" target="_blank">Youtube</a>
</div> </div>
</div> </div>
<!-- Hero stripe --> <!-- Hero stripe -->
<div class="hero__stripe"></div> <div class="hero__stripe hero__stripe--grey"></div>
</div> </div>

34
school/index.html
View file

@ -7,7 +7,7 @@ description: pages.community.description
{% include hero/school.html %} {% include hero/school.html %}
<div class="page"> <div class="page page--school">
<section class="section"> <section class="section">
<div class="section__content"> <div class="section__content">
<div class="row"> <div class="row">
@ -104,37 +104,47 @@ description: pages.community.description
</section> </section>
<section class="section"> <section class="section">
<h4 class="school__subheading">Dash detailed</h4> <div class="school__content">
<h3 class="school__heading">About</h3>
<div class="section__content">
<div class="row"> <div class="row">
<div class="col-sm-7"> <div class="col-sm-6">
<h3 class="school__heading">
About <br>
Dash: detailed
</h3>
<p class="school__descr"> <p class="school__descr">
DASH: Detailed has been published every Wednesday since it was launched in June, 2016. DASH: Detailed has been published every Wednesday since it was launched in June, 2016.
</p> </p>
<p> <p class="school__text">
Hosted and written by Amanda B. Johnson, and produced by Pete Eyre, the series is funded directly by Dash's treasury according to stakeholder vote, making it the world's first Youtube show to be funded by blockchain. Featuring event analysis, product updates, and industry interviews, DASH: Detailed is suitable for seasoned investors and newcomers alike. Hosted and written by Amanda B. Johnson, and produced by Pete Eyre, the series is funded directly by Dash's treasury according to stakeholder vote, making it the world's first Youtube show to be funded by blockchain. Featuring event analysis, product updates, and industry interviews, DASH: Detailed is suitable for seasoned investors and newcomers alike.
</p> </p>
</div> </div>
<div class="col-sm-4 col-sm-offset-1"> <div class="col-sm-4 col-sm-offset-2">
<h2 class="school__team-heading">Dash Detailed: Team</h2> <div class="school__team">
<div class="clearfix"> <h2 class="school__team-heading">
Dash Detailed:
Team
</h2>
<div class="clearfix school__member-row">
<img src="/assets/img/blog/amigos.png" class="school__ava pull-left"> <img src="/assets/img/blog/amigos.png" class="school__ava pull-left">
<div class="pull-right"> <div class="pull-right">
<b class="school__author">Amanda B.Johnson</b> <div class="school__author">Amanda B.Johnson
<p>Host&Writter</p> <p>Host&Writter</p>
</div> </div>
</div> </div>
<div class="clearfix"> </div>
<div class="clearfix school__member-row">
<img src="/assets/img/blog/amigos.png" class="school__ava pull-left"> <img src="/assets/img/blog/amigos.png" class="school__ava pull-left">
<div class="pull-right"> <div class="pull-right">
<b class="school__author">Pete Eyre</b> <div class="school__author">
Pete Eyre
<p>Video Editor</p> <p>Video Editor</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</section> </section>
</div> </div>

15
src/scss/_buttons.scss
View file

@ -73,3 +73,18 @@
color: $color-white !important; color: $color-white !important;
} }
} }
.btn-transparent {
@extend .btn;
background-color: transparent;
color: $color-white !important;
border: 1px solid $color-white;
}
.btn-gray {
@extend .btn;
box-shadow: none;
background-color: transparent;
color: $color-black !important;
border: 1px solid #b5b5b5
}

3
src/scss/_page.scss
View file

@ -26,4 +26,7 @@ $m: 'page';
&--wallets { &--wallets {
} }
&--school {
background: $color-gray-light;
}
} }

86
src/scss/_school.scss
View file

@ -3,20 +3,33 @@ $m: 'video-post';
.#{$m} { .#{$m} {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
padding: 0 pxToRem(20px);
margin-bottom: pxToRem(40px); margin-bottom: pxToRem(40px);
max-width: 500px; max-width: 500px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
overflow-wrap: break-word; overflow-wrap: break-word;
background: #fff;
border: 1px solid #ebebeb;
border-radius: 5px;
height: 500px;
cursor: pointer;
overflow: hidden;
transition: .3s all;
&:hover {
opacity: 0.7;
}
&__title { &__title {
@include font-title-large(); padding: 0 pxToRem(20px);
font-size: 1.3em;
margin-bottom: pxToRem(10px); margin-bottom: pxToRem(10px);
color: $color-black;
a { a {
color: $color-blue; color: $color-black;
} }
} }
&__date { &__date {
display: inline-block; display: inline-block;
margin-bottom: pxToRem(10px); margin-bottom: pxToRem(10px);
@ -37,9 +50,10 @@ $m: 'video-post';
@include overflow-image(); @include overflow-image();
} }
&__description{ &__description{
color: $gray-base; padding: 0 pxToRem(20px);
font-size: $font-size-base; color: #5e5e5e;
line-height: 1.3; font-size: 0.7em;
line-height: 1.5;
} }
&--sidebar, &--sidebar,
&--text-only { &--text-only {
@ -56,35 +70,71 @@ $m: 'video-post';
} }
} }
.school{ .school{
&__content{
width: 1280px;
max-width: 96%;
max-width: calc(100% - 40px);
margin: 0 auto 100px;
}
&__text{
font-size: 0.9em;
color: #5e5e5e;
font-weight: $font-weight-light;
}
&__subheading { &__subheading {
margin-left: 80px; color: $color-black;
color: $brand-primary;
font-weight: $headings-font-weight; font-weight: $headings-font-weight;
} }
&__heading { &__heading {
margin-left: 80px; font-size: 2.2em;
font-size: $font-size-h1; line-height: 1.2;
color: $brand-primary; color: $color-black;
font-weight: $headings-font-weight; font-weight: $font-weight-regular;
} }
&__descr { &__descr {
color: $gray-base; color: $color-black;
font-size: $font-size-base; max-width: 450px;
margin-top: 42px;
font-size: 1.3em;
font-weight: $font-weight-regular;
line-height: 1.3; line-height: 1.3;
margin-bottom: 20px; margin-bottom: 50px;
} }
&__ava { &__ava {
margin-bottom: 15px; margin-right: 20px;
margin-right: 40px; border-radius: 50%;
width: 75px; width: 75px;
height: 75px; height: 75px;
} }
&__author { &__author {
font-size: $font-size-base; font-size: $font-size-base;
font-weight: $headings-font-weight; font-weight: $headings-font-weight;
p {
font-size: 0.75em;
color: #8e8e8e;
font-weight: $font-weight-light;
}
}
&__team {
background: #f7f9fa;
border: 1px solid #ebebeb;
border-radius: 5px;
padding: 31px 33px 11px;
} }
&__team-heading { &__team-heading {
margin-bottom: 15px; font-weight: $font-weight-regular;
font-size: 1em;
margin-bottom: 25px;
max-width: 150px;
}
&__member-row {
padding-top: 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
&:nth-of-type(even){
border-top: 1px solid #ebebeb;
}
} }
} }