style settings and add global form element styling

assets/stylesheets/formhack.css

@@ -0,0 +1,260 @@
+/* Based on FormHack v1.2.0 (formhack.io) */
+/* But with some custom modifications */
+
+/* Config ----------------------------- */
+:root {
+
+  /* Font */
+  --fh-font-family: 'Raleway', sans-serif;
+  --fh-font-size: 16px;
+  --fh-font-color: rgb(40, 40, 40);
+
+  /* Borders */
+  --fh-border-radius: 5px;
+  --fh-border-width: 1px;
+  --fh-border-style: solid;
+  --fh-border-color: rgb(200, 200, 200);
+
+  /* Inputs, Textareas, Select, Option */
+  --fh-input-height: 40px;
+  --fh-input-width: 100%;
+  --fh-input-max-width: 100%;
+  --fh-input-bg-color: #fff;
+  --fh-focus-bg-color: var(--fh-input-bg-color);
+  --fh-focus-border-color: var(--color-palette-blue);
+  --fh-focus-font-color: var(--fh-font-color);
+
+  /* Select Vendor Styling */
+  --fh-select-vendor-styling: none; /* comment this out to maintain vendor styling */
+
+
+  /* Buttons & Input Submits */
+  --fh-button-height: 40px;
+  --fh-button-width: 100%;
+  --fh-button-min-width: 200px;
+  --fh-button-font-color: var(--cta-color);
+  --fh-button-bg-color: var(--cta-bg);
+  --fh-button-hover-bg-color: color(var(--fh-button-bg-color) tint(20%));
+  --fh-button-hover-font-color: var(--fh-button-font-color);
+
+  /* Layout */
+  --fh-layout-display: block;
+  --fh-layout-margin: var(--grid-gutter) 0; /* change to "10px auto" to center */
+  --fh-layout-text-align: left;
+}
+
+
+
+/* Global Reset Styles ------------------ */
+
+input,
+textarea,
+select,
+option,
+optgroup,
+button,
+legend,
+fieldset,
+.cta {
+  box-sizing: border-box;
+  outline: none;
+
+  font-family: var(--fh-font-family);
+  font-size: var(--fh-font-size);
+  color: var(--fh-font-color);
+  vertical-align: top;
+
+  display: var(--fh-layout-display);
+  margin: var(--fh-layout-margin);
+  text-align: var(--fh-layout-text-align);
+}
+
+
+datalist {
+  font-family: var(--fh-font-family);
+  font-size: var(--fh-font-size);
+}
+
+label {
+  display: var(--fh-layout-display);
+  margin: var(--fh-layout-margin);
+  text-align: var(--fh-layout-text-align);
+  font-weight: bold;
+
+  & + input {
+    margin-top: calc(var(--grid-gutter) * 0.5 * -1)
+  }
+}
+
+
+
+/* Input & Textarea ------------------ */
+
+/* Fields with standard width */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="color"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="number"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+input[list],
+input[type="file"],
+/* select, */
+textarea {
+  width: var(--fh-input-width);
+  max-width: var(--fh-input-max-width);
+  padding: calc( var(--fh-input-height) / 5 );
+  background-color: var(--fh-input-bg-color);
+
+  border-radius: var(--fh-border-radius);
+  border-width: var(--fh-border-width);
+  border-style: var(--fh-border-style);
+  border-color: var(--fh-border-color);
+}
+
+/* Fields with standard height */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="color"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="number"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+input[list] {
+  height: var(--fh-input-height);
+  -webkit-appearance: none;
+}
+
+/* Other */
+
+textarea {
+  -webkit-appearance: none;
+  overflow: auto;
+}
+
+input[type="range"] {
+  height: var(--fh-input-height);
+  width: var(--fh-input-width);
+  max-width: var(--fh-input-max-width);
+}
+
+input[type="file"] {
+  min-height: var(--fh-input-height);
+}
+
+input[type="search"] {
+  height: var(--fh-input-height);
+  -webkit-appearance: none;
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline-block;
+  vertical-align: middle;
+}
+/* For checkbox and radio to be centered, need to wrap the input and label in a span -
+/* .checkbox-container {
+/*  display: block;
+/*  text-align: center;
+/* }
+
+
+/* Fieldset ------------------ */
+
+fieldset {
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  padding: 0;
+  font-weight: inherit;
+}
+
+/* Buttons, Input Type Submit/Reset ------------------ */
+
+button,
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
+input[type="image"],
+.cta {
+  display: inline-block;
+  height: var(--fh-button-height);
+  min-width: var(--fh-button-min-width);
+  background-color: var(--fh-button-bg-color);
+  padding: 0 2em;
+  cursor: pointer;
+
+  line-height: var(--fh-button-height);
+  color: var(--fh-button-font-color);
+  font-weight: normal;
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  border: none;
+  border-radius: var(--cta-radius);
+  text-align: center;
+}
+
+input[type="image"] {
+  text-align: center;
+  padding: calc( var(--fh-input-height) / 5 );
+}
+
+/* States ------------------ */
+
+input[disabled],
+textarea[disabled],
+select[disabled],
+option[disabled],
+button[disabled] {
+  cursor: not-allowed;
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+option:focus,
+button:focus,
+.cta:focus  {
+  background-color: var(--fh-button-hover-bg-color);
+  color: var(--fh-button-hover-font-color);
+}
+
+input[type="checkbox"]:focus,
+input[type="radio"]:focus {
+  outline: var(--fh-focus-border-color) solid 2px;
+}
+
+button:hover,
+input[type="button"]:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+button:focus,
+input[type="button"]:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+.cta:hover,
+.cta:focus {
+  background-color: var(--fh-button-hover-bg-color);
+  color: var(--fh-button-hover-font-color);
+}

assets/stylesheets/forms.css

@@ -0,0 +1,10 @@
+.form-item {
+  & + .form-item {
+    margin-top: var(--grid-gutter);
+  }
+  & .help-text {
+    font-size: 0.9em;
+    color: var(--color-text-grey);
+    margin-top: calc(var(--grid-gutter) * -1);
+  }
+}

assets/stylesheets/global.css

@@ -148,14 +148,3 @@ body {
     }
   }
 }
