Switch to Bootstrap 4

app/views/about/copyright.de.html.erb

@@ -1,6 +1,8 @@
 <% provide(:title, 'Copyright') %>
 
-<div class="page-header"><h1>Copyright</h1></div>
+<div class="pb-2 mt-4 mb-2 border-bottom">
+  <h1>Copyright</h1>
+</div>
 <div class="bs-callout bs-callout-info">Dieser Artikel dient gleichzeitig der Übersetzung der <a href="https://projecteuler.net/copyright">"Copyright Information" auf projecteuler.net</a> sowie der tatsächlich geltenden Copyright-Informationen für diese Seite.</div>
 <h2>Kann ich die Probleme woanders benutzen?</h2>
 <p>Ja! Es ist nicht nur erlaubt, sondern beherzt, das Material zu teilen und frei zu benutzen - für nichtkommerzielle Zwecke. Aber bitte lesen Sie weiter...<br />

app/views/about/index.de.html.erb

@@ -1,12 +1,10 @@
 <div class="jumbotron">
-  <div class="container">
-    <h1>Willkommen auf Projekt Euler!</h1>
-    <p>Diese Seite ist eine Übersetzung der englischen Rätsel-Webseite <a href="https://projecteuler.net/">projecteuler.net</a>.</p>
-    <p>
-      <%= link_to about_info_path, class: 'btn btn-primary btn-lg' do %>
-          Mehr erfahren &raquo;
-      <% end %>
-  </div>
+  <h1 class="display-4">Willkommen auf Projekt Euler!</h1>
+  <p>Diese Seite ist eine Übersetzung der englischen Rätsel-Webseite <a href="https://projecteuler.net/">projecteuler.net</a>.</p>
+  <p class="lead">
+    <%= link_to about_info_path, class: 'btn btn-primary btn-lg' do %>
+        Mehr erfahren &raquo;
+    <% end %>
 </div>
 
 <div class="container">
@@ -16,7 +14,7 @@
       <h2>Ansehen</h2>
       <p>Sehen Sie sich die mathematischen Probleme in deutscher Sprache an.</p>
       <p>
-        <%= link_to problems_path, class: 'btn btn-default' do %>
+        <%= link_to problems_path, class: 'btn btn-primary' do %>
             Zu den Problemen &raquo;
         <% end %>
       </p>
@@ -28,7 +26,7 @@
     <div class="col-md-4">
       <h2>Verbessern</h2>
       <p>Vermissen Sie eine Funktion auf der Webseite, oder ist Ihnen ein Fehler aufgefallen? Dann helfen Sie beim Entwickeln der Webseite in Ruby on Rails!</p>
-      <p><a class="btn btn-default" href="https://github.com/projekteuler/projekteuler" target="_blank" role="button">Projekt Euler auf GitHub &raquo;</a></p>
+      <p><a class="btn btn-primary" href="https://github.com/projekteuler/projekteuler" target="_blank">Projekt Euler auf GitHub &raquo;</a></p>
     </div>
   </div>
 </div>

app/views/about/info.de.html.erb

@@ -1,8 +1,8 @@
 <% provide(:title, 'Über Project Euler') %>
-
-<div class="page-header">
-  <h1>Über Project Euler</h1>
+<div class="pb-2 mt-4 mb-2 border-bottom">
+    <h1>Über Project Euler</h1>
 </div>
+
 <h2>Was ist Project Euler?</h2>
 <%= image_tag 'euler_main.jpg', alt: 'Leonhard Euler (1707-1783)', width: '150px', style: 'border:1px solid black;margin:10px;float:right' %>
 <p>Project Euler ist eine Serie von herausfordernden mathematischen bzw. Programmier-Problemen, die mehr als nur mathematische Einblicke zum Lösen erfordern. Obwohl die Mathematik Ihnen helfen wird, auf elegante und effiziente Lösungswege zu kommen, ist der Gebrauch von Computer- und Programmierkenntnissen nötig, um den Großteil der Probleme zu lösen.<br /><br />Die Motivation für das Starten und die Instandhaltung von Project Euler ist die, dem Forschergeist eine Plattform bereitzustellen, die sich mit unbekannten Gebieten befasst, und neue Konzepte in einem spaßigen und freizeitlichen Kontext zu erlernen.</p>
@@ -18,4 +18,4 @@
 </p>
 <p>Aber wenn die Probleme nach einer Herausforderung klingen, dann können Sie sich die <%= link_to 'Probleme', problems_path %> ansehen, bevor Sie sich registrieren.
 </p>
-<blockquote><p>&quot;Project Euler existiert zum Begeistern, Herausfordern und Entwickeln der Fähigkeiten und des Genusses von jedem mit einem Interesse für die faszinierende Welt der Mathematik.&quot;</p></blockquote>
+<blockquote class="blockquote"><p>&quot;Project Euler existiert zum Begeistern, Herausfordern und Entwickeln der Fähigkeiten und des Genusses von jedem mit einem Interesse für die faszinierende Welt der Mathematik.&quot;</p></blockquote>

app/views/about/legal.de.html.erb

@@ -1,6 +1,8 @@
 <% provide(:title, 'Impressum') %>
 
-<div class="page-header"><h1>Impressum</h1></div>
+<div class="pb-2 mt-4 mb-2 border-bottom">
+  <h1>Impressum</h1>
+</div>
 <p>Angaben gemäß § 5 TMG:<br/><br/></p>
 <p>Philipp Fischbeck<br />
   Großbeerenstraße 48<br />

app/views/about/privacy.de.html.erb

@@ -1,6 +1,8 @@
 <% provide(:title, 'Datenschutz') %>
 
-<div class="page-header"><h1>Datenschutz</h1></div>
+<div class="pb-2 mt-4 mb-2 border-bottom">
+  <h1>Datenschutz</h1>
+</div>
 
 <p>Diese Datenschutz-Information gilt für die Datenverarbeitung durch:<br /></p>
 <p>Philipp Fischbeck<br />

app/views/about/roman_numerals.de.html.erb

@@ -1,6 +1,6 @@
 <%= provide(:title, 'Über römische Zahlen') %>
 
-<div class="page-header">
+<div class="pb-2 mt-4 mb-2 border-bottom">
   <h1>Über... römische Zahlen</h1>
 </div>
 <h3>Wie liest und schreibt man römische Zahlen?</h3>