draft changes

contribute.html

@@ -69,42 +69,26 @@ <h1>Contribute to DietPi</h1>
 					<p>Contributions are always welcome, no matter how small or large. 
 						<br/>You can do this in many ways: you can contribute code, make improvements to the DietPi documentation, participate in the discussion on our forum, report an issue or investigate existent ones on GitHub. This page provides everything you need to get started !</p>
 				</div>
-				<div id="title-2" class="container-xl centered">
+				<div id="title-2" class="title">
 					<h1>Grow in 2021</h1>
-					<p>This month we are asking you to help DietPi project. DietPi is an open source product and it is free to use. We are sustained by donations and <b>even a small one (as little as the price of a cup of coffee)</b> would help the things move forward, covering the hardware and infrastructure costs. 
+					<p style="font-weight: bold">This month we are asking you to help DietPi project. DietPi is an open source product and it is free to use. We are sustained by donations and <b>even a small one (as little as the price of a cup of coffee)</b> would help the things move forward, covering the hardware and infrastructure costs. 
 						<br/><br/>
 						In 2020 we made 8 releases and brought 128 improvements and changes, and fixed 119 bugs. We provided new software titles, support new SBCs and brought many optimizations. Enable us to grow more in 2021 !
 					</p>
-					<p class="large-text">
+					<p class="medium-text">
 						<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=6DVBECXRW3TAA" class="button" target="_blank" rel="noopener">Donate via PayPal</a>
 						<a href="https://www.patreon.com/bePatron?u=12464530" class="button" target="_blank" rel="noopener">Become a Patron</a>
 					</p>
 				</div>
 				<nav class="nav nav-pills" id="downloadinfo" style="display:none">
 					<button class="nav-link filter" data-filter="all">[All]</button>
-					<button class="nav-link filter" data-filter=".SSH">SSH Servers</button>
-					<button class="nav-link filter" data-filter=".LOG">Logging systems</button>
-					<button class="nav-link filter" data-filter=".Desktops">Desktops</button>
-					<button class="nav-link filter" data-filter=".RDesktops">Remote Desktops</button>
-					<button class="nav-link filter" data-filter=".Media">Media Systems</button>
-					<button class="nav-link filter" data-filter=".Download">Download Tools</button>
-					<button class="nav-link filter" data-filter=".Gaming">Emulation & Gaming</button>
-					<button class="nav-link filter" data-filter=".Camera">Camera</button>
-					<button class="nav-link filter" data-filter=".Cloud">Cloud & Backup</button>
- 					<button class="nav-link filter" data-filter=".Social">Social & Search</button>
- 					<button class="nav-link filter" data-filter=".WiFi">WiFi HotSpot</button>
- 					<button class="nav-link filter" data-filter=".Automation">Home Automation</button>
- 					<button class="nav-link filter" data-filter=".HardwareProjects">Hardware Projects</button>
- 					<button class="nav-link filter" data-filter=".RemoteAccess">Remote Access</button>
- 					<button class="nav-link filter" data-filter=".Stats">Stats</button>
- 					<button class="nav-link filter" data-filter=".Security">Security</button>
- 					<button class="nav-link filter" data-filter=".WebserverStacks">Web Server Stacks</button>
- 					<button class="nav-link filter" data-filter=".FileServers">File Servers</button>
- 					<button class="nav-link filter" data-filter=".VPNServer">VPN</button>
- 					<button class="nav-link filter" data-filter=".DNS">DNS Servers</button>
-  					<button class="nav-link filter" data-filter=".Printing">Printing</button>
-					<button class="nav-link filter" data-filter=".Misc">Misc</button>
+					<button class="nav-link filter" data-filter=".Report">Report / Diagnose issues</button>
+					<button class="nav-link filter" data-filter=".Ideas">Contribute with ideas</button>
+					<button class="nav-link filter" data-filter=".Community">Be part of community</button>
+					<button class="nav-link filter" data-filter=".Expand">Expand code / documentation</button>
+					<button class="nav-link filter" data-filter=".Social">Follow on social media</button>
 				</nav>
+
 				<!-- Start details for portfolio project 1 -->
 				<div id="slidingdiv1" class="toggleDiv row single-project">
 					<div class="col-md-4"><a href="images/dietpi-software/lxde_1.jpg" target="_blank" rel="noopener"><img src="images/dietpi-software/lxde_1.jpg" alt="LXDE" loading="lazy"></a></div>
@@ -2443,7 +2427,7 @@ <h3>LXQt</h3>
 				<!-- END details for portfolio -->
 				<div id="portfolio-grid" class="row">
 					<!-- Desktops -->
