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

Commit

Permalink
Browse files Browse the repository at this point in the history
Make rubyonrails.org responsive
This commit "flips the switch" of using an adaptive viewport on
smaller devices which (combined with the most recent commits) makes
the site looks nicer on narrow screens by means of Boostrap’s
adaptive grid.

Additionally, this commit cleans up the CSS / markup by removing
DOM elements that are not required anymore (e.g. `<div id="article">`),
using more semantic elements (e.g., `<mark>` replaces `<div class="highlight">`).

The site should look the same when seen on big screens, but should
provide a better experience on smaller screens.

Closes #46
  • Loading branch information
claudiob committed May 9, 2015
1 parent 0b45275 commit b2b9c41
Show file tree
Hide file tree
Showing 14 changed files with 242 additions and 424 deletions.
2 changes: 1 addition & 1 deletion 404.html
Expand Up @@ -6,5 +6,5 @@
subheader_3: "beautiful code by favoring convention over configuration."
---
<div class="container-fluid text-center">
<p class="missing">Sorry! We couldn’t find what you were looking for.</p>
<h2>Sorry! We couldn’t find what you were looking for.</h2>
</div>
4 changes: 2 additions & 2 deletions _includes/navigation.html
Expand Up @@ -4,15 +4,15 @@
<a class="navbar-brand" href="/" title="Ruby on Rails Main">
<img alt="Brand" src="/images/rails.png">
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-collapse">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

