Add demo page

The demo page shows a form and an embedded google sheet side by side.
The form needs be be configured with a DEMO_FORM_ID environment variable.

app/assets/config/manifest.js

@@ -1,2 +1,2 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
+//= link application.css

app/assets/stylesheets/application.css.scss

@@ -1,18 +1,3 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */
 @import "bulma/sass/utilities/initial-variables";
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Lobster&family=Comfortaa:wght@400;500;600;700&display=swap');
 @import url('https://use.fontawesome.com/releases/v5.12.0/css/all.css');
@@ -40,6 +25,8 @@ $light: #fff;
 
 @import 'bulma/bulma';
 
+@import './demo';
+
 .is-font-logo {
   font-family: 'Lobster', cursive;
 }

app/assets/stylesheets/demo.css.scss

@@ -0,0 +1,16 @@
+section.demo {
+  height: 90vh;
+  min-height: 600px;
+}
+.demo-form {
+  border: 1px solid $grey-light;
+  padding: 1em;
+  height: 100%;
+}
+section.demo .container, section.demo .columns, section.demo .column {
+  height: 100%;
+}
+#demo-success {
+  text-align: center;
+  padding-top: 1em;
+}