-					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Desktops">
+					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Report">
 						<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv1">
 							<img src="images/dietpi-software/lxde_0.jpg" alt="LXDE" loading="lazy">
 							<i class="more fa fa-plus"></i>
@@ -2452,7 +2436,7 @@ <h3>LXDE</h3>
 							<div class="mask"></div>
 						</a>
 					</div>
-					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Desktops">
+					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Report">
 						<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv119">
 							<img src="images/dietpi-software/lxqt_0.jpg" alt="LXQt" loading="lazy">
 							<i class="more fa fa-plus"></i>
@@ -2461,7 +2445,7 @@ <h3>LXQt</h3>
 							<div class="mask"></div>
 						</a>
 					</div>
-					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Desktops">
+					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Report">
 						<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv2">
 							<img src="images/dietpi-software/mate_0.jpg" alt="project 2" loading="lazy">
 							<i class="more fa fa-plus"></i>
@@ -2470,7 +2454,7 @@ <h3>MATE</h3>
 							<div class="mask"></div>
 						</a>
 					</div>
-					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Desktops">
+					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Report">
 						<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv3">
 							<img src="images/dietpi-software/xfce_0.jpg" alt="project 3" loading="lazy">
 							<i class="more fa fa-plus"></i>
@@ -2479,7 +2463,7 @@ <h3>Xfce</h3>
 							<div class="mask"></div>
 						</a>
 					</div>
-					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Desktops">
+					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Ideas">
 						<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv4">
 							<img src="images/dietpi-software/gnustep_0.jpg" alt="project 4" loading="lazy">
 							<i class="more fa fa-plus"></i>
@@ -2488,7 +2472,7 @@ <h3>GNUstep</h3>
 							<div class="mask"></div>
 						</a>
 					</div>
-					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Desktops">
+					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Ideas">
 						<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv5">
 							<img src="images/dietpi-software/chromium_0.jpg" alt="project 5" loading="lazy">
 							<i class="more fa fa-plus"></i>
@@ -2498,7 +2482,7 @@ <h3>Chromium</h3>
 						</a>
 					</div>
 					<!-- Remote desktop -->
-					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix RDesktops">
+					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Ideas">
 						<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv6">
 							<img src="images/dietpi-software/vnc_0.jpg" alt="project 6" loading="lazy">
 							<i class="more fa fa-plus"></i>
@@ -2507,7 +2491,7 @@ <h3>TigerVNC</h3>
 							<div class="mask"></div>
 						</a>
 					</div>
-					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix RDesktops">
+					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Community">
 						<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv7">
 							<img src="images/dietpi-software/nomachine_0.jpg" alt="project 7" loading="lazy">
 							<i class="more fa fa-plus"></i>
@@ -2516,7 +2500,7 @@ <h3>NoMachine</h3>
 							<div class="mask"></div>
 						</a>
 					</div>
-					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix RDesktops">
+					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Community">
 						<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv8">
 							<img src="images/dietpi-software/xrdp_0.jpg" alt="project 8" loading="lazy">
 							<i class="more fa fa-plus"></i>
@@ -2525,7 +2509,7 @@ <h3>XRDP</h3>
 							<div class="mask"></div>
 						</a>
 					</div>
-					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix RDesktops">
+					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Community">
 						<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv9">
 							<img src="images/dietpi-software/realvnc_0.jpg" alt="project 9" loading="lazy">
 							<i class="more fa fa-plus"></i>
@@ -2535,7 +2519,7 @@ <h3>RealVNC</h3>
 						</a>
 					</div>
 					<!-- Media -->
-					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Media">
+					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Expand">
 						<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv10">
 							<img src="images/dietpi-software/kodi_0.jpg" alt="project 10" loading="lazy">
 							<i class="more fa fa-plus"></i>
@@ -2544,7 +2528,7 @@ <h3>Kodi</h3>
 							<div class="mask"></div>
 						</a>
 					</div>
-					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Media">
+					<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Expand">
 						<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv11">
 							<img src="images/dietpi-software/ympd_0.jpg" alt="project 11" loading="lazy">
 							<i class="more fa fa-plus"></i>

css/style.css

@@ -130,6 +130,13 @@ a:hover {
 .centered {
 	text-align:center;
 }
+.medium-text {
+	line-height:1.2em;
+	font-size:22px;
+	color:#181A1C;
+	padding:20px;
+	margin-bottom:20px;
+}
 .large-text {
 	line-height:1.2em;
 	font-size:30px;