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

basic styling for lesson modules + code highlighting

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-09-27 18:17:08 +02:00
committed by Benedikt Rötsch
parent 5e23150a5f
commit 23a0ac4a81
12 changed files with 255 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/stylesheets/global.css
View File

@@ -55,6 +55,7 @@ body {
@media (--breakpoint-desktop) { @media (--breakpoint-desktop) {
flex: 1 1 auto; flex: 1 1 auto;
margin-left: var(--grid-gutter); margin-left: var(--grid-gutter);
overflow: hidden;
} }
} }

99
assets/stylesheets/hljs-github.css Normal file
View File

@@ -0,0 +1,99 @@
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #f8f8f8;
}
.hljs-comment,
.hljs-quote {
color: #998;
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
color: #333;
font-weight: bold;
}
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
color: #008080;
}
.hljs-string,
.hljs-doctag {
color: #d14;
}
.hljs-title,
.hljs-section,
.hljs-selector-id {
color: #900;
font-weight: bold;
}
.hljs-subst {
font-weight: normal;
}
.hljs-type,
.hljs-class .hljs-title {
color: #458;
font-weight: bold;
}
.hljs-tag,
.hljs-name,
.hljs-attribute {
color: #000080;
font-weight: normal;
}
.hljs-regexp,
.hljs-link {
color: #009926;
}
.hljs-symbol,
.hljs-bullet {
color: #990073;
}
.hljs-built_in,
.hljs-builtin-name {
color: #0086b3;
}
.hljs-meta {
color: #999;
font-weight: bold;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}

0
assets/stylesheets/module.css → assets/stylesheets/module-landing.css
View File

8
assets/stylesheets/module-lesson.css Normal file
View File

@@ -0,0 +1,8 @@
.lesson-module {
margin-top: calc(var(--grid-gutter) * 3);
& img {
width: 100%;
height: auto;
}
}

4
assets/stylesheets/style.css
View File

@@ -5,6 +5,7 @@
@import './typography'; @import './typography';
@import './formhack'; @import './formhack';
@import './forms'; @import './forms';
@import './hljs-github';
@import './global'; @import './global';
@import './header'; @import './header';
@@ -12,4 +13,5 @@
@import './homepage'; @import './homepage';
@import './course'; @import './course';
@import './module'; @import './module-landing';
@import './module-lesson';

2
public/scripts/highlight.pack.js Normal file
View File

File diff suppressed because one or more lines are too long

111
public/stylesheets/style.css
View File

@@ -712,6 +712,106 @@ input[type="reset"]:focus,
margin-top: -1rem; margin-top: -1rem;
} }
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #f8f8f8;
}
.hljs-comment,
.hljs-quote {
color: #998;
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
color: #333;
font-weight: bold;
}
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
color: #008080;
}
.hljs-string,
.hljs-doctag {
color: #d14;
}
.hljs-title,
.hljs-section,
.hljs-selector-id {
color: #900;
font-weight: bold;
}
.hljs-subst {
font-weight: normal;
}
.hljs-type,
.hljs-class .hljs-title {
color: #458;
font-weight: bold;
}
.hljs-tag,
.hljs-name,
.hljs-attribute {
color: #000080;
font-weight: normal;
}
.hljs-regexp,
.hljs-link {
color: #009926;
}
.hljs-symbol,
.hljs-bullet {
color: #990073;
}
.hljs-built_in,
.hljs-builtin-name {
color: #0086b3;
}
.hljs-meta {
color: #999;
font-weight: bold;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
body { body {
background-color: #fff; background-color: #fff;
color: #2a303a; color: #2a303a;
@@ -801,6 +901,7 @@ body {
-ms-flex: 1 1 auto; -ms-flex: 1 1 auto;
flex: 1 1 auto; flex: 1 1 auto;
margin-left: 1rem; margin-left: 1rem;
overflow: hidden;
} }
} }
@@ -1304,3 +1405,13 @@ body {
margin-top: 16px; margin-top: 16px;
margin-top: 1rem; margin-top: 1rem;
} }
.lesson-module {
margin-top: 48px;
margin-top: 3rem
}
.lesson-module img {
width: 100%;
height: auto;
}

2
views/layout.pug
View File

@@ -64,3 +64,5 @@ html
p p
a(href='#') FB a(href='#') FB
a(href='#') TW a(href='#') TW
script(src='/scripts/highlight.pack.js')
script hljs.initHighlightingOnLoad();

2
views/mixins/_lesson.pug
View File

@@ -4,7 +4,7 @@ include _lessonModuleImage
mixin lesson(lesson) mixin lesson(lesson)
.lesson .lesson
h1.lesson__tilte #{lesson.fields.title} h2.lesson__tilte #{lesson.fields.title}
div.lesson__shortDescription !{helpers.markdown(lesson.fields.description)} div.lesson__shortDescription !{helpers.markdown(lesson.fields.description)}
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

34
views/mixins/_lessonModuleCodeSnippet.pug
View File

@@ -1,15 +1,21 @@
mixin lessonModuleCodeSnippet(module) mixin lessonModuleCodeSnippet(module)
.lessonModule .lesson-module.lesson-module__code
.lessonModule__code h1.lesson-module__title #{module.fields.title}
h1.lessonModule__title #{module.fields.title} pre.lesson-module__code__curl
pre.lessonModule__code__curl !{helpers.markdown(module.fields.curl)} code.shell= module.fields.curl
pre.lessonModule__code__dotnet !{helpers.markdown(module.fields.dotNet)} pre.lesson-module__code__dotnet
pre.lessonModule__code__javascript !{helpers.markdown(module.fields.javascript)} code.csharp= module.fields.dotNet
pre.lessonModule__code__java !{helpers.markdown(module.fields.java)} pre.lesson-module__code__javascript
pre.lessonModule__code__javaAndroid !{helpers.markdown(module.fields.javaAndroid)} code.javascript= module.fields.javascript
pre.lessonModule__code__php !{helpers.markdown(module.fields.php)} pre.lesson-module__code__java
pre.lessonModule__code__python !{helpers.markdown(module.fields.python)} code.java= module.fields.java
pre.lessonModule__code__ruby !{helpers.markdown(module.fields.ruby)} pre.lesson-module__code__javaAndroid
pre.lessonModule__code__swift !{helpers.markdown(module.fields.swift)} code.java= module.fields.javaAndroid
pre.lesson-module__code__php
code.php= module.fields.php
pre.lesson-module__code__python
code.python= module.fields.python
pre.lesson-module__code__ruby
code.ruby= module.fields.ruby
pre.lesson-module__code__swift
code.swift= module.fields.swift

7
views/mixins/_lessonModuleCopy.pug
View File

@@ -1,5 +1,4 @@
mixin lessonModuleCopy(module) mixin lessonModuleCopy(module)
.lessonModule .lesson-module.lesson-module__copy
.lessonModule__copy h3.lesson-module__copy__title #{module.fields.title}
h1.lessonModule__copy__title #{module.fields.title} .lesson-module__copy__copy !{helpers.markdown(module.fields.copy)}
.lessonModule__copy__copy !{helpers.markdown(module.fields.copy)}

7
views/mixins/_lessonModuleImage.pug
View File

@@ -1,5 +1,4 @@
mixin lessonModuleImage(module) mixin lessonModuleImage(module)
.lessonModule .lesson-module.lesson-module__image
.lessonModule__image img.lesson-module__image__image(src=module.fields.file.url alt=module.fields.title)
h1.lessonModule__image__title #{module.fields.title} div.lesson-module__image__title #{module.fields.title}
img.lessonModule__image__image(src=module.fields.file.url alt=module.fields.title)