Small layout updates (#46)

public/dist/editor.bundle.js

@@ -1,4 +1,4 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{104:function(t,e,n){"use strict";n.r(e),n.d(e,"default",function(){return E});n(12),n(69);var r=n(73),o=n.n(r),i=n(74),a=n.n(i),s=n(75),u=n.n(s),c=n(76),l=n.n(c),f=n(77),d=n.n(f),p=n(78),h=n.n(p),v=n(79),g=n.n(v),y=n(80),m=n.n(y),b=n(81),x=n.n(b),k=(n(82),n(83)),w=n.n(k);function S(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var E=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t);var r={tools:{header:{class:a.a,inlineToolbar:["link","marker"],config:{placeholder:n.headerPlaceholder||""}},list:{class:m.a,inlineToolbar:!0},quote:{class:u.a,inlineToolbar:!0},code:{class:d.a,shortcut:"CMD+SHIFT+D"},rawTool:{class:x.a,shortcut:"CMD+SHIFT+R"},delimiter:h.a,embed:w.a,inlineCode:{class:g.a,shortcut:"CMD+SHIFT+C"},marker:{class:l.a,shortcut:"CMD+SHIFT+M"}},data:{blocks:[{type:"header",data:{text:"",level:2}}]}};this.editor=new o.a(Object.assign(r,e))}var e,n,r;return e=t,(n=[{key:"save",value:function(){return this.editor.saver.save()}}])&&S(e.prototype,n),r&&S(e,r),t}()},59:function(t,e,n){var r=n(60),o=n(17);t.exports=function(t){return r(o(t))}},60:function(t,e,n){var r=n(11);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},61:function(t,e,n){var r=n(31)("keys"),o=n(20);t.exports=function(t){return r[t]||(r[t]=o(t))}},62:function(t,e,n){var r=n(17);t.exports=function(t){return Object(r(t))}},63:function(t,e,n){var r=n(65),o=n(64);t.exports=Object.keys||function(t){return r(t,o)}},64:function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},65:function(t,e,n){var r=n(18),o=n(59),i=n(66)(!1),a=n(61)("IE_PROTO");t.exports=function(t,e){var n,s=o(t),u=0,c=[];for(n in s)n!=a&&r(s,n)&&c.push(n);for(;e.length>u;)r(s,n=e[u++])&&(~i(c,n)||c.push(n));return c}},66:function(t,e,n){var r=n(59),o=n(16),i=n(67);t.exports=function(t){return function(e,n,a){var s,u=r(e),c=o(u.length),l=i(a,c);if(t&&n!=n){for(;c>l;)if((s=u[l++])!=s)return!0}else for(;c>l;l++)if((t||l in u)&&u[l]===n)return t||l||0;return!t&&-1}}},67:function(t,e,n){var r=n(21),o=Math.max,i=Math.min;t.exports=function(t,e){return(t=r(t))<0?o(t+e,0):i(t,e)}},69:function(t,e,n){var r=n(9);r(r.S+r.F,"Object",{assign:n(70)})},70:function(t,e,n){"use strict";var r=n(63),o=n(71),i=n(72),a=n(62),s=n(60),u=Object.assign;t.exports=!u||n(13)(function(){var t={},e={},n=Symbol(),r="abcdefghijklmnopqrst";return t[n]=7,r.split("").forEach(function(t){e[t]=t}),7!=u({},t)[n]||Object.keys(u({},e)).join("")!=r})?function(t,e){for(var n=a(t),u=arguments.length,c=1,l=o.f,f=i.f;u>c;)for(var d,p=s(arguments[c++]),h=l?r(p).concat(l(p)):r(p),v=h.length,g=0;v>g;)f.call(p,d=h[g++])&&(n[d]=p[d]);return n}:u},71:function(t,e){e.f=Object.getOwnPropertySymbols},72:function(t,e){e.f={}.propertyIsEnumerable},73:function(t,e,n){
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{106:function(t,e,n){"use strict";n.r(e),n.d(e,"default",function(){return E});n(12),n(69);var r=n(73),o=n.n(r),i=n(74),a=n.n(i),s=n(75),u=n.n(s),c=n(76),l=n.n(c),f=n(77),d=n.n(f),p=n(78),h=n.n(p),v=n(79),g=n.n(v),y=n(80),m=n.n(y),b=n(81),x=n.n(b),k=(n(82),n(83)),w=n.n(k);function S(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var E=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t);var r={tools:{header:{class:a.a,inlineToolbar:["link","marker"],config:{placeholder:n.headerPlaceholder||""}},list:{class:m.a,inlineToolbar:!0},quote:{class:u.a,inlineToolbar:!0},code:{class:d.a,shortcut:"CMD+SHIFT+D"},rawTool:{class:x.a,shortcut:"CMD+SHIFT+R"},delimiter:h.a,embed:w.a,inlineCode:{class:g.a,shortcut:"CMD+SHIFT+C"},marker:{class:l.a,shortcut:"CMD+SHIFT+M"}},data:{blocks:[{type:"header",data:{text:"",level:2}}]}};this.editor=new o.a(Object.assign(r,e))}var e,n,r;return e=t,(n=[{key:"save",value:function(){return this.editor.saver.save()}}])&&S(e.prototype,n),r&&S(e,r),t}()},59:function(t,e,n){var r=n(60),o=n(17);t.exports=function(t){return r(o(t))}},60:function(t,e,n){var r=n(11);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},61:function(t,e,n){var r=n(31)("keys"),o=n(20);t.exports=function(t){return r[t]||(r[t]=o(t))}},62:function(t,e,n){var r=n(17);t.exports=function(t){return Object(r(t))}},63:function(t,e,n){var r=n(65),o=n(64);t.exports=Object.keys||function(t){return r(t,o)}},64:function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},65:function(t,e,n){var r=n(18),o=n(59),i=n(66)(!1),a=n(61)("IE_PROTO");t.exports=function(t,e){var n,s=o(t),u=0,c=[];for(n in s)n!=a&&r(s,n)&&c.push(n);for(;e.length>u;)r(s,n=e[u++])&&(~i(c,n)||c.push(n));return c}},66:function(t,e,n){var r=n(59),o=n(16),i=n(67);t.exports=function(t){return function(e,n,a){var s,u=r(e),c=o(u.length),l=i(a,c);if(t&&n!=n){for(;c>l;)if((s=u[l++])!=s)return!0}else for(;c>l;l++)if((t||l in u)&&u[l]===n)return t||l||0;return!t&&-1}}},67:function(t,e,n){var r=n(21),o=Math.max,i=Math.min;t.exports=function(t,e){return(t=r(t))<0?o(t+e,0):i(t,e)}},69:function(t,e,n){var r=n(9);r(r.S+r.F,"Object",{assign:n(70)})},70:function(t,e,n){"use strict";var r=n(63),o=n(71),i=n(72),a=n(62),s=n(60),u=Object.assign;t.exports=!u||n(13)(function(){var t={},e={},n=Symbol(),r="abcdefghijklmnopqrst";return t[n]=7,r.split("").forEach(function(t){e[t]=t}),7!=u({},t)[n]||Object.keys(u({},e)).join("")!=r})?function(t,e){for(var n=a(t),u=arguments.length,c=1,l=o.f,f=i.f;u>c;)for(var d,p=s(arguments[c++]),h=l?r(p).concat(l(p)):r(p),v=h.length,g=0;v>g;)f.call(p,d=h[g++])&&(n[d]=p[d]);return n}:u},71:function(t,e){e.f=Object.getOwnPropertySymbols},72:function(t,e){e.f={}.propertyIsEnumerable},73:function(t,e,n){
 /*!
  * Codex Editor
  * 

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

src/views/layout.twig

@@ -3,6 +3,7 @@
   <head>
     <title>{{ config.title }}</title>
     <link rel="stylesheet" href="/dist/main.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   </head>
   <body>
     {% include "components/header.twig" %}

src/views/pages/form.twig

@@ -46,7 +46,9 @@
       </span>
       <span class="writing-header__save" name="js-submit-save">Save</span>
     </header>
+    <div class="writing-editor">
       <div id="codex-editor"></div>
+    </div>
     <div class="writing-buttons">
       {% if page._id is not empty %}
         <span class="writing-buttons__remove" name="js-submit-remove">Remove</span>

src/views/pages/index.twig

@@ -4,6 +4,7 @@
   <title>{{ config.title }}</title>
   <link rel="stylesheet" href="/dist/main.css" />
   <link rel="preload" href="{{ config.landingFrameSrc }}" as="document">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 </head>
 <body class="landing-body">
   {% include "components/header.twig" %}

src/views/pages/page.twig

@@ -13,7 +13,7 @@
           {% else %}
             href="/page/{{ pageParent._id }}"
           {% endif %}>
-          Parent {{ pageParent.title }}
+          {{ pageParent.title }}
         </a>
       {% endif %}
       <time class="page__header-time">