From d5d466f1400c741428437a9a96508b66ae231dee Mon Sep 17 00:00:00 2001
From: Sven Hoehn <shoehn@ipfire.org>
Date: Sat, 4 Nov 2017 13:24:32 +0100
Subject: [PATCH] basic styling Community page

---
 static/css/style.css               |   6 +-
 static/scss/_nav.scss              |   3 +-
 templates/static/get-involved.html | 178 ++++++++++++++---------------
 templates/static/get-support.html  |   2 +-
 4 files changed, 96 insertions(+), 93 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 5bb3e65..8ccef2a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4703,11 +4703,13 @@ h5.fireinfo {
 @media (min-width: 992px) {
   body.About li.nav-item a.about,
   body.Download li.nav-item a.download,
-  body.Involved li.nav-item a.support {
+  body.Support li.nav-item a.support,
+  body.Involved li.nav-item a.community {
     color: #b71c1c; }
     body.About li.nav-item a.about:after,
     body.Download li.nav-item a.download:after,
-    body.Involved li.nav-item a.support:after {
+    body.Support li.nav-item a.support:after,
+    body.Involved li.nav-item a.community:after {
       content: "";
       border-bottom: 2px solid #b71c1c;
       position: absolute;
diff --git a/static/scss/_nav.scss b/static/scss/_nav.scss
index 401338f..a7ea606 100644
--- a/static/scss/_nav.scss
+++ b/static/scss/_nav.scss
@@ -210,7 +210,8 @@
 
 body.About li.nav-item a.about,
 body.Download li.nav-item a.download,
-body.Involved li.nav-item a.support {
+body.Support li.nav-item a.support,
+body.Involved li.nav-item a.community {
 	@include media-breakpoint-up(lg) {
 		color: $red_900;
 		&:after {
diff --git a/templates/static/get-involved.html b/templates/static/get-involved.html
index 6df252a..acc59c0 100644
--- a/templates/static/get-involved.html
+++ b/templates/static/get-involved.html
@@ -3,71 +3,67 @@
 {% block title %}{{ _("Get Involved") }}{% end block %}
 
 {% block container %}
-	<div class="container page-header">
-		<h1>{{ _("Join the IPFire Community") }}</h1>
-	</div>
-
-	<section id="community" class="container content-section text-center">
-		<div class="row">
-			<div class="col-md-4 text-center">
-				<a href="/chat" class="link-normal">
-					<span class="fa fa-4x fa-wechat"></span>
-					<h3>{{ _("Chat") }}</h3>
-				</a>
-			</div>
-
-			<div class="col-md-4 text-center">
-				<a href="//forum.ipfire.org" class="link-normal">
-					<span class="fa fa-4x fa-users"></span>
-					<h3>{{ _("Forums") }}</h3>
-				</a>
-			</div>
-
-			<div class="col-md-4 text-center">
-				<a href="http://lists.ipfire.org" class="link-normal">
-					<span class="fa fa-4x fa-envelope-o"></span>
-					<h3>{{ _("Mailing Lists") }}</h3>
-				</a>
+	<div class="container features-content">
+		<section class="content col-12">
+			<h3 class="headline mb-5">{{ _("Join the IPFire Community") }}</h3>
+			
+			<div class="row">
+				<div class="col-md-4 text-center">
+					<a href="/chat" class="link-normal">
+						<span class="fa fa-4x fa-wechat"></span>
+						<h3>{{ _("Chat") }}</h3>
+					</a>
+				</div>
+	
+				<div class="col-md-4 text-center">
+					<a href="//forum.ipfire.org" class="link-normal">
+						<span class="fa fa-4x fa-users"></span>
+						<h3>{{ _("Forums") }}</h3>
+					</a>
+				</div>
+	
+				<div class="col-md-4 text-center">
+					<a href="http://lists.ipfire.org" class="link-normal">
+						<span class="fa fa-4x fa-envelope-o"></span>
+						<h3>{{ _("Mailing Lists") }}</h3>
+					</a>
+				</div>
 			</div>
-		</div>
-	</section>
-
-	<section id="contribute" class="container content-section contribute-section text-center">
-		<div class="page-header">
-			<h1>{{ _("Contribute") }}</h1>
-		</div>
-
-		<div class="row">
-			<div class="col-md-8 col-md-offset-2">
-				<h3>{{ _("Provide Community Support") }}</h3>
-
-				<p>
+		</section>
+		
+		<section class="content col-12">
+			<h3 class="headline mb-5">{{ _("Contribute") }}</h3>
+			
+			<section id="community_support">				
+				<h4 class="secondHeadline">{{ _("Provide Community Support") }}</h4>
+				<p class="copy">
 					{% if lang == "de" %}
 						Werde Teil der wundervollen Gemeinschaft von IPFire und helfe
 						Einsteigern bei ihren ersten Schritten. Bring dich ein in Diskussionen
 						rund um das Projekt in <a href="/chat">Chaträumen</a>, dem
-						<a href="http://forum.ipfire.org">IPFire Forum</a>, und
-						den <a href="http://lists.ipfire.org/">Mailinglisten</a>.
+						<a href="//forum.ipfire.org">IPFire Forum</a>, und
+						den <a href="//lists.ipfire.org/">Mailinglisten</a>.
 					{% else %}
 						Join the wonderful IPFire Community and help other people getting started with IPFire.
 						Take part in discussions all around the project on our <a href="/chat">channels</a>,
-						the <a href="http://forum.ipfire.org">IPFire Forums</a>, and
-						<a href="http://lists.ipfire.org/">Mailing Lists</a>.
+						the <a href="//forum.ipfire.org">IPFire Forums</a>, and
+						<a href="//lists.ipfire.org/">Mailing Lists</a>.
 					{% end %}
 				</p>
-
+				
 				<div class="btn-toolbar">
 					<a class="btn btn-default" href="http://forum.ipfire.org/search.php?search_id=unanswered">
 						{{ _("Unanswered questions on the forums") }}
 					</a>
 					<a class="btn btn-default" href="/chat">{{ _("On our Jabber/IRC channels") }}</a>
 				</div>
-
-				<hr>
-
-				<h3>{{ _("Improve our Documentation") }}</h3>
-
-				<p>
+			</section>
+			
+			<div class="divider"></div>
+				
+			<section id="documentation">
+				<h4 class="secondHeadline">{{ _("Improve our Documentation") }}</h4>
+				<p class="copy">
 					{% if lang == "de" %}
 						Das <a href="//wiki.ipfire.org">IPFire Wiki</a> beinhaltet Dokumentation
 						über IPFire und beantwortet alle Fragen. Hast du etwas gefunden, das
@@ -79,14 +75,15 @@
 						documented, improved, or rewritten? Sign up and get it done!
 					{% end %}
 				</p>
-
+				
 				<a class="btn btn-default" href="http://wiki.ipfire.org">{{ _("IPFire Wiki") }}</a>
-
-				<hr>
-
-				<h3>{{ _("Translate") }}</h3>
-
-				<p>
+			</section>
+		
+			<div class="divider"></div>
+			
+			<section id="translation">
+				<h4 class="secondHeadline">{{ _("Translate") }}</h4>
+				<p class="copy">
 					{% if lang == "de" %}
 						IPFire wird in vielen Ländern der Welt eingesetzt.
 						Die Software zu übersetzen hilft dabei IPFire leichter
@@ -100,14 +97,13 @@
 						into a new language or improve already existing translations.
 					{% end %}
 				</p>
-
-				<a class="btn btn-default" href="https://www.transifex.com/projects/p/ipfire/">{{ _("Translate") }}</a>
-
-				<hr>
-
-				<h3>{{ _("Maintain Packages") }}</h3>
-
-				<p>
+			</section>
+			
+			<div class="divider"></div>
+			
+			<section id="maintain">
+				<h4 class="secondHeadline">{{ _("Maintain Packages") }}</h4>
+				<p class="copy">
 					{% if lang == "de" %}
 						Werde Experte in einem Subsystem der IPFire-Distribution und
 						helfe dabei Funktionen auf aktuellem Stand zu erhalten und
@@ -123,17 +119,18 @@
 						today.
 					{% end %}
 				</p>
-
+				
 				<div class="btn-toolbar">
 					<a class="btn btn-default" href="http://wiki.ipfire.org/devel/submit-patches">{{ _("Submit Patches") }}</a>
 					<a class="btn btn-default" href="https://pakfire.ipfire.org/">{{ _("Pakfire Build Service") }}</a>
 				</div>
-
-				<hr>
-
-				<h3>{{ _("Report & Resolve Bugs") }}</h3>
-
-				<p>
+			</section>
+			
+			<div class="divider"></div>
+			
+			<section id="bugs">
+				<h4 class="secondHeadline">{{ _("Report & Resolve Bugs") }}</h4>
+				<p class="copy">
 					{% if lang == "de" %}
 						Solltest du einen Fehler in IPFire gefunden haben, nimm dir einen Moment Zeit, um
 						ihn zu melden. Natürlich freuen wir uns über Lösungen für bereits gemeldete Bugs.
@@ -143,17 +140,18 @@
 						reports.
 					{% end %}
 				</p>
-
+				
 				<div class="btn-toolbar">
 					<a class="btn btn-default" href="http://bugzilla.ipfire.org">{{ _("IPFire Bugzilla") }}</a>
 					<a class="btn btn-default" href="http://wiki.ipfire.org/devel/bugzilla">{{ _("Dealing with bug reports") }}</a>
 				</div>
-
-				<hr>
-
-				<h3>{{ _("Provide Infrastructure") }}</h3>
-
-				<p>
+			</section>
+			
+			<div class="divider"></div>
+			
+			<section id="infrastructure">
+				<h4 class="secondHeadline">{{ _("Provide Infrastructure") }}</h4>
+				<p class="copy">
 					{% if lang == "de" %}
 						Das IPFire-Projekt unterhält eine Menge Infrastruktur für verschiedene Dienste für die Nutzer.
 						Für schnelle Downloads und eine hohe Zuverlässigkeit der Dienste zu gewährleisten arbeitet
@@ -165,14 +163,15 @@
 						appreciates your support.
 					{% end %}
 				</p>
-
+				
 				<a class="btn btn-default" href="http://wiki.ipfire.org/en/project/mirror">{{ _("Host a mirror") }}</a>
-
-				<hr>
-
-				<h3>{{ _("Donate") }}</h3>
-
-				<p>
+			</section>
+			
+			<div class="divider"></div>
+			
+			<section id="donate">
+				<h4 class="secondHeadline">{{ _("Donate") }}</h4>
+				<p class="copy">
 					{% if lang == "de" %}
 						Die Unterstützung vieler Freiwillige, die zur Entwicklung oder anderen
 						Bereichen des Projekts beitragen ist unerlässlich für den Erfolg dieses
@@ -188,9 +187,10 @@
 						will help covering costs.
 					{% end %}
 				</p>
-
+				
 				<a class="btn btn-default" href="/donate">{{ _("Donate") }}</a>
-			</div>
-		</div>
-	</section>
+			</section>
+		</section>
+	</div>
+	
 {% end block %}
diff --git a/templates/static/get-support.html b/templates/static/get-support.html
index 0bd3c18..ec3b4f3 100644
--- a/templates/static/get-support.html
+++ b/templates/static/get-support.html
@@ -1,6 +1,6 @@
 {% extends "../base-1.html" %}
 
-{% block title %}{{ _("Get Involved") }}{% end block %}
+{% block title %}{{ _("Get Support") }}{% end block %}
 
 {% block container %}
 	<div class="container features-content">
-- 
2.39.2