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