Improve readability on large screens + minor style improvements

* Limit paragraph width to optimize readability on large screens (#97)
* Markdownify publication authors (#101)
* Improve padding of first homepage widget (#98)

layouts/_default/list.html

@@ -1,6 +1,6 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
-<div class="container">
+<div class="universal-wrapper">
 
   {{ $paginator := .Paginate .Data.Pages }}
   {{ range $paginator.Pages }}

layouts/_default/single.html

@@ -1,26 +1,29 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
-<div class="container">
 
-  <article class="article" itemscope itemtype="http://schema.org/Article">
+<article class="article" itemscope itemtype="http://schema.org/Article">
 
-    {{ if .Params.image }}
-    <img src="{{ $.Site.BaseURL }}img/{{ .Params.image }}" class="article-banner" itemprop="image">
-    {{end}}
+  {{ if .Params.image }}
+  <img src="{{ $.Site.BaseURL }}img/{{ .Params.image }}" class="article-banner" itemprop="image">
+  {{end}}
 
+  <div class="article-container">
     <h1 itemprop="name">{{ .Title }}</h1>
-
     {{ partial "article_metadata" (dict "content" . "is_list" 0) }}
-
     <div class="article-style" itemprop="articleBody">
       {{ .Content }}
     </div>
+  </div>
 
-  </article>
+</article>
 
+<div class="container">
   {{ partial "section_pager.html" . }}
-  {{ partial "comments.html" . }}
+</div>
 
+<div class="article-container">
+  {{ partial "comments.html" . }}
 </div>
+
 {{ partial "footer_container.html" . }}
 {{ partial "footer.html" . }}

layouts/partials/publication_li_detailed.html

@@ -40,7 +40,7 @@
 
       <div class="pub-authors" itemprop="author">
         {{ with .Params.authors }}
-        {{ delimit . ", " }}
+        {{ delimit . ", " | markdownify }}
         {{ end }}
       </div>
 

layouts/project/single.html

@@ -1,13 +1,19 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
-<div class="container">
+<div class="article-container">
 
   <article class="article article-project" itemscope itemtype="http://schema.org/Article">
     {{ if .Params.image }}
     <img src="{{ $.Site.BaseURL }}img/{{ .Params.image }}" class="article-banner" itemprop="image">
     {{end}}
 
-    <h1 itemprop="name">{{ .Title }}</h1>
+    <div class="pub-title">
+      <h1 itemprop="name">{{ .Title }}</h1>
+      <span class="pub-authors" itemprop="author">&nbsp;</span>
+      <span class="pull-right">
+        {{ partial "share.html" . }}
+      </span>
+    </div>
 
     {{ with .Params.external_link }}
     <a class="btn btn-primary btn-outline" href="{{ . }}" target="_blank">{{ i18n "open_project_site" }}</a>
@@ -18,8 +24,11 @@
     </div>
   </article>
 
-  {{ partial "section_pager.html" . }}
+</div>
 
+<div class="container">
+  {{ partial "section_pager.html" . }}
 </div>
+
 {{ partial "footer_container.html" . }}
 {{ partial "footer.html" . }}

layouts/publication/single.html

@@ -1,97 +1,100 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
-<div class="container">
+<div class="container pub" itemscope itemtype="http://schema.org/CreativeWork">
 
-  <div class="pub" itemscope itemtype="http://schema.org/CreativeWork">
-    <div class="pub-title">
-      <h1 itemprop="name">{{ .Title }}</h1>
-      <span class="pub-authors" itemprop="author">
-        {{ with .Params.authors }}
-        {{ delimit . ", " }}
-        {{ end }}
-      </span>
-      <span class="pull-right">
-        {{ partial "share.html" . }}
-      </span>
-    </div>
+  <div class="pub-title">
+    <h1 itemprop="name">{{ .Title }}</h1>
+    <span class="pub-authors" itemprop="author">
+      {{ with .Params.authors }}
+      {{ delimit . ", " | markdownify }}
+      {{ end }}
+    </span>
+    <span class="pull-right">
+      {{ partial "share.html" . }}
+    </span>
+  </div>
+
+</div>
+<div class="article-container">
 
-    {{ if .Params.image }}
-    <img src="{{ $.Site.BaseURL }}img/{{ .Params.image }}" class="pub-banner" itemprop="image">
-    {{end}}
+  {{ if .Params.image }}
+  <img src="{{ $.Site.BaseURL }}img/{{ .Params.image }}" class="pub-banner" itemprop="image">
+  {{end}}
 
-    <h3>{{ i18n "abstract" }}</h3>
-    <p class="pub-abstract" itemprop="text">{{ .Params.abstract }}</p>
+  <h3>{{ i18n "abstract" }}</h3>
+  <p class="pub-abstract" itemprop="text">{{ .Params.abstract }}</p>
 
-    {{ if (.Params.publication_types) and (ne (index .Params.publication_types 0) "0") }}
-    <div class="row">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
-        <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "publication_type" }}</div>
-          <div class="col-xs-12 col-sm-9">
-            {{ range $index, $pubtype := .Params.publication_types }}
-            <a href="{{ "/publication/" | relURL }}#{{ . | urlize }}">
-              {{ index $.Site.Params.publication_types (int .) }}
-            </a>
-            {{ end }}
-          </div>
+  {{ if (.Params.publication_types) and (ne (index .Params.publication_types 0) "0") }}
+  <div class="row">
+    <div class="col-sm-1"></div>
+    <div class="col-sm-10">
+      <div class="row">
+        <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "publication_type" }}</div>
+        <div class="col-xs-12 col-sm-9">
+          {{ range $index, $pubtype := .Params.publication_types }}
+          <a href="{{ "/publication/" | relURL }}#{{ . | urlize }}">
+            {{ index $.Site.Params.publication_types (int .) }}
+          </a>
+          {{ end }}
         </div>
       </div>
