Small layout updates (#46)

src/frontend/js/classes/codeStyler.js

@@ -1,6 +1,7 @@
 import hljs from 'highlight.js/lib/highlight';
 import javascript from 'highlight.js/lib/languages/javascript';
 import xml from 'highlight.js/lib/languages/xml';
+import json from 'highlight.js/lib/languages/json';
 import style from 'highlight.js/styles/atom-one-dark.css';
 
 /**
@@ -12,12 +13,13 @@ export default class CodeStyler {
    * @param {string} selector - CSS selector for code blocks
    * @param {string[]} languages - list of languages to highlight, see hljs.listLanguages()
    */
-  constructor({selector, languages = [ 'javascript', 'xml' ]}) {
+  constructor({selector, languages = [ 'javascript', 'xml', 'json' ]}) {
     this.codeBlocksSelector = selector;
     this.languages = languages;
     this.langsAvailable = {
       javascript,
-      xml
+      xml,
+      json
     };
 
     this.init();

src/frontend/styles/components/header.pcss

@@ -8,6 +8,10 @@
   flex-wrap: wrap;
   position: relative;
 
+  @media (--mobile){
+    line-height: 40px;
+  }
+
   a {
     display: inline-block;
     text-decoration: none;

src/frontend/styles/components/page.pcss

@@ -58,6 +58,21 @@
     background: rgba(245,235,111,0.33);
     padding: 3px 0;
   }
+
+  &__content {
+    a {
+      text-decoration: none;
+      border-bottom: 1px solid #000;
+      padding-bottom: 1px;
+      color: inherit;
+
+      &:hover {
+        color: var(--color-link-active);
+        border-bottom-color: var(--color-link-active);
+      }
+    }
+  }
+
 }
 
 /**

src/frontend/styles/components/writing.pcss

@@ -7,11 +7,12 @@
   background: #fff;
   box-shadow: 0 3px 10px #fff;
   z-index: 2;
+  font-size: 14px;
 
   &__save {
     @apply --button;
     @apply --button-primary;
-    margin-left: auto;
+    margin: auto;
   }
 
   &__left {
@@ -22,6 +23,10 @@
       margin-right: 10px;
     }
   }
+
+  select {
+    max-width: 100px
+  }
 }
 
 .writing-buttons {
@@ -40,3 +45,13 @@
   box-shadow: inset 0 1px 2px 0 rgba(35, 44, 72, 0.06);
   outline: none;
 }
+
+.writing-editor {
+  @media (--desktop) {
+    margin: 0 -100px;
+  }
+}
+
+.codex-editor__redactor .ce-block:first-of-type .ce-header {
+  font-size: 32px;
+}