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
Make every page responsive by turning the central two-column sections from fixed width to a grid system that adapts at smaller screen sizes. Once again, the site will look the same in a normal-sized window, but will adapt nicely (and not overflow) at smaller resolutions.
This commit is just DOM/CSS optimization, replacing `#article header` with `header` in the CSS, since there is only one `<header>` element. The CSS file is updated accordingly, reusing styles already declared for the navbar (such as: text is black).
In order to use Bootstrap grid system, the box-sizing should be the default, that is, any measure of width or height should be inclusive of padding and border (but not margin). This commit replaces the box-sizing value without affecting the web site, by updating all the width/height values to include paddings and borders.
This commit is just DOM/CSS optimization, replacing ```html <div id="footer" class="container"><footer> ... </footer></div> ``` with ```html <footer class="container"> ... </footer> ``` and updating the CSS file accordingly, reusing styles already declared for the navbar (such as: links are black and become white with black background on hover).
This is the first commit to gradually make the web site responsive (#46). This commit *only* deals with the navigation menu at the top, and uses Bootstrap grid system so that it: * looks the same in a normal-sizes browser window * displays a collapsed dropdown menu in small-sized windows Interesting points of discussion about this commit: 1) the collapsed dropdown requires bootstrap.js -- as in the previous commit, up for discussion whether using a CDN is ok 2) bootstrap.js requires a more modern version of jquery, so 1.11.1 is used instead of 1.7.1 3) some CSS rules have been added to transform the "bootstrap-styled" navbar into the same style currently used by the site Regarding the last point, I just want to iterate that this commit intends not to change the current style/layout at all, just to make it responsive. I'm all for removing some of those extra CSS rules if we want to change the design, but it's outside of the scope of the current PR. Attachments show how the site and the navigation looks like before/after the commit.
The first step for a responsive design is to use a CSS framework that supports grid (or to create one). I suggest we use the most widely used at the time: Bootstrap CSS. This commit loads Bootstrap CSS while keeping the current layout intact. The following commits will gradually replace the element of the current layout (such as `<div role="main"><section>`) with responsive elements provided by Bootstrap (such as `<div class="container">`). I'm open to discussion about whether it’s okay load Bootstrap CSS from a CDN or include the file in the repository. I'm in favor of using a CDN, because it guarantees faster loading time + the file might already be in the browser’s cache + does not require the CSS from the same host (GitHub Pages) that serves the HTML files.
Removing the `class="quotes"` in the quotes page is the last step to guarantee that all the pages have the same layout (which can therefore be extracted into the "default" layout). The `class="quotes"` was only there to style `<blockquote`>, but their style can be defined without being specific to that page.
Instead, add it to the default layout.