diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css deleted file mode 100644 index 0ebd7fe..0000000 --- a/app/assets/stylesheets/application.css +++ /dev/null @@ -1,15 +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, vendor/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_tree . - *= require_self - */ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss new file mode 100644 index 0000000..e44cefb --- /dev/null +++ b/app/assets/stylesheets/application.scss @@ -0,0 +1,92 @@ +/* + * 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, vendor/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_tree . + *= require_self + */ + body, body > p, body > ol, body > ul, body > td {margin: 8px !important} + + #banner { + position: relative; + min-height: 40px; + background: #9c9; + padding: 10px; + border-bottom: 2px solid; + font: small-caps 40px/40px "Times New Roman", serif; + color: #282; + text-align: center; + + img { + position: absolute; + top: 0; + left: 0; + width: 192px; + } + } + + #notice { + color: #000 !important; + border: 2px solid red; + padding: 1em; + margin-bottom: 2em; + background-color: #f0f0f0; + font: bold smaller sans-serif; + } + + #notice:empty { + display: none + } + + #columns { + background: #141; + display: flex; + + #main { + padding: 1em; + background: white; + flex: 1; + } + + #side { + padding: 1em 2em; + background: #141; + + ul { + padding: 0; + + li { + list-style: none; + + a { + color: #bfb; + font-size: small; + } + } + } + } + } + + @media all and (max-width: 800px) { + #columns { + flex-direction: column-reverse; + } + } + + @media all and (max-width: 500px) { + #banner { + height: 1em; + } + + #banner .title { + display: none; + } + } diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index b2de017..2931bda 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,7 +1,7 @@ - Depot + Pragprog Books Online Store <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> @@ -9,6 +9,20 @@ - <%= yield %> + +
+
+ +
+
+ <%= yield %> +
+