Migrate to Tyrian v2 based on Boostrap 4

Tyrian v2 is based on Boostrap 4, which is a major rewrite of the whole project. For more information please have a look at: https://getbootstrap.com/docs/4.0/migration/ Visually speaking Tyrian v2 is similar to Tyrian v1. Speaking of this site (www.gentoo.de) the most prominent change is the fixed sticky footer which is correctly displayed in Tyrian v2. Apart from that there are only minor changes in the visual appearance. Signed-off-by: Max Magorsch <arzano@gentoo.org> Closes: #10 Signed-off-by: Thomas Deutschmann <whissi@gentoo.org>
gentoo-ev · May 9, 2020 · 2fcb61c · 2fcb61c
1 parent 7f5b5e9
commit 2fcb61c
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 68 deletions.
diff --git a/_config.yml b/_config.yml
@@ -12,6 +12,6 @@ defaults:
       layout: "tyrian"
 
 # No slash at the end
-cdnurl: https://assets.gentoo.org/tyrian
+cdnurl: https://assets.gentoo.org/tyrian/v2
 contact: https://www.gentoo.org/main/en/contact.xml
 copyrightyears: "2001&ndash;2020"
diff --git a/_includes/head.html b/_includes/head.html
@@ -3,7 +3,6 @@
   {% if page.description %}<meta name="description" content="{{ page.description }}">{% endif %}
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="{{ site.cdnurl }}/bootstrap.min.css" rel="stylesheet" media="screen">
   <link href="{{ site.cdnurl }}/tyrian.min.css" rel="stylesheet" media="screen">
   <link href="/css/gentoode.css" rel="stylesheet" media="screen">
   <link rel="icon" href="https://www.gentoo.org/favicon.ico" type="image/x-icon">

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,37 +1,32 @@
 <header>
   <div class="site-title">
     <div class="container">
-      <div class="row">
+      <div class="row justify-content-between">
+        <div class="logo">
+          <img src="/img/site-logo.png" data-at2x="/img/site-logo@2x.png" alt="Gentoo Linux Logo"/>
+          {% if page.sitelabel %}<span class="site-label">{{ page.sitelabel }}</span>{% endif %}
+        </div>
         <div class="site-title-buttons">
           <div class="btn-group btn-group-sm">
             <a href="https://shop.spreadshirt.de/22258/" role="button" class="btn get-gentoo"><span class="fa fa-shopping-cart"></span> <strong>Gentoo Shop</strong></a>
           </div>
         </div>
-        <div class="logo">
-          <img src="/img/site-logo.png" data-at2x="/img/site-logo@2x.png" alt="Gentoo Linux Logo"/>
-          {% if page.sitelabel %}<span class="site-label">{{ page.sitelabel }}</span>{% endif %}
-        </div>
       </div>
     </div>
   </div>
-  <nav class="tyrian-navbar" role="navigation">
+  <nav class="tyrian-navbar navbar navbar-dark navbar-expand-lg bg-primary" role="navigation">
     <div class="container">
-      <div class="row">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-        </div>
-        <div class="collapse navbar-collapse navbar-main-collapse">
-          <ul class="nav navbar-nav">
-            {% assign pages_list = site.pages %}
-            {% assign group = 'navigation' %}
-            {% include pages_list %}
-          </ul>
-        </div>
+      <div class="navbar-header">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main-collapse" aria-controls="navbar-main-collapse" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+      </div>
+      <div class="collapse navbar-collapse navbar-main-collapse" id="navbar-main-collapse">
+        <ul class="navbar-nav mr-auto">
+          {% assign pages_list = site.pages %}
+          {% assign group = 'navigation' %}
+          {% include pages_list %}
+        </ul>
       </div>
     </div>
   </nav>

diff --git a/_includes/pages_list b/_includes/pages_list
@@ -2,9 +2,9 @@
 {% for node in pages_list2 %}
   {% if group == null or group == node.group %}
     {% if page.url == node.url %}
-      <li class="active"><a href="{{node.url}}" class="active">{{node.title}}</a></li>
+      <li class="nav-item active"><a class="nav-link" href="{{node.url}}">{{node.title}}</a></li>
     {% else %}
-      <li><a href="{{node.url}}">{{node.title}}</a></li>
+      <li class="nav-item"><a class="nav-link" href="{{node.url}}">{{node.title}}</a></li>
     {% endif %}
   {% endif %}
 {% endfor %}

diff --git a/_layouts/tyrian.html b/_layouts/tyrian.html
@@ -14,9 +14,9 @@
 
     {% include footer.html %}
 
