From 672d2bf126ae7bf4fe6541bc0a23624fb6bfa1d3 Mon Sep 17 00:00:00 2001 From: Lee Wong Date: Mon, 3 Jul 2017 22:54:43 +0700 Subject: [PATCH] fixed dash school --- _includes/hero/school.html | 8 +- school/index.html | 48 +++++---- src/scss/_buttons.scss | 15 +++ src/scss/_page.scss | 3 + src/scss/_school.scss | 210 +++++++++++++++++++++++-------------- 5 files changed, 181 insertions(+), 103 deletions(-) diff --git a/_includes/hero/school.html b/_includes/hero/school.html index 7fe8389..ed64b71 100644 --- a/_includes/hero/school.html +++ b/_includes/hero/school.html @@ -1,5 +1,5 @@
-
+
{% srcset hero/community.jpg ppi:1,2 class="hero__background-image" %} {% srcset_source width:1920 %} {% srcset_source width:960 %} @@ -15,11 +15,11 @@

by Amanda B. Johnson

- Watch now - Youtube + Watch now + Youtube
-
+
diff --git a/school/index.html b/school/index.html index adc3eff..f5570ad 100644 --- a/school/index.html +++ b/school/index.html @@ -7,7 +7,7 @@ description: pages.community.description {% include hero/school.html %} -
+
@@ -104,32 +104,42 @@ description: pages.community.description
-

Dash detailed

-

About

-
+
-
+
+

+ About
+ Dash: detailed +

DASH: Detailed has been published every Wednesday since it was launched in June, 2016.

-

+

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.

-
-

Dash Detailed: Team

-
- -
- Amanda B.Johnson -

Host&Writter

+
+
+

+ Dash Detailed: + Team +

+
+ +
+
Amanda B.Johnson +

Host&Writter

+
+
-
-
- -
- Pete Eyre -

Video Editor

+
+ +
+
+ Pete Eyre +

Video Editor

+
+
diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss index 4bd8c91..faad0d9 100644 --- a/src/scss/_buttons.scss +++ b/src/scss/_buttons.scss @@ -73,3 +73,18 @@ 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 +} diff --git a/src/scss/_page.scss b/src/scss/_page.scss index 42937d8..af355fd 100644 --- a/src/scss/_page.scss +++ b/src/scss/_page.scss @@ -26,4 +26,7 @@ $m: 'page'; &--wallets { } + &--school { + background: $color-gray-light; + } } diff --git a/src/scss/_school.scss b/src/scss/_school.scss index 190574c..3c75045 100644 --- a/src/scss/_school.scss +++ b/src/scss/_school.scss @@ -1,91 +1,141 @@ $m: 'video-post'; .#{$m} { - display: inline-block; - vertical-align: top; - padding: 0 pxToRem(20px); - margin-bottom: pxToRem(40px); - max-width: 500px; - margin-left: auto; - margin-right: auto; - overflow-wrap: break-word; + display: inline-block; + vertical-align: top; + margin-bottom: pxToRem(40px); + max-width: 500px; + margin-left: auto; + margin-right: auto; + overflow-wrap: break-word; + background: #fff; + border: 1px solid #ebebeb; + border-radius: 5px; + height: 500px; + cursor: pointer; + overflow: hidden; + transition: .3s all; - &__title { - @include font-title-large(); - margin-bottom: pxToRem(10px); - a { - color: $color-blue; - } - } - &__date { - display: inline-block; - margin-bottom: pxToRem(10px); - color: transparentize($color-black, 0.5); - } + &:hover { + opacity: 0.7; + } - &__preview { - @include overflow-image-wrapper(); - background: rgba($color-blue, 0.1); - margin-bottom: pxToRem(40px); + &__title { + padding: 0 pxToRem(20px); + font-size: 1.3em; + margin-bottom: pxToRem(10px); + color: $color-black; + a { + color: $color-black; + } + } - &--no-image { - // Hide images until we actually have htem - padding-bottom: 1px; - } - } - &__image { - @include overflow-image(); - } - &__description{ - color: $gray-base; - font-size: $font-size-base; - line-height: 1.3; - } - &--sidebar, - &--text-only { - .#{$m}__preview { - display: none; - } - } - &--sidebar { - .#{$m} { - &__title { - @include font-title-medium; - } - } - } + &__date { + display: inline-block; + margin-bottom: pxToRem(10px); + color: transparentize($color-black, 0.5); + } + + &__preview { + @include overflow-image-wrapper(); + background: rgba($color-blue, 0.1); + margin-bottom: pxToRem(40px); + + &--no-image { + // Hide images until we actually have htem + padding-bottom: 1px; + } + } + &__image { + @include overflow-image(); + } + &__description{ + padding: 0 pxToRem(20px); + color: #5e5e5e; + font-size: 0.7em; + line-height: 1.5; + } + &--sidebar, + &--text-only { + .#{$m}__preview { + display: none; + } + } + &--sidebar { + .#{$m} { + &__title { + @include font-title-medium; + } + } + } } .school{ - &__subheading { - margin-left: 80px; - color: $brand-primary; - font-weight: $headings-font-weight; - } - &__heading { - margin-left: 80px; - font-size: $font-size-h1; - color: $brand-primary; - font-weight: $headings-font-weight; - } - &__descr { - color: $gray-base; - font-size: $font-size-base; - line-height: 1.3; - margin-bottom: 20px; - } - &__ava { - margin-bottom: 15px; - margin-right: 40px; - width: 75px; - height: 75px; - } - &__author { - font-size: $font-size-base; - font-weight: $headings-font-weight; - } - &__team-heading { - margin-bottom: 15px; - } + &__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 { + color: $color-black; + font-weight: $headings-font-weight; + } + &__heading { + font-size: 2.2em; + line-height: 1.2; + color: $color-black; + font-weight: $font-weight-regular; + } + &__descr { + color: $color-black; + max-width: 450px; + margin-top: 42px; + font-size: 1.3em; + font-weight: $font-weight-regular; + line-height: 1.3; + margin-bottom: 50px; + } + &__ava { + margin-right: 20px; + border-radius: 50%; + width: 75px; + height: 75px; + } + &__author { + font-size: $font-size-base; + 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 { + 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; + } + } }