-      <div class="col-sm-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
-    {{ end }}
+    <div class="col-sm-1"></div>
+  </div>
+  <div class="visible-xs space-below"></div>
+  {{ end }}
 
-    <div class="row">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
-        <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "publication" }}</div>
-          <div class="col-xs-12 col-sm-9">{{ .Params.publication | markdownify }}</div>
-        </div>
+  <div class="row">
+    <div class="col-sm-1"></div>
+    <div class="col-sm-10">
+      <div class="row">
+        <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "publication" }}</div>
+        <div class="col-xs-12 col-sm-9">{{ .Params.publication | markdownify }}</div>
       </div>
-      <div class="col-sm-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
+    <div class="col-sm-1"></div>
+  </div>
+  <div class="visible-xs space-below"></div>
 
-    <div class="row">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
-        <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "date" }}</div>
-          <div class="col-xs-12 col-sm-9" itemprop="datePublished">
-            {{ .Date.Format "January, 2006" }}
-          </div>
+  <div class="row">
+    <div class="col-sm-1"></div>
+    <div class="col-sm-10">
+      <div class="row">
+        <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "date" }}</div>
+        <div class="col-xs-12 col-sm-9" itemprop="datePublished">
+          {{ .Date.Format "January, 2006" }}
         </div>
       </div>
-      <div class="col-sm-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
+    <div class="col-sm-1"></div>
+  </div>
+  <div class="visible-xs space-below"></div>
 
-    <div class="row" style="padding-top: 10px">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
-        <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading" style="line-height:34px;">{{ i18n "links" }}</div>
-          <div class="col-xs-12 col-sm-9">
+  <div class="row" style="padding-top: 10px">
+    <div class="col-sm-1"></div>
+    <div class="col-sm-10">
+      <div class="row">
+        <div class="col-xs-12 col-sm-3 pub-row-heading" style="line-height:34px;">{{ i18n "links" }}</div>
+        <div class="col-xs-12 col-sm-9">
 
-            {{ partial "publication_links" (dict "content" . "is_list" 0) }}
+          {{ partial "publication_links" (dict "content" . "is_list" 0) }}
 
