From 1fb650f48213117fb3ad3eedc6c041d7269adf05 Mon Sep 17 00:00:00 2001 From: Kelly Rauchenberger Date: Fri, 30 Jun 2017 18:23:20 -0400 Subject: Split up stylesheets for each layout --- app/assets/stylesheets/application.css.scss | 252 ---------------------------- app/assets/stylesheets/entries.scss | 57 ------- app/assets/stylesheets/main.css.scss | 4 + app/assets/stylesheets/main/entries.scss | 60 +++++++ app/assets/stylesheets/main/layout.scss | 136 +++++++++++++++ app/assets/stylesheets/main/records.scss | 63 +++++++ app/assets/stylesheets/records.scss | 61 ------- app/assets/stylesheets/userdata.css.scss | 4 + app/assets/stylesheets/userdata/layout.scss | 93 ++++++++++ app/views/layouts/application.html.haml | 2 +- app/views/layouts/userdata.html.haml | 14 +- app/views/users/sessions/new.html.haml | 6 +- 12 files changed, 371 insertions(+), 381 deletions(-) delete mode 100644 app/assets/stylesheets/application.css.scss delete mode 100644 app/assets/stylesheets/entries.scss create mode 100644 app/assets/stylesheets/main.css.scss create mode 100644 app/assets/stylesheets/main/entries.scss create mode 100644 app/assets/stylesheets/main/layout.scss create mode 100644 app/assets/stylesheets/main/records.scss delete mode 100644 app/assets/stylesheets/records.scss create mode 100644 app/assets/stylesheets/userdata.css.scss create mode 100644 app/assets/stylesheets/userdata/layout.scss (limited to 'app') diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss deleted file mode 100644 index a1445d6..0000000 --- a/app/assets/stylesheets/application.css.scss +++ /dev/null @@ -1,252 +0,0 @@ -/* - * This is a manifest file that'll be compiled into application.css, which will include all the files - * listed below. - * - * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's - * vendor/assets/stylesheets directory can be referenced here using a relative path. - * - * You're free to add application-wide styles to this file and they'll appear at the bottom of the - * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS - * files in this directory. Styles in this file should be added after the last require_* statement. - * It is generally better to create a new file per style scope. - * - *= require normalize-rails - *= require_tree . - *= require_self - */ - -@import url('https://fonts.googleapis.com/css?family=Inconsolata'); -@import url('https://fonts.googleapis.com/css?family=Slabo+27px'); -@import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); - -body#main-body { - background-color: #bfefff; - height: 100%; -} - -#container { - height: 100%; - margin: 7em auto 0; - width: 75%; /* 66% */ - box-sizing: border-box; - min-width: 890px; - display: -webkit-flex; - display: flex; - flex-direction: row-reverse; -} - -@keyframes trottingPonies { - from { background-position-x: 0px; } - to { background-position-x: -1280px; } -} - -#banner { - background-image: image-url("walk_cycle.png"); - background-repeat: repeat-x; - animation: trottingPonies 1s steps(16) infinite; - width: 100%; - padding: 1em; - box-sizing: border-box; - text-indent: -9999px; - height: 80px; - margin-bottom: -80px; - position: relative; - top: -70px; - - a { - display: block; - width: 100%; - height: 55px; - } -} - -#main { - background-color: white; - -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); - box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); - width: 75%; - min-width: 720px -} - -#content { - box-sizing: border-box; - padding-top: 1em; -} - -#flash { - width: 100%; - text-align: center; - padding: .25em; - font-weight: bold -} - -.flash-notice { - background-color: #fffde8; -} - -.flash-alert { - background-color: #ff6a6a; -} - -body#userdata-body { - background-color: #eeeeee; - height: 100%; -} - -#userdata-container { - margin: 4em auto 0; - width: 25%; -} - -#userdata-form { - background-color: #fefefe; - -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); - box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius: 2px 2px 2px 2px; - padding: 1em; -} - -#userdata-form .field { - margin-bottom: 1em; -} - -#userdata-form .field label { - display: block; - margin-bottom: .25em; -} - -#userdata-form input[type=text], #userdata-form input[type=password] { - font-size: 24px; - padding: 3px; - width: 100%; - box-sizing: border-box; - -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7); - -moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7); - box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7); - border: 1px solid #ddd; - outline: 0; - border-radius: 0; -} - -.remember-me-field { - float: left; -} - -.submit-field { - text-align: right; -} - -.userdata-link { - margin: 1em; -} - -.userdata-link a { - text-decoration: none; -} - -.userdata-link a:hover { - text-decoration: underline; -} - -#userdata-form, .userdata-link a, .userdata-link a:visited { - color: #555d66; -} - -#userdata-form label, .userdata-link a { - font-size: .75em; -} - -#userdata-flash { - color: black; - background-color: white; - padding: .75em; - margin-bottom: 2em; - font-size: .8em; - -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); - box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); -} - -.userdata-flash-alert { - border-left: 5px solid red; -} - -.userdata-flash-notice { - border-left: 5px solid green; -} - -.userdata-flash-tag { - font-weight: bold; -} - -#sidebar { - box-sizing: border-box; - width: 25%; - font-size: .75em; - color: black; - border-left: 1px solid #eee; - margin-top: 1em; - margin-bottom: 2em; -} - -#sidebar h2 { - font-size: 1em; - margin: 0; -} - -.sidebar-module { - padding: 1em; - margin-top: 1em; - box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75); -} - -.sidebar-module:nth-child(2n+1) { - background-color: #feff8f; -} - -.sidebar-module:nth-child(2n+2) { - background-color: #8fefab; -} - -.sidebar-module p { - margin-bottom: 0; -} - -.sidebar-module ul { - padding-left: 0; - margin-bottom: 0; -} - -.sidebar-module li { - list-style-type: none; -} - -.sidebar-module a { - text-decoration: none; -} - -.sidebar-module a:hover { - text-decoration: underline; -} - -.sidebar-module a:visited { - color: #352712; -} - -.breadcrumb { - margin-left: 1em; - - a, a:visited { - color: #555d66; - text-decoration: none; - font-size: .75em; - } - - a:hover { - text-decoration: underline; - } -} diff --git a/app/assets/stylesheets/entries.scss b/app/assets/stylesheets/entries.scss deleted file mode 100644 index 6833141..0000000 --- a/app/assets/stylesheets/entries.scss +++ /dev/null @@ -1,57 +0,0 @@ -// Place all the styles related to the Entries controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ - -#blog-post { - font-size: 16px; - line-height: 24px; - margin: 0 3em; - - h2 { - font-size: 45px; - line-height: 48px; - margin-top: .5em; - } - - h3 { - font-size: 37px; - line-height: 42px; - } - - h2, h3 { - font-family: 'Slabo 27px', serif; - margin-bottom: 0; - font-weight: normal; - } - - #blog-content { - hyphens: auto; - word-wrap: break-word; - font-family: 'Roboto', sans-serif; - text-align: justify; - - a { - text-decoration: none; - font-weight: bold; - - &, &:visited { - color: #ee2c2c; - } - - &:hover { - text-decoration: underline; - color: #9ea1ad; - } - } - - li { - & + li { - margin-top: 1em; - } - } - - img { - max-width: 100%; - } - } -} diff --git a/app/assets/stylesheets/main.css.scss b/app/assets/stylesheets/main.css.scss new file mode 100644 index 0000000..ceb0808 --- /dev/null +++ b/app/assets/stylesheets/main.css.scss @@ -0,0 +1,4 @@ +/* + *= require normalize-rails + *= require_tree ./main + */ diff --git a/app/assets/stylesheets/main/entries.scss b/app/assets/stylesheets/main/entries.scss new file mode 100644 index 0000000..038273d --- /dev/null +++ b/app/assets/stylesheets/main/entries.scss @@ -0,0 +1,60 @@ +// Place all the styles related to the Entries controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: http://sass-lang.com/ + +@import url('https://fonts.googleapis.com/css?family=Slabo+27px'); +@import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); + +#blog-post { + font-size: 16px; + line-height: 24px; + margin: 0 3em; + + h2 { + font-size: 45px; + line-height: 48px; + margin-top: .5em; + } + + h3 { + font-size: 37px; + line-height: 42px; + } + + h2, h3 { + font-family: 'Slabo 27px', serif; + margin-bottom: 0; + font-weight: normal; + } + + #blog-content { + hyphens: auto; + word-wrap: break-word; + font-family: 'Roboto', sans-serif; + text-align: justify; + + a { + text-decoration: none; + font-weight: bold; + + &, &:visited { + color: #ee2c2c; + } + + &:hover { + text-decoration: underline; + color: #9ea1ad; + } + } + + li { + & + li { + margin-top: 1em; + } + } + + img { + max-width: 100%; + } + } +} diff --git a/app/assets/stylesheets/main/layout.scss b/app/assets/stylesheets/main/layout.scss new file mode 100644 index 0000000..ebd4c87 --- /dev/null +++ b/app/assets/stylesheets/main/layout.scss @@ -0,0 +1,136 @@ +body#main-body { + background-color: #bfefff; + height: 100%; +} + +#container { + height: 100%; + margin: 7em auto 0; + width: 75%; /* 66% */ + box-sizing: border-box; + min-width: 890px; + display: flex; + flex-direction: row-reverse; +} + +@keyframes trottingPonies { + from { background-position-x: 0px; } + to { background-position-x: -1280px; } +} + +#banner { + background-image: image-url("walk_cycle.png"); + background-repeat: repeat-x; + animation: trottingPonies 1s steps(16) infinite; + width: 100%; + padding: 1em; + box-sizing: border-box; + text-indent: -9999px; + height: 80px; + margin-bottom: -80px; + position: relative; + top: -70px; + + a { + display: block; + width: 100%; + height: 55px; + } +} + +#main { + background-color: white; + -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); + -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); + box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); + width: 75%; + min-width: 720px +} + +#content { + box-sizing: border-box; + padding-top: 1em; +} + +#flash { + width: 100%; + text-align: center; + padding: .25em; + font-weight: bold +} + +.flash-notice { + background-color: #fffde8; +} + +.flash-alert { + background-color: #ff6a6a; +} + +#sidebar { + box-sizing: border-box; + width: 25%; + font-size: .75em; + color: black; + border-left: 1px solid #eee; + margin-top: 1em; + margin-bottom: 2em; +} + +#sidebar h2 { + font-size: 1em; + margin: 0; +} + +.sidebar-module { + padding: 1em; + margin-top: 1em; + box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75); +} + +.sidebar-module:nth-child(2n+1) { + background-color: #feff8f; +} + +.sidebar-module:nth-child(2n+2) { + background-color: #8fefab; +} + +.sidebar-module p { + margin-bottom: 0; +} + +.sidebar-module ul { + padding-left: 0; + margin-bottom: 0; +} + +.sidebar-module li { + list-style-type: none; +} + +.sidebar-module a { + text-decoration: none; +} + +.sidebar-module a:hover { + text-decoration: underline; +} + +.sidebar-module a:visited { + color: #352712; +} + +.breadcrumb { + margin-left: 1em; + + a, a:visited { + color: #555d66; + text-decoration: none; + font-size: .75em; + } + + a:hover { + text-decoration: underline; + } +} diff --git a/app/assets/stylesheets/main/records.scss b/app/assets/stylesheets/main/records.scss new file mode 100644 index 0000000..dd4eac1 --- /dev/null +++ b/app/assets/stylesheets/main/records.scss @@ -0,0 +1,63 @@ +// Place all the styles related to the Records controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: http://sass-lang.com/ + +@import url('https://fonts.googleapis.com/css?family=Inconsolata'); + +#records { + padding: 0; + margin: 0 1em; + + & > li { + display: block; + padding: .25em 0; + + .description { + a { + text-decoration: none; + color: #352712; + font-family: 'Inconsolata', monospace; + + &:hover { + text-decoration: underline; + } + + &:visited { + color: #352712; + } + } + } + + .tags { + margin: .25em; + display: flex; + padding-left: 0; + + li { + display: inline; + font-size: .75em; + font-family: 'Inconsolata', monospace; + padding: .25em; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + + &.record-date { + background-color: #fef1bf; + } + + &.entry-type { + text-transform: uppercase; + + &.entry-type-blog { + background-color: #90fefb; + } + } + + & + li { + margin-left: 1em; + } + } + } + } +} diff --git a/app/assets/stylesheets/records.scss b/app/assets/stylesheets/records.scss deleted file mode 100644 index 71e203a..0000000 --- a/app/assets/stylesheets/records.scss +++ /dev/null @@ -1,61 +0,0 @@ -// Place all the styles related to the Records controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ - -#records { - padding: 0; - margin: 0 1em; - - & > li { - display: block; - padding: .25em 0; - - .description { - a { - text-decoration: none; - color: #352712; - font-family: 'Inconsolata', monospace; - - &:hover { - text-decoration: underline; - } - - &:visited { - color: #352712; - } - } - } - - .tags { - margin: .25em; - display: flex; - padding-left: 0; - - li { - display: inline; - font-size: .75em; - font-family: 'Inconsolata', monospace; - padding: .25em; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - - &.record-date { - background-color: #fef1bf; - } - - &.entry-type { - text-transform: uppercase; - - &.entry-type-blog { - background-color: #90fefb; - } - } - - & + li { - margin-left: 1em; - } - } - } - } -} diff --git a/app/assets/stylesheets/userdata.css.scss b/app/assets/stylesheets/userdata.css.scss new file mode 100644 index 0000000..22e59d1 --- /dev/null +++ b/app/assets/stylesheets/userdata.css.scss @@ -0,0 +1,4 @@ +/* + *= require normalize-rails + *= require_tree ./userdata + */ diff --git a/app/assets/stylesheets/userdata/layout.scss b/app/assets/stylesheets/userdata/layout.scss new file mode 100644 index 0000000..9e4906e --- /dev/null +++ b/app/assets/stylesheets/userdata/layout.scss @@ -0,0 +1,93 @@ +body { + background-color: #eeeeee; + height: 100%; +} + +#container { + margin: 4em auto 0; + width: 25%; +} + +#principal { + background-color: #fefefe; + -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); + -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); + box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); + border-radius: 2px 2px 2px 2px; + -moz-border-radius: 2px 2px 2px 2px; + -webkit-border-radius: 2px 2px 2px 2px; + padding: 1em; + + .field { + margin-bottom: 1em; + + label { + display: block; + margin-bottom: .25em; + } + } + + input[type=text], input[type=password] { + font-size: 24px; + padding: 3px; + width: 100%; + box-sizing: border-box; + -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7); + -moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7); + box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7); + border: 1px solid #ddd; + outline: 0; + border-radius: 0; + } +} + +.remember-me-field { + float: left; +} + +.submit-field { + text-align: right; +} + +.navigation { + margin: 1em; + + a { + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} + +#principal, .navigation a, .navigation a:visited { + color: #555d66; +} + +#principal label, .navigation a { + font-size: .75em; +} + +#flash { + color: black; + background-color: white; + padding: .75em; + margin-bottom: 2em; + font-size: .8em; + -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); + -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); + box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); +} + +.flash-alert { + border-left: 5px solid red; +} + +.flash-notice { + border-left: 5px solid green; +} + +.flash-tag { + font-weight: bold; +} diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index ed3b9a2..2a9e2eb 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -3,7 +3,7 @@ %head %title Thoughts = csrf_meta_tags - = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' + = stylesheet_link_tag 'main', media: 'all', 'data-turbolinks-track': 'reload' = javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %body#main-body - if flash[:alert] diff --git a/app/views/layouts/userdata.html.haml b/app/views/layouts/userdata.html.haml index f6e3b57..29e47b2 100644 --- a/app/views/layouts/userdata.html.haml +++ b/app/views/layouts/userdata.html.haml @@ -3,16 +3,16 @@ %head %title Thoughts = csrf_meta_tags - = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' + = stylesheet_link_tag 'userdata', media: 'all', 'data-turbolinks-track': 'reload' = javascript_include_tag 'application', 'data-turbolinks-track': 'reload' - %body#userdata-body - #userdata-container + %body + #container - if flash[:alert] - #userdata-flash.userdata-flash-alert - %span.userdata-flash-tag ERROR: + #flash.flash-alert + %span.flash-tag ERROR: = flash.alert - if flash[:notice] - #userdata-flash.userdata-flash-notice - %span.userdata-flash-tag NOTICE: + #flash.flash-notice + %span.flash-tag NOTICE: = flash.notice = yield diff --git a/app/views/users/sessions/new.html.haml b/app/views/users/sessions/new.html.haml index fbdf8be..f7c8de9 100644 --- a/app/views/users/sessions/new.html.haml +++ b/app/views/users/sessions/new.html.haml @@ -1,4 +1,4 @@ -#userdata-form +#principal = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| .field = f.label :login @@ -11,5 +11,5 @@ = f.label :remember_me .submit-field = f.submit "Log in" -.userdata-link= link_to "Forgot your password?", new_password_path(resource_name) -.userdata-link= link_to "← Back to thoughts", root_url +.navigation= link_to "Forgot your password?", new_password_path(resource_name) +.navigation= link_to "← Back to thoughts", root_url -- cgit 1.4.1