UI updates; not stable

assets/public_src/css/main.css

@@ -1,7 +1,7 @@
 body {
   font-family: 'Roboto', sans-serif;
   color: #212121;
-  background-color: #f5f5f5;
+  background-color: #fff;
   height: 100%;
   width: 100%;
   padding-top: 3em;
@@ -223,7 +223,6 @@ input[type="submit"] {
   color: #000;
   font-weight: normal;
   background-color: #FFEB3B;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
   -webkit-transition: .5s ease background-color;
   transition: .5s ease background-color;
 }
@@ -251,6 +250,7 @@ button.delete,
 button.rename {
   color: #fff;
   padding: 0.063em 0.375em;
+  border-radius: 50%;
 }
 
 button.add {
@@ -262,7 +262,21 @@ button.add:hover {
 }
 
 button.delete {
-  background-color: #F44336;
+  background-color: #E53935;
+}
+
+label + .delete,
+h3 + .delete {
+  visibility: hidden;
+  border-radius: .13em;
+  padding: 0 .3em;
+  font-size: .8em;
+  border: 1px solid #D32F2F;
+}
+
+.block:hover .delete,
+fieldset:hover .delete {
+  visibility: visible;
 }
 
 button.delete:hover {
@@ -319,34 +333,30 @@ fieldset > .actions {
 }
 
 .blocks {
-  -webkit-column-count: 4;
+  column-count: 2;
-  -moz-column-count: 4;
-  column-count: 4;
-  -webkit-column-gap: 1em;
-  -moz-column-gap: 1em;
   column-gap: 1em;
 }
 
 .block,
 fieldset {
   display: inline-block;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  margin-bottom: .6em;
-  background-color: #fff;
-  padding: 0.6em;
   box-sizing: border-box;
-  margin: 0 0 1em;
   position: relative;
   width: 100%;
   border: 0;
+  padding: 0;
 }
 
 .block label,
 fieldset label,
 fieldset h3 {
-  font-weight: bold;
+  font-weight: 700;
-  display: block;
+display: block;
-  margin-top: 0;
+font-size: 1em;
-  font-size: 1em;
+margin: 0 0 .3em;
+color: #424242;
+    display: inline-block;
 }
 
 .block textarea {
@@ -358,6 +368,40 @@ fieldset h3 {
   overflow: hidden;
 }
 
+.block input,
+.block textarea,
+fieldset .itens {
+  background-color: #fafafa;
+  border: 1px solid #e2e2e2;
+  border-radius: .2em;
+  padding: .4em;
+  color: #616161;
+}
+
+div[data-type="array-item"],
+div[data-type="array-item"] + .add {
+  display: inline-block;
+  width: auto;
+  background-color: #2196F3;
+  color: #E3F2FD;
+  border-radius: .6em;
+  margin-bottom: .2em;
+}
+
+div[data-type="array-item"] input {
+  padding: .2em .5em;
+}
+
+div[data-type="array-item"] .actions {
+  display: inline-block;
+    padding: .2em
+}
+
+div[data-type="array-item"] .delete {
+  background-color: transparent;
+  box-shadow: 0 0 0 0;
+}
+
 input {
   border: 0;
   outline: 0;
@@ -370,8 +414,8 @@ input[type="submit"] {
 }
 
 fieldset input {
-  width: calc(100% - 1.57em);
+  display: inline-block;
-  margin: 0.5em 0;
+  width: auto;
 }
 
 .complete .block[data-content="title"] {
@@ -664,19 +708,11 @@ fieldset input {
   }
 }
 
-@media screen and (max-width: 900px) {
-  .blocks {
-    -webkit-column-count: 3;
-    -moz-column-count: 3;
-    column-count: 3;
-  }
-}
-
 @media screen and (max-width: 600px) {
   .blocks {
-    -webkit-column-count: 2;
+    -webkit-column-count: 1;
-    -moz-column-count: 2;
+    -moz-column-count: 1;
-    column-count: 2;
+    column-count: 1;
   }
   body > nav span {
     display: none;
@@ -697,11 +733,6 @@ fieldset input {
 }
 
 @media screen and (max-width: 350px) {
-  .blocks {
-    -webkit-column-count: 1;
-    -moz-column-count: 1;
-    column-count: 1;
-  }
   .browse .actions {
     text-align: center;
   }

assets/templates/base_full.tmpl

@@ -9,8 +9,9 @@
   <title>{{ if Defined . "Name" }}{{ .Name }}{{ end }}</title>
 
   <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+  <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700,400italic' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="{{ if and (Defined . "User") }}{{ .User.Admin }}{{ else }}{{ .Config.Admin }}{{ end }}/assets/css/main.min.css">
-  {{ if not (eq .Config.Styles "") }}<link rel="stylesheet" href="{{ .Config.Styles }}">{{ end }}
+  {{ if (Defined . "Config") }}{{ if not (eq .Config.Styles "") }}<link rel="stylesheet" href="{{ .Config.Styles }}">{{ end }}{{ end }}
 
   <script src="{{ if and (Defined . "User") }}{{ .User.Admin }}{{ else }}{{ .Config.Admin }}{{ end }}/assets/js/plugins.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>

assets/templates/frontmatter.tmpl

@@ -4,20 +4,15 @@
   {{ if or (eq $value.Type "object") (eq $value.Type "array") }}
   <fieldset id="{{ $value.Name }}" data-type="{{ $value.Type }}">
     <h3>{{ SplitCapitalize $value.Title }}</h3>
-    <span class="actions">
+    <button class="delete">remove</button>
-      <button class="add">&#43;</button>
+    {{ if (eq $value.Type "array") }}<div class="itens">{{ end }}{{ template "frontmatter" $value.Content }}{{ if (eq $value.Type "array") }}<button class="add">&#43;</button></div>{{ end }}
-      <button class="delete">&#8722;</button>
-    </span>
-    {{ template "frontmatter" $value.Content }}
   </fieldset>
   {{ else }}
 
   {{ if not (eq $value.Parent.Type "array") }}
   <div class="block" id="block-{{ $value.Name }}" data-content="{{ $value.Name }}">
     <label for="{{ $value.Name }}">{{ SplitCapitalize $value.Title }}</label>
-    <span class="actions">
+    <button class="delete">remove</button>
-      <button class="delete">&#8722;</button>
-    </span>
 
   {{ end }}
 
@@ -36,7 +31,7 @@
   {{ if not (eq $value.Parent.Type "array") }}</div>{{ end }}
 
   {{ if eq $value.Parent.Type "array" }}
-  <span class="actions"><button class="delete">&#8722;</button></span></div>
+  <span class="actions"><button class="delete">&#215;</button></span></div>
   {{ end }}
 
 {{ end }}

hugo.go

@@ -1,6 +1,6 @@
 //go:generate go get github.com/jteeuwen/go-bindata
 //go:generate go install github.com/jteeuwen/go-bindata/go-bindata
-//go:generate go-bindata -prefix assets/ -pkg assets -o routes/assets/assets.go assets/templates/ assets/public/...
+//go:generate go-bindata -debug -prefix assets/ -pkg assets -o routes/assets/assets.go assets/templates/ assets/public/...
 
 // Package hugo makes the bridge between the static website generator Hugo
 // and the webserver Caddy, also providing an administrative user interface.