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...

1 files changed, 70 insertions, 0 deletions

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