diff --git a/assets/stylesheets/global/footer.css b/assets/stylesheets/global/footer.css
index fc567ad..00e54ca 100644
--- a/assets/stylesheets/global/footer.css
+++ b/assets/stylesheets/global/footer.css
@@ -51,8 +51,28 @@
flex: 1 1 auto;
display: flex;
align-items: center;
- font-size: 0.7em;
- color: var(--color-text-grey);
+ }
+
+ @element disclaimer-logo {
+ flex: 0 0 auto;
+ width: 24px;
+ height: 27px;
+ margin-right: var(--grid-gutter);
+ }
+
+ @element disclaimer-text {
+ flex: 1 1 auto;
+
+ color: var(--color-text-footer);
+ font-size: 0.75em;
+ line-height: 1.5;
+
+ & a {
+ text-decoration: underline;
+ &:hover {
+ text-decoration: none;
+ }
+ }
}
@element social {
diff --git a/assets/stylesheets/global/index.css b/assets/stylesheets/global/index.css
index 1e3a86a..ff5b55e 100644
--- a/assets/stylesheets/global/index.css
+++ b/assets/stylesheets/global/index.css
@@ -23,6 +23,8 @@ body {
}
#main__content {
flex: 1 0 auto;
+ display: flex;
+ align-items: stretch;
}
#main__footer {
flex: 0 0 auto;
diff --git a/assets/stylesheets/landing-page/index.css b/assets/stylesheets/landing-page/index.css
index 58c0d95..79e17ef 100644
--- a/assets/stylesheets/landing-page/index.css
+++ b/assets/stylesheets/landing-page/index.css
@@ -1 +1,5 @@
@import './modules';
+
+@block modules-container {
+ flex: 1 1 auto;
+}
diff --git a/assets/stylesheets/landing-page/modules/hero-image.css b/assets/stylesheets/landing-page/modules/hero-image.css
index c9899d0..be7b613 100644
--- a/assets/stylesheets/landing-page/modules/hero-image.css
+++ b/assets/stylesheets/landing-page/modules/hero-image.css
@@ -24,9 +24,14 @@
color: #fff;
text-align: center;
font-size: 4.5vw;
+ line-height: 1;
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);
+
+ @media (--breakpoint-desktop) {
+ font-size: 4em;
+ }
}
}
diff --git a/assets/stylesheets/layout/layout-sidebar.css b/assets/stylesheets/layout/layout-sidebar.css
index 619a21a..83ff7ac 100644
--- a/assets/stylesheets/layout/layout-sidebar.css
+++ b/assets/stylesheets/layout/layout-sidebar.css
@@ -36,8 +36,8 @@
@element content {
display: flex;
- flex-direction: column;
align-self: stretch;
+ align-items: stretch;
padding-top: calc(var(--grid-gutter) / 2);
@media (--breakpoint-desktop) {
diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css
index 790ce0a..da45035 100644
--- a/assets/stylesheets/variables.css
+++ b/assets/stylesheets/variables.css
@@ -25,6 +25,8 @@
--color-bg-grey: #f7f9fa;
--color-bg-separator: #e5ebed;
+ --color-text-footer: #a9b9c0;
+
--color-sidebar-bg: #f7f9fa;
--color-sidebar-seperator: #eeeeee;
diff --git a/public/images/contentful-logo.svg b/public/images/contentful-logo.svg
new file mode 100644
index 0000000..0c9203f
--- /dev/null
+++ b/public/images/contentful-logo.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 288da96..8fbbee9 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -813,12 +813,12 @@ input[type="reset"]:focus,
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
+ // flex-direction: column;
-ms-flex-item-align: stretch;
align-self: stretch;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
padding-top: 11px;
}
@@ -1121,8 +1121,33 @@ display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
- font-size: 0.7em;
- color: #8091a5;
+}
+
+.footer__disclaimer-logo {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: 24px;
+ height: 27px;
+ margin-right: 22px;
+}
+
+.footer__disclaimer-text {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+
+ color: #a9b9c0;
+ font-size: 0.75em;
+ line-height: 1.5;
+}
+
+.footer__disclaimer-text a {
+ text-decoration: underline;
+}
+
+.footer__disclaimer-text a:hover {
+ text-decoration: none;
}
.footer__social {
@@ -1297,6 +1322,12 @@ body {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
}
#main__footer {
@@ -1603,12 +1634,20 @@ github.com style (c) Vasily Polovnyov
color: #fff;
text-align: center;
font-size: 4.5vw;
+ line-height: 1;
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);
}
+@media (min-width: 700px) {
+
+ .module-hero-image__headline {
+ font-size: 4em;
+ }
+}
+
.module-higlighted-course {}
.module-higlighted-course__wrapper {
@@ -1745,6 +1784,12 @@ github.com style (c) Vasily Polovnyov
margin-top: 22px;
}
+.modules-container {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+
.lesson-module {
margin-top: 22px
}
diff --git a/views/courses.pug b/views/courses.pug
index 09e964f..251bceb 100644
--- a/views/courses.pug
+++ b/views/courses.pug
@@ -16,8 +16,9 @@ block content
li.sidebar-menu__item
a.sidebar-menu__link(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
section.layout-sidebar__content
- h1= title
- .courses.grid-list
- each course in courses
- .grid-list__item
- +courseCard(course)
+ .courses
+ h1= title
+ .grid-list
+ each course in courses
+ .grid-list__item
+ +courseCard(course)
diff --git a/views/index.pug b/views/index.pug
index 4eb1321..15f1616 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -5,7 +5,7 @@ include mixins/_moduleHeroImage
include mixins/_moduleHighlightedCourse
block content
- .container
+ .modules-container
each module in landingPage.fields.contentModules
case module.sys.contentType.sys.id
when 'landingPageModuleCopy'
diff --git a/views/layout.pug b/views/layout.pug
index e88de6c..2abd03c 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -66,9 +66,11 @@ html
img(src='/images/badge-google-play.svg')
.footer__lower
.footer__disclaimer
- p
- span This website and the materials found on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account.
- a(href='#todo') View details.
+ img.footer__disclaimer-logo(src='/images/contentful-logo.svg')
+ p.footer__disclaimer-text
+ | This website and the materials found on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account.
+ a(href='#todo') View on Github
+ | .
.footer__social
p
a(href='https://www.facebook.com/contentful/' target='_blank')
diff --git a/views/mixins/_courseCard.pug b/views/mixins/_courseCard.pug
index 8ea4e85..cee3a9a 100644
--- a/views/mixins/_courseCard.pug
+++ b/views/mixins/_courseCard.pug
@@ -1,7 +1,7 @@
mixin courseCard(course = {fields: {title: '', description: '', categories: [], slug: ''}})
.course-card
- if(course.fields.categories)
- .course-card__categories
+ .course-card__categories
+ if(course.fields.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