-
-.cta {
-  display: inline-block;
-  box-sizing: border-box;
-  min-width: 200px;
-  padding: 0.5em 2em;
-  color: var(--cta-color);
-  background: var(--cta-bg);
-  border-radius: var(--cta-radius);
-  text-align: center;
-}

assets/stylesheets/header.css

@@ -105,6 +105,13 @@
       & label + select {
         margin-left: 0.5em;
       }
+
+      & select,
+      & label {
+        display: inline-block;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
     }
   }
 }

assets/stylesheets/style.css

@@ -3,6 +3,9 @@
 @import './variables';
 
 @import './typography';
+@import './formhack';
+@import './forms';
+
 @import './global';
 @import './header';
 @import './footer';

assets/stylesheets/variables.css

@@ -6,10 +6,12 @@
 
   --line-height: 1.5em;
 
+  --color-palette-blue: #5c9fef;
+
   --color-text-default: #2a303a;
   --color-text-grey: #8091a5;
 
-  --color-link-content: #5c9fef;
+  --color-link-content: var(--color-palette-blue);
 
   --color-bg-default: #fff;
   --color-bg-grey: #f7f9fa;
@@ -22,6 +24,6 @@
   --card-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
 
   --cta-color: #fff;
-  --cta-bg: #5b9fef;
+  --cta-bg: var(--color-palette-blue);
   --cta-radius: 3px;
 }

public/stylesheets/style.css

@@ -459,6 +459,259 @@ a {
   text-decoration: none;
 }
 
