Iteration C2.

há 9 anos · 903b02d351
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -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
 */
--- a/app/assets/stylesheets/application.scss
+++ 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;
   }
 }
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
    <title>Depot</title>
    <title>Pragprog Books Online Store</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
@@ -9,6 +9,20 @@
  </head>

  <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>
 </html>