Agile611/the-example-app-nodejs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style landing page modules and start reorganising css

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-02 13:34:34 +02:00
committed by Benedikt Rötsch
parent 3459c4c32c
commit e955555f1a
13 changed files with 334 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
assets/stylesheets/course.css
View File

@@ -4,7 +4,7 @@
min-height: 30vh;
padding: var(--grid-gutter);
border-radius: 7px;
border-radius: var(--border-radius);
box-shadow: var(--card-box-shadow);
& > * + * {
@@ -19,6 +19,8 @@
display: inline-block;
margin-right: var(--grid-gutter);
color: var(--color-text-grey);
font-size: 0.75em;
letter-spacing: 2px;
}
@element title {
@@ -34,7 +36,7 @@
}
}
@element link-wapper {
@element link-wrapper {
flex: 0 0 auto;
}
@@ -44,5 +46,8 @@
border-bottom: 1px solid var(--color-link-content);
text-transform: uppercase;
color: var(--color-link-content);
font-size: 0.75em;
line-height: 2.17;
letter-spacing: 2px;
}
}

1
assets/stylesheets/landing-page/index.css Normal file
View File

@@ -0,0 +1 @@
@import './modules';

32
assets/stylesheets/landing-page/modules/hero-image.css Normal file
View File

@@ -0,0 +1,32 @@
@block module-hero-image {
@element wrapper {
position: relative;
overflow: hidden;
max-height: 60vh;
border-radius: var(--border-radius);
}
@element image{
display: block;
width: 100%;
height: auto;
}
@element headline-wrapper {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
@element headline {
color: #fff;
text-align: center;
font-size: 4.5vw;
text-shadow: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);
}
}

98
assets/stylesheets/landing-page/modules/highlighted-course.css Normal file
View File

@@ -0,0 +1,98 @@
@block module-higlighted-course {
@element wrapper {
position: relative;
overflow: hidden;
max-height: 60vh;
border-radius: var(--border-radius);
}
@element image {
display: block;
width: 100%;
height: auto;
}
@element overlay {
z-index: 1;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.8;
border-radius: 4px;
background-color: #3c3d41;
}
@element content {
z-index: 2;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
padding: var(--grid-gutter) calc(var(--grid-gutter) * 2);
color: var(--color-text-dark-bg-grey);
}
@element categories {
flex: 0 0 var(--line-height);
}
@element category {
display: inline-block;
margin-right: var(--grid-gutter);
font-size: 0.75em;
letter-spacing: 2px;
}
@element title {
flex: 1 1 auto;
margin: 0;
color: var(--color-text-dark-bg);
font-size: 4vw;
line-height: 1.3;
@media (--breakpoint-desktop) {
font-size: 3.25em;
}
}
@element description-wrapper {
flex: 1 1 auto;
max-width: 400px;
line-height: 1.3;
@media (--breakpoint-desktop) {
font-size: 1.25em;
}
& p {
margin: 0;
}
}
@element link-wrapper {
flex: 0 0 auto;
margin-top: var(--grid-gutter);
}
@element link {
display: inline-block;
border-bottom: 1px solid var(--color-text-dark-bg);
text-transform: uppercase;
color: var(--color-text-dark-bg);
font-size: 0.75em;
line-height: 2.17;
letter-spacing: 2px;
}
}

5
assets/stylesheets/module-landing.css → assets/stylesheets/landing-page/modules/index.css
View File

