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

split up layout and global file and clean up markup

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-02 15:10:24 +02:00
committed by Benedikt Rötsch
parent 090e0e332a
commit bf1e00c1e9
22 changed files with 395 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1 +1 @@
@include './card'
@import './card';

48
assets/stylesheets/global/fonts.css Executable file
View File

@@ -0,0 +1,48 @@
@font-face {
font-family: 'roboto';
src: url('/fonts/roboto-regular-webfont.woff2') format('woff2'),
url('/fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'roboto';
src: url('/fonts/roboto-italic-webfont.woff2') format('woff2'),
url('/fonts/roboto-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'roboto';
src: url('/fonts/roboto-bold-webfont.woff2') format('woff2'),
url('/fonts/roboto-bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'roboto';
src: url('/fonts/roboto-bolditalic-webfont.woff2') format('woff2'),
url('/fonts/roboto-bolditalic-webfont.woff') format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'robotomedium';
src: url('/fonts/roboto-medium-webfont.woff2') format('woff2'),
url('/fonts/roboto-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotomedium';
src: url('/fonts/roboto-mediumitalic-webfont.woff2') format('woff2'),
url('/fonts/roboto-mediumitalic-webfont.woff') format('woff');
font-weight: normal;
font-style: italic;
}

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

@@ -1,7 +1,10 @@
@import './layout';
@import './header';
@import './footer';
@import './table-of-contents';
@import './sidebar-menu';
@import './main-navigation';
body {
background-color: var(--color-bg-default);
color: var(--color-text-default);
@@ -24,105 +27,3 @@ body {
#main__footer {
flex: 0 0 auto;
}
.table-of-contents {
& ul {
list-style: none;
margin: var(--grid-gutter) 0;
padding: 0;
padding-left: calc(var(--grid-gutter) * 2);
& li {
margin: 0 0 var(--grid-gutter);
padding: 0;
}
& a {
display: block;
&.active {
position: relative;
font-weight: bold;
&:before,
&:after {
position: absolute;
top: 0;
}
&:before {
content: '';
left: calc(var(--grid-gutter) * 3 * -1);
bottom: 0;
width: 3px;
background: var(--color-course-active);
}
&:after {
content: '👁';
left: calc(var(--grid-gutter) * 2 * -1);
}
}
}
}
}
.sidebar-menu {
& ul {
list-style: none;
margin: var(--grid-gutter) 0;
padding: 0;
& li {
margin: 0 0 var(--grid-gutter);
padding: 0;
}
& a {
display: block;
&.active {
font-weight: bold;
}
}
}
}
@block main-navigation {
& ul {
display: flex;
list-style: none;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
@media (--breakpoint-desktop) {
justify-content: flex-end;
}
& li {
margin: 0;
& + li {
margin-left: calc(var(--grid-gutter) / 4);
}
& a {
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 0.7em 1em;
color: var(--color-text-grey);
border-radius: var(--border-radius);
&.active,
&:hover {
background: var(--color-bg-grey);
}
&.active {
color: var(--color-text-default);
}
}
}
}
}

65
assets/stylesheets/global/layout.css
View File

@@ -1,65 +0,0 @@
.wrapper {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 2vw;
}
@block wrapper-with-sidebar {
@media (--breakpoint-desktop) {
display: flex;
align-items: flex-start;
}
@element sidebar {
@media (--breakpoint-desktop) {
flex: 0 0 220px;
padding: var(--grid-gutter);
border-radius: 7px;
box-shadow: var(--card-box-shadow);
& > h2 {
margin-bottom: calc(var(--grid-gutter) * 3);
}
}
}
@element content {
padding: var(--grid-gutter) 0;
@media (--breakpoint-desktop) {
flex: 1 1 auto;
margin-left: var(--grid-gutter);
overflow: hidden;
}
}
}
.grid-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
& > * {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
@media (--breakpoint-desktop) {
flex: 0 0 calc(33% - var(--grid-gutter));
}
}
}
.grid-list-small {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
& > * {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
}
}

40
assets/stylesheets/global/main-navigation.css Normal file
View File

@@ -0,0 +1,40 @@
@block main-navigation {
& ul {
display: flex;
list-style: none;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
@media (--breakpoint-desktop) {
justify-content: flex-end;
}
& li {
margin: 0;
& + li {
margin-left: calc(var(--grid-gutter) / 4);
}
& a {
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 0.7em 1em;
color: var(--color-text-grey);
border-radius: var(--border-radius);
&.active,
&:hover {
background: var(--color-bg-grey);
}
&.active {
color: var(--color-text-default);
}
}
}
}
}

20
assets/stylesheets/global/sidebar-menu.css Normal file
View File

@@ -0,0 +1,20 @@
.sidebar-menu {
& ul {
list-style: none;
margin: var(--grid-gutter) 0;
padding: 0;
& li {
margin: 0 0 var(--grid-gutter);
padding: 0;
}
& a {
display: block;
&.active {
font-weight: bold;
}
}
}
}

39
assets/stylesheets/global/table-of-contents.css Normal file
View File

@@ -0,0 +1,39 @@
.table-of-contents {
& ul {
list-style: none;
margin: var(--grid-gutter) 0;
padding: 0;
padding-left: calc(var(--grid-gutter) * 2);
& li {
margin: 0 0 var(--grid-gutter);
padding: 0;
}
& a {
display: block;
&.active {
position: relative;
font-weight: bold;
&:before,
&:after {
position: absolute;
top: 0;
}
&:before {
content: '';
left: calc(var(--grid-gutter) * 3 * -1);
bottom: 0;
width: 3px;
background: var(--color-course-active);
}
&:after {
content: '👁';
left: calc(var(--grid-gutter) * 2 * -1);
}
}
}
}
}

29
assets/stylesheets/layout/grid-lists.css Normal file
View File

@@ -0,0 +1,29 @@
.grid-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
& > * {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
@media (--breakpoint-desktop) {
flex: 0 0 calc(33% - var(--grid-gutter));
}
}
}
.grid-list-small {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
& > * {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
}
}

3
assets/stylesheets/layout/index.css Normal file
View File

@@ -0,0 +1,3 @@
@import 'layout-centered';
@import 'layout-sidebar';
@import 'grid-lists';

5
assets/stylesheets/layout/layout-centered.css Normal file
View File

@@ -0,0 +1,5 @@
@block layout-centered {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 2vw;
}

43
assets/stylesheets/layout/layout-sidebar.css Normal file
View File

@@ -0,0 +1,43 @@
@block layout-sidebar {
padding: 0 2vw;
max-width: var(--content-max-width);
margin: 0 auto;
@media (--breakpoint-desktop) {
display: flex;
align-items: flex-start;
}
@element sidebar {
@media (--breakpoint-desktop) {
flex: 0 0 220px;
border-radius: 7px;
box-shadow: var(--card-box-shadow);
}
}
@element sidebar-header {
padding: var(--grid-gutter);
border-bottom: 1px solid var(--color-sidebar-seperator);
}
@element sidebar-title {
font-size: 1.25em;
margin: 0;
}
@element sidebar-content {
background: var(--color-sidebar-bg);
padding: var(--grid-gutter);
}
@element content {
padding: var(--grid-gutter) 0;
@media (--breakpoint-desktop) {
flex: 1 1 auto;
margin-left: var(--grid-gutter);
overflow: hidden;
}
}
}

2
assets/stylesheets/style.css
View File

@@ -4,6 +4,8 @@
@import './base';
@import './layout';
@import './global';
@import './hljs-github';

3
assets/stylesheets/variables.css
View File

@@ -14,7 +14,7 @@
--color-palette-blue-medium: #3c80cf;
--color-palette-blue-dark: #3072be;
--color-text-default: #2a303a;
--color-text-default: #2a3039;
--color-text-grey: #8091a5;
--color-text-dark-bg: #fff;
--color-text-dark-bg-grey: #a9b9c0;
@@ -26,6 +26,7 @@
--color-bg-separator: #e5ebed;
--color-sidebar-bg: #f7f9fa;
--color-sidebar-seperator: #eeeeee;
--color-course-active: #536171;

182
public/stylesheets/style.css
View File

@@ -755,15 +755,21 @@ input[type="reset"]:focus,
margin-top: -22px;
}
.wrapper {
.layout-centered {
max-width: 980px;
margin: 0 auto;
padding: 0 2vw;
}
.layout-sidebar {
padding: 0 2vw;
max-width: 980px;
margin: 0 auto;
}
@media (min-width: 700px) {
.wrapper-with-sidebar {
.layout-sidebar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@@ -775,28 +781,38 @@ input[type="reset"]:focus,
@media (min-width: 700px) {
.wrapper-with-sidebar__sidebar {
.layout-sidebar__sidebar {
-webkit-box-flex: 0;
-ms-flex: 0 0 220px;
flex: 0 0 220px;
padding: 22px;
border-radius: 7px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
}
.wrapper-with-sidebar__sidebar > h2 {
margin-bottom: 66px;
}
}
.wrapper-with-sidebar__content {
.layout-sidebar__sidebar-header {
padding: 22px;
border-bottom: 1px solid #eeeeee;
}
.layout-sidebar__sidebar-title {
font-size: 1.25em;
margin: 0;
}
.layout-sidebar__sidebar-content {
background: #f7f9fa;
padding: 22px;
}
.layout-sidebar__content {
padding: 22px 0;
}
@media (min-width: 700px) {
.wrapper-with-sidebar__content {
.layout-sidebar__content {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
@@ -1149,44 +1165,6 @@ input[type="reset"]:focus,
height: auto;
}
body {
background-color: #fff;
color: #2a303a;
font-family: 'roboto', Helvetica, sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.5em;
}
#main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
#main__header {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
#main__content {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
#main__footer {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.table-of-contents ul {
list-style: none;
margin: 22px 0;
@@ -1292,7 +1270,45 @@ body {
}
.main-navigation ul li a.active {
color: #2a303a;
color: #2a3039;
}
body {
background-color: #fff;
color: #2a3039;
font-family: 'roboto', Helvetica, sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.5em;
}
#main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
#main__header {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
#main__content {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
#main__footer {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
/*
@@ -1395,7 +1411,73 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
font-weight: bold;
}
@include './card';
.course-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 30vh;
padding: 22px;
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);
}
.course-card > * + * {
margin-top: 22px;
}
.course-card__categories {
-webkit-box-flex: 0;
-ms-flex: 0 0 1.5em;
flex: 0 0 1.5em;
}
.course-card__category {
display: inline-block;
margin-right: 22px;
color: #8091a5;
font-size: 0.75em;
letter-spacing: 2px;
}
.course-card__title {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin-bottom: 0;
}
.course-card__description-wrapper {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.course-card__description-wrapper p {
margin: 0;
}
.course-card__link-wrapper {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.course-card__link {
display: inline-block;
padding-bottom: 0.3em;
border-bottom: 1px solid #5c9fef;
text-transform: uppercase;
color: #5c9fef;
font-size: 0.75em;
line-height: 2.17;
letter-spacing: 2px;
}
.module-hero-image {}

2
views/about.pug
View File

@@ -1,6 +1,6 @@
extends layout
block content
.wrapper
.layout-centered
h1= title
p Welcome to #{title}

2
views/categories.pug
View File

@@ -1,6 +1,6 @@
extends layout
block content
.wrapper
.layout-centered
h1= title
p Welcome to #{title}

9
views/course.pug
View File

@@ -3,9 +3,10 @@ extends layout
include mixins/_lesson
block content
.wrapper.wrapper-with-sidebar
section.wrapper-with-sidebar__sidebar
h2 Table of contents
.layout-sidebar
section.layout-sidebar__sidebar
.layout-sidebar__sidebar-header
h2.layout-sidebar__sidebar-title Table of contents
.table-of-contents
ul
li
@@ -14,7 +15,7 @@ block content
if l.fields
li
a(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}`) #{l.fields.title}
section.wrapper-with-sidebar__content
section.layout-sidebar__content
h1= course.fields.title
if lesson

11
views/courses.pug
View File

@@ -3,9 +3,11 @@ extends layout
include mixins/_courseCard
block content
.wrapper.wrapper-with-sidebar
section.wrapper-with-sidebar__sidebar
h2 Categories
.layout-sidebar
section.layout-sidebar__sidebar
.layout-sidebar__sidebar-header
h2.layout-sidebar__sidebar-title Categories
.layout-sidebar__sidebar-content
.sidebar-menu
ul
li
@@ -13,8 +15,9 @@ block content
each category in categories
li
a(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
section.wrapper-with-sidebar__content
section.layout-sidebar__content
h1= title
.courses.grid-list-small
each course in courses
.grid-list-small__item
+courseCard(course)

2
views/error.pug
View File

@@ -1,7 +1,7 @@
extends layout
block content
.wrapper
.layout-centered
h1= message
h2= error.status
pre #{error.stack}

6
views/layout.pug
View File

@@ -8,7 +8,7 @@ html
#main__header
header.header
.header__upper-wrapper
.header__upper.wrapper
.header__upper.layout-centered
.header__title
img(src='/images/icon-info.svg')
span Example Application
@@ -26,7 +26,7 @@ html
option(value='en-US' selected=query.locale === 'en-US') English
option(value='de-DE' selected=query.locale === 'de-DE') German
.header__lower-wrapper
.header__lower.wrapper
.header__lower.layout-centered
.header__logo
a.header__logo-link(href='/')
img(src='/images/logo.svg' alt='Contentful Example App')
@@ -46,7 +46,7 @@ html
block content
#main__footer
.wrapper
.layout-centered
footer.footer
.footer__upper
nav.footer__navigation.main-navigation

2
views/settings.pug
View File

@@ -1,7 +1,7 @@
extends layout
block content
.wrapper
.layout-centered
h1= title
p To query and get content using the APIs, client apllications need to authenticate iwth both the Space ID and an access token.

2
views/sitemap.pug
View File

@@ -1,6 +1,6 @@
extends layout
block content
.wrapper
.layout-centered
h1= title
p Welcome to #{title}