From fd102059aa63a3953ccfedfe9efa0e6f7993f72a Mon Sep 17 00:00:00 2001 From: Matt Jankowski Date: Wed, 12 Apr 2017 10:01:59 -0400 Subject: [PATCH] Clean up stylesheet organization (#1591) --- app/assets/stylesheets/application.scss | 306 +-------------------- app/assets/stylesheets/basics.scss | 58 ++++ app/assets/stylesheets/compact_header.scss | 28 ++ app/assets/stylesheets/containers.scss | 61 ++++ app/assets/stylesheets/footer.scss | 29 ++ app/assets/stylesheets/landing_strip.scss | 17 ++ app/assets/stylesheets/lists.scss | 8 + app/assets/stylesheets/reset.scss | 91 ++++++ 8 files changed, 299 insertions(+), 299 deletions(-) create mode 100644 app/assets/stylesheets/basics.scss create mode 100644 app/assets/stylesheets/compact_header.scss create mode 100644 app/assets/stylesheets/containers.scss create mode 100644 app/assets/stylesheets/footer.scss create mode 100644 app/assets/stylesheets/landing_strip.scss create mode 100644 app/assets/stylesheets/lists.scss create mode 100644 app/assets/stylesheets/reset.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index ba16d4a2117..35bdd3b6a3c 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -4,305 +4,13 @@ @import 'fonts/montserrat'; @import 'font-awesome'; -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} - -body { - line-height: 1; -} - -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-thumb { - background: lighten($color1, 4%); - border: 0px none $color5; - border-radius: 50px; -} - -::-webkit-scrollbar-thumb:hover { - background: lighten($color1, 6%); -} - -::-webkit-scrollbar-thumb:active { - background: lighten($color1, 4%); -} - -::-webkit-scrollbar-track { - border: 0px none $color5; - border-radius: 0; - background: rgba($color8, 0.1); -} - -::-webkit-scrollbar-track:hover { - background: $color1; -} - -::-webkit-scrollbar-track:active { - background: $color1; -} - -::-webkit-scrollbar-corner { - background: transparent; -} - -body { - font-family: 'Roboto', sans-serif; - background: $color1 image-url('background-photo.jpeg'); - background-size: cover; - background-attachment: fixed; - font-size: 13px; - line-height: 18px; - font-weight: 400; - color: $color5; - padding-bottom: 140px; - text-rendering: optimizelegibility; - font-feature-settings: "kern"; - text-size-adjust: none; - - &.app-body { - position: fixed; - width: 100%; - height: 100%; - padding: 0; - background: $color1; - } - - &.embed { - background: transparent; - margin: 0; - - .container { - position: absolute; - width: 100%; - height: 100%; - overflow: hidden; - } - } - - &.admin { - background: darken($color1, 4%); - position: fixed; - width: 100%; - height: 100%; - padding: 0; - } - - @media screen and (max-width: 360px) { - padding-bottom: 0; - } -} - -button:focus { - outline: none; -} - -.app-holder { - display: flex; - width: 100%; - height: 100%; - align-items: center; - justify-content: center; -} - -.container { - width: 700px; - margin: 0 auto; - margin-top: 40px; - - @media screen and (max-width: 700px) { - width: 100%; - margin: 0; - } -} - -.logo-container { - max-width: 400px; - margin: 100px auto; - margin-bottom: 0; - cursor: default; - - @media screen and (max-width: 360px) { - margin: 30px auto; - } - - h1 { - display: block; - text-align: center; - color: $color5; - font-size: 48px; - font-weight: 500; - - img { - display: block; - margin: 20px auto; - width: 180px; - height: 180px; - } - - a { - color: inherit; - text-decoration: none; - outline: 0; - - img { - opacity: 0.8; - transition: all 0.8s ease; - } - - &:hover { - img { - opacity: 1; - transition-duration: 0.2s; - } - } - } - - small { - display: block; - font-size: 12px; - font-weight: 400; - font-family: 'Roboto Mono', monospace; - } - } -} - -.no-list { - list-style: none; - - li { - display: inline-block; - margin: 0 5px; - } -} - -.footer { - text-align: center; - margin-top: 30px; - font-size: 12px; - color: darken($color2, 25%); - - .domain { - font-weight: 500; - - a { - color: inherit; - text-decoration: none; - } - } - - .powered-by { - font-weight: 400; - - a { - color: inherit; - text-decoration: underline; - font-weight: 500; - - &:hover { - text-decoration: none; - } - } - } -} - -.compact-header { - h1 { - font-size: 24px; - line-height: 28px; - color: $color3; - overflow: hidden; - font-weight: 500; - margin-bottom: 20px; - - a { - color: inherit; - text-decoration: none; - } - - small { - font-weight: 400; - color: $color2; - } - - img { - display: inline-block; - margin-bottom: -5px; - margin-right: 15px; - width: 36px; - height: 36px; - } - } -} - -.landing-strip { - background: rgba(darken($color1, 7%), 0.8); - color: $color3; - font-weight: 400; - padding: 14px; - border-radius: 4px; - margin-bottom: 20px; - - strong, a { - font-weight: 500; - } - - a { - color: inherit; - text-decoration: underline; - } -} - +@import 'reset'; +@import 'basics'; +@import 'containers'; +@import 'lists'; +@import 'footer'; +@import 'compact_header'; +@import 'landing_strip'; @import 'forms'; @import 'accounts'; @import 'stream_entries'; diff --git a/app/assets/stylesheets/basics.scss b/app/assets/stylesheets/basics.scss new file mode 100644 index 00000000000..c8ff7f5d52e --- /dev/null +++ b/app/assets/stylesheets/basics.scss @@ -0,0 +1,58 @@ +body { + font-family: 'Roboto', sans-serif; + background: $color1 image-url('background-photo.jpeg'); + background-size: cover; + background-attachment: fixed; + font-size: 13px; + line-height: 18px; + font-weight: 400; + color: $color5; + padding-bottom: 140px; + text-rendering: optimizelegibility; + font-feature-settings: "kern"; + text-size-adjust: none; + + &.app-body { + position: fixed; + width: 100%; + height: 100%; + padding: 0; + background: $color1; + } + + &.embed { + background: transparent; + margin: 0; + + .container { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; + } + } + + &.admin { + background: darken($color1, 4%); + position: fixed; + width: 100%; + height: 100%; + padding: 0; + } + + @media screen and (max-width: 360px) { + padding-bottom: 0; + } +} + +button:focus { + outline: none; +} + +.app-holder { + display: flex; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; +} diff --git a/app/assets/stylesheets/compact_header.scss b/app/assets/stylesheets/compact_header.scss new file mode 100644 index 00000000000..8fef05f0fec --- /dev/null +++ b/app/assets/stylesheets/compact_header.scss @@ -0,0 +1,28 @@ +.compact-header { + h1 { + font-size: 24px; + line-height: 28px; + color: $color3; + overflow: hidden; + font-weight: 500; + margin-bottom: 20px; + + a { + color: inherit; + text-decoration: none; + } + + small { + font-weight: 400; + color: $color2; + } + + img { + display: inline-block; + margin-bottom: -5px; + margin-right: 15px; + width: 36px; + height: 36px; + } + } +} diff --git a/app/assets/stylesheets/containers.scss b/app/assets/stylesheets/containers.scss new file mode 100644 index 00000000000..43705b19c9b --- /dev/null +++ b/app/assets/stylesheets/containers.scss @@ -0,0 +1,61 @@ +.container { + width: 700px; + margin: 0 auto; + margin-top: 40px; + + @media screen and (max-width: 700px) { + width: 100%; + margin: 0; + } +} + +.logo-container { + max-width: 400px; + margin: 100px auto; + margin-bottom: 0; + cursor: default; + + @media screen and (max-width: 360px) { + margin: 30px auto; + } + + h1 { + display: block; + text-align: center; + color: $color5; + font-size: 48px; + font-weight: 500; + + img { + display: block; + margin: 20px auto; + width: 180px; + height: 180px; + } + + a { + color: inherit; + text-decoration: none; + outline: 0; + + img { + opacity: 0.8; + transition: all 0.8s ease; + } + + &:hover { + img { + opacity: 1; + transition-duration: 0.2s; + } + } + } + + small { + display: block; + font-size: 12px; + font-weight: 400; + font-family: 'Roboto Mono', monospace; + } + } +} diff --git a/app/assets/stylesheets/footer.scss b/app/assets/stylesheets/footer.scss new file mode 100644 index 00000000000..719bfcf4353 --- /dev/null +++ b/app/assets/stylesheets/footer.scss @@ -0,0 +1,29 @@ +.footer { + text-align: center; + margin-top: 30px; + font-size: 12px; + color: darken($color2, 25%); + + .domain { + font-weight: 500; + + a { + color: inherit; + text-decoration: none; + } + } + + .powered-by { + font-weight: 400; + + a { + color: inherit; + text-decoration: underline; + font-weight: 500; + + &:hover { + text-decoration: none; + } + } + } +} diff --git a/app/assets/stylesheets/landing_strip.scss b/app/assets/stylesheets/landing_strip.scss new file mode 100644 index 00000000000..4c24031600a --- /dev/null +++ b/app/assets/stylesheets/landing_strip.scss @@ -0,0 +1,17 @@ +.landing-strip { + background: rgba(darken($color1, 7%), 0.8); + color: $color3; + font-weight: 400; + padding: 14px; + border-radius: 4px; + margin-bottom: 20px; + + strong, a { + font-weight: 500; + } + + a { + color: inherit; + text-decoration: underline; + } +} diff --git a/app/assets/stylesheets/lists.scss b/app/assets/stylesheets/lists.scss new file mode 100644 index 00000000000..eac9f5a2ca7 --- /dev/null +++ b/app/assets/stylesheets/lists.scss @@ -0,0 +1,8 @@ +.no-list { + list-style: none; + + li { + display: inline-block; + margin: 0 5px; + } +} diff --git a/app/assets/stylesheets/reset.scss b/app/assets/stylesheets/reset.scss new file mode 100644 index 00000000000..71064cc312d --- /dev/null +++ b/app/assets/stylesheets/reset.scss @@ -0,0 +1,91 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-thumb { + background: lighten($color1, 4%); + border: 0px none $color5; + border-radius: 50px; +} + +::-webkit-scrollbar-thumb:hover { + background: lighten($color1, 6%); +} + +::-webkit-scrollbar-thumb:active { + background: lighten($color1, 4%); +} + +::-webkit-scrollbar-track { + border: 0px none $color5; + border-radius: 0; + background: rgba($color8, 0.1); +} + +::-webkit-scrollbar-track:hover { + background: $color1; +} + +::-webkit-scrollbar-track:active { + background: $color1; +} + +::-webkit-scrollbar-corner { + background: transparent; +}