-    <script src="{{ site.cdnurl }}/jquery.min.js"></script>
+    <script src="{{ site.cdnurl }}/jquery-3.3.slim.js"></script>
+    <script src="{{ site.cdnurl }}/popper.min.js"></script>
     <script src="{{ site.cdnurl }}/bootstrap.min.js"></script>
-    <script src="{{ site.cdnurl }}/retina.min.js"></script>
     {% if page.extrajs %}{{ page.extrajs }}{% endif %}
   </body>
 </html>
diff --git a/css/gentoode.css b/css/gentoode.css
@@ -1,4 +1,5 @@
 .hero-section {
+  flex-shrink: 0;
   background-size: cover;
   background-repeat: no-repeat;
   min-height: 200px;
@@ -67,4 +68,9 @@
 
 .sponsors img {
 	margin-right: 3em;
+}
+
+/* for backwards compatibility */
+.lead {
+    font-size: 21px;
 }
diff --git a/dokumentation/gone.html b/dokumentation/gone.html
@@ -3,10 +3,10 @@
 title: "Dokumentation umgezogen"
 ---
 
-<h1 class="first-header">Dokumentation</h1>
+<h1 class="mb-4">Dokumentation</h1>
 
 <div class="row">
-  <div class="col-xs-12 col-md-8 col-md-offset-2">
+  <div class="col-12 col-md-8 offset-md-2">
     <div class="alert alert-info">
       <h3 class="stick-top"><span class="fa fa-fw fa-book"></span> Dokumentation befindet sich jetzt im Gentoo-Wiki</h3>
 
@@ -16,18 +16,16 @@ <h3 class="stick-top"><span class="fa fa-fw fa-book"></span> Dokumentation befin
       Bitte verwenden Sie die unten genannten Möglichkeiten, die gesuchten Inhalte zu finden.
     </div>
 
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h3 class="panel-title">Dokumentation im <a href="//wiki.gentoo.org">Gentoo-Wiki</a> finden</h3>
-      </div>
-      <div class="panel-body">
+    <div class="card mb-5">
+      <h4 class="card-header">Dokumentation im <a class="text-dark" href="//wiki.gentoo.org">Gentoo-Wiki</a> finden</h4>
+      <div class="card-body">
         Wenn Sie bereits einen Suchbegriff haben, können Sie hier danach suchen:
         <br><br>
         <form method="get" action="//wiki.gentoo.org/index.php?title=Special:Search">
           <div class="input-group input-group-lg">
             <input type="text" class="form-control" placeholder="Suche auf wiki.gentoo.org" name="search">
-            <span class="input-group-btn">
-              <button class="btn btn-default" type="submit"><span class="fa fa-fw fa-search"></span></button>
+            <span class="input-group-append">
+              <button class="btn btn-outline-secondary" type="submit"><span class="fa fa-fw fa-search"></span></button>
             </span>
           </div>
         </form>
@@ -37,12 +35,12 @@ <h3 class="panel-title">Dokumentation im <a href="//wiki.gentoo.org">Gentoo-Wiki
         <br><br>
 
         <div class="list-group" style="font-size: 125%;">
-          <a href="//wiki.gentoo.org/wiki/Category:Core_system" title="Category:Core system" class="list-group-item"><i class="fa fa-fw fa-terminal"></i> Kernsystem</a>
-          <a href="//wiki.gentoo.org/wiki/Category:Software" title="Category:Software" class="list-group-item"><i class="fa fa-fw fa-floppy-o"></i> Software</a>
-          <a href="//wiki.gentoo.org/wiki/Category:Hardware" title="Category:Hardware" class="list-group-item"><i class="fa fa-fw fa-print"></i> Hardware</a>
-          <a href="//wiki.gentoo.org/wiki/Category:Desktop" title="Category:Desktop" class="list-group-item"><i class="fa fa-fw fa-desktop"></i> Desktop</a>
-          <a href="//wiki.gentoo.org/wiki/Category:Server_and_Security" title="Category:Server and Security" class="list-group-item"><i class="fa fa-fw fa-database"></i> Server und Sicherheit</a>
-          <a href="//wiki.gentoo.org/wiki/Category:Project_and_Community" title="Category:Project and Community" class="list-group-item"><i class="fa fa-fw fa-institution"></i> Projekt und Community</a>
+          <a href="//wiki.gentoo.org/wiki/Category:Core_system" title="Category:Core system" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-terminal"></i> Kernsystem</a>
+          <a href="//wiki.gentoo.org/wiki/Category:Software" title="Category:Software" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-floppy-o"></i> Software</a>
+          <a href="//wiki.gentoo.org/wiki/Category:Hardware" title="Category:Hardware" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-print"></i> Hardware</a>
+          <a href="//wiki.gentoo.org/wiki/Category:Desktop" title="Category:Desktop" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-desktop"></i> Desktop</a>
+          <a href="//wiki.gentoo.org/wiki/Category:Server_and_Security" title="Category:Server and Security" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-database"></i> Server und Sicherheit</a>
+          <a href="//wiki.gentoo.org/wiki/Category:Project_and_Community" title="Category:Project and Community" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-institution"></i> Projekt und Community</a>
         </div>
 
         <hr>

diff --git a/dokumentation/index.html b/dokumentation/index.html
@@ -4,7 +4,7 @@
 weight: 5
 ---
 
-<h1 class="first-header">Dokumentation</h1>
+<h1 class="">Dokumentation</h1>
 
 <p class="lead">Gentoo war schon immer bekannt für seine umfassende und detaillierte Dokumentation. Hier ist sie zu finden:</p>
 
@@ -33,8 +33,8 @@ <h2 id="handbuch">Das Handbuch</h2>
   In zehn Schritten wird hier die Installation eines Gentoo-Systems mit verschiedenen Optionen beschrieben.
 </p>
 
-<div class="row">
-  <div class="col-md-10 col-md-offset-1 col-xs-12">
+<div class="row mb-3 pb-3">
+  <div class="col-md-10 offset-md-1 col-12">
     <div class="alert alert-warning">
       <strong>Deutsche Version</strong><br>
       Bitte beachten Sie, dass die deutsche Version aktuell noch überarbeitet wird.
@@ -44,7 +44,7 @@ <h2 id="handbuch">Das Handbuch</h2>
     </div>
 
     <div class="list-group lead">
-      <a href="https://wiki.gentoo.org/wiki/Handbook:Main_Page/de" class="list-group-item"><i class="fa fa-fw fa-book"></i>
+      <a href="https://wiki.gentoo.org/wiki/Handbook:Main_Page/de" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-book"></i>
         Gentoo-Handbuch</a>
     </div>
   </div>
@@ -61,10 +61,10 @@ <h2>Das Gentoo-Wiki</h2>
   Ebenfalls können Sie gerne die Diskussionsseiten nutzen, um mit anderen Benutzern über die Artikel zu diskutieren.
 </p>
 
-<div class="row">
-  <div class="col-md-10 col-md-offset-1 col-xs-12">
+<div class="row mb-3 pb-3">
+  <div class="col-md-10 offset-md-1 col-xs-12">
     <div class="list-group lead">
-      <a href="https://wiki.gentoo.org/" class="list-group-item"><i class="fa fa-fw fa-book"></i>
+      <a href="https://wiki.gentoo.org/" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-book"></i>
         Gentoo-Wiki</a>
     </div>
   </div>

diff --git a/downloads/index.html b/downloads/index.html
@@ -4,7 +4,7 @@
 weight: 2
 ---
 
-<h1 class="first-header">Downloads</h1>
+<h1 class="mb-4">Downloads</h1>
 
 <h2>Gentoo zum Ausprobieren: Die Gentoo-LiveDVD</h2>
 

diff --git a/index.html b/index.html
@@ -27,7 +27,7 @@
 
 <hr>
 
-<h2>News</h2>
+<h2 class="mb-3">News</h2>
 
 {% for post in site.posts %}
   <h3>{{ post.title }} <small>&mdash; {{ post.date | date: '%d.%m.%Y' }}</small></h3>

diff --git a/support/index.html b/support/index.html
@@ -4,7 +4,7 @@
 weight: 10
 ---
 
-<h1 class="first-header">Unterstützung</h1>
+<h1>Unterstützung</h1>
 
 <p class="lead">Wenn eine Frage hier nicht beantwortet werden konnte, oder etwas mal nicht klappt, keine Sorge!<br>
 Die Gentoo-Community ist bekannt für ihre Hilfsbereitschaft, technisches Verständnis und Geduld.</p>
@@ -20,14 +20,14 @@ <h2>Live-Chat im IRC</h2>
 
 <div class="alert alert-success"><strong>Tip:</strong> Der englischsprachige Gentoo-Kanal gehört mit über 1.000 anwesenden Benutzern zu den größten Kanälen auf dem IRC-Server. Bei entsprechenden Sprachkenntnissen oder -ambitionen lohnt es sich, hier mal vorbeizuschauen. :)</div>
 