-          </div>
         </div>
       </div>
-      <div class="col-sm-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
+    <div class="col-sm-1"></div>
+  </div>
+  <div class="visible-xs space-below"></div>
 
-    <div class="space-below"></div>
+  <div class="space-below"></div>
 
-    <div class="article-style">{{ .Content }}</div>
+  <div class="article-style">{{ .Content }}</div>
 
-  </div>
+</div>
 
+<div class="container">
   {{ partial "section_pager.html" . }}
-
 </div>
+
 {{ partial "footer_container.html" . }}
 {{ partial "footer.html" . }}

layouts/section/post.html

@@ -1,6 +1,6 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
-<div class="container">
+<div class="universal-wrapper">
 
   <h1>{{ .Title | default "Posts" }}</h1>
 

layouts/talk/single.html

@@ -1,101 +1,103 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
-<div class="container">
+<div class="article-container pub" itemscope itemtype="http://schema.org/CreativeWork">
 
-  <div class="pub" itemscope itemtype="http://schema.org/CreativeWork">
-    <div class="pub-title">
-      <h1 itemprop="name">{{ .Title }}</h1>
-      <span class="pub-authors" itemprop="author">
-        {{ with .Params.authors }}
-        {{ delimit . ", " }}
-        {{ end }}
-      </span>
-      <span class="pull-right">
-        {{ partial "share.html" . }}
-      </span>
-    </div>
+  <div class="pub-title">
+    <h1 itemprop="name">{{ .Title }}</h1>
+    <span class="pub-authors" itemprop="author">
+      {{ with .Params.authors }}
+      {{ delimit . ", " }}
+      {{ end }}
+    </span>
+    <span class="pull-right">
+      {{ partial "share.html" . }}
+    </span>
+  </div>
 
-    {{ if .Params.image }}
-    <img src="{{ $.Site.BaseURL }}img/{{ .Params.image }}" class="pub-banner" itemprop="image">
-    {{end}}
+  {{ if .Params.image }}
+  <img src="{{ $.Site.BaseURL }}img/{{ .Params.image }}" class="pub-banner" itemprop="image">
+  {{end}}
 
-    {{ if .Params.abstract }}
-      <h3>{{ i18n "abstract" }}</h3>
-      <p class="pub-abstract" itemprop="text">{{ .Params.abstract }}</p>
-    {{ else }}
-      <br>
-    {{ end }}
+  {{ if .Params.abstract }}
+    <h3>{{ i18n "abstract" }}</h3>
+    <p class="pub-abstract" itemprop="text">{{ .Params.abstract }}</p>
+  {{ else }}
+    <br>
+  {{ end }}
 
-    <div class="row">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
-        <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "date" }}</div>
-          <div class="col-xs-12 col-sm-9" itemprop="datePublished">
-            {{ .Date.Format $.Site.Params.date_format }}
-          </div>
+  <div class="row">
+    <div class="col-sm-1"></div>
+    <div class="col-sm-10">
+      <div class="row">
+        <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "date" }}</div>
+        <div class="col-xs-12 col-sm-9" itemprop="datePublished">
+          {{ .Date.Format $.Site.Params.date_format }}
         </div>
       </div>
-      <div class="col-sm-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
+    <div class="col-sm-1"></div>
+  </div>
+  <div class="visible-xs space-below"></div>
 
-    <div class="row">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
-        <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "event" }}</div>
-          <div class="col-xs-12 col-sm-9">
-            {{ with .Params.event_url }}<a href="{{ . }}" target="_blank">{{ end }}
-            {{ .Params.event | markdownify }}
-            {{ if .Params.event_url }}</a>{{ end }}
-          </div>
+  <div class="row">
+    <div class="col-sm-1"></div>
+    <div class="col-sm-10">
+      <div class="row">
+        <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "event" }}</div>
+        <div class="col-xs-12 col-sm-9">
+          {{ with .Params.event_url }}<a href="{{ . }}" target="_blank">{{ end }}
+          {{ .Params.event | markdownify }}
+          {{ if .Params.event_url }}</a>{{ end }}
         </div>
       </div>