+/* Based on FormHack v1.2.0 (formhack.io) */
+
+/* But with some custom modifications */
+
+/* Config ----------------------------- */
+
+:root {
+
+  /* Font */
+
+  /* Borders */
+
+  /* Inputs, Textareas, Select, Option */
+
+  /* Select Vendor Styling */ /* comment this out to maintain vendor styling */
+
+
+  /* Buttons & Input Submits */
+
+  /* Layout */ /* change to "10px auto" to center */
+}
+
+/* Global Reset Styles ------------------ */
+
+input,
+textarea,
+select,
+option,
+optgroup,
+button,
+legend,
+fieldset,
+.cta {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  outline: none;
+
+  font-family: 'Raleway', sans-serif;
+  font-size: 16px;
+  color: rgb(40, 40, 40);
+  vertical-align: top;
+
+  display: block;
+  margin: 16px 0;
+  margin: 1rem 0;
+  text-align: left;
+}
+
+datalist {
+  font-family: 'Raleway', sans-serif;
+  font-size: 16px;
+}
+
+label {
+  display: block;
+  margin: 16px 0;
+  margin: 1rem 0;
+  text-align: left;
+  font-weight: bold
+}
+
+label + input {
+  margin-top: -8px;
+  margin-top: -0.5rem;
+}
+
+/* Input & Textarea ------------------ */
+
+/* Fields with standard width */
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="color"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="number"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+input[list],
+input[type="file"],
+/* select, */
+textarea {
+  width: 100%;
+  max-width: 100%;
+  padding: 8px;
+  background-color: #fff;
+
+  border-radius: 5px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgb(200, 200, 200);
+}
+
+/* Fields with standard height */
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="color"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="number"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+input[list] {
+  height: 40px;
+  -webkit-appearance: none;
+}
+
+/* Other */
+
+textarea {
+  -webkit-appearance: none;
+  overflow: auto;
+}
+
+input[type="range"] {
+  height: 40px;
+  width: 100%;
+  max-width: 100%;
+}
+
+input[type="file"] {
+  min-height: 40px;
+}
+
+input[type="search"] {
+  height: 40px;
+  -webkit-appearance: none;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* For checkbox and radio to be centered, need to wrap the input and label in a span -
+/* .checkbox-container {
+/*  display: block;
+/*  text-align: center;
+/* }
+
+
+/* Fieldset ------------------ */
+
+fieldset {
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  padding: 0;
+  font-weight: inherit;
+}
+
+/* Buttons, Input Type Submit/Reset ------------------ */
+
+button,
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
+input[type="image"],
+.cta {
+  display: inline-block;
+  height: 40px;
+  min-width: 200px;
+  background-color: #5c9fef;
+  padding: 0 2em;
+  cursor: pointer;
+
+  line-height: 40px;
+  color: #fff;
+  font-weight: normal;
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  border: none;
+  border-radius: 3px;
+  text-align: center;
+}
+
+input[type="image"] {
+  text-align: center;
+  padding: 8px;
+}
+
+/* States ------------------ */
+
+input[disabled],
+textarea[disabled],
+select[disabled],
+option[disabled],
+button[disabled] {
+  cursor: not-allowed;
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+option:focus,
+button:focus,
+.cta:focus  {
+  background-color: rgb(125, 178, 242);
+  color: #fff;
+}
+
+input[type="checkbox"]:focus,
+input[type="radio"]:focus {
+  outline: #5c9fef solid 2px;
+}
+
+button:hover,
+input[type="button"]:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+button:focus,
+input[type="button"]:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+.cta:hover,
+.cta:focus {
+  background-color: rgb(125, 178, 242);
+  color: #fff;
+}
+
+.form-item + .form-item {
+  margin-top: 16px;
+  margin-top: 1rem;
+}
+
+.form-item .help-text {
+  font-size: 0.9em;
+  color: #8091a5;
+  margin-top: -16px;
+  margin-top: -1rem;
+}
+
 body {
   background-color: #fff;
   color: #2a303a;
@@ -672,18 +925,6 @@ body {
   font-weight: bold;
 }
 
-.cta {
-  display: inline-block;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  min-width: 200px;
-  padding: 0.5em 2em;
-  color: #fff;
-  background: #5b9fef;
-  border-radius: 3px;
-  text-align: center;
-}
-
 #header {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -840,6 +1081,13 @@ body {
   margin-left: 0.5em;
 }
 
+.header__navarea form fieldset select,
+      .header__navarea form fieldset label {
+  display: inline-block;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 #footer {
   margin: 16px 0;
   margin: 1rem 0;

views/settings.pug

@@ -3,11 +3,23 @@ extends layout
 block content
   .wrapper
     h1= title
+    p To query and get content using the APIs, client apllications need to authenticate iwth both the Space ID and an access token.
+
     form(action=`/settings` method="POST" class="form")
-      label(for="space") Space
+      .form-item
+        label(for="space") Space ID
         input(type="text" name="space" value=settings.space)
+        .help-text Some help text we still need to define
+
+      .form-item
         label(for="cda") Delivery API Key
         input(type="text" name="cda" value=settings.cda)
+        .help-text Some help text we still need to define
+
+      .form-item
         label(for="cpa") Preview API Key
         input(type="text" name="cpa" value=settings.cpa)
-      input(type="submit" value="Save →" class="button")
+        .help-text Some help text we still need to define
+
+      .form-item
+        input.cta(type="submit" value="Load settings")