From 56a16be5fb51d8f6a8b04e9e7094aa7c57fb8547 Mon Sep 17 00:00:00 2001 From: hellekin 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 +++++++++ app/assets/stylesheets/resources.scss | 3 + app/assets/stylesheets/users.scss | 3 + 5 files changed, 241 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 create mode 100644 app/assets/stylesheets/resources.scss create mode 100644 app/assets/stylesheets/users.scss (limited to 'app/assets/stylesheets') 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 { + } +} diff --git a/app/assets/stylesheets/resources.scss b/app/assets/stylesheets/resources.scss new file mode 100644 index 0000000..5f2717f --- /dev/null +++ b/app/assets/stylesheets/resources.scss @@ -0,0 +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/assets/stylesheets/users.scss b/app/assets/stylesheets/users.scss new file mode 100644 index 0000000..aaf17f7 --- /dev/null +++ b/app/assets/stylesheets/users.scss @@ -0,0 +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/ -- cgit v1.2.3