basic styling for lesson modules + code highlighting

assets/stylesheets/global.css

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

assets/stylesheets/hljs-github.css

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

assets/stylesheets/module-lesson.css

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

assets/stylesheets/style.css

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

public/stylesheets/style.css

@@ -712,6 +712,106 @@ input[type="reset"]:focus,
   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 {
   background-color: #fff;
   color: #2a303a;
@@ -801,6 +901,7 @@ body {
         -ms-flex: 1 1 auto;
             flex: 1 1 auto;
     margin-left: 1rem;
+    overflow: hidden;
   }
 }
 
@@ -1304,3 +1405,13 @@ body {
   margin-top: 16px;
   margin-top: 1rem;
 }
+
+.lesson-module {
+  margin-top: 48px;
+  margin-top: 3rem
+}
+
+.lesson-module img {
+  width: 100%;
+  height: auto;
+}

views/layout.pug

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

views/mixins/_lesson.pug

@@ -4,14 +4,14 @@ include _lessonModuleImage
 
 mixin lesson(lesson)
   .lesson
-    h1.lesson__tilte #{lesson.fields.title}
+    h2.lesson__tilte #{lesson.fields.title}
     div.lesson__shortDescription !{helpers.markdown(lesson.fields.description)}
     img.lesson__image(src=`${lesson.fields.image.fields.file.url}` alt=`${lesson.fields.image.fields.title}`)
     each module in lesson.fields.modules
-     case module.sys.contentType.sys.id 
+     case module.sys.contentType.sys.id
       when 'lessonModuleCodeSnippets'
         +lessonModuleCodeSnippet(module)
       when 'lessonModuleCopy'
         +lessonModuleCopy(module)
       when 'lessonModuleImage'
-        +lessonModuleImage(module)
+        +lessonModuleImage(module)

views/mixins/_lessonModuleCodeSnippet.pug

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

views/mixins/_lessonModuleCopy.pug

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

views/mixins/_lessonModuleImage.pug

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