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

Commit

Permalink
Merge pull request #61 from claudiob/responsive-slivers
Browse files Browse the repository at this point in the history 
Responsive slivers
  • Loading branch information
@rafaelfranca
rafaelfranca committed May 7, 2015
2 parents 4beea12 + 4ad015d commit a98eff6
Show file tree
Hide file tree
Showing 6 changed files with 38 additions and 81 deletions.
4 changes: 2 additions & 2 deletions documentation/index.html
View file
Expand Up @@ -29,8 +29,8 @@ <h2>Books</h2>
</p>
<p class="centered">
<a href="http://pragprog.com/titles/rails4/agile-web-development-with-rails" class="nohover align-center" title="Agile Web
Development with Rails 4 ebook and paper book "><img src="/images/pages/documentation/awdr4.png" class="bordered" width="144" height="154" alt="Agile web development with rails book"></a>
<a href="http://pragprog.com/book/jvrails/crafting-rails-applications" class="nohover" title="Crafting Rails 4 Applications ebook and paper book"><img src="/images/pages/documentation/cra-mini.png" class="bordered" width="144" height="154" alt="Crafting rails applications book"></a>
Development with Rails 4 ebook and paper book "><img src="/images/pages/documentation/awdr4.png" class="bordered" width="144" height="153" alt="Agile web development with rails book"></a>
<a href="http://pragprog.com/book/jvrails/crafting-rails-applications" class="nohover" title="Crafting Rails 4 Applications ebook and paper book"><img src="/images/pages/documentation/cra-mini.png" class="bordered" width="144" height="153" alt="Crafting rails applications book"></a>
</p>
<p>
See all the other <a href="http://www.amazon.com/gp/search?ie=UTF8&amp;keywords=ruby%20on%20rails&amp;tag=rubonrai-20&amp;index=books&amp;linkCode=ur2&amp;camp=1789&amp;creative=9325" title=" Related Searches about ruby on rails">Ruby on Rails books</a> at Amazon.
Expand Down
Binary file modified images/pages/documentation/awdr4.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/pages/documentation/cra-mini.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/pages/overview/screencasts2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 17 additions & 13 deletions index.html
View file
Expand Up @@ -4,33 +4,37 @@
subheader_2: "for programmer happiness and sustainable productivity. It lets you"
subheader_3: "write beautiful code by favoring convention over configuration."
---
<div class="container-fluid text-center">
<div class="row">
<p id="announce">
<a href="http://weblog.rubyonrails.org/2014/12/19/Rails-4-2-final/" title="Ruby on Rails Blog">Rails 4.2.0 has been released!</a>
</p>
<div id="slivers">
<ul>
<li role="listitem">
</div>
<div id="slivers" class="row">
<div class="container"><div class="row">
<div class="col-sm-3 col-xs-6">
<h2>Get Excited</h2>
<a href="/screencasts/" title="Click for screencasts"><img src="/images/pages/overview/screencasts2.png" class="bordered" width="144" height="154" alt="Image representing a block of code"></a>
<a href="/screencasts/" title="Click for screencasts"><img src="/images/pages/overview/screencasts2.png" class="bordered" width="144" height="153" alt="Image representing a block of code"></a>
<p><a href="/screencasts/" title="Some screencasts about Rails">Screencasts &amp; presentations</a></p>
</li>
<li role="listitem">
</div>
<div class="col-sm-3 col-xs-6">
<h2>Get Started</h2>
<a href="/download/" title="Download the Ruby on Rails last version"><img src="/images/pages/overview/download42.png" width="144" height="153" alt="Graphic showing a down arrow with the number of the latest stable version of Rails"></a>
<p><a href="/download/" title="Download the Ruby on Rails last version">4.2.1 released Mar 19, 2015</a></p>
</li>
<li role="listitem">
</div>
<div class="col-sm-3 col-xs-6">
<h2>Get Better</h2>
<a href="/documentation/" title="APIs, Books and Guides documentation about Ruby on Rails"><img src="/images/pages/documentation/awdr4.png" width="144" height="154" class="bordered" alt="Image showing the cover of the book Agile development with rails"></a>
<a href="/documentation/" title="APIs, Books and Guides documentation about Ruby on Rails"><img src="/images/pages/documentation/awdr4.png" width="144" height="153" class="bordered" alt="Image showing the cover of the book Agile development with rails"></a>
<p><a href="/documentation/" title="APIs, Books and Guides documentation about Ruby on Rails">API, Guides, Books</a></p>
</li>
<li role="listitem">
</div>
<div class="col-sm-3 col-xs-6">
<h2>Get Involved</h2>
<a href="/community/" title="Join to the Ruby on Rails Community"><img src="/images/pages/overview/participate.gif" width="144" height="153" alt="Image showing a text bubble and the following words: IRC, Mailing list, bug tracker, wiki"></a>
<p><a href="/community/" title="Join to the Ruby on Rails Community">Join the community</a></p>
</li>
</ul>
</div>
</div></div>
</div>
</div>
<div id="slideshow">
<blockquote>
<p>
Expand Down
85 changes: 19 additions & 66 deletions styles.css
View file
Expand Up @@ -162,69 +162,6 @@ div.section code {
vertical-align: -7px;
}

