aboutsummaryrefslogtreecommitdiff
path: root/app/javascript
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2021-01-23 15:35:49 +0100
committerhellekin <hellekin@cepheide.org>2021-01-23 15:35:49 +0100
commit73b3fffdbe730c33480682c40e7e8271e75ddf59 (patch)
tree94c60464d43c6d39150802e8110cf51be2c326ee /app/javascript
parentb54d7d8aa172f85d53f44b601e4e81660d148342 (diff)
downloadincommon-map-73b3fffdbe730c33480682c40e7e8271e75ddf59.tar.gz
Move CSS to Webpack
Using both the asset pipeline and webpack is confusing and leads to unpredictable results in production. This commit moves all (S)CSS to Webpack under `app/javascript/scss` so that we can test whether the development interface results in a consistent production deployment. In order to load the ForkAwesome fonts we used a long path: `$fa-font-path: "../../../node_modules/fork-awesome/fonts";` Not sure whether this works...
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/packs/application.js8
-rw-r--r--app/javascript/scss/_agents.scss9
-rw-r--r--app/javascript/scss/_categories.scss9
-rw-r--r--app/javascript/scss/_resources.scss9
-rw-r--r--app/javascript/scss/_sections.scss3
-rw-r--r--app/javascript/scss/_taxonomies.scss44
-rw-r--r--app/javascript/scss/_users.scss9
-rw-r--r--app/javascript/scss/_welcome.scss10
-rw-r--r--app/javascript/scss/application.scss35
-rw-r--r--app/javascript/scss/components/_body.scss167
-rw-r--r--app/javascript/scss/components/_debug.scss18
-rw-r--r--app/javascript/scss/components/_flash.scss35
-rw-r--r--app/javascript/scss/components/_fonts.scss12
-rw-r--r--app/javascript/scss/components/_footer.scss20
-rw-r--r--app/javascript/scss/components/_header.scss34
-rw-r--r--app/javascript/scss/components/_index.scss8
-rw-r--r--app/javascript/scss/components/_map.scss19
-rw-r--r--app/javascript/scss/components/_user_info.scss70
-rw-r--r--app/javascript/scss/taxonomies/_dewey.scss43
19 files changed, 558 insertions, 4 deletions
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 721b8c1..0ddfdb5 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -7,7 +7,6 @@ require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
-
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
@@ -15,11 +14,12 @@ require("@rails/activestorage").start()
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
+import "../scss/application"
+
//= require leaflet
//= require leaflet-defaulticon-compatibility
//= require leaflet.markercluster
import "controllers"
-import "fork-awesome/scss/fork-awesome"
-import "fork-awesome/fonts/forkawesome-webfont"
-import "stylesheets/application"
+
+
diff --git a/app/javascript/scss/_agents.scss b/app/javascript/scss/_agents.scss
new file mode 100644
index 0000000..ec9285d
--- /dev/null
+++ b/app/javascript/scss/_agents.scss
@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc
+ *
+ * SPDX-License-Identifier: LAL-1.3
+ */
+
+// Place all the styles related to the Agents controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/
diff --git a/app/javascript/scss/_categories.scss b/app/javascript/scss/_categories.scss
new file mode 100644
index 0000000..6e6299f
--- /dev/null
+++ b/app/javascript/scss/_categories.scss
@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc
+ *
+ * SPDX-License-Identifier: LAL-1.3
+ */
+
+// Place all the styles related to the Categories controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/
diff --git a/app/javascript/scss/_resources.scss b/app/javascript/scss/_resources.scss
new file mode 100644
index 0000000..eb7411b
--- /dev/null
+++ b/app/javascript/scss/_resources.scss
@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc
+ *
+ * SPDX-License-Identifier: LAL-1.3
+ */
+
+// Place all the styles related to the Resources controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/
diff --git a/app/javascript/scss/_sections.scss b/app/javascript/scss/_sections.scss
new file mode 100644
index 0000000..d540c09
--- /dev/null
+++ b/app/javascript/scss/_sections.scss
@@ -0,0 +1,3 @@
+// Place all the styles related to the sections controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/
diff --git a/app/javascript/scss/_taxonomies.scss b/app/javascript/scss/_taxonomies.scss
new file mode 100644
index 0000000..5bf19e1
--- /dev/null
+++ b/app/javascript/scss/_taxonomies.scss
@@ -0,0 +1,44 @@
+@import "taxonomies/dewey";
+
+[data-controller="taxonomy"] {
+ height: 100%;
+ overflow: hidden auto;
+ scrollbar-color: var(--incommon-clear85) var(--incommon-blue);
+ scrollbar-width: thin;
+
+ nav {
+ position: relative;
+ bottom: 0;
+ margin: 0;
+ padding: 0;
+ height: calc(100% - 7.5rem);
+ padding-top: 32px;
+ max-width: 35rem;
+ width: 89vw;
+
+ display: none;
+ }
+ &.on {
+ nav {
+ display: block;
+ }
+ }
+}
+
+button[data-action="taxonomy#toggle"] {
+ position: absolute;
+ left: 0.7rem;
+ display: block;
+ cursor: pointer;
+ padding: 16px;
+ color: transparent;
+ background: transparent var(--icon-menu-off) top left/32px no-repeat;
+ border: none;
+ text-align: center;
+ z-index: 1002;
+
+ &.on {
+ background-image: var(--icon-menu-on);
+ }
+}
+
diff --git a/app/javascript/scss/_users.scss b/app/javascript/scss/_users.scss
new file mode 100644
index 0000000..38fcd72
--- /dev/null
+++ b/app/javascript/scss/_users.scss
@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc
+ *
+ * SPDX-License-Identifier: LAL-1.3
+ */
+
+// Place all the styles related to the users controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/
diff --git a/app/javascript/scss/_welcome.scss b/app/javascript/scss/_welcome.scss
new file mode 100644
index 0000000..5854dd0
--- /dev/null
+++ b/app/javascript/scss/_welcome.scss
@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc
+ *
+ * SPDX-License-Identifier: LAL-1.3
+ */
+
+// Place all the styles related to the welcome controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/
+
diff --git a/app/javascript/scss/application.scss b/app/javascript/scss/application.scss
new file mode 100644
index 0000000..3bf6259
--- /dev/null
+++ b/app/javascript/scss/application.scss
@@ -0,0 +1,35 @@
+/*
+ *= require normalize.css/normalize.css
+ *= require_self
+ *= require_tree .
+ *= require leaflet
+ *= require leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css
+ *= require leaflet.markercluster/dist/MarkerCluster.css
+ *= require leaflet.markercluster/dist/MarkerCluster.Default.css
+ *= require fork-awesome/scss/fork-awesome.scss
+ *= require fork-awesome/fonts/forkawesome-webfont
+ *
+ */
+
+/* Start with resetting the Stylesheet for all browsers */
+@import "normalize.css/normalize.css";
+
+/* UI */
+@import "components";
+
+/* Controllers */
+
+@import "agents";
+@import "taxonomies", "categories", "sections";
+@import "resources";
+@import "users";
+@import "welcome";
+
+/* Vendors */
+
+@import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
+@import "leaflet.markercluster/dist/MarkerCluster.css";
+@import "leaflet.markercluster/dist/MarkerCluster.Default.css";
+
+$fa-font-path: "../../../node_modules/fork-awesome/fonts";
+@import "fork-awesome/scss/fork-awesome.scss";
diff --git a/app/javascript/scss/components/_body.scss b/app/javascript/scss/components/_body.scss
new file mode 100644
index 0000000..72d90df
--- /dev/null
+++ b/app/javascript/scss/components/_body.scss
@@ -0,0 +1,167 @@
+/*
+ * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc
+ *
+ * SPDX-License-Identifier: LAL-1.3
+ */
+
+html {
+ color: var(--primary);
+ font-family: var(--font-family);
+ font-size: .938em;
+ line-height: 1.4;
+ background-color: var(--secondary);
+ overflow-y: scroll;
+ direction: ltr;
+ display: block;
+ height: 100%;
+}
+
+body {
+ min-width: 0;
+ min-height: 100%;
+ margin: 0 auto;
+ background-attachment: fixed;
+ background-size: cover;
+ display: block;
+
+ &:before, &:after {
+ content: "";
+ display: table;
+ }
+ &:after {
+ clear: both;
+ }
+
+ > main, > header, > footer {
+ display: block;
+ width: calc(100% - 16px);
+ max-width: 1110px;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+}
+
+img {
+ max-width: 100%;
+}
+
+main {
+ position: relative;
+ padding-top: 5.8572em;
+ &:before {
+ content: "";
+ display: table;
+ }
+}
+
+main > article {
+ background-color: rgba(255, 255, 255, 0.8);
+ z-index: 990;
+}
+
+body>aside {
+ position: fixed;
+ z-index: 1000;
+ background-color: var(--incommon-clear85);
+ top: 5rem;
+ bottom: 0;
+ border-top-right-radius: 1rem;
+}
+
+
+:root {
+ --font-family: Helvetica, Arial, sans-serif;
+ --scheme-type: light;
+ --primary: #222;
+ --secondary: #fff;
+ --tertiary: #08c;
+ --quaternary: #e45735;
+ --header-background: #fff;
+ --header-primary: #333;
+ --highlight: #ffff4d;
+ --danger: #e45735;
+ --success: #090;
+ --love: #fa6c8d;
+ --always-black-rgb: 0, 0, 0;
+ --primary-rgb: 34,34,34;
+ --primary-low-rgb: 232.9,232.9,232.9;
+ --secondary-rgb: 255,255,255;
+ --tertiary-rgb: 0,136,204;
+ --primary-very-low: #f8f8f8;
+ --primary-low: #e9e9e9;
+ --primary-low-mid: #bdbdbd;
+ --primary-medium: #919191;
+ --primary-high: #646464;
+ --primary-very-high: #434343;
+ --header-primary-low: #ebebeb;
+ --header-primary-low-mid: #c2c2c2;
+ --header-primary-medium: #999;
+ --header-primary-high: #707070;
+ --header-primary-very-high: #525252;
+ --secondary-low: #4d4d4d;
+ --secondary-medium: gray;
+ --secondary-high: #a6a6a6;
+ --secondary-very-high: #ededed;
+ --tertiary-low: #d1f0ff;
+ --tertiary-medium: #6cf;
+ --tertiary-high: #0aadff;
+ --tertiary-hover: #069;
+ --quaternary-low: #f7cdc2;
+ --highlight-low: #ffffca;
+ --highlight-medium: #ffffa6;
+ --highlight-high: #a6a600;
+ --danger-low: #fbe6e1;
+ --danger-low-mid: rgba(242,171,154,0.7);
+ --danger-medium: #ec8972;
+ --danger-hover: #c63c1b;
+ --success-low: #b8ffb8;
+ --success-medium: #4dff4d;
+ --success-hover: #007a00;
+ --love-low: #fee9ee;
+ --wiki: green;
+ --blend-primary-secondary-5: #f9f9f9;
+ --primary-med-or-secondary-med: #919191;
+ --primary-med-or-secondary-high: #919191;
+ --primary-high-or-secondary-low: #646464;
+ --primary-low-mid-or-secondary-high: #bdbdbd;
+ --primary-low-mid-or-secondary-low: #bdbdbd;
+ --primary-or-primary-low-mid: #222;
+ --highlight-low-or-medium: #ffffca;
+ --tertiary-low-or-tertiary-high: #d1f0ff;
+ --tertiary-med-or-tertiary: #6cf;
+ --secondary-or-primary: #fff;
+ --tertiary-or-white: #08c;
+ --facebook-or-white: #4267b2;
+ --twitter-or-white: #1da1f2;
+ --hljs-comment: #998;
+ --hljs-number: #099;
+ --hljs-string: #d14;
+ --hljs-literal: #458;
+ --hljs-tag: #000080;
+ --hljs-attribute: #008080;
+ --hljs-symbol: #990073;
+ --hljs-bg: #f8f8f8;
+ --google: #fff;
+ --google-hover: #f2f2f2;
+ --instagram: #e1306c;
+ --instagram-hover: #ac194b;
+ --facebook: #4267b2;
+ --facebook-hover: #2d477a;
+ --cas: #70ba61;
+ --twitter: #1da1f2;
+ --twitter-hover: #0c85d0;
+ --github: #100e0f;
+ --github-hover: #463e42;
+ --discord: #7289da;
+ --discord-hover: #4a67cf;
+ --gold: #e7c300;
+ --silver: silver;
+ --bronze: #cd7f32;
+ --incommon-blue: #216778;
+ --incommon-blue50: rgba(33, 103, 120, 0.5);
+ --incommon-clear85: rgba(237, 238, 201, 0.85);
+ --icon-menu-off: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQzNDQiCiAgIHdpZHRoPSIzNi4yNSIKICAgaGVpZ2h0PSIzNi4yNSIKICAgdmVyc2lvbj0iMS4xIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE0MzUwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzNDM0OCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoNDM0MiIKICAgICBkPSJtIDE5LjQ4NDMzLDIxLjIzNDQgcSAwLjY0MDYyLC0xLjQ4NDQgMC42NDA2MiwtMy4xMDk0IDAsLTEuNjI1IC0wLjY0MDYyLC0zLjA5MzcgLTAuNjI1LC0xLjQ4NDQgLTEuNzAzMSwtMi41NjI1IC0xLjA3ODE0LC0xLjA3ODEgLTIuNTYyNDksLTEuNzAzMSAtMS40Njg3MywtMC42NDA3IC0zLjA5MzcxLC0wLjY0MDcgLTEuNjI0OTcsMCAtMy4xMDkzOSwwLjY0MDcgUSA3LjU0NjksMTEuMzkwNyA2LjQ2ODc3LDEyLjQ2ODggNS4zOTA2MywxMy41NDY5IDQuNzUsMTUuMDMxMyA0LjEyNSwxNi41IDQuMTI1LDE4LjEyNSBxIDAsMS42MjUgMC42MjUsMy4xMDk0IDAuNjQwNjIsMS40Njg3IDEuNzE4NzcsMi41NDY5IDEuMDc4MTMsMS4wNzggMi41NDY4NywxLjcxODcgMS40ODQzNSwwLjYyNSAzLjEwOTM5LDAuNjI1IDEuNjI0OTgsMCAzLjA5MzcxLC0wLjYyNSAxLjQ4NDM1LC0wLjY0MDcgMi41NjI0OSwtMS43MTg3IDEuMDc4MTQsLTEuMDc4MiAxLjcwMzEsLTIuNTQ2OSB6IG0gMTIuMDAwMDYsMCBxIDAuNjQwNjMsLTEuNDg0NCAwLjY0MDYzLC0zLjEwOTQgMCwtMS42MjUgLTAuNjQwNjMsLTMuMDkzNyAtMC42MjUsLTEuNDg0NCAtMS43MDMwOSwtMi41NjI1IC0xLjA3ODEzLC0xLjA3ODEgLTIuNTYyNDgsLTEuNzAzMSAtMS40Njg3NCwtMC42NDA3IC0zLjA5MzcxLC0wLjY0MDcgaCAtNi4wMzEyNiBxIDEuODU5MzMsMS40MDYzIDIuOTM3NDcsMy41IDEuMDkzNzUsMi4wOTM4IDEuMDkzNzUsNC41IDAsMi40MDYzIC0xLjA5Mzc1LDQuNSAtMS4wNzgxNCwyLjA5MzcgLTIuOTM3NDcsMy41IGggNi4wMzEyNiBxIDEuNjI0OTcsMCAzLjA5MzcxLC0wLjYyNSAxLjQ4NDM1LC0wLjY0MDcgMi41NjI0OCwtMS43MTg3IDEuMDc4MTQsLTEuMDc4MiAxLjcwMzA5LC0yLjU0NjkgeiBNIDMzLjMyODEyLDE0LjI1IHEgMC43OTY4OCwxLjg0MzggMC43OTY4OCwzLjg3NSAwLDIuMDMxMyAtMC43OTY4OCwzLjg5MDYgLTAuNzk2ODcsMS44NDM4IC0yLjE0MDU5LDMuMTg3NSAtMS4zMjgxMSwxLjMyODEgLTMuMTg3NTEsMi4xMjUgLTEuODQzNzMsMC43OTY5IC0zLjg3NDk4LDAuNzk2OSBIIDEyLjEyNDk2IHEgLTIuMDMxMjYsMCAtMy44OTA1OSwtMC43OTY5IFEgNi4zOTA2NSwyNi41MzEyIDUuMDQ2ODYsMjUuMjAzMSAzLjcxODc1LDIzLjg1OTQgMi45MjE4NywyMi4wMTU2IDIuMTI1LDIwLjE1NjMgMi4xMjUsMTguMTI1IDIuMTI1LDE2LjA5MzggMi45MjE4NywxNC4yNSAzLjcxODc1LDEyLjM5MDYgNS4wNDY4NiwxMS4wNjI1IDYuMzkwNTgsOS43MTg4IDguMjM0MzcsOC45MjE5IDEwLjA5MzcsOC4xMjUgMTIuMTI0OTYsOC4xMjUgaCAxMi4wMDAwOCBxIDIuMDMxMjUsMCAzLjg3NDk4LDAuNzk2OSAxLjg1OTMzLDAuNzk2OSAzLjE4NzUxLDIuMTQwNiAxLjM0MzcyLDEuMzI4MSAyLjE0MDU5LDMuMTg3NSB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDgwODAiIC8+CiAgPGNpcmNsZQogICAgIHI9IjguMDE1MDAwMyIKICAgICBjeT0iMTguMTMzODMxIgogICAgIGN4PSIxMi4xMjU3MDQiCiAgICAgaWQ9InBhdGg0ODk1IgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZWRlZWM5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxOC42MzU4NjIzNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiIC8+Cjwvc3ZnPgo=');
+ --icon-menu-on: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzM0NDMiCiAgIHdpZHRoPSIzNi4yNSIKICAgaGVpZ2h0PSIzNi4yNSIKICAgdmVyc2lvbj0iMS4xIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEzNDQ5Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzQ0NyIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMzQ0MSIKICAgICBkPSJtIDIuOTE4ODU3NCwyMi4wMTY3OSBxIC0wLjc5Mzg1NzEsLTEuODYzNjc0IC0wLjc5Mzg1NzEsLTMuODkzNjggMCwtMi4wMzAwMDYgMC43OTM4NTcxLC0zLjg3NDc3OSBRIDMuNzIwMjc0OSwxMi4zODg0MzggNS4wNDcxNTAxLDExLjA2MTU2MiA2LjM5MjkyNjgsOS43MTU3ODUzIDguMjMzOTE5NCw4LjkxODE0ODMgMTAuMDkzODEzLDguMTI0MjkxMyAxMi4xMjc2LDguMTI0MjkxMyBoIDExLjk5ODU4MiBxIDIuMDMwMDA2LDAgMy44NzQ3NzgsMC43OTM4NTcgMS44NTk4OTQsMC43OTc2MzcgMy4xODY3NjksMi4xNDM0MTM3IDEuMzQ1Nzc3LDEuMzI2ODc2IDIuMTQzNDE1LDMuMTg2NzY5IDAuNzkzODU2LDEuODQ0NzczIDAuNzkzODU2LDMuODc0Nzc5IDAsMi4wMzM3ODUgLTAuNzkzODU2LDMuODkzNjggLTAuNzk3NjM4LDEuODQ0NzcyIC0yLjE0MzQxNSwzLjE4Njc2OSAtMS4zMjMwOTUsMS4zMjY4NzUgLTMuMTg2NzY5LDIuMTI0NTEyIC0xLjg0NDc3MiwwLjc5NzYzOCAtMy44NzQ3NzgsMC43OTc2MzggSCAxMi4xMjc2IHEgLTIuMDMzNzg3LDAgLTMuODkzNjgwNiwtMC43OTM4NTggUSA2LjM5MjkyNjgsMjYuNTMwNDM0IDUuMDQ3MTUwMSwyNS4yMDM1NTkgMy43MjAyNzQ5LDIzLjg2MTU2MiAyLjkyMjYzNzYsMjIuMDE2NzkgWiBNIDIxLjAxODc5OSwyNS41MDIyIHEgMS40ODU2NDYsMC42MjM3NDUgMy4xMTExNjMsMC42MjM3NDUgMS42MjU1MTcsMCAzLjA5MjI2MiwtMC42MjM3NDUgMS40ODU2NDcsLTAuNjQyNjQ2IDIuNTYzMDI1LC0xLjcyMDAyNCAxLjA4MTE1NywtMS4wNzczNzcgMS43MDExMjIsLTIuNTQ3OTAzIDAuNjQyNjQ2LC0xLjQ4NTY0NiAwLjY0MjY0NiwtMy4xMTExNjMgMCwtMS42MjU1MTcgLTAuNjQyNjQ2LC0zLjA5MjI2MiAtMC42MTk5NjUsLTEuNDg1NjQ3IC0xLjcwMTEyMiwtMi41NjMwMjUgLTEuMDc3Mzc4LC0xLjA3NzM3NyAtMi41NjMwMjUsLTEuNzAxMTIyIC0xLjQ2Njc0NSwtMC42NDI2NDYgLTMuMDkyMjYyLC0wLjY0MjY0NiAtMS42MjU1MTcsMCAtMy4xMTExNjMsMC42NDI2NDYgLTEuNDcwNTI2LDAuNjIzNzQ1IC0yLjU0NzkwNCwxLjcwMTEyMiAtMS4wNzczNzcsMS4wNzczNzggLTEuNzIwMDIzLDIuNTYzMDI1IC0wLjYyMzc0NSwxLjQ2Njc0NSAtMC42MjM3NDUsMy4wOTIyNjIgMCwxLjYyNTUxNyAwLjYyMzc0NSwzLjExMTE2MyAwLjY0MjY0NiwxLjQ3MDUyNiAxLjcyMDAyMywyLjU0NzkwMyAxLjA3NzM3OCwxLjA3NzM3OCAyLjU0NzkwNCwxLjcyMDAyNCB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDgwODA7ZmlsbC1vcGFjaXR5OjEiIC8+CiAgPGNpcmNsZQogICAgIHI9IjguMDE1MDAwMyIKICAgICBjeT0iMTguMTMyMDc4IgogICAgIGN4PSIyNC4xMjI3ODkiCiAgICAgaWQ9InBhdGg0ODk1IgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZWRlZWM5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxOC42MzU4NjIzNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiIC8+Cjwvc3ZnPgo=');
+}
diff --git a/app/javascript/scss/components/_debug.scss b/app/javascript/scss/components/_debug.scss
new file mode 100644
index 0000000..0e3aaa7
--- /dev/null
+++ b/app/javascript/scss/components/_debug.scss
@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc
+ *
+ * SPDX-License-Identifier: LAL-1.3
+ */
+
+/*
+ DEBUG
+*/
+
+#debug {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ padding: 0.5rem;
+ background-color: rgba(255,0,0,0.5);
+ color: white;
+}
diff --git a/app/javascript/scss/components/_flash.scss b/app/javascript/scss/components/_flash.scss
new file mode 100644
index 0000000..f168e68
--- /dev/null
+++ b/app/javascript/scss/components/_flash.scss
@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc
+ *
+ * SPDX-License-Identifier: LAL-1.3
+ */
+
+/*
+ FLASH
+*/
+
+#flashes {
+ position: absolute;
+ bottom: 2rem;
+ right: 0;
+ margin: 0 auto;
+ width: 50%;
+ min-width: 24rem;
+ max-width: 64rem;
+ max-height: 10rem;
+ overflow: auto;
+ padding: 0.25rem;
+ z-index: 500;
+
+ > span {
+ display: block;
+ padding: 0.5rem;
+ }
+
+ .alert {
+ background-color: var(--danger-medium);
+ }
+ .notice {
+ background-color: var(--highlight-low);
+ }
+}
diff --git a/app/javascript/scss/components/_fonts.scss b/app/javascript/scss/components/_fonts.scss
new file mode 100644
index 0000000..2a921dc
--- /dev/null
+++ b/app/javascript/scss/components/_fonts.scss
@@ -0,0 +1,12 @@
+/* Override ForkAwesome font path to match Webpack's */
+$fa-font-path: '../media/fonts/';
+
+/* Align font icon with the marker's head */
+.extra-marker-svg i.fa {
+ position: absolute;
+ top: 9px;
+ font-size: 16px;
+ left: -2px;
+ right: 0px;
+ text-align: center;
+}
diff --git a/app/javascript/scss/components/_footer.scss b/app/javascript/scss/components/_footer.scss
new file mode 100644
index 0000000..4ab34a2
--- /dev/null
+++ b/app/javascript/scss/components/_footer.scss
@@ -0,0 +1,20 @@
+body>footer {
+ position: absolute;
+ z-index: 1004;
+ margin: 0 auto;
+ background-color: rgba(0,0,0,0.5);
+ color: white;
+ text-align: center;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 10rem;
+ border-top-left-radius: 1rem;
+ border-top-right-radius: 1rem;
+}
+
+.app-version a:link,
+.app-version a:visited {
+ color: whitesmoke;
+}
+
diff --git a/app/javascript/scss/components/_header.scss b/app/javascript/scss/components/_header.scss
new file mode 100644
index 0000000..3c7d460
--- /dev/null
+++ b/app/javascript/scss/components/_header.scss
@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc
+ *
+ * SPDX-License-Identifier: LAL-1.3
+ */
+
+/* -----------------------------------------------------------------------------
+ HEADER
+----------------------------------------------------------------------------- */
+
+body > header {
+ position: fixed;
+ backface-visibility: hidden;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ margin: 0 auto;
+ height: 4em;
+ background-color: var(--header-background);
+ box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
+ margin-bottom: 15px;
+ display: flex;
+ align-items: center;
+ z-index: 999;
+
+ > h1 {
+ display: flex;
+ font-size: 1em;
+ img {
+ height: 2.667em;
+ }
+ }
+}
diff --git a/app/javascript/scss/components/_index.scss b/app/javascript/scss/components/_index.scss
new file mode 100644
index 0000000..3730d5e
--- /dev/null
+++ b/app/javascript/scss/components/_index.scss
@@ -0,0 +1,8 @@
+@import "body";
+@import "debug";
+@import "flash";
+@import "fonts";
+@import "footer";
+@import "header";
+@import "map";
+@import "user_info";
diff --git a/app/javascript/scss/components/_map.scss b/app/javascript/scss/components/_map.scss
new file mode 100644
index 0000000..ba86dd4
--- /dev/null
+++ b/app/javascript/scss/components/_map.scss
@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc
+ *
+ * SPDX-License-Identifier: LAL-1.3
+ */
+
+/*
+ MAP
+*/
+
+#map {
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
diff --git a/app/javascript/scss/components/_user_info.scss b/app/javascript/scss/components/_user_info.scss
new file mode 100644
index 0000000..765be0a
--- /dev/null
+++ b/app/javascript/scss/components/_user_info.scss
@@ -0,0 +1,70 @@
+/*
+ * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc
+ *
+ * SPDX-License-Identifier: LAL-1.3
+ */
+
+/* -----------------------------------------------------------------------------
+User Info
+----------------------------------------------------------------------------- */
+
+#user_info {
+ position: absolute;
+ right: 0.8rem;
+
+ nav {
+ top: 0;
+ padding: 0.7rem;
+
+ ul {
+ display: none;
+ position: absolute;
+ right: 0;
+ background-color: var(--header-background);
+ box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
+ margin: 0;
+ list-style: none;
+ padding-left: 0;
+ z-index: 1000;
+
+ li {
+ padding: 0.25em 1em;
+ width: 12rem;
+ }
+ }
+
+ &:focus, &:hover {
+ padding-left: 6rem;
+ ul {
+ display: block;
+ margin-top: 0.4em;
+ padding-top: 1em;
+ }
+ }
+
+ > a {
+ display: block;
+ height: 100%;
+ width: 2.2857em;
+ height: 2.2857em;
+ padding: 0.2143em;
+ text-decoration: none;
+ cursor: pointer;
+ border-top: 1px solid transparent;
+ border-left: 1px solid transparent;
+ border-right: 1px solid transparent;
+ transition: all linear 0.15s;
+ outline: none;
+
+ > img {
+ border-radius: 50%;
+ }
+ }
+ }
+
+ &.authenticated {
+
+ }
+ &.anonymous {
+ }
+}
diff --git a/app/javascript/scss/taxonomies/_dewey.scss b/app/javascript/scss/taxonomies/_dewey.scss
new file mode 100644
index 0000000..a26bc24
--- /dev/null
+++ b/app/javascript/scss/taxonomies/_dewey.scss
@@ -0,0 +1,43 @@
+/* Dewey Taxonomy */
+#taxonomy-2519915f-d19c-4281-b758-f5ddb889d7fa {
+ ol {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ li {
+ padding: 0.5rem 1rem;
+ font-weight: normal;
+ text-align: left;
+ z-index: 1001;
+ }
+
+ ol {
+ display: none;
+ }
+ }
+ .active {
+ font-weight: bold;
+ ol {
+ display: block;
+ z-index: 1002;
+ }
+ li.active {
+ text-align: right;
+ z-index: 1002;
+ }
+ }
+
+ #category-1 { background-color: #BCBCBC; } /* #BCBCBC */
+ #category-2 { background-color: #95a5a6; } /* #FF9200 */
+ #category-3 { background-color: #848482; } /* #FFEB00 */
+ #category-4 { background-color: #948279; } /* #7CFB80 */
+ #category-5 { background-color: #59706a; } /* #16A085 */
+ #category-6 { background-color: #16a085; } /* #97C000 */
+ #category-7 { background-color: #27ae60; } /* #C6B117 */
+ #category-8 { background-color: #2980b9; } /* #7E8AE0 */
+ #category-9 { background-color: #34495e; } /* #677362 */
+ #category-10 { background-color: #bd3525; }
+ #category-11 { background-color: #d35400; } /* #948279 */
+ #category-12 { background-color: #eead0e; } /* #EEAD0E */
+}