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

use real BEM almost everywhere. Some restructuring is still missing

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-09-28 10:29:33 +02:00
committed by Benedikt Rötsch
parent 1fb784e0d1
commit 928ccc0ade
23 changed files with 315 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
assets/stylesheets/course.css
View File

@@ -1,4 +1,4 @@
.course-card { @block course-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 30vh; min-height: 30vh;
@@ -10,27 +10,23 @@
& > * + * { & > * + * {
margin-top: var(--grid-gutter); margin-top: var(--grid-gutter);
} }
@element categories{
flex: 0 0 var(--line-height);
} }
.course-card__categories { @element category{
flex: 0 0 var(--line-height);
color: var(--color-text-grey);
& a {
display: inline-block; display: inline-block;
margin-right: var(--grid-gutter); margin-right: var(--grid-gutter);
} color: var(--color-text-grey);
} }
.course-card__title { @element title {
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0;
& h2 {
margin: 0;
}
} }
.course-card__description { @element description-wrapper {
flex: 1 1 auto; flex: 1 1 auto;
& p { & p {
@@ -38,10 +34,11 @@
} }
} }
.course-card__link { @element link-wapper {
flex: 0 0 auto; flex: 0 0 auto;
}
& a { @element link {
display: inline-block; display: inline-block;
padding-bottom: 0.3em; padding-bottom: 0.3em;
border-bottom: 1px solid var(--color-link-content); border-bottom: 1px solid var(--color-link-content);

22
assets/stylesheets/footer.css
View File

@@ -1,18 +1,19 @@
#footer { @block footer {
margin: var(--grid-gutter) 0; margin: var(--grid-gutter) 0;
padding-top: var(--grid-gutter); padding-top: var(--grid-gutter);
border-top: 2px solid var(--color-bg-separator); border-top: 2px solid var(--color-bg-separator);
& .upper { @element upper {
display: flex; display: flex;
& > * { & > * {
display: flex; display: flex;
align-items: center; align-items: center;
} }
}
& .navigation { @element navigation {
flex: 1 0 auto; flex: 1 0 auto;
font-size: 0.9em; font-size: 0.9em;
@@ -32,7 +33,7 @@
} }
} }
& .apps { @element apps {
flex: 0 0 auto; flex: 0 0 auto;
& a { & a {
@@ -49,18 +50,19 @@
} }
} }
} }
}
& .lower {
display: flex;
& .disclaimer { @element lower {
display: flex;
}
@element disclaimer {
flex: 1 0 auto; flex: 1 0 auto;
font-size: 0.7em; font-size: 0.7em;
color: var(--color-text-grey); color: var(--color-text-grey);
} }
& .social {
@element social {
flex: 0 0 auto; flex: 0 0 auto;
} }
} }
}

9
assets/stylesheets/global.css
View File

@@ -31,13 +31,12 @@ body {
} }
} }
.wrapper-with-sidebar { @block wrapper-with-sidebar {
@media (--breakpoint-desktop) { @media (--breakpoint-desktop) {
display: flex; display: flex;
} }
}
.wrapper__sidebar { @element sidebar {
@media (--breakpoint-desktop) { @media (--breakpoint-desktop) {
flex: 0 0 220px; flex: 0 0 220px;
padding: var(--grid-gutter); padding: var(--grid-gutter);
@@ -49,7 +48,8 @@ body {
} }
} }
} }
.wrapper__content {
@element content {
padding: var(--grid-gutter) 0; padding: var(--grid-gutter) 0;
@media (--breakpoint-desktop) { @media (--breakpoint-desktop) {
@@ -58,6 +58,7 @@ body {
overflow: hidden; overflow: hidden;
} }
} }
}
.grid-list { .grid-list {
display: flex; display: flex;

19
assets/stylesheets/header.css
View File

@@ -1,4 +1,4 @@
#header { @block header {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -11,13 +11,9 @@
flex-wrap: nowrap; flex-wrap: nowrap;
} }
& .header__logo, @element logo {
& .header__navarea {
display: flex; display: flex;
flex: 0 0 100%; flex: 0 0 100%;
}
& .header__logo {
align-items: center; align-items: center;
@media (--breakpoint-desktop) { @media (--breakpoint-desktop) {
@@ -25,7 +21,9 @@
} }
} }
& .header__navarea { @element navarea {
display: flex;
flex: 0 0 100%;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
@@ -35,7 +33,7 @@
} }
} }
& .navigation { @element navigation {
& ul { & ul {
display: flex; display: flex;
list-style: none; list-style: none;
@@ -74,9 +72,8 @@
} }
} }
} }
}
.header__navarea { @element navarea {
& form { & form {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -115,4 +112,4 @@
} }
} }
} }
}

