From 56a16be5fb51d8f6a8b04e9e7094aa7c57fb8547 Mon Sep 17 00:00:00 2001
From: hellekin <hellekin@cepheide.org>
Date: Tue, 6 Oct 2020 04:26:25 +0200
Subject: First pass at something visible

This is a first version of the application, to go beyond simple authentication.
---
 app/assets/stylesheets/application/_body.scss      | 143 +++++++++++++++++++++
 app/assets/stylesheets/application/_header.scss    |  28 ++++
 app/assets/stylesheets/application/_user_info.scss |  64 +++++++++
 3 files changed, 235 insertions(+)
 create mode 100644 app/assets/stylesheets/application/_body.scss
 create mode 100644 app/assets/stylesheets/application/_header.scss
 create mode 100644 app/assets/stylesheets/application/_user_info.scss

(limited to 'app/assets/stylesheets/application')

diff --git a/app/assets/stylesheets/application/_body.scss b/app/assets/stylesheets/application/_body.scss
new file mode 100644
index 0000000..cadac51
--- /dev/null
+++ b/app/assets/stylesheets/application/_body.scss
@@ -0,0 +1,143 @@
+
+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;
+    }
+}
+
+
+: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;
+}
diff --git a/app/assets/stylesheets/application/_header.scss b/app/assets/stylesheets/application/_header.scss
new file mode 100644
index 0000000..d0fd5b8
--- /dev/null
+++ b/app/assets/stylesheets/application/_header.scss
@@ -0,0 +1,28 @@
+/* -----------------------------------------------------------------------------
+   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/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 {
+    }
+}
-- 
cgit v1.2.3