3 changed files with 108 additions and 17 deletions
Unified View
Diff Options
-
+0 -15app/assets/stylesheets/application.css
-
+92 -0app/assets/stylesheets/application.scss
-
+16 -2app/views/layouts/application.html.erb
+ 0
- 15
app/assets/stylesheets/application.css
View File
| @@ -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 | |||||
| */ | |||||
+ 92
- 0
app/assets/stylesheets/application.scss
View File
| @@ -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; | |||||
| } | |||||
| } | |||||
+ 16
- 2
app/views/layouts/application.html.erb
View File
| @@ -1,7 +1,7 @@ | |||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||
| <html> | <html> | ||||
| <head> | <head> | ||||
| <title>Depot</title> | |||||
| <title>Pragprog Books Online Store</title> | |||||
| <%= csrf_meta_tags %> | <%= csrf_meta_tags %> | ||||
| <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> | <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> | ||||
| @@ -9,6 +9,20 @@ | |||||
| </head> | </head> | ||||
| <body class='<%= controller.controller_name %>'> | <body class='<%= controller.controller_name %>'> | ||||
| <%= yield %> | |||||
| <div id="banner"> | |||||
| <%= image_tag 'logo.svg', alt: 'The Pragmativ Bookshelf' %> | |||||
| <span class="title"><%= @page_title %></span> | |||||
| </div> | |||||
| <div id="columns"> | |||||
| <div id="side"> | |||||
| <ul> | |||||
| <li><a href="/">Home</a></li> | |||||
| <li><a href="/faq">FAQ</a></li> | |||||
| </ul> | |||||
| </div> | |||||
| <div id="main"> | |||||
| <%= yield %> | |||||
| </div> | |||||
| </div> | |||||
| </body> | </body> | ||||
| </html> | </html> | ||||