25
assets/stylesheets/homepage.css
View File

@@ -1,25 +0,0 @@
.hero {
display: flex;
justify-content: space-between;
}
.hero__image {
background-color: #20B5B6;
width: 65%;
height: 600px;
border-radius: .375rem;
box-shadow: var(--card-box-shadow);
}
.featured-cards-list {
width: 30%;
height: 600px;
display:flex;
flex-direction: column;
justify-content: space-between;
}
.featured-cards__list {
background-color: #00AAE0;
height: 150px;
border-radius: .375rem;
box-shadow: var(--card-box-shadow);
}

1
assets/stylesheets/module-landing.css
View File

@@ -7,7 +7,6 @@
padding: 0; padding: 0;
} }
& img { & img {
width: 100%; width: 100%;
height: auto; height: auto;

1
assets/stylesheets/style.css
View File

@@ -11,7 +11,6 @@
@import './header'; @import './header';
@import './footer'; @import './footer';
@import './homepage';
@import './course'; @import './course';
@import './module-landing'; @import './module-landing';
@import './module-lesson'; @import './module-lesson';

2
assets/stylesheets/variables.css
View File

@@ -1,7 +1,7 @@
@custom-media --breakpoint-desktop (min-width: 700px); @custom-media --breakpoint-desktop (min-width: 700px);
:root { :root {
--grid-gutter: 1rem; --grid-gutter: 22px;
--border-radius: 3px; --border-radius: 3px;
--line-height: 1.5em; --line-height: 1.5em;

1
package.json
View File

@@ -31,6 +31,7 @@
"eslint-plugin-standard": "^2.0.1", "eslint-plugin-standard": "^2.0.1",
"nodemon": "^1.12.1", "nodemon": "^1.12.1",
"postcss": "^6.0.12", "postcss": "^6.0.12",
"postcss-atrule-bem": "^3.0.1",
"postcss-browser-reporter": "^0.5.0", "postcss-browser-reporter": "^0.5.0",
"postcss-cli": "^4.1.1", "postcss-cli": "^4.1.1",
"postcss-cssnext": "^3.0.2", "postcss-cssnext": "^3.0.2",

1
postcss.config.js
View File

@@ -2,6 +2,7 @@ module.exports = {
plugins: { plugins: {
'postcss-import': {}, 'postcss-import': {},
'postcss-url': {}, 'postcss-url': {},
'postcss-atrule-bem': {},
'postcss-cssnext': {}, 'postcss-cssnext': {},
'postcss-browser-reporter': {}, 'postcss-browser-reporter': {},
'postcss-reporter': {} 'postcss-reporter': {}

256
public/stylesheets/style.css
View File

@@ -502,8 +502,7 @@ fieldset,
vertical-align: top; vertical-align: top;
display: block; display: block;
margin: 16px 0; margin: 22px 0;
margin: 1rem 0;
text-align: left; text-align: left;
} }
@@ -514,15 +513,13 @@ datalist {
label { label {
display: block; display: block;
margin: 16px 0; margin: 22px 0;
margin: 1rem 0;
text-align: left; text-align: left;
font-weight: bold font-weight: bold
} }
label + input { label + input {
margin-top: -8px; margin-top: -11px;
margin-top: -0.5rem;
} }
/* Input & Textarea ------------------ */ /* Input & Textarea ------------------ */
@@ -701,15 +698,13 @@ input[type="reset"]:focus,
} }
.form-item + .form-item { .form-item + .form-item {
margin-top: 16px; margin-top: 22px;
margin-top: 1rem;
} }
.form-item .help-text { .form-item .help-text {
font-size: 0.9em; font-size: 0.9em;
color: #8091a5; color: #8091a5;
margin-top: -16px; margin-top: -22px;
margin-top: -1rem;
} }
/* /*
@@ -874,33 +869,32 @@ body {
@media (min-width: 700px) { @media (min-width: 700px) {
.wrapper__sidebar { .wrapper-with-sidebar__sidebar {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 220px; -ms-flex: 0 0 220px;
flex: 0 0 220px; flex: 0 0 220px;
padding: 1rem; padding: 22px;
border-radius: 7px; border-radius: 7px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
} }
.wrapper__sidebar > h2 { .wrapper-with-sidebar__sidebar > h2 {
margin-bottom: 3rem; margin-bottom: 66px;
} }
} }
.wrapper__content { .wrapper-with-sidebar__content {
padding: 16px 0; padding: 22px 0;
padding: 1rem 0;
} }
@media (min-width: 700px) { @media (min-width: 700px) {
.wrapper__content { .wrapper-with-sidebar__content {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex: 1 1 auto; -ms-flex: 1 1 auto;
flex: 1 1 auto; flex: 1 1 auto;
margin-left: 1rem; margin-left: 22px;
overflow: hidden; overflow: hidden;
} }
} }
@@ -914,26 +908,24 @@ body {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
margin: 0 -8px; margin: 0 -11px
margin: 0 -0.5rem
} }
.grid-list > * { .grid-list > * {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
margin: 0 8px 16px; margin: 0 11px 22px;
margin: 0 0.5rem 1rem;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 1rem); -ms-flex: 0 0 calc(50% - 22px);
flex: 0 0 calc(50% - 1rem); flex: 0 0 calc(50% - 22px);
} }
@media (min-width: 700px) { @media (min-width: 700px) {
.grid-list > * { .grid-list > * {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 calc(33% - 1rem); -ms-flex: 0 0 calc(33% - 22px);
flex: 0 0 calc(33% - 1rem); flex: 0 0 calc(33% - 22px);
} }
} }
@@ -946,32 +938,27 @@ body {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
margin: 0 -8px; margin: 0 -11px
margin: 0 -0.5rem
} }
.grid-list-small > * { .grid-list-small > * {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
margin: 0 8px 16px; margin: 0 11px 22px;
margin: 0 0.5rem 1rem;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 1rem); -ms-flex: 0 0 calc(50% - 22px);
flex: 0 0 calc(50% - 1rem); flex: 0 0 calc(50% - 22px);
} }
.table-of-contents ul { .table-of-contents ul {
list-style: none; list-style: none;
margin: 16px 0; margin: 22px 0;
margin: 1rem 0;
padding: 0; padding: 0;
padding-left: 32px; padding-left: 44px;
padding-left: 2rem;
} }
.table-of-contents ul li { .table-of-contents ul li {
margin: 0 0 16px; margin: 0 0 22px;
margin: 0 0 1rem;
padding: 0; padding: 0;
} }
@@ -992,8 +979,7 @@ body {
.table-of-contents ul a.active:before { .table-of-contents ul a.active:before {
content: ''; content: '';
left: -48px; left: -66px;
left: -3rem;
bottom: 0; bottom: 0;
width: 3px; width: 3px;
background: #536171; background: #536171;
@@ -1001,20 +987,17 @@ body {
.table-of-contents ul a.active:after { .table-of-contents ul a.active:after {
content: '👁'; content: '👁';
left: -32px; left: -44px;
left: -2rem;
} }
.sidebar-menu ul { .sidebar-menu ul {
list-style: none; list-style: none;
margin: 16px 0; margin: 22px 0;
margin: 1rem 0;
padding: 0; padding: 0;
} }
.sidebar-menu ul li { .sidebar-menu ul li {
margin: 0 0 16px; margin: 0 0 22px;
margin: 0 0 1rem;
padding: 0; padding: 0;
} }
@@ -1026,40 +1009,34 @@ body {
font-weight: bold; font-weight: bold;
} }
#header { .header {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
margin: 16px 0; margin: 22px 0;
margin: 1rem 0; padding-bottom: 22px;
padding-bottom: 16px;
padding-bottom: 1rem;
border-bottom: 2px solid #f2f5f7; border-bottom: 2px solid #f2f5f7;
} }
@media (min-width: 700px) { @media (min-width: 700px) {
#header { .header {
-ms-flex-wrap: nowrap; -ms-flex-wrap: nowrap;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
} }
#header .header__logo, .header__logo {
#header .header__navarea {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 100%; -ms-flex: 0 0 100%;
flex: 0 0 100%; flex: 0 0 100%;
}
#header .header__logo {
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
@@ -1067,14 +1044,20 @@ body {
@media (min-width: 700px) { @media (min-width: 700px) {
#header .header__logo { .header__logo {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 200px; -ms-flex: 0 0 200px;
flex: 0 0 200px; flex: 0 0 200px;
} }
} }
#header .header__navarea { .header__navarea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;
@@ -1085,7 +1068,7 @@ body {
@media (min-width: 700px) { @media (min-width: 700px) {
#header .header__navarea { .header__navarea {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex: 1 0 auto; -ms-flex: 1 0 auto;
flex: 1 0 auto; flex: 1 0 auto;
@@ -1093,7 +1076,7 @@ body {
} }
} }
#header .navigation ul { .header__navigation ul {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@@ -1106,23 +1089,22 @@ body {
@media (min-width: 700px) { @media (min-width: 700px) {
#header .navigation ul { .header__navigation ul {
-webkit-box-pack: end; -webkit-box-pack: end;
-ms-flex-pack: end; -ms-flex-pack: end;
justify-content: flex-end; justify-content: flex-end;
} }
} }
#header .navigation ul li { .header__navigation ul li {
margin: 0; margin: 0;
} }
#header .navigation ul li + li { .header__navigation ul li + li {
margin-left: 4px; margin-left: 5.5px;
margin-left: 0.25rem;
} }
#header .navigation ul li a { .header__navigation ul li a {
display: block; display: block;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
@@ -1131,12 +1113,12 @@ body {
border-radius: 3px; border-radius: 3px;
} }
#header .navigation ul li a.active, .header__navigation ul li a.active,
#header .navigation ul li a:hover { .header__navigation ul li a:hover {
background: #f7f9fa; background: #f7f9fa;
} }
#header .navigation ul li a.active { .header__navigation ul li a.active {
color: #2a303a; color: #2a303a;
} }
@@ -1174,8 +1156,7 @@ body {
} }
.header__navarea form fieldset + fieldset { .header__navarea form fieldset + fieldset {
margin-left: 16px; margin-left: 22px;
margin-left: 1rem;
} }
.header__navarea form fieldset label + select { .header__navarea form fieldset label + select {
@@ -1189,22 +1170,20 @@ body {
margin-bottom: 0; margin-bottom: 0;
} }
#footer { .footer {
margin: 16px 0; margin: 22px 0;
margin: 1rem 0; padding-top: 22px;
padding-top: 16px;
padding-top: 1rem;
border-top: 2px solid #f2f5f7 border-top: 2px solid #f2f5f7;
} }
#footer .upper { .footer__upper {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
#footer .upper > * { .footer__upper > * {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@@ -1213,14 +1192,14 @@ body {
align-items: center; align-items: center;
} }
#footer .upper .navigation { .footer__navigation {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex: 1 0 auto; -ms-flex: 1 0 auto;
flex: 1 0 auto; flex: 1 0 auto;
font-size: 0.9em; font-size: 0.9em;
} }
#footer .upper .navigation ul { .footer__navigation ul {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@@ -1229,43 +1208,41 @@ body {
padding: 0; padding: 0;
} }
#footer .upper .navigation ul li { .footer__navigation ul li {
margin: 0; margin: 0;
} }
#footer .upper .navigation ul li + li { .footer__navigation ul li + li {
margin-left: 32px; margin-left: 44px;
margin-left: 2rem;
} }
#footer .upper .apps { .footer__apps {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 auto; -ms-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
} }
#footer .upper .apps a { .footer__apps a {
display: inline-block; display: inline-block;
width: 150px; width: 150px;
} }
#footer .upper .apps a + a { .footer__apps a + a {
margin-left: 16px; margin-left: 22px;
margin-left: 1rem;
} }
#footer .upper .apps a img { .footer__apps a img {
width: 100%; width: 100%;
height: auto; height: auto;
} }
#footer .lower { .footer__lower {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
#footer .lower .disclaimer { .footer__disclaimer {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex: 1 0 auto; -ms-flex: 1 0 auto;
flex: 1 0 auto; flex: 1 0 auto;
@@ -1273,53 +1250,12 @@ body {
color: #8091a5; color: #8091a5;
} }
#footer .lower .social { .footer__social {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 auto; -ms-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
} }
.hero {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.hero__image {
background-color: #20B5B6;
width: 65%;
height: 600px;
border-radius: .375rem;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
}
.featured-cards-list {
width: 30%;
height: 600px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.featured-cards__list {
background-color: #00AAE0;
height: 150px;
border-radius: .375rem;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
}
.course-card { .course-card {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@@ -1329,59 +1265,53 @@ body {
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
min-height: 30vh; min-height: 30vh;
padding: 16px; padding: 22px;
padding: 1rem;
border-radius: 7px; border-radius: 7px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45) box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
} }
.course-card > * + * { .course-card > * + * {
margin-top: 16px; margin-top: 22px;
margin-top: 1rem;
} }
.course-card__categories { .course-card__categories {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 1.5em; -ms-flex: 0 0 1.5em;
flex: 0 0 1.5em; flex: 0 0 1.5em;
color: #8091a5
} }
.course-card__categories a { .course-card__category {
display: inline-block; display: inline-block;
margin-right: 16px; margin-right: 22px;
margin-right: 1rem; color: #8091a5;
} }
.course-card__title { .course-card__title {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex: 1 1 auto; -ms-flex: 1 1 auto;
flex: 1 1 auto flex: 1 1 auto;
margin-bottom: 0;
} }
.course-card__title h2 { .course-card__description-wrapper {
margin: 0;
}
.course-card__description {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex: 1 1 auto; -ms-flex: 1 1 auto;
flex: 1 1 auto flex: 1 1 auto;
} }
.course-card__description p { .course-card__description-wrapper p {
margin: 0; margin: 0;
} }
.course-card__link-wapper {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.course-card__link { .course-card__link {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto
}
.course-card__link a {
display: inline-block; display: inline-block;
padding-bottom: 0.3em; padding-bottom: 0.3em;
border-bottom: 1px solid #5c9fef; border-bottom: 1px solid #5c9fef;
@@ -1408,13 +1338,11 @@ body {
} }
.module + .module { .module + .module {
margin-top: 16px; margin-top: 22px;
margin-top: 1rem;
} }
.lesson-module { .lesson-module {
margin-top: 48px; margin-top: 66px
margin-top: 3rem
} }
.lesson-module img { .lesson-module img {

4
views/course.pug
View File

@@ -4,7 +4,7 @@ include mixins/_lesson
block content block content
.wrapper.wrapper-with-sidebar .wrapper.wrapper-with-sidebar
section.wrapper__sidebar section.wrapper-with-sidebar__sidebar
h2 Table of contents h2 Table of contents
.table-of-contents .table-of-contents
ul ul
@@ -13,7 +13,7 @@ block content
each lesson in course.fields.lessons each lesson in course.fields.lessons
li li
a(href=`/courses/${course.fields.slug}/lessons/${lesson.fields.slug}`) #{lesson.fields.title} a(href=`/courses/${course.fields.slug}/lessons/${lesson.fields.slug}`) #{lesson.fields.title}
section.wrapper__content section.wrapper-with-sidebar__content
h1= course.fields.title h1= course.fields.title
if lesson if lesson

4
views/courses.pug
View File

@@ -4,7 +4,7 @@ include mixins/_courseCard
block content block content
.wrapper.wrapper-with-sidebar .wrapper.wrapper-with-sidebar
section.wrapper__sidebar section.wrapper-with-sidebar__sidebar
h2 Categories h2 Categories
.sidebar-menu .sidebar-menu
ul ul
@@ -13,7 +13,7 @@ block content
each category in categories each category in categories
li li
a(href=`/courses/categories/${category.sys.id}`) #{category.fields.title} a(href=`/courses/categories/${category.sys.id}`) #{category.fields.title}
section.wrapper__content section.wrapper-with-sidebar__content
h1= title h1= title
.courses.grid-list-small .courses.grid-list-small
each course in courses each course in courses

22
views/layout.pug
View File

@@ -7,12 +7,12 @@ html
#main #main
#main__header #main__header
.wrapper .wrapper
header#header header.header
section.header__logo section.header__logo
a.logo--link(href='#') a.header__logo-link(href='#')
img(src='/images/logo.png' alt='Contentful University') img(src='/images/logo.png' alt='Contentful University')
section.header__navarea section.header__navarea
section.controls section.header__controls
form(action="." method="get") form(action="." method="get")
fieldset fieldset
label(for='api') API type: label(for='api') API type:
@@ -24,7 +24,7 @@ html
select(name='locale' onChange='this.form.submit()') select(name='locale' onChange='this.form.submit()')
option(value='en-US') English option(value='en-US') English
option(value='de-DE') German option(value='de-DE') German
nav.navigation nav.header__navigation
ul ul
li li
a.active(href='/') Home a.active(href='/') Home
@@ -40,9 +40,9 @@ html
#main__footer #main__footer
.wrapper .wrapper
footer#footer footer.footer
.upper .footer__upper
nav.navigation nav.footer__navigation
ul ul
li li
a.active(href='/') Home a.active(href='/') Home
@@ -52,15 +52,15 @@ html
a(href='/about') About a(href='/about') About
li li
a(href='/settings') Settings a(href='/settings') Settings
.apps .footer__apps
a(href='#') a(href='#')
img(src='/images/app-store-badge.png') img(src='/images/app-store-badge.png')
a(href='#') a(href='#')
img(src='/images/google-play-badge.png') img(src='/images/google-play-badge.png')
.lower .footer__lower
.disclaimer .footer__disclaimer
p This website and the materials fond on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account. p This website and the materials fond on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account.
.social .footer__social
p p
a(href='#') FB a(href='#') FB
a(href='#') TW a(href='#') TW

11
views/mixins/_copyModule.pug
View File

@@ -1,8 +1,5 @@
mixin copyModule(module) mixin copyModule(module)
.module .module.module-copy
.module__copy h1.module-copy__title #{module.fields.title}
h1.module__copy__title #{module.fields.title} h3.module-copy__headline #{module.fields.headline}
h3.module__copy__headline #{module.fields.headline} div.module-copy__copy !{helpers.markdown(module.fields.copy)}
div.module__copy__copy !{helpers.markdown(module.fields.copy)}

11
views/mixins/_courseCard.pug
View File

@@ -3,11 +3,10 @@ mixin courseCard(course = {fields: {title: '', description: '', categories: [],
.course-card__categories .course-card__categories
if(course.fields.categories) if(course.fields.categories)
each category in course.fields.categories each category in course.fields.categories
a(href=`/courses/categories/${category.sys.id}`) #{category.fields.title} a.course-card__category(href=`/courses/categories/${category.sys.id}`) #{category.fields.title}
.course-card__title h2.course-card__title= course.fields.title
h2= course.fields.title .course-card__description-wrapper
.course-card__description
p !{helpers.markdown(course.fields.shortDescription)} p !{helpers.markdown(course.fields.shortDescription)}
.course-card__link .course-card__link-wrapper
a(href=`/courses/${course.fields.slug}`) view course a.course-card__link(href=`/courses/${course.fields.slug}`) view course

9
views/mixins/_heroImageModule.pug
View File

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

5
views/mixins/_highlightedCourse.pug
View File

@@ -1,7 +1,6 @@
include ./_courseCard include ./_courseCard
mixin highlightedCourseModule(module) mixin highlightedCourseModule(module)
.module .module.module-higlighted-course
.module__higlightedCourse h2.module-higlighted-course__title #{module.fields.title}
h2.module__higlightedCourse__title #{module.fields.title}
+courseCard(module.fields.course) +courseCard(module.fields.course)

5
views/mixins/_highlightedLessonsModule.pug
View File

@@ -1,9 +1,8 @@
include _lesson include _lesson
mixin _highlightLessonsModule(module) mixin _highlightLessonsModule(module)
.module .module.module-higlighted-lessons
.module__higlightedLessons h2.module-higlighted-lessons__title #{module.fields.title}
h2.module__higlightedLessons__title #{module.fields.title}
each lesson in module.fields.lessons each lesson in module.fields.lessons
+lesson(lesson) +lesson(lesson)

2
views/mixins/_lesson.pug
View File

@@ -5,7 +5,7 @@ include _lessonModuleImage
mixin lesson(lesson) mixin lesson(lesson)
.lesson .lesson
h2.lesson__tilte #{lesson.fields.title} h2.lesson__tilte #{lesson.fields.title}
div.lesson__shortDescription !{helpers.markdown(lesson.fields.description)} div.lesson__short-description !{helpers.markdown(lesson.fields.description)}
if lesson.fields.image if lesson.fields.image
img.lesson__image(src=`${lesson.fields.image.fields.file.url}` alt=`${lesson.fields.image.fields.title}`) img.lesson__image(src=`${lesson.fields.image.fields.file.url}` alt=`${lesson.fields.image.fields.title}`)
each module in lesson.fields.modules each module in lesson.fields.modules

22
views/mixins/_lessonModuleCodeSnippet.pug
View File

@@ -1,21 +1,21 @@
mixin lessonModuleCodeSnippet(module) mixin lessonModuleCodeSnippet(module)
.lesson-module.lesson-module__code .lesson-module.lesson-module-code
h1.lesson-module__title #{module.fields.title} h1.lesson-module__title #{module.fields.title}
pre.lesson-module__code__curl pre.lesson-module-code__curl
code.shell= module.fields.curl code.shell= module.fields.curl
pre.lesson-module__code__dotnet pre.lesson-module-code__dotnet
code.csharp= module.fields.dotNet code.csharp= module.fields.dot-net
pre.lesson-module__code__javascript pre.lesson-module-code__javascript
code.javascript= module.fields.javascript code.javascript= module.fields.javascript
pre.lesson-module__code__java pre.lesson-module-code__java
code.java= module.fields.java code.java= module.fields.java
pre.lesson-module__code__javaAndroid pre.lesson-module-code__java-android
code.java= module.fields.javaAndroid code.java= module.fields.javaAndroid
pre.lesson-module__code__php pre.lesson-module-code__php
code.php= module.fields.php code.php= module.fields.php
pre.lesson-module__code__python pre.lesson-module-code__python
code.python= module.fields.python code.python= module.fields.python
pre.lesson-module__code__ruby pre.lesson-module-code__ruby
code.ruby= module.fields.ruby code.ruby= module.fields.ruby
pre.lesson-module__code__swift pre.lesson-module-code__swift
code.swift= module.fields.swift code.swift= module.fields.swift

6
views/mixins/_lessonModuleCopy.pug
View File

@@ -1,4 +1,4 @@
mixin lessonModuleCopy(module) mixin lessonModuleCopy(module)
.lesson-module.lesson-module__copy .lesson-module.lesson-module-copy
h3.lesson-module__copy__title #{module.fields.title} h3.lesson-module-copy__title #{module.fields.title}
.lesson-module__copy__copy !{helpers.markdown(module.fields.copy)} .lesson-module-copy__copy !{helpers.markdown(module.fields.copy)}

6
views/mixins/_lessonModuleImage.pug
View File

@@ -1,4 +1,4 @@
mixin lessonModuleImage(module) mixin lessonModuleImage(module)
.lesson-module.lesson-module__image .lesson-module.lesson-module-image
img.lesson-module__image__image(src=module.fields.file.url alt=module.fields.title) img.lesson-module-image__image(src=module.fields.file.url alt=module.fields.title)
div.lesson-module__image__title #{module.fields.title} div.lesson-module-image__title #{module.fields.title}