-<div class="row">
-  <div class="col-md-10 col-md-offset-1 col-xs-12">
+<div class="row mb-3">
+  <div class="col-md-10 offset-md-1 col-12">
     <div class="list-group lead">
-      <a href="irc://irc.gentoo.org/gentoo-de" class="list-group-item"><i class="fa fa-fw fa-comments-o"></i>
+      <a href="irc://irc.gentoo.org/gentoo-de" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-comments-o"></i>
         deutschsprachiger Kanal <small>(<tt>#gentoo-de</tt>, mit IRC-Client)</small></a>
-      <a href="https://webchat.freenode.net/?channels=gentoo-de" class="list-group-item"><i class="fa fa-fw fa-comments-o"></i>
+      <a href="https://webchat.freenode.net/?channels=gentoo-de" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-comments-o"></i>
         Web-Chat: deutschsprachiger Kanal <small>(<tt>#gentoo-de</tt>)</small></a>
-      <a href="irc://irc.gentoo.org/gentoo" class="list-group-item"><i class="fa fa-fw fa-comments-o"></i>
+      <a href="irc://irc.gentoo.org/gentoo" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-comments-o"></i>
         englischsprachiger Kanal <small>(<tt>#gentoo</tt>, mit Client)</small></a>
     </div>
   </div>
@@ -39,11 +39,11 @@ <h2>Die Gentoo-Foren</h2>
 
 <p>Eine feste Größe der Linux-Dokumentation und -Unterstützung seit Jahren.</p>
 
-<div class="row">
-  <div class="col-md-10 col-md-offset-1 col-xs-12">
+<div class="row mb-3">
+  <div class="col-md-10 offset-md-1 col-12">
     <div class="list-group lead">
-      <a href="https://forums.gentoo.org/viewforum.php?f=28" class="list-group-item"><i class="fa fa-fw fa-pencil-square"></i> deutschsprachige Foren</a>
-      <a href="https://forums.gentoo.org/" class="list-group-item"><i class="fa fa-fw fa-pencil-square"></i> englischsprachige Foren</a>
+      <a href="https://forums.gentoo.org/viewforum.php?f=28" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-pencil-square"></i> deutschsprachige Foren</a>
+      <a href="https://forums.gentoo.org/" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-pencil-square"></i> englischsprachige Foren</a>
     </div>
   </div>
 </div>
@@ -57,14 +57,16 @@ <h2>Mailing-Listen</h2>
 
 <p>Um hier teilzunehmen, müssen Sie sich anmelden. Wie das geht, ist in der Anleitung beschrieben (siehe unten):</p>
 
-<div class="row">
-  <div class="col-md-10 col-md-offset-1 col-xs-12">
+<div class="row mb-3">
+  <div class="col-md-10 offset-md-1 col-xs-12">
     <div class="list-group lead">
-      <a href="https://www.gentoo.org/get-involved/mailing-lists/instructions.html" class="list-group-item"><i class="fa fa-fw fa-question-circle"></i> Anleitung</a>
-      <a href="mailto:gentoo-user-de@lists.gentoo.org" class="list-group-item"><i class="fa fa-fw fa-envelope-o"></i> deutschsprachige Liste (<tt>gentoo-user-de</tt>)</a>
-      <a href="mailto:gentoo-user@lists.gentoo.org" class="list-group-item"><i class="fa fa-fw fa-envelope-o"></i> englischsprachige Liste (<tt>gentoo-user</tt>)</a>
+      <a href="https://www.gentoo.org/get-involved/mailing-lists/instructions.html" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-question-circle"></i> Anleitung</a>
+      <a href="mailto:gentoo-user-de@lists.gentoo.org" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-envelope-o"></i> deutschsprachige Liste (<tt>gentoo-user-de</tt>)</a>
+      <a href="mailto:gentoo-user@lists.gentoo.org" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-envelope-o"></i> englischsprachige Liste (<tt>gentoo-user</tt>)</a>
     </div>
   </div>
 </div>
 
-Archive der Listen gibt es auf archives.gentoo.org von der <a href="https://archives.gentoo.org/gentoo-user-de/">deutschen Liste</a> und der <a href="https://archives.gentoo.org/gentoo-user/">englischen</a>.
+<p>
+  Archive der Listen gibt es auf archives.gentoo.org von der <a href="https://archives.gentoo.org/gentoo-user-de/">deutschen Liste</a> und der <a href="https://archives.gentoo.org/gentoo-user/">englischen</a>.
+</p>