Skip to content
This repository has been archived by the owner on Jan 10, 2022. It is now read-only.

Commit

Permalink
Responsive design: slideshow in home-page
Browse files Browse the repository at this point in the history 
The #slideshow element in the home page (quotes about Rails)
is now responsive, wrapping correctly in small screen sizes
rather than overflowing.
  • Loading branch information
@claudiob
claudiob committed May 7, 2015
1 parent a98eff6 commit 9b07e6e
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 57 deletions.
40 changes: 21 additions & 19 deletions index.html
View file
Expand Up @@ -35,61 +35,61 @@ <h2>Get Involved</h2>
</div></div>
</div>
</div>
<div id="slideshow">
<div class="container" id="slideshow">
<blockquote>
<p>
“Ruby on Rails is a breakthrough in lowering the barriers of entry to programming.<br>
Powerful web applications that formerly might have taken weeks or months<br>
“Ruby on Rails is a breakthrough in lowering the barriers of entry to programming.<br class="hidden-xs" />
Powerful web applications that formerly might have taken weeks or months<br class="hidden-xs" />
to develop can be produced in a matter of days.”
</p>
<p><cite>– Tim O’Reilly, Founder of O’Reilly Media</cite></p>
</blockquote>
<blockquote style="display: none;">
<p>
“Rails is the most well thought-out web development framework I’ve ever used.<br>
And that’s in a decade of doing web applications for a living. I’ve built my<br>
own frameworks, helped develop the Servlet API, and have created more than<br>
“Rails is the most well thought-out web development framework I’ve ever used.<br class="hidden-xs" />
And that’s in a decade of doing web applications for a living. I’ve built my<br class="hidden-xs" />
own frameworks, helped develop the Servlet API, and have created more than<br class="hidden-xs" />
a few web servers from scratch. Nobody has done it like this before.”
</p>
<p><cite>– James Duncan Davidson, Creator of Tomcat and Ant</cite></p>
</blockquote>
<blockquote style="display: none;">
<p>
“It is impossible not to notice Ruby on Rails. It has had a huge effect both in<br>
and outside the Ruby community... Rails has become a standard to which even<br>
“It is impossible not to notice Ruby on Rails. It has had a huge effect both in<br class="hidden-xs" />
and outside the Ruby community... Rails has become a standard to which even<br class="hidden-xs" />
well-established tools are comparing themselves to.”
</p>
<p><cite>– Martin Fowler, Author of Refactoring, PoEAA, XP Explained</cite></p>
</blockquote>
<blockquote style="display: none;">
<p>
“What sets this framework apart from all of the others is the preference for<br>
convention over configuration making applications easier<br>
“What sets this framework apart from all of the others is the preference for<br class="hidden-xs" />
convention over configuration making applications easier<br class="hidden-xs" />
to develop and understand.”
</p>
<p><cite>– Sam Ruby, ASF board of directors</cite></p>
</blockquote>
<blockquote style="display: none;">
<p>
“Before Ruby on Rails, web programming required a lot of verbiage, steps and time.<br>
Now, web designers and software engineers can develop a website<br>
much faster and more simply, enabling them to be more productive<br>
“Before Ruby on Rails, web programming required a lot of verbiage, steps and time.<br class="hidden-xs" />
Now, web designers and software engineers can develop a website<br class="hidden-xs" />
much faster and more simply, enabling them to be more productive<br class="hidden-xs" />
and effective in their work.”
</p>
<p><cite>– Bruce Perens, Open Source Luminary</cite></p>
</blockquote>
<blockquote style="display: none;">
<p>
“After researching the market, Ruby on Rails stood out as the best choice.<br>
We have been very happy with that decision. We will continue<br>
“After researching the market, Ruby on Rails stood out as the best choice.<br class="hidden-xs" />
We have been very happy with that decision. We will continue<br class="hidden-xs" />
building on Rails and consider it a key business advantage.”
</p>
<p><cite>– Evan Williams, Creator of Blogger and ODEO</cite></p>
</blockquote>
<blockquote style="display: none;">
<p>
“Ruby on Rails is astounding. Using it is like watching a kung-fu movie,<br>
where a dozen bad-ass frameworks prepare to beat up the little newcomer<br>
“Ruby on Rails is astounding. Using it is like watching a kung-fu movie,<br class="hidden-xs" />
where a dozen bad-ass frameworks prepare to beat up the little newcomer<br class="hidden-xs" />
only to be handed their asses in a variety of imaginative ways.”
</p>
<p><cite>– Nathan Torkington, O’Reilly Program Chair for OSCON</cite></p>
Expand All @@ -100,15 +100,16 @@ <h2>Get Involved</h2>
</p>
<p><cite>– Yukihiro Matsumoto, Creator of Ruby</cite></p>
</blockquote>
<p class="more"><a href="/quotes/" title="Read More quotes">Read more quotes</a></p>
<p class="more text-center"><a href="/quotes/" title="Read More quotes">Read more quotes</a></p>
</div>
<script type="text/javascript">
$(function() {
setInterval(function() {
var slideshow = $('#slideshow');
var visible = slideshow.children('blockquote:visible');
var left = slideshow.children('blockquote:nth-child(2)');

if(visible.length > 0) {
if(visible.length > 0 && left.length > 0) {
visible.fadeOut(500, function() {
$(this).appendTo(slideshow);
slideshow.children('blockquote:first-child').fadeIn(500);
Expand Down Expand Up @@ -149,3 +150,4 @@ <h2>Who is<br>behind it?</h2>
<a href="http://contributors.rubyonrails.org" title="Access to the list of contributors">more than 3,700 contributors</a>.
</p>
</div>
</div>
50 changes: 12 additions & 38 deletions styles.css
View file
Expand Up @@ -162,42 +162,6 @@ div.section code {
vertical-align: -7px;
}

#slideshow {
font-family: Georgia;
font-size: 16px;
height: 162px;
line-height: 140%;
margin: 0px auto 30px;
text-align: center;
width: 700px;
padding: 30px 0px 0px 0px;
position: relative;
}
#slideshow blockquote {
margin: 0px;
position: absolute;
width: 700px;
font-size: 16px;
}
#slideshow cite {
color: #464242;
}
#slideshow p.more {
font-size: 14px;
font-style: italic;
margin: 0px;
position: absolute;
bottom: 0px;
width: 700px;
}
#slideshow p.more a {
color: #464242;
}
#slideshow p.more a:hover {
background-color: #000;
text-decoration: none;
color: #fff;
}
#used_by ul {
list-style: none;
margin: 0px 0px 0px 280px;
Expand Down Expand Up @@ -251,10 +215,13 @@ blockquote {border-left: 0; padding: 0}

/* TYPOGRAPHY */
header {font-family: "expressway", sans-serif; font-style: normal}
#slivers h2 {font-family: Georgia; font-size: 22px; line-height: 24px; font-weight: normal}
#slivers h2, #slideshow {font-family: Georgia}
#slivers h2 {font-size: 22px; line-height: 24px; font-weight: normal}
.navbar-nav, footer {font-size: 11px}
.navbar-nav a {font-weight: bold}
footer a:focus, footer a:hover {text-decoration: none}
#slideshow blockquote {font-size: 16px}
#slideshow p.more {font-size: 14px; font-style: italic}

footer {text-align: center}
#announce {font-size: 11px; line-height: 13px}
Expand All @@ -272,8 +239,10 @@ header h2 {color: #999}
p#announce {color: #fff; background-color: #981a21}
p#announce a {color: #fff}
#slivers h2 {color: #0e3062}
#slideshow cite, #slideshow p.more a {color: #464242}
p#announce a:hover, p#announce a:focus,
#slivers p a:hover, #slivers p a:focus {color: #fff; background-color: #000}
#slivers p a:hover, #slivers p a:focus,
#slideshow p a:hover, #slideshow p a:focus {color: #fff; background-color: #000}
#slivers {border-top-color: #f6e69f; border-top-style: solid; border-bottom-color: #f6e69f; border-bottom-style: solid; background: url(images/herobackground.gif) left top}
.navbar-default {background-color: transparent; border-color: transparent}
.navbar-default .navbar-nav>li>a, footer a, h1,
Expand All @@ -300,6 +269,11 @@ header h2, #announce {margin-bottom: 0}
#slivers p {margin-top: 2px; margin-bottom: 25px}
#slivers h2 {margin-top: 10px}
#slivers {border-top-width: 2px; border-bottom-width: 2px}
#slideshow {margin-top: 16px; margin-bottom: 22px}
#slideshow blockquote {height: 87px}
@media (max-width: 768px) {
#slideshow blockquote {height: 200px}
}

/* HORIZONTAL LAYOUT */
.navbar-nav>li>a {padding-left: 0; padding-right: 0}
Expand Down

0 comments on commit 9b07e6e

Please sign in to comment.