Cited: Responsive Themes For Journal Articles

I'm slowly building mobile-first/responsive themes for journal articles published in the humanities, digital humanities, and social sciences. Switching classes on article elements toggles between discipline-based themes.

by Jonathan McGlone

HTML

<div class="container">
    <div class="tools">
        <ul class="exports">
            <li>Download</li>
            <li>Print</li>
            <li>Share</li>
        </ul>
    </div>
    <nav class="humanities">
            <ul class="article-navigation">
                <!-- dynamic list of section h2s inserted here -->
            </ul>
        </nav>
    <article class="humanities">
        <header>
             <h1 class="title">Jules, Jim, and Walter Benjamin</h1>

            <ul class="author">
                <li class="last">Dudley Andrew</li>
            </ul>
            <ul class="author-affiliation">
                <li class="last">University of Iowa</li>
            </ul>
            <ul class="author-contact">
                <li>Author Contact 1</li>
                <li>Author Contact 2</li>
                <li>Author Contact 3</li>
                <li class="last">Author Contact 4</li>
            </ul>
            <ul class="keywords">
                <li>Keyword 1</li>
                <li>Keyword 2</li>
                <li class="last">Keyword 3</li>
            </ul>
        </header>
        <section class="abstract">
             <h2>Abstract</h2>

            <p>Urgent tamen et nihil remittunt. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Quod autem principium officii quaerunt, melius quam Pyrrho; <em>Deprehensus omnem poenam contemnet.</em> Ut proverbia non nulla veriora sint quam vestra dogmata. An hoc usque quaque, aliter in vita? Servari enim iustitia nisi a forti viro, nisi a sapiente non potest.</p>
        </section>
        <section>
             <h2>Kierkegaard's <em>Either/Or</em> (1843)</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Quid sequatur</a>, quid repugnet, vident. <b>Quod cum dixissent, ille contra.</b> Non dolere, inquam, istud quam vim habeat postea videro; At ille pellit, qui permulcet sensum voluptate. Ita prorsus, inquam; Duo Reges: constructio...

CSS

@import url(http://fonts.googleapis.com/css?family=Merriweather:400);
 @import url(http://fonts.googleapis.com/css?family=Merriweather:400italic);
 @import url(http://fonts.googleapis.com/css?family=Merriweather:700);
 @import url(http://fonts.googleapis.com/css?family=Merriweather:700italic);
 @import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:400);
 @import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:300);
 @import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:300italic);
 @import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:400italic);
 @import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:700italic);
 @import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:700);
 body {
    
    font-family:'Merriweather Sans', sans-serif;
    font-weight: 300;
    color: #454441;
}
.container { width: 100%;
            margin: 60px;
            }

nav { position: fixed; top: 35px; left: 0px; font-size: .75em; width: 17%; } 

nav ul { list-style: none; margin-left: 0px; }

nav a { font-weight: 300; }

nav.humanities { display: none; }

article.sciences { width: 70%; margin: auto; }

article.humanities {
    width: 80%;
    margin: auto;
}
b {
    font-weight: 400;
}
em {
    font-family:'Merriweather Sans', sans-serif;
    font-weight: 300italic;
}
h1, h2, h3, h4, h5, h6, h2 em {
    font-family:'Merriweather', serif;
    font-weight: 700;
    color: #2A2A2A;
}
h2, h3, h4, h5, h6 {
    margin: 40px 0px 0px;
}
section {
    margin: 50px 0px;
}
p {
    line-height: 25px;
}
h1.title {
    font-size: 2.2em;
    margin-bottom: 0px;
    padding-bottom: 5px;
    border-bottom: 2px solid #2A2A2A;
}
ul, ol {
    margin: 30px 20px;
}
ul li, ol li {
    line-height: 22px;
    margin-bottom: 5px;
}
footer ol {
    margin: 30px 0px;
}
ul.author li, ul.author-affiliation li, ul.author-contact li, ul.keywords li {
    list-style: none;
    display: inline;
}
ul.author li:after,...

JavaScript

//create article linked navigation
$("section h2").clone().appendTo("ul.article-navigation");
$("ul.article-navigation h2").each(function () {
    $(this).replaceWith("<a>" + $(this).html() + "</a>");
});
$("ul.article-navigation a").wrap("<li></li>");

//add ids to sections
var i = 0;
$("section h2").each(function () {
    i++;
    var newID = 'section-' + i;
    $(this).attr('id', newID);
    $(this).val(i);
});

//add hrefs to article linked navigation
var i = 0;
$("ul.article-navigation li a").each(function () {
    i++;
    var newID = '#section-' + i;
    $(this).attr('href', newID);
    $(this).val(i);
});