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

several small styling adjustments

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-04 10:57:13 +02:00
committed by Benedikt Rötsch
parent 67fc0edf62
commit e62c3d8bfd
12 changed files with 110 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
assets/stylesheets/global/footer.css
View File

@@ -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 {

2
assets/stylesheets/global/index.css
View File

@@ -23,6 +23,8 @@ body {
}
#main__content {
flex: 1 0 auto;
display: flex;
align-items: stretch;
}
#main__footer {
flex: 0 0 auto;

4
assets/stylesheets/landing-page/index.css
View File

@@ -1 +1,5 @@
@import './modules';
@block modules-container {
flex: 1 1 auto;
}

5
assets/stylesheets/landing-page/modules/hero-image.css
View File

@@ -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;
}
}
}

2
assets/stylesheets/layout/layout-sidebar.css
View File

@@ -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) {

2
assets/stylesheets/variables.css
View File

@@ -25,6 +25,8 @@
--color-bg-grey: #f7f9fa;
--color-bg-separator: #e5ebed;
--color-text-footer: #a9b9c0;
--color-sidebar-bg: #f7f9fa;
--color-sidebar-seperator: #eeeeee;

9
public/images/contentful-logo.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 27">
<g fill="none" fill-rule="evenodd">
<path fill="#F8E419" d="M8.082 18.86l.002-.002a7.554 7.554 0 0 1-2.195-5.332c0-2.082.84-3.968 2.193-5.333L8.08 8.19a2.977 2.977 0 0 0 0-4.19 2.93 2.93 0 0 0-4.16 0A13.475 13.475 0 0 0 0 13.524a13.47 13.47 0 0 0 3.92 9.526 2.93 2.93 0 0 0 4.163 0 2.977 2.977 0 0 0 0-4.19"/>
<path fill="#56AED2" d="M8.268 8.14l.003.002a7.448 7.448 0 0 1 5.297-2.212c2.068 0 3.94.847 5.296 2.214l.005-.004a2.926 2.926 0 0 0 4.16 0 2.98 2.98 0 0 0 0-4.193A13.285 13.285 0 0 0 13.565 0a13.28 13.28 0 0 0-9.46 3.947 2.98 2.98 0 0 0 0 4.193 2.926 2.926 0 0 0 4.163 0"/>
<path fill="#E0534E" d="M18.863 18.65l-.003-.003a7.448 7.448 0 0 1-5.294 2.21 7.436 7.436 0 0 1-5.295-2.212v.004a2.926 2.926 0 0 0-4.16 0 2.98 2.98 0 0 0 0 4.19 13.285 13.285 0 0 0 9.46 3.946 13.28 13.28 0 0 0 9.46-3.948 2.98 2.98 0 0 0 0-4.194 2.926 2.926 0 0 0-4.163 0"/>
<path fill="#1E78A4" d="M8.27 8.352a2.93 2.93 0 0 1-4.164 0 2.977 2.977 0 0 1 0-4.19 2.93 2.93 0 0 1 4.163 0 2.977 2.977 0 0 1 0 4.19"/>
<path fill="#BE433B" d="M8.27 22.84a2.93 2.93 0 0 1-4.164 0 2.977 2.977 0 0 1 0-4.19 2.93 2.93 0 0 1 4.163 0 2.977 2.977 0 0 1 0 4.19"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

57
public/stylesheets/style.css
View File

@@ -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 <vast@whiteants.net>
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 <vast@whiteants.net>
margin-top: 22px;
}
.modules-container {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.lesson-module {
margin-top: 22px
}

11
views/courses.pug
View File

@@ -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)

2
views/index.pug
View File

@@ -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'

8
views/layout.pug
View File

@@ -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.&nbsp;
a(href='#todo') View on Github
| .
.footer__social
p
a(href='https://www.facebook.com/contentful/' target='_blank')

4
views/mixins/_courseCard.pug
View File

@@ -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