/* Overview */
#announce {
background-color: #981a21;
color: #fff;
font-size: 11px;
line-height: 13px;
margin: 0px;
padding: 5px 0px;
text-align: center;
}
#announce a {
color: #fff !important;
text-decoration: underline;
}
#announce a:hover {
background-color: #000 !important;
text-decoration: none;
}
#slivers {
background: url(images/herobackground.gif) repeat-x left top;
border-top: 2px solid #F6E69F;
border-bottom: 2px solid #F6E69F;
padding: 10px;
}
#slivers ul {
list-style: none;
margin: 0px auto;
padding: 0px;
overflow: hidden;
width: 792px;
}
#slivers ul li {
float: left;
margin: 0px 24px;
width: 150px;
}
#slivers ul li h2 {
color: #0e3062;
font-family: Georgia;
font-size: 22px;
line-height: 24px;
font-weight: normal;
margin: 0px 0px 10px 0px;
text-align: center;
}
#slivers ul li img {
display: block;
margin: 0px auto 5px;
}
#slivers ul li p {
margin: 0px;
text-align: center;
}
#slivers ul li p a {
color: #000;
font-size: 10px;
}
#slivers ul li p a:hover {
background-color: #000;
color: #fff;
text-decoration: none;
}

#slideshow {
font-family: Georgia;
font-size: 16px;
Expand Down Expand Up @@ -314,22 +251,33 @@ 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}
.navbar-nav, footer {font-size: 11px}
.navbar-nav a {font-weight: bold}
footer a:focus, footer a:hover {text-decoration: none}

footer {text-align: center}
#announce {font-size: 11px; line-height: 13px}
#slivers p {font-size: 10px}
h1 {font-size: 31px; line-height: 30px; font-weight: 700}
header h2 {font-size: 18px; line-height: 24px; font-weight: 400}
@media (min-width: 768px) {
h1 {font-size: 38px}
header h2 {font-size: 21px}
}

/* COLOR */
/* COLOR AND BACKGROUND */
footer {color: #666}
header h2 {color: #999}
p#announce {color: #fff; background-color: #981a21}
p#announce a {color: #fff}
#slivers h2 {color: #0e3062}
p#announce a:hover, p#announce a:focus,
#slivers p a:hover, #slivers 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 {color: #000}
.navbar-default .navbar-nav>li>a, footer a, h1,
#slivers p a {color: #000}
.navbar-default .navbar-nav>li>a:focus,
footer a:focus, footer a:hover,
.navbar-default .navbar-nav>li>a:hover {color: #fff; background-color: #333}
Expand All @@ -347,7 +295,11 @@ footer p, h1 {margin-bottom: 12px}
.navbar-brand img {height: 34px}
header {margin-top: 27px; margin-bottom: 32px}
h1, header h2 {margin-top: 0}
header h2 {margin-bottom: 0}
header h2, #announce {margin-bottom: 0}
#announce {padding-top: 5px; padding-bottom: 5px}
#slivers p {margin-top: 2px; margin-bottom: 25px}
#slivers h2 {margin-top: 10px}
#slivers {border-top-width: 2px; border-bottom-width: 2px}

/* HORIZONTAL LAYOUT */
.navbar-nav>li>a {padding-left: 0; padding-right: 0}
Expand All @@ -361,4 +313,5 @@ header h2 {margin-bottom: 0}
}
@media (min-width:992px) { /* Reduce width on big screens */
.container {width: 750px}
#slivers .container {width: 792px}
}

0 comments on commit a98eff6

Please sign in to comment.