First pass at something visible

This is a first version of the application, to go beyond simple authentication.

1 files changed, 64 insertions, 0 deletions

diff --git a/app/assets/stylesheets/application/_user_info.scss b/app/assets/stylesheets/application/_user_info.scss
new file mode 100644
index 0000000..be3dad9
--- /dev/null
+++ b/app/assets/stylesheets/application/_user_info.scss
@@ -0,0 +1,64 @@
+/* -----------------------------------------------------------------------------
+User Info 
+----------------------------------------------------------------------------- */
+
+#user_info {
+    position: absolute;
+    right: 0;
+
+    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 {
+    }
+}