<div class="collapse navbar-collapse" id="bs-collapse">
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li><a href="/" title="Ruby on Rails Main">Overview</a></li>
<li><a href="/download/" title="Download the Ruby on Rails latest stable version">Download</a></li>
Expand Down
12 changes: 5 additions & 7 deletions _layouts/default.html
Expand Up @@ -3,7 +3,7 @@
<head>
<title>Ruby on Rails{% if page.title %}: {{ page.title }}{% endif %}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=800">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/styles.css" type="text/css" media="screen" rel="stylesheet">
Expand All @@ -15,19 +15,17 @@
</head>
<body>
{% include navigation.html %}
<div role="main"><section>
<div id="article"><article>
<article>
<header class="container text-center">
<h1>{{ page.header }}</h1>
<h2>
<h4>
{{ page.subheader_1 }}<br class="hidden-xs" />
{{ page.subheader_2 }}<br class="hidden-xs" />
{{ page.subheader_3 }}
</h2>
</h4>
</header>
{{ content }}
</article></div>
</section></div>
</article>
{% include footer.html %}
</body>
</html>
12 changes: 6 additions & 6 deletions community/index.html
Expand Up @@ -6,14 +6,14 @@
subheader_3: "others, and give something back when you can."
---
<div class="container">
<div class="section row">
<div class="row">
<div class="col-sm-4">
<h2>Mailing lists</h2>
</div>
<div class="col-sm-8">
<p>
<a href="http://groups.google.com/group/rubyonrails-talk" title="Google group for Ruby on Rails users">Ruby on Rails Talk</a> is where
Rails users come to <span class="highlight">seek help, announce projects, and discuss</span>
Rails users come to <mark>seek help, announce projects, and discuss</mark>
all kind of matters surrounding the framework and the community. If you’re working on a patch,
you can raise issues on <a href="http://groups.google.com/group/rubyonrails-core" title="Google group Ruby on Rails: Core">the core list</a>.
Finally, there’s the <a href="http://groups.google.com/group/rubyonrails-security" title="Security annoucements for Ruby on Rails">security
Expand All @@ -22,7 +22,7 @@ <h2>Mailing lists</h2>
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<h2>Twitter &amp; Blogs</h2>
</div>
Expand All @@ -34,14 +34,14 @@ <h2>Twitter &amp; Blogs</h2>
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<h2>IRC</h2>
</div>
<div class="col-sm-8">
<p>
Sometimes it’s just easier to get help or <span class="highlight">discuss matters
in real time</span>. The <em>#rubyonrails</em> channel on <em>irc.freenode.net</em>
Sometimes it’s just easier to get help or <mark>discuss matters
in real time</mark>. The <em>#rubyonrails</em> channel on <em>irc.freenode.net</em>
allows for just that. Try <em>#rails-contrib</em> if you want help or discuss your
patch to Rails itself.
</p>
Expand Down
28 changes: 14 additions & 14 deletions core/alumni/index.html
Expand Up @@ -6,7 +6,7 @@
subheader_3: "We thank you dearly for your service over the years."
---
<div class="container">
<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/yehuda.jpg" class="biopic" alt="Yehuda Katz's photo">
</div>
Expand All @@ -21,7 +21,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/jonleighton.jpg" alt="Jon Leighton's Photo" class="biopic">
</div>
Expand All @@ -36,7 +36,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/pic1218916611.jpg" alt="Josh Peek's Photo" class="biopic">
</div>
Expand All @@ -47,7 +47,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/carl.jpg" alt="Carl Lerche's Photo" class="biopic">
</div>
Expand All @@ -58,7 +58,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/pratik.jpg" alt="Pratik Naik's Photo" class="biopic">
</div>
Expand All @@ -70,7 +70,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/alumni/jamis.jpg" alt="Jamis Buck's Photo" class="biopic">
</div>
Expand All @@ -86,7 +86,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/alumni/marcel_molina.jpg" class="biopic" alt="Marcel Molina Jr.'s photo">
</div>
Expand All @@ -101,7 +101,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/alumni/nicholas.jpg" class="biopic" alt="Nicholas Seckar's Photo">
</div>
Expand All @@ -115,7 +115,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/alumni/florian.jpg" class="biopic" alt="Florian Weber's photo">
</div>
Expand All @@ -126,7 +126,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/alumni/sam.jpg" class="biopic" alt="Sam Stephenson's photo">
</div>
Expand All @@ -139,7 +139,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/alumni/scott.jpg" class="biopic" alt="Scott Barron's page">
</div>
Expand All @@ -152,7 +152,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/alumni/thomas_fuchs.jpg" class="biopic" alt="Thomas Fuchs's photo">
</div>
Expand All @@ -163,7 +163,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/alumni/tobi.jpg" class="biopic" alt="Tobias Lütke's photo">
</div>
Expand All @@ -179,7 +179,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/alumni/rick.png" class="biopic" alt="Rick Olson's Photo ">
</div>
Expand Down
28 changes: 14 additions & 14 deletions core/index.html
Expand Up @@ -6,7 +6,7 @@
subheader_3: "They are presented in order of acceptance to the team."
---
<div class="container">
<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/david.jpg" class="biopic" alt="David Heinemeier's photo">
</div>
Expand All @@ -24,7 +24,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/jeremy.jpg" class="biopic" alt="Jeremy Kemper's photo">
</div>
Expand All @@ -39,7 +39,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/koz.jpg" class="biopic" alt="Michael Koziarski's photo">
</div>
Expand All @@ -54,7 +54,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/jose.png" class="biopic" alt="José Valim's photo">
</div>
Expand All @@ -70,7 +70,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/santiago.jpg" class="biopic" alt="Santiago Pastorino's photo">
</div>
Expand All @@ -86,7 +86,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/aaron.png" class="biopic" alt="Aaron Patterson's photo">
</div>
Expand All @@ -103,7 +103,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/xavier.png" class="biopic" alt="Xavier Noria's photo">
</div>
Expand All @@ -119,7 +119,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/rafaelfranca.jpg" class="biopic" alt="Rafael França's photo">
</div>
Expand All @@ -137,7 +137,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/andrew-white.jpg" class="biopic" alt="Andrew White's photo">
</div>
Expand All @@ -151,7 +151,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/guillermo-iguaran.jpg" class="biopic" alt="Guillermo Iguaran's photo">
</div>
Expand All @@ -165,7 +165,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/carlos-antonio.jpg" class="biopic" alt="Carlos Antonio's photo">
</div>
Expand All @@ -182,7 +182,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/senny.png" class="biopic" alt="Yves Senn's photo">
</div>
Expand All @@ -196,7 +196,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-4">
<img src="/images/pages/core/godfrey.jpg" class="biopic" alt="Godfrey Chan's photo">
</div>
Expand All @@ -212,7 +212,7 @@
</div>
</div>

<div class="section row">
<div class="row">
<div class="col-sm-8 col-sm-offset-4">
<p>
<em>Rails core members who are no longer active in the day-to-day stuff have been immortalized as <a href="/core/alumni/" title="Core alumni page">core alumni</a></em>.
Expand Down

0 comments on commit b2b9c41

Please sign in to comment.