Academic Journal Format (Bootstrap)

by jstnlowe

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-fluid">
  <div class="paper">
    <!--start page header -->
    <div class="row" id="header">
      <!--start page title-->
      <div class="col">
        <h1>An approach to the display of web-based content using Bootstrap and CSS3</h1>
      </div>
      <!-- end page title-->
    </div>
    <!-- start authorship -->
    <div class="row" id="authorship">
      <div class="col">
        Justin Lowe
      </div>
    </div>
    <!-- end authorship -->
    <!-- start affiliations -->
    <div class="row" id="affiliation">
      <div class="col">
        JstnLowe.com, http://www.jstnlowe.com
      </div>
    </div>
    <!-- end affiliations -->
    <!-- end page header -->
    <!-- start page meta -->
    <div class="row" id="metadata">
      <div class="col-sm-4">
        <p class="metaheader">
          Article Info
        </p>
        <p>
          Published 2017 Feb 04
        </p>
        <p class="metaheader">
          Keywords
        </p>
        <p>
         Bootstrap, Design Layout, CSS
        </p>
      </div>
      <div class="col-sm-8">
        <p class="metaheader">
          Abstract
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lectus nibh, consectetur in egestas volutpat, efficitur in turpis. Etiam aliquet in lacus sit amet posuere. Curabitur at est at elit fermentum rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie sapien nibh, quis congue urna ornare ut. Phasellus neque magna, posuere sed purus ut, commodo viverra quam. Etiam elementum nulla ac ornare convallis.</p>
      </div>
    </div>
    <!-- end page meta -->
    <!--page content -->
    <div class="row">
      <div class="col" id="content"><div class="section">
        <h2>The first main...

CSS

body {
  background: #f5f5f5;
}

.paper {
  font-family: "Times New Roman", Times, serif;
  /* establish the scope of the counters */
  counter-reset: figurecounter tablecounter h2counter h3counter;
  background: #fff;
  margin-top: 2em;
  margin-bottom: 2em;
  padding-left: 4em;
  padding-right: 4em;
  padding-top: 3em;
  padding-bottom: 4em;
  box-shadow: 0.2em 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.4);
}


/* justify all the things */

.paper p {
  text-align: justify;
}


/* use selectors to indent all but first paragraph in each section */

.content p + p,
table + p,
div + p {
  text-indent: 2em;
}

h1 {
  border-top: 0.3em solid;
  padding-top: 0.3em;
  font-weight: bold;
  font-size: 2em;
}

h2:before {
  content: counter(h2counter) ".\a0\20\a0\20\a0\20";
  counter-increment: h2counter;
  counter-reset: h3counter;
}

h2 {
  border-top: 0.3em solid;
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 0;
  padding-top: 0.2em;
  margin-bottom: 1em;
  page-break-inside: avoid;
}

h3:before {
  content: counter(h2counter) "." counter(h3counter) ".\a0\20\a0\20\a0\20";
  counter-increment: h3counter;
}

h3 {
  font-size: 1.1em;
  font-style: italic;
  font-weight: bold;
  margin-top: 0;
}

#authorship {
  font-style: italic;
  font-weight: bold;
  font-size: 1.2em;
}

#affiliation {
  font-style: italic;
  border-bottom: 0.2em solid;
  padding-bottom: 0.2em;
}

@media (min-width:768px) {
  #content {
    column-count: 2;
    column-gap: 1em;
  }
  /* this makes sure that the images fit their column */
  #content img {
    max-width: 100%;
  }
}

#metadata {
  border-bottom: 0.1em solid;
  margin-bottom: 2em;
  margin-top: 1.2em;
}

.metaheader {
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 0.1em solid;
}

.paper thead > tr {
  background-color: #000;
  color: #fff;
}

.paper thead > tr ~ tr {
  background-color: #eee;
  color: #000;
}

.paper tbody {
  background-color: #eee;
  color: #000;
  border-bottom: 2px solid...