From 5a82b1a0bdf24cdf0a05a84183106ff106f88626 Mon Sep 17 00:00:00 2001 From: Kelly Rauchenberger Date: Sun, 25 Jun 2017 16:58:07 -0400 Subject: Worked on layout more, added trotting ponies --- app/assets/images/walk_cycle.png | Bin 0 -> 9185 bytes app/assets/stylesheets/application.css | 215 ---------------------------- app/assets/stylesheets/application.css.scss | 209 +++++++++++++++++++++++++++ app/views/layouts/application.html.haml | 3 +- 4 files changed, 210 insertions(+), 217 deletions(-) create mode 100644 app/assets/images/walk_cycle.png delete mode 100644 app/assets/stylesheets/application.css create mode 100644 app/assets/stylesheets/application.css.scss (limited to 'app') diff --git a/app/assets/images/walk_cycle.png b/app/assets/images/walk_cycle.png new file mode 100644 index 0000000..43bafe6 Binary files /dev/null and b/app/assets/images/walk_cycle.png differ diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css deleted file mode 100644 index 5ddb0bb..0000000 --- a/app/assets/stylesheets/application.css +++ /dev/null @@ -1,215 +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'); - -body#main-body { - background-color: #bfefff; -} - -#container { - margin: 5em auto 0; - width: 70%; - background-color: white; - box-sizing: border-box; - -webkit-border-top-left-radius: 15px; - -webkit-border-top-right-radius: 15px; - -moz-border-radius-topleft: 15px; - -moz-border-radius-topright: 15px; - border-top-left-radius: 15px; - border-top-right-radius: 15px; - min-width: 890px; -} - -#banner { - width: 100%; - padding: 1em; - box-sizing: border-box; -} - -#banner h1 { - text-align: center; - margin: 0; -} - -#banner h1 a { - text-decoration: none; - color: black; -} - -#banner h1 a:visited { - color: black; -} - -#main { - display: -webkit-flex; - display: flex; -} - -#content { - width: 75%; - box-sizing: border-box; -} - -#sidebar { - width: 25%; - box-sizing: border-box; - padding-right: 1em; - font-size: .75em; - color: #352712; -} - -#sidebar h2 { - font-size: 1em; -} - -#flash { - width: 100%; - text-align: center; - padding: .25em; - font-weight: bold -} - -.flash-notice { - background-color: #fffde8; -} - -.flash-alert { - background-color: #ff6a6a; -} - -html { - height: 100%; -} - -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-module + .sidebar-module { - margin-top: 2em; -} - -.sidebar-module ul { - padding-left: 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; -} diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss new file mode 100644 index 0000000..6ec040a --- /dev/null +++ b/app/assets/stylesheets/application.css.scss @@ -0,0 +1,209 @@ +/* + * 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'); + +body#main-body { + background-color: #bfefff; + height: 100%; +} + +#container { + height: 100%; + margin: 7em auto 0; + width: 66%; + box-sizing: border-box; + min-width: 890px; +} + +#banner { + background-image: image-url("walk_cycle.png"); + background-repeat: repeat-x; + width: 100%; + padding: 1em; + box-sizing: border-box; + text-indent: -9999px; + height: 80px; + margin-bottom: -80px; + position: relative; + top: -70px; +} + +#main { + display: -webkit-flex; + display: flex; + height: 100%; + background-color: white; +} + +#content { + width: 70%; + box-sizing: border-box; + padding-top: 1em; +} + +#sidebar { + box-sizing: border-box; + padding: 1em; + width: 30%; + box-sizing: border-box; + font-size: .75em; + color: black; + height: 100%; + border-left: 1px solid #eee; +} + +#sidebar h2 { + font-size: 1em; +} + +#flash { + width: 100%; + text-align: center; + padding: .25em; + font-weight: bold +} + +.flash-notice { + background-color: #fffde8; +} + +.flash-alert { + background-color: #ff6a6a; +} + +html { + height: 100%; +} + +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-module + .sidebar-module { + margin-top: 2em; +} + +.sidebar-module ul { + padding-left: 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; +} diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index e9d8dfd..f15945e 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -11,8 +11,7 @@ - if flash[:notice] %div#flash.flash-notice= flash[:notice] #container - #banner - %h1= link_to "Thoughts", root_url + %header#banner feffernoo.se #main #content= yield #sidebar -- cgit 1.4.1