-      <div class="col-sm-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
+    <div class="col-sm-1"></div>
+  </div>
+  <div class="visible-xs space-below"></div>
 
-    {{ with .Params.location }}
-    <div class="row">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
-        <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "location" }}</div>
-          <div class="col-xs-12 col-sm-9">{{ . | markdownify }}</div>
-        </div>
+  {{ with .Params.location }}
+  <div class="row">
+    <div class="col-sm-1"></div>
+    <div class="col-sm-10">
+      <div class="row">
+        <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "location" }}</div>
+        <div class="col-xs-12 col-sm-9">{{ . | markdownify }}</div>
       </div>
-      <div class="col-sm-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
-    {{ end }}
+    <div class="col-sm-1"></div>
+  </div>
+  <div class="visible-xs space-below"></div>
+  {{ end }}
 
-    {{ if .Params.url_pdf | or .Params.url_slides | or .Params.url_video | or .Params.url_custom }}
-    <div class="row" style="padding-top: 10px">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
-        <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading" style="line-height:34px;">{{ i18n "links" }}</div>
-          <div class="col-xs-12 col-sm-9">
+  {{ if .Params.url_pdf | or .Params.url_slides | or .Params.url_video | or .Params.url_custom }}
+  <div class="row" style="padding-top: 10px">
+    <div class="col-sm-1"></div>
+    <div class="col-sm-10">
+      <div class="row">
+        <div class="col-xs-12 col-sm-3 pub-row-heading" style="line-height:34px;">{{ i18n "links" }}</div>
+        <div class="col-xs-12 col-sm-9">
 
-            {{ partial "talk_links" (dict "content" . "is_list" 0) }}
+          {{ partial "talk_links" (dict "content" . "is_list" 0) }}
 
-          </div>
         </div>
       </div>
-      <div class="col-sm-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
-    {{ end }}
-
-    <div class="space-below"></div>
+    <div class="col-sm-1"></div>
+  </div>
+  <div class="visible-xs space-below"></div>
+  {{ end }}
 
-    <div class="article-style">{{ .Content }}</div>
+  <div class="space-below"></div>
 
+  <div class="article-style">
+    {{ .Content }}
   </div>
 
-  {{ partial "section_pager.html" . }}
+</div>
 
+<div class="container">
+  {{ partial "section_pager.html" . }}
 </div>
+
 {{ partial "footer_container.html" . }}
 {{ partial "footer.html" . }}

static/css/hugo-academic.css

@@ -177,6 +177,18 @@ blockquote p:last-child {
   }
 }
 
+.universal-wrapper {
+  margin: 0 auto;
+  padding-right: 15px;
+  padding-left: 15px;
+  width: 100%;
+}
+@media only screen and (min-width: 1001px) {
+  .universal-wrapper {
+    width: 1000px;
+  }
+}
+
 /*************************************************
  *  Home Sections
  **************************************************/
@@ -196,20 +208,24 @@ blockquote p:last-child {
   animation: intro 0.3s both;
   animation-delay: 0.15s;
 }
-@media screen and (max-width: 768px) {
-  .home-section {
-    padding: 60px 0 60px 0;
-  }
-}
 
 .home-section:first-of-type {
-  padding-top: 0;
+  padding-top: 50px;
 }
 
 .home-section:nth-of-type(even) {
   background-color: rgb(247, 247, 247);
 }
 
+@media screen and (max-width: 768px) {
+  .home-section {
+    padding: 60px 0 60px 0;
+  }
+  .home-section:first-of-type {
+    padding-top: 40px;
+  }
+}
+
 .section-heading h1 {
   margin: 0 0 10px 0;
 }
@@ -365,6 +381,12 @@ article {
   animation-delay: 0.15s;
 }
 
+.article-container {
+  max-width: 760px;
+  padding: 1rem 20px 0 20px;
+  margin: 0 auto 0 auto;
+}
+
 .article-title {
   font-size: 1.75rem;
 }