@@ -1,4 +1,7 @@
.module {
@import './hero-image';
@import './highlighted-course';
@block module {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 2vw;

2
assets/stylesheets/style.css
View File

@@ -13,5 +13,5 @@
@import './footer';
@import './course';
@import './module-landing';
@import './landing-page';
@import './module-lesson';

1
assets/stylesheets/variables.css
View File

@@ -17,6 +17,7 @@
--color-text-default: #2a303a;
--color-text-grey: #8091a5;
--color-text-dark-bg: #fff;
--color-text-dark-bg-grey: #a9b9c0;
--color-link-content: var(--color-palette-blue);

166
public/stylesheets/style.css
View File

@@ -1406,7 +1406,7 @@ body {
min-height: 30vh;
padding: 22px;
border-radius: 7px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
}
@@ -1425,6 +1425,8 @@ body {
display: inline-block;
margin-right: 22px;
color: #8091a5;
font-size: 0.75em;
letter-spacing: 2px;
}
.course-card__title {
@@ -1444,7 +1446,7 @@ body {
margin: 0;
}
.course-card__link-wapper {
.course-card__link-wrapper {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
@@ -1456,12 +1458,170 @@ body {
border-bottom: 1px solid #5c9fef;
text-transform: uppercase;
color: #5c9fef;
font-size: 0.75em;
line-height: 2.17;
letter-spacing: 2px;
}
.module-hero-image {}
.module-hero-image__wrapper {
position: relative;
overflow: hidden;
max-height: 60vh;
border-radius: 3px;
}
.module-hero-image__image {
display: block;
width: 100%;
height: auto;
}
.module-hero-image__headline-wrapper {
position: absolute;
left: 0;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.module-hero-image__headline {
color: #fff;
text-align: center;
font-size: 4.5vw;
text-shadow: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0, 0, 0, .15),
0px 24px 2px rgba(0, 0, 0, .1),
0px 34px 30px rgba(0, 0, 0, .1);
}
.module-higlighted-course {}
.module-higlighted-course__wrapper {
position: relative;
overflow: hidden;
max-height: 60vh;
border-radius: 3px;
}
.module-higlighted-course__image {
display: block;
width: 100%;
height: auto;
}
.module-higlighted-course__overlay {
z-index: 1;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.8;
border-radius: 4px;
background-color: #3c3d41;
}
.module-higlighted-course__content {
z-index: 2;
position: absolute;
left: 0;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 22px 44px;
color: #a9b9c0;
}
.module-higlighted-course__categories {
-webkit-box-flex: 0;
-ms-flex: 0 0 1.5em;
flex: 0 0 1.5em;
}
.module-higlighted-course__category {
display: inline-block;
margin-right: 22px;
font-size: 0.75em;
letter-spacing: 2px;
}
.module-higlighted-course__title {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin: 0;
color: #fff;
font-size: 4vw;
line-height: 1.3;
}
@media (min-width: 700px) {
.module-higlighted-course__title {
font-size: 3.25em;
}
}
.module-higlighted-course__description-wrapper {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
max-width: 400px;
line-height: 1.3;
}
@media (min-width: 700px) {
.module-higlighted-course__description-wrapper {
font-size: 1.25em;
}
}
.module-higlighted-course__description-wrapper p {
margin: 0;
}
.module-higlighted-course__link-wrapper {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin-top: 22px;
}
.module-higlighted-course__link {
display: inline-block;
border-bottom: 1px solid #fff;
text-transform: uppercase;
color: #fff;
font-size: 0.75em;
line-height: 2.17;
letter-spacing: 2px;
}
.module {
max-width: 980px;
margin: 0 auto;
padding: 0 2vw
padding: 0 2vw;
}
.module img {

2
views/index.pug
View File

@@ -15,4 +15,4 @@ block content
+moduleHeroImage(module)
when 'landingPageModuleHighlightedCourse'
+moduleHighlightedCourse(module)
+moduleHighlightedCourse(module, module.fields.course)

2
views/mixins/_courseCard.pug
View File

@@ -1,7 +1,7 @@
mixin courseCard(course = {fields: {title: '', description: '', categories: [], slug: ''}})
.course-card
.course-card__categories
if(course.fields.categories)
.course-card__categories
each category in course.fields.categories
a.course-card__category(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
h2.course-card__title= course.fields.title

6
views/mixins/_moduleCopy.pug
View File

@@ -1,5 +1,7 @@
mixin moduleCopy(module)
.module.module-copy
h1.module-copy__title #{module.fields.title}
h3.module-copy__headline #{module.fields.headline}
h1.module-copy__headline #{module.fields.headline}
div.module-copy__copy !{helpers.markdown(module.fields.copy)}
if module.fields.ctaTitle && module.fields.ctaLink
a.cta(href=module.fields.ctaLink)= module.fields.ctaTitle

5
views/mixins/_moduleHeroImage.pug
View File

@@ -1,5 +1,6 @@
mixin moduleHeroImage(module)
.module.module-hero-image
h2.module-hero-image__title #{module.fields.title}
h3.module-hero-image__headline #{module.fields.headline}
.module-hero-image__wrapper
.module-hero-image__headline-wrapper
h2.module-hero-image__headline #{module.fields.headline}
img.module-hero-image__image(src=`${module.fields.backgroundImage.fields.file.url}` alt=`${module.fields.backgroundImage.fields.title}`)

19
views/mixins/_moduleHighlightedCourse.pug
View File

@@ -1,6 +1,19 @@
include ./_courseCard
mixin moduleHighlightedCourse(module)
mixin moduleHighlightedCourse(module, course)
.module.module-higlighted-course
h2.module-higlighted-course__title #{module.fields.title}
+courseCard(module.fields.course)
.module-higlighted-course__wrapper
.module-higlighted-course__image-wrapper
if course.fields.image
img.module-hero-image__image(src=`${course.fields.image.fields.file.url}` alt=`${course.fields.image.fields.title}`)
.module-higlighted-course__overlay
.module-higlighted-course__content
if(course.fields.categories)
.module-higlighted-course__categories
each category in course.fields.categories
a.module-higlighted-course__category(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
h2.module-higlighted-course__title= course.fields.title
.module-higlighted-course__description-wrapper
p !{helpers.markdown(course.fields.shortDescription)}
.module-higlighted-course__link-wrapper
a.module-higlighted-course__link(href=`/courses/${course.fields.slug}${queryString}`) view course