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 ++++++++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 app/assets/stylesheets/application/_body.scss (limited to 'app/assets/stylesheets/application/_body.scss') 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; +} -- cgit v1.2.3