diff --git a/journals/templates/journals/journals.html b/journals/templates/journals/journals.html
index 17839ca95ef11c9acbcf8fdfc2c69cff34a7f805..5a7bc0530bcc7d734365634439e922c004b1c238 100644
--- a/journals/templates/journals/journals.html
+++ b/journals/templates/journals/journals.html
@@ -2,81 +2,123 @@
{% block pagetitle %}: Journals{% endblock pagetitle %}
-{% block bodysup %}
+{% block content %}
+<div class="row">
+ <div class="col-12">
+ <div class="panel">
+ <h1>SciPost Physics Journals</h1>
+ </div>
+ </div>
+</div>
+<div class="row">
+ <div class="col-12">
+ <h2>View and comment on current <a href="{% url 'submissions:submissions' %}">Submissions</a> <small>(login required)</small></h2>
+ </div>
+</div>
-<section>
- <div class="flex-greybox">
- <h1>SciPost Physics Journals</h1>
- </div>
- <br/>
-
- <br/>
- <h2>View and comment on (login required) current <a href="{% url 'submissions:submissions' %}">Submissions</a></h2>
- <br/>
- <div class="row">
- <div class="col-6">
- <hr class="hr6">
- <div class="flex-container">
+<div class="row">
+ <div class="col-12 col-md-6">
+ {# <hr>#}
<div class="SciPostPhysicsBanner">
- <h3>SciPost Physics Lecture Notes</h3>
+ <h1><a href="{% url 'journals:scipost_physics' %}">SciPost Physics</a></h1>
</div>
- </div>
- <p>Research-level didactic material in all domains and subject areas of Physics.</p>
- <p style="color: red;">Open for submission!</p>
- <br/>
- <hr class="hr6">
-
- <div class="flex-container">
- <div class="SciPostPhysicsBanner">
- <h3><a href="{% url 'journals:scipost_physics' %}">SciPost Physics</a></h3>
+ <div class="py-2">
+ <p>SciPost Physics publishes outstanding-quality research articles in all domains and subject areas of Physics.</p>
+ <p>The journal accepts three types of content: Letters, Articles and Reviews.</p>
+ <p>Letters report broad-interest, significant breakthroughs in Physics, of interest and importance to researchers in multiple subject areas.</p>
+ <p>Articles provide in-depth, detailed reports of groundbreaking research within one or more subject areas.</p>
+ <p>Reviews are short pieces taking a snapshot of a research area, written by recognized leaders in the field, providing a critical assessment of current frontline research and providing pointers towards future opportunities.</p>
</div>
- </div>
-
- <p>SciPost Physics publishes outstanding-quality research articles in all domains and subject areas of Physics.</p>
- <p>The journal accepts three types of content: Letters, Articles and Reviews.</p>
- <p>Letters report broad-interest, significant breakthroughs in Physics, of interest and importance to researchers in multiple subject areas.</p>
- <p>Articles provide in-depth, detailed reports of groundbreaking research within one or more subject areas.</p>
- <p>Reviews are short pieces taking a snapshot of a research area, written by recognized leaders in the field, providing a critical assessment of current frontline research and providing pointers towards future opportunities.</p>
- <br/>
+ </div>
+
+ <div class="col-12 col-md-6">
+ <div class="row">
+ <div class="col-12">
+ {# <hr>#}
+ <div class="SciPostPhysicsBanner">
+ <h1>SciPost Physics Select</h1>
+ </div>
+ <div class="py-2">
+ <p>SciPost Physics Select publishes articles of superlative quality in the field of Physics.</p>
+ <p>Authors cannot submit directly to this Journal; SPS papers are editorially selected from the most outstanding Submissions to SciPost Physics.</p>
+ <p style="color: red;"><em>Coming soon!</em></p>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-12">
+ {# <hr>#}
+ <div class="SciPostPhysicsBanner">
+ <h1>SciPost Physics Lecture Notes</h1>
+ </div>
+ <div class="py-2">
+ <p>Research-level didactic material in all domains and subject areas of Physics.</p>
+ <p style="color: red;">Open for submission!</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
- <hr class="hr6">
- <div class="flex-container">
+{% comment %} <div class="row">
+ <div class="col-12">
+ <hr>
<div class="SciPostPhysicsBanner">
- <h3>SciPost Physics Select</h3>
+ <h3><a href="{% url 'journals:scipost_physics' %}">SciPost Physics</a></h3>
+ </div>
+ <div class="py-2">
+ <p>SciPost Physics publishes outstanding-quality research articles in all domains and subject areas of Physics.</p>
+ <p>The journal accepts three types of content: Letters, Articles and Reviews.</p>
+ <p>Letters report broad-interest, significant breakthroughs in Physics, of interest and importance to researchers in multiple subject areas.</p>
+ <p>Articles provide in-depth, detailed reports of groundbreaking research within one or more subject areas.</p>
+ <p>Reviews are short pieces taking a snapshot of a research area, written by recognized leaders in the field, providing a critical assessment of current frontline research and providing pointers towards future opportunities.</p>
</div>
- </div>
-
- <p>SciPost Physics Select publishes articles of superlative quality in the field of Physics.</p>
- <p>Authors cannot submit directly to this Journal; SPS papers are editorially selected from the most outstanding Submissions to SciPost Physics.</p>
- <p style="color: red;"><em>Coming soon!</p>
- <br/>
</div>
- <div class="col-1"></div>
- <div class="col-5">
- <hr class="hr6">
- <p>The collection of SciPost Physics Journals covers research in the domains of Experimental, Theoretical and Computational physics, including the following specialties:</p>
- <ul>
- <li>A: Atomic, Molecular and Optical Physics</li>
- <li>B: Biophysics</li>
- <li>C: Condensed Matter Physics</li>
- <li>F: Fluid Dynamics</li>
- <li>G: Gravitation, Cosmology and Astroparticle Physics</li>
- <li>H: High-Energy Physics</li>
- <li>M: Mathematical Physics</li>
- <li>N: Nuclear Physics</li>
- <li>Q: Quantum Statistical Mechanics</li>
- <li>S: Statistical and Soft Matter Physics</li>
- </ul>
- <hr class="hr12">
-
- <h3><a href="{% url 'journals:journals_terms_and_conditions' %}">SciPost Journals Terms and Conditions</a></h3>
- <h3><a href="{% url 'submissions:author_guidelines' %}">Author guidelines</a></h3>
- <h3><a href="{% url 'submissions:sub_and_ref_procedure' %}">Submission and Refereeing procedure</a></h3>
- <h3><a href="{% url 'scipost:about' %}#editorial_college_physics">Editorial College (Physics)</a></h3>
+</div>{% endblock %}
+
+{% comment %} <div class="row">
+ <div class="col-12">
+ <hr>
+ <div class="SciPostPhysicsBanner">
+ <h3>SciPost Physics Select</h3>
+ </div>
+ <div class="py-2">
+ <p>SciPost Physics Select publishes articles of superlative quality in the field of Physics.</p>
+ <p>Authors cannot submit directly to this Journal; SPS papers are editorially selected from the most outstanding Submissions to SciPost Physics.</p>
+ <p style="color: red;"><em>Coming soon!</p>
+ </div>
</div>
- </div>
-</section>
+</div>{% endcomment %}
+
+<div class="row">
+ <div class="col-12">
+ <hr>
+ <p>The collection of SciPost Physics Journals covers research in the domains of Experimental, Theoretical and Computational physics, including the following specialties:</p>
+ <ul>
+ <li>A: Atomic, Molecular and Optical Physics</li>
+ <li>B: Biophysics</li>
+ <li>C: Condensed Matter Physics</li>
+ <li>F: Fluid Dynamics</li>
+ <li>G: Gravitation, Cosmology and Astroparticle Physics</li>
+ <li>H: High-Energy Physics</li>
+ <li>M: Mathematical Physics</li>
+ <li>N: Nuclear Physics</li>
+ <li>Q: Quantum Statistical Mechanics</li>
+ <li>S: Statistical and Soft Matter Physics</li>
+ </ul>
+ </div>
+</div>
+<div class="row">
+ <div class="col-12">
+ <hr>
+ <h3><a href="{% url 'journals:journals_terms_and_conditions' %}">SciPost Journals Terms and Conditions</a></h3>
+ <h3><a href="{% url 'submissions:author_guidelines' %}">Author guidelines</a></h3>
+ <h3><a href="{% url 'submissions:sub_and_ref_procedure' %}">Submission and Refereeing procedure</a></h3>
+ <h3><a href="{% url 'scipost:about' %}#editorial_college_physics">Editorial College (Physics)</a></h3>
+ </div>
+</div>
-{% endblock bodysup %}
+{% endblock content %}
diff --git a/scipost/static/scipost/assets/css/_journals.scss b/scipost/static/scipost/assets/css/_journals.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2af552afa1cadc290e69f989392eacfd6eb3c4c6
--- /dev/null
+++ b/scipost/static/scipost/assets/css/_journals.scss
@@ -0,0 +1,26 @@
+/**
+ * SciPost Physics Journal style
+ *
+ */
+
+.SciPostPhysicsBanner {
+ background-color: $scipost-darkblue;
+ color: $scipost-orange;
+ padding: 10px 20px;
+ text-align: center;
+
+ a {
+ color: #FFA300;
+ padding: 4px;
+
+ &.active {
+ background-color: #eeeeee;
+ border: 1px solid black;
+ padding: 4px;
+ }
+ &.inactive {
+ background-color: #dddddd;
+ border: none;
+ }
+ }
+}
diff --git a/scipost/static/scipost/assets/css/_labels.scss b/scipost/static/scipost/assets/css/_labels.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1c77e84a987f2c5893ce1847f32d14d5a6f4f971
--- /dev/null
+++ b/scipost/static/scipost/assets/css/_labels.scss
@@ -0,0 +1,172 @@
+//
+// Labels
+// --------------------------------------------------
+// For each of Bootstrap's buttons, define text, background and border color.
+
+$label-padding-x: 5px !default;
+$label-padding-y: 3px !default;
+$label-line-height: inherit;
+$label-font-weight: $font-weight-normal !default;
+$label-box-shadow: none;
+$label-font-size: inherit;
+
+$label-primary-color: $white !default;
+$label-primary-bg: $brand-primary !default;
+$label-primary-border: $btn-primary-bg !default;
+
+$label-secondary-color: $gray-dark !default;
+$label-secondary-bg: $white !default;
+$label-secondary-border: #ccc !default;
+
+$label-default-color: #fff;
+$label-default-bg: #ccc;
+$label-default-border: #ccc;
+
+$label-info-color: $white !default;
+$label-info-bg: $brand-info !default;
+$label-info-border: $btn-info-bg !default;
+
+$label-success-color: $white !default;
+$label-success-bg: $brand-success !default;
+$label-success-border: $btn-success-bg !default;
+
+$label-warning-color: $white !default;
+$label-warning-bg: $brand-warning !default;
+$label-warning-border: $btn-warning-bg !default;
+
+$label-danger-color: $white;
+$label-danger-bg: $brand-danger !default;
+$label-danger-border: $btn-danger-bg !default;
+
+$label-padding-x-sm: .5rem;
+$label-padding-y-sm: .1rem;
+
+$label-padding-x-lg: 1rem !default;
+$label-padding-y-lg: 0.5rem !default;
+
+$label-label-spacing-y: .5rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$label-border-width: $input-btn-border-width;
+$label-border-radius: 4px;
+$label-border-radius-lg: 4px;
+$label-border-radius-sm: 4px;
+
+$label-transition: all .2s ease-in-out !default;
+
+.label {
+ display: inline;
+ font-weight: $label-font-weight;
+ line-height: $label-line-height;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ user-select: none;
+ // cursor: default;
+ border: $label-border-width solid transparent;
+ box-shadow: $label-box-shadow;
+
+ @include button-size($label-padding-y, $label-padding-x, $label-font-size, $label-border-radius);
+ @include transition($label-transition);
+}
+
+.label-flat > .label,
+.label-flat {
+ box-shadow: none;
+}
+
+// Colors
+// Contextual variations (linked labels get darker on :hover)
+a.label-primary,
+.label-primary {
+ @include label-variant($label-primary-color, $label-primary-bg, $label-primary-border);
+}
+a.label-secondary,
+.label-secondary {
+ @include label-variant($label-secondary-color, $label-secondary-bg, $label-secondary-border);
+}
+a.label-default,
+.label-default {
+ @include label-variant($label-default-color, $label-default-bg, $label-default-border);
+
+ &[href] {
+ @include hover-focus {
+ border-color: #999;
+ background-color: #999;
+ }
+ }
+}
+a.label-success,
+.label-success {
+ @include label-variant($label-success-color, $label-success-bg, $label-success-border);
+}
+a.label-info,
+.label-info {
+ @include label-variant($label-info-color, $label-info-bg, $label-info-border);
+}
+a.label-warning,
+.label-warning {
+ @include label-variant($label-warning-color, $label-warning-bg, $label-warning-border);
+}
+a.label-danger,
+.label-danger {
+ @include label-variant($label-danger-color, $label-danger-bg, $label-danger-border);
+
+ &[href] {
+ @include hover-focus {
+ border-color: #F44336;
+ background-color: #F44336;
+ }
+ }
+}
+
+// Remove all backgrounds
+.label-outline-primary {
+ @include label-outline-variant($label-primary-bg);
+}
+.label-outline-secondary {
+ @include label-outline-variant($label-secondary-border);
+}
+.label-outline-default {
+ @include label-outline-variant($label-default-bg);
+}
+.label-outline-info {
+ @include label-outline-variant($label-info-bg);
+}
+.label-outline-success {
+ @include label-outline-variant($label-success-bg);
+}
+.label-outline-warning {
+ @include label-outline-variant($label-warning-bg);
+}
+.label-outline-danger {
+ @include label-outline-variant($label-danger-bg);
+}
+
+//
+// Label Sizes
+//
+
+.label-lg {
+ // line-height: ensure even-numbered height of button next to large input
+ @include button-size($label-padding-y-lg, $label-padding-x-lg, $font-size-lg, $label-border-radius-lg);
+}
+.label-sm {
+ // line-height: ensure proper height of button next to small input
+ @include button-size($label-padding-y-sm, $label-padding-x-sm, $font-size-sm, $label-border-radius-sm);
+}
+
+
+//
+// Block label
+//
+
+.label-block {
+ display: block;
+ width: 100%;
+}
+
+// Vertically space out multiple labels
+.label-block + .label-block {
+ margin-top: $label-label-spacing-y;
+}
diff --git a/scipost/static/scipost/assets/css/_mixins_labels.scss b/scipost/static/scipost/assets/css/_mixins_labels.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2822ba69d7fa78c74f3641c4523373b91d18f4a9
--- /dev/null
+++ b/scipost/static/scipost/assets/css/_mixins_labels.scss
@@ -0,0 +1,18 @@
+// Label variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+@mixin label-variant($color, $background, $border) {
+ color: $color;
+ background-color: $background;
+ border-color: $border;
+ @include box-shadow($label-box-shadow);
+}
+
+@mixin label-outline-variant($color, $color-hover: #fff) {
+ color: $color;
+ background-image: none;
+ background-color: transparent;
+ border-color: $color;
+}
diff --git a/scipost/static/scipost/assets/css/_submissions.scss b/scipost/static/scipost/assets/css/_submissions.scss
new file mode 100644
index 0000000000000000000000000000000000000000..db0039ca92b28e01e449b07ebfd1158911441d89
--- /dev/null
+++ b/scipost/static/scipost/assets/css/_submissions.scss
@@ -0,0 +1,23 @@
+table.submission_header {
+ width: 100%;
+}
+
+.report,
+.comment {
+ border-left: 4px solid #f4f4f4;
+ padding-left: 1rem;
+
+ .reportid,
+ .commentid {
+ box-shadow: none;
+ display: block;
+ margin-bottom: 1rem;
+ padding: 0.5rem 1rem;
+ background: #f4f4f4;
+ margin-left: -1rem;
+ }
+}
+
+.reportRatings {
+ margin: 0 0 1rem;
+}