Permalink
Browse files

Featured image should perform over different viewport widths.

  - No images for mobile devices.
  - No images for viewports less than 768px, the text obscures the image causing unnecessary visual noise.
  - Centre image inside the featured viewport, do with with negative margins assuming image width of 1200px.
  - Massive screens will get some cut off. This will need to be handled separately as a general layout concern.
  - Updated consultation index to have the correct meta container (<div> vs <p>).
  • Loading branch information...
1 parent f2094cb commit 51029a86da6906342e43d808a9241d8f2f83c48b Jason Cale committed Jan 27, 2012
Showing with 28 additions and 14 deletions.
  1. +26 −12 app/assets/stylesheets/website/featured_section.scss
  2. +2 −2 app/views/consultations/index.html.erb
View
38 app/assets/stylesheets/website/featured_section.scss
@@ -60,13 +60,13 @@
overflow: hidden;
padding-top: 0;
border-bottom: 1px solid #ccc;
- background: url(/government/assets/feature_bg.png);
+ background: #ddd;
article {
width: 100%;
border-right: 1px solid #ddd;
- padding-top: 1em;
- padding-bottom: 1em;
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
h2 {
@include rounded_top;
@@ -93,11 +93,26 @@
}
.img {
+ background: #ddd;
+ display: none;
+ height: 300px;
+ left: 0;
margin: 0;
position: absolute;
- left: 0;
top: 0;
width: 100%;
+
+ @media only screen and (min-width: 768px) {
+ display: block;
+ img {
+ position: absolute;
+ left: 50%;
+ margin-left: -600px;
+ border-right: 1px solid #000;
+ width: 1200px;
+ height: 300px;
+ }
+ }
}
p, div.meta {
@@ -116,7 +131,7 @@
div.meta {
margin: 0 2%;
border-top: 1px solid #ddd;
- border-bottom: 1px solid #9A9B00;
+ border-bottom: 1px solid #bbb;
@include rounded_bottom;
padding: 0.25em 3% 0.5em 3%;
@@ -133,7 +148,6 @@
}
@media only screen and (min-width: 768px) {
- padding-top: 1.25em;
padding-bottom: 1.25em;
h2, p, div.meta {
@@ -162,12 +176,6 @@
overflow: hidden;
position: relative;
- padding-top: 1.5em;
-
- @media only screen and (min-width: 768px) {
- padding-top: 0;
- }
-
.carousel-nav {
background: #eee;
@include vertical_gradient(#eee, #ccc);
@@ -218,6 +226,12 @@
article {
overflow: hidden;
height: 100%;
+ padding-top: 2.5em;
+
+ @media only screen and (min-width: 768px) {
+ padding-top: 0.75em;
+ }
+
}
}
}
View
4 app/views/consultations/index.html.erb
@@ -15,9 +15,9 @@
<p class="summary">
<%= consultation.summary %>
</p>
- <p class="meta">
+ <div class="meta">
<span class="time_remaining"><%= consultation_time_remaining_phrase(consultation) %></span>
- </p>
+ </div>
<% end %>
<% end %>
</section>

0 comments on commit 51029a8

Please sign in to comment.