keep fox image size static

sjfox26 · Apr 11, 2018 · f4de9f0 · f4de9f0
1 parent 8e9a52e
commit f4de9f0
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 156 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
@@ -17,7 +17,7 @@ $gray-medium-light: #eaeaea;
 html, body {
  padding-top: 60px;
  font-family: "AvenirNext",Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;
- height: 100vh; //https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap
+ height: 100vh; //https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap, I switched to vh from %
 }
 
 /*WRAP FOR LAYOUT */
@@ -30,7 +30,7 @@ html, body {
 header {
  // https://www.adam-bray.com/2017/02/18/create-a-html-5-and-css-3-mobile-navigation-bar/
  //display: flex;
- margin-bottom: 0px;
+ //margin-bottom: 0px;
 }
 
 #navbar_container{
@@ -43,9 +43,10 @@ header {
  font-size: 1.5em;
  color: #fff;
  text-transform: uppercase;
- font-weight: bold;
+ font-weight: normal;
  //letter-spacing: -1px;
  padding-top: 9px;
+ letter-spacing: 1.5px;
  // font-weight: bold;
 
  /* & is reference to parent logo. this is nested writing per 5.2.2 of Ruby on Rails Tutorial */
@@ -69,7 +70,6 @@ header {
 #site_content{
  padding-left: 0;
  padding-right: 0;
- padding-top: 10px;
 }
 
 // https://stackoverflow.com/questions/19844561/bootstrap-3-vertically-center-navigation-links-when-logo-increasing-the-height
@@ -103,6 +103,22 @@ header {
  font-size: 1.0em;
 }
 
+/* FOX HERO STYLES */
+.hero_container{
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.front_page_picture img{
+ //width: 100%;
+ flex-shrink: 0;
+ margin-bottom: 60px;
+}
+
 /* FOOTER STYLES */
 
 .footer {
@@ -253,15 +269,7 @@ footer ul li {
 // visibility: hidden;
 //}
 
-#front_page_picture img{
- //width: 100%;
- display: block;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 60px;
- height: 15vh;
- padding: 10px 0px;
-}
+
 
 /* typography */
 
@@ -292,10 +300,6 @@ p {
 
 
 
-#front_page img{
- width: 100%;
- max-height: 100vh;
-}
 
 
 /* forms */
@@ -408,6 +412,9 @@ h3{
  padding-top: 20px;
 }
 
+.second_row_pics{
+ margin-bottom: 80px;
+}
 /* CONTACT STYLES */
 
 .center{

diff --git a/app/views/messages/new.html.erb b/app/views/messages/new.html.erb
@@ -12,7 +12,7 @@
 
  <h1> Contact Fox Decorating</h1>
 
- <p class="center"> Drop us a line and we will be in touch soon!</p><br/>
+ <p class="center"> Leave your number (with an optional message) and Tom will be in touch with you soon!</p><br/>
 
  <%= form_for @message, url: contact_path, method: :post do |f| %>
 

diff --git a/app/views/static_pages/gallery.html.erb b/app/views/static_pages/gallery.html.erb
@@ -5,66 +5,71 @@
  </div>
  <% end %>
 
- <div class="row">
- <div class="col-sm-4">
- <div class="thumbnail">
+ <div class="first_row_pics">
+ <div class="row">
+ <div class="col-sm-4">
+ <div class="thumbnail">
  <%= image_tag("tom_work1.jpg", alt: "Room") %>
  <div class="caption">
  <p>Lorem ipsum...</p>
  </div>
- </a>
+ </a>
+ </div>
  </div>
- </div>
- <div class="col-sm-4">
- <div class="thumbnail">
+ <div class="col-sm-4">
+ <div class="thumbnail">
  <%= image_tag("tom_work2.jpg", alt: "Room") %>
  <div class="caption">
  <p>Lorem ipsum...</p>
  </div>
- </a>
+ </a>
+ </div>
  </div>
- </div>
- <div class="col-sm-4">
- <div class="thumbnail">
+ <div class="col-sm-4">
+ <div class="thumbnail">
  <%= image_tag("tom_work5.jpg", alt: "Room") %>
  <div class="caption">
  <p>Lorem ipsum...</p>
  </div>
- </a>
+ </a>
+ </div>
  </div>
  </div>
  </div>
 
- <div class="row">
- <div class="col-sm-4">
- <div class="thumbnail">
+ <div class="second_row_pics">
+ <div class="row">
+ <div class="col-sm-4">
+ <div class="thumbnail">
  <%= image_tag("tom_work4.jpg", alt: "Room") %>
  <div class="caption">
  <p>Lorem ipsum...</p>
  </div>
- </a>
+ </a>
+ </div>
  </div>
- </div>
- <div class="col-sm-4">
- <div class="thumbnail">
+ <div class="col-sm-4">
+ <div class="thumbnail">
  <%= image_tag("tom_work3.jpg", alt: "Room") %>
  <div class="caption">
  <p>Lorem ipsum...</p>
  </div>
- </a>
+ </a>
+ </div>
  </div>
- </div>
- <div class="col-sm-4">
- <div class="thumbnail">
+ <div class="col-sm-4">
+ <div class="thumbnail">
  <%= image_tag("tom_work34.jpg", alt: "Room") %>
  <div class="caption">
  <p>Lorem ipsum...</p>
  </div>
- </a>
+ </a>
+ </div>
  </div>
  </div>
  </div>
 
+
 </div>
 
 <!--

diff --git a/app/views/static_pages/home.html.erb b/app/views/static_pages/home.html.erb
@@ -6,10 +6,13 @@
  </div>
  <% end %>
 
- <div id="front_page_picture">
- <%= image_tag("fox_logo.jpg", alt: "Fox with paintbrush") %>
+ <div class="hero_container">
+ <div class="front_page_picture">
+ <%= image_tag("fox_logo.jpg", alt: "Fox with paintbrush") %>
+ </div>
  </div>
 
+
  <div class="container_for_background">
  <div class="content_container container-fluid">
 
@@ -41,26 +44,29 @@
  </div>
  </div>
 
- <div class="about_tom_container col-12">
- <div id="about_tom">
- <h3>About Tom</h3>
- <div class="tom d-flex">
- <div class="tom_picture col-12">
- <%= image_tag("tom_pic1.jpg", alt: "Tom Fox") %>
- </div>
+ <div class="row">
+ <div class="about_tom_container col-12">
+ <div id="about_tom">
+ <h3>About Tom</h3>
+ <div class="tom d-flex">
+ <div class="tom_picture col-12">
+ <%= image_tag("tom_pic1.jpg", alt: "Tom Fox") %>
+ </div>
 
- <div class="tom_description col-12">
- <div class="tom_description_content">
- <b><em>Tom Fox....</em></b>
- <% Faker::Lorem.sentences(12, false).each do |sentence| %>
- <%= sentence %>
- <% end %>
+ <div class="tom_description col-12">
+ <div class="tom_description_content">
+ <b><em>Tom Fox....</em></b>
+ <% Faker::Lorem.sentences(12, false).each do |sentence| %>
+ <%= sentence %>
+ <% end %>
+ </div>
  </div>
  </div>
  </div>
  </div>
  </div>
 
+
  <div class="services_container col-12">
  <div id="services">
  <h3>Services</h3>

diff --git a/config/environments/development.rb b/config/environments/development.rb
@@ -51,4 +51,6 @@
  # Use an evented file watcher to asynchronously detect changes in source code,
  # routes, locales, etc. This feature depends on the listen gem.
  config.file_watcher = ActiveSupport::EventedFileUpdateChecker
+
+
 end