Index: trunk/www/sites/www/products/index.php
===================================================================
--- trunk/www/sites/www/products/index.php	(revision 1552191)
+++ trunk/www/sites/www/products/index.php	(revision 1552192)
@@ -1,102 +1,89 @@
 <?php
     require('../aether/config.php');
 
     $pageConfig = array_merge($pageConfig, [
         'title' => "Products",
         'section' => 'products',
-        //'cssFile' => 'community/portal.css'
+        'cssFile' => 'https://cdn.kde.org/aether-devel/products.css',
         'description' => 'The KDE community develops a lot of different products for personnal and professional use. Learn more about these products here.',
     ]);
 
     require('../aether/header.php');
 
 ?>
-<style>
-#productsRow article {
-    position: relative;
-    padding-bottom: 50px;
-    
-}
-#productsRow article>a.learn-more {
-    position: absolute;
-    bottom: 0px;
-    left: 15px;
-    right: 15px;
-}
-</style>
 
     <main class="container" id="community-lists">
         <a href="/plasma-desktop"><img src="plasma.png" style="width: 100%; max-width: 800px; display: block; margin: 20px auto;" /></a>
         <h1 class="text-center">Plasma</h1>
-        <p style="max-width: 800px;" class="ml-auto mr-auto text-center" 
+        <p style="max-width: 800px;" class="ml-auto mr-auto text-center"
             Plasma is KDE's flagship product, offering the most customizable
-            desktop environment available. The KDE 
+            desktop environment available. The KDE
             community has the driving goal of making it simple by default, and powerful
             when needed.
         </p>
         <p style="max-width: 800px" class="ml-auto mr-auto d-flex flex-wrap justify-content-center">
             <a href="/plasma-desktop" class="learn-more button mb-2 ml-1 mr-1">Learn about Plasma</a>
             <a href="https://community.kde.org/Distributions" class="learn-more button mb-2 ml-1 mr-1">View Distributions offering Plasma</a>
         </p>
-        
-        
+
+
         <section class="row" id="productsRow">
             <article class="col-md">
                 <a href="https://www.kde.org/applications/"><img src="apps.png" class="w-100 d-block" style="max-width: 120px; margin: 20px auto;" /></a>
                 <h3>KDE Applications</h3>
                 <p>
                     Applications which empower users with freedom and privacy.
                 </p>
                 <a href="https://www.kde.org/applications/" class="learn-more button expand">Learn More</a>
             </article>
             <article class="col-md">
                 <a href="https://plasma-mobile.org/overview/"><img src="phone.png" class="w-100 d-block" style="max-width: 120px; margin: 20px auto;" /></a>
                 <h3>Plasma Mobile</h3>
                 <p>
                     Experience the freedom and privacy of KDE software on your mobile device.
                 </p>
                 <a href="https://plasma-mobile.org/overview/" class="learn-more button expand">Learn More</a>
             </article>
             <article class="col-md">
                 <a href="https://neon.kde.org"><img src="neon.png" class="w-100 d-block" style="max-width: 120px; margin: 20px auto;" /></a>
                 <h3>KDE neon</h3>
                 <p>
-                    The latest and greatest of KDE community software packaged on 
+                    The latest and greatest of KDE community software packaged on
                     a rock-solid base.
                 </p>
                 <a href="https://neon.kde.org" class="learn-more button expand">Learn More</a>
             </article>
-            
+
             <article class="col-md">
                 <a href="https://techbase.kde.org/Development/Tools"><img src="develop.png" class="w-100 d-block" style="max-width: 120px; margin: 20px auto;" /></a>
                 <h3>Development Tools</h3>
                 <p>
                     Developers using KDE tools are given strong foundations to
                     build great software.
                 </p>
                 <a href="https://techbase.kde.org/Development/Tools" class="learn-more button expand">Learn More</a>
             </article>
             <article class="col-md">
                 <a href="https://wikitolearn.org/"><img src="wikitolearn.png" class="w-100 d-block" style="max-width: 120px; margin: 20px auto;" /></a>
                 <h3>WikiToLearn</h3>
                 <p>
                     Collaborative textbooks. Learn with the best. Create books. Share knowledge.
                 </p>
                 <a href="https://wikitolearn.org/" target="_blank" class="learn-more button expand">Learn More</a>
             </article>
             <article class="col-md">
                 <a href="https://www.kde.org/products/frameworks/"><img src="frameworks.png" class="w-100 d-block" style="max-width: 120px; margin: 20px auto;" /></a>
                 <h3>KDE Frameworks</h3>
                 <p>
                     Add-ons for Qt. Try, for example, <a href="https://www.kde.org/products/kirigami/">Kirigami</a>: the UI for building apps for desktop, mobile, and everything in between.
                 </p>
                 <a href="https://www.kde.org/products/frameworks/" class="learn-more button expand">Learn More</a>
             </article>
         </section>
     </main>
 <?php
 
 
     require('../aether/footer.php');
 
 ?>
Index: trunk/www/sites/www/products/kirigami/index.php
===================================================================
--- trunk/www/sites/www/products/kirigami/index.php	(revision 1552191)
+++ trunk/www/sites/www/products/kirigami/index.php	(revision 1552192)
@@ -1,317 +1,94 @@
 <?php
     require('../../aether/config.php');
 
     $pageConfig = array_merge($pageConfig, [
         'title' => "Kirigami",
         'description' => "Kirigami lets you build convergent, responsive, elegant and open graphical user interfaces based on Qt Quick technology.",
     ]);
 
     require('../../aether/header.php');
     $site_root = "../../";
 ?>
 
 <main class="container">
 
 <h1>Kirigami</h1>
 
-<style>
-	
-	#main article { /* Old kde.org fix */
-		margin: 0px -26px;
-		text-shadow: none !important;
-		text-align: center;
-	}
-	
-	main article {
-		padding: 20px;
-		text-align: center;
-	}
-	
-	main article + article,
-	#main article + article {
-		border-top: solid 2px rgba(0,0,0,.1);
-	}
-	
-	main.container section {
-		padding: 0px;
-	}
-	
-	.splashLogo {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-direction: column;
-		
-		background-image: url(kirigami-splash.jpg);
-		background-size: cover;
-		background-position: left center;
-		border-top-left-radius: 2px;
-		border-top-right-radius: 2px;
-		
-	}
-	
-	.splashLogo h1 {
-		color: #FAFAFA !important;
-		font-size: 32px !important;
-		line-height: 120%;
-		background-image: none !important;
-	}
-	
-	.splashLogo p {
-		color: #FCFCFC !important;
-		line-height: 120% !important;
-	}
-	
-	main.container section > article, #main article {
-		min-height: 600px;
-	}
-	
-	@media(max-width: 1200px) {
-		main.container section > article, #main article {
-			min-height: 500px;
-		}
-	}
-	
-	@media(max-width: 992px) {
-		main.container section > article, #main article {
-			min-height: 400px;
-		}
-	}
-	
-	@media(max-width: 768px) {
-		main.container section > article, #main article {
-			min-height: 300px;
-		}
-	}
-	
-	.columns {
-		padding: 0px !important;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-direction: row;
-		min-height: 100%;
-		align-items: stretch;
-	}
-	
-	.columns > div {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-direction: column;
-		padding: 20px;
-	}
-	
-	@media(max-width: 768px) {
-		.columns {
-			flex-direction: column;
-		}
-		.columns > div {
-			border: none !important;
-			width: 100% !important;
-		}
-	}
-	
-	main .image,
-	#main .image {
-		background-origin: content-box;
-		padding: 20px;
-		background-repeat: no-repeat;
-	}
-	
-	.section-convergent .image {
-		background-image: url(kirigami-devices.png);
-		background-size: auto 100%;
-		background-position: center right;
-		width: 60%;
-		padding-bottom: 0px;
-	}
-	
-	@media(max-width: 768px) {
-		.section-convergent .image {
-			height: 300px;
-			width: 100% !important;
-		}
-	}
-	
-	.section-responsive
-	{
-		background-color:#28618c;
-		background-image: linear-gradient(#4080b0 1px, transparent 1px),
-			linear-gradient(90deg, #4080b0 1px, transparent 1px),
-			linear-gradient(#34719e 1px, transparent 1px),
-			linear-gradient(90deg, #34719e 1px, transparent 1px);
-		background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
-		background-position: center center;
-		
-		align-items: stretch;
-		min-height: 0px !important;
-		color: #FFF  !important;
-	}
-	
-	.section-responsive h1
-	{
-	padding-top: 20px;
-		background: none !important;
-		color: #FFF !important;
-	}
-	
-	.section-responsive p
-	{
-		padding: 0px 20px 20px !important;
-		color: #FFF !important;
-	}
-	
-	.section-responsive .image {
-		background-image: url(kirigami-adapt.png);
-		background-size: contain;
-		background-position: center center;
-		height: 60%;
-		width: 100%;
-		background-repeat: no-repeat;
-		flex: 1 ;
-		height: 400px;
-	}
-	
-	@media(max-width: 768px) {
-		.section-responsive .image {
-			height: 300px;
-		}
-	}
-	
-	
-	.section-links {
-		flex-direction: row;
-		text-align: center;
-		min-height: auto !important;
-	}
-	
-	.section-links .section-links-content div {
-		width: 50%;
-	}
-	
-	.section-links .section-links-content div + div {
-		border-left: solid 1px rgba(0,0,0,.1);
-	}
-	
-	.section-links h1 {
-		border-bottom: solid 1px rgba(0,0,0,.1);
-		padding-bottom: 20px;
-	}
-	
-	.section-links-content a {
-		display: inline-block;
-		color: #feefe2 !important;
-		background-color: #e4720c;
-		border-radius: 2px;
-		padding: 10px 20px;
-	}
-	
-	.section-links-content a:hover {
-		background-color: #f37a0d;
-	}
-	
-	.section-elegant {
-		flex-direction: row-reverse; 
-	}
-	
-	.section-elegant .image {
-		width: 60%;
-		background-image: url(subsurface.png);
-		background-size: contain;
-		background-repeat: no-repeat;
-		background-position: center center;
-	}
-	
-	.section-open {
-		background-image: url(community.jpg);
-		background-size: cover;
-		background-repeat: no-repeat;
-		background-position: center center;
-	}
-	.section-open * {
-		color: #FFF !important;
-		background: none !important;
-		text-shadow: 0px 0px 5px rgba(0,0,0,.5) !important;
-	}
-</style>
-
-
 <article class="splashLogo">
 	<h1>Introducing Kirigami UI</h1>
 	<p>Build apps that adapt beautifully to mobile, desktop, and everything in between.</p>
 </article>
 
 
 <article class="section-links">
 	<h1>Get Started</h1>
 	<div class="section-links-content columns">
 		<div>
 			<h2>Developer Documentation</h2>
 			<p>
 				Implement an application in Kirigami with Qt and QML.
 			</p>
 			<a href="https://api.kde.org/frameworks/kirigami/html/index.html" target="_blank">Learn more</a>
 		</div>
 		<div>
 			<h2>Design Guidelines</h2>
 			<p>
 				Use Kirigami standards to their fullest for a flexible and consistent user experience.
 			</p>
 			<a href="https://hig.kde.org/" target="_blank">Learn more</a>
 		</div>
 	</div>
 </article>
 
 <article class="section-convergent columns">
 	<div class="image"></div>
 	<div>
 		<h1>Convergent.</h1>
 		<p>
 			The line between desktop and mobile is blurring, and users expect the same quality
 			experience on every device. Applications using Kirigami adapt brilliantly to
 			mobile, desktop, and everything in between.
 		</p>
 	</div>
 </article>
 
 <article class="section-responsive">
 	<div class="image"></div>
 	<div>
 		<h1>Responsive.</h1>
 		<p>
-			Kirigami apps adapt to more than just the devices we use them on, always 
+			Kirigami apps adapt to more than just the devices we use them on, always
 			offering the optimal layout depending on how they are used by your audience.
 		</p>
 	</div>
 </article>
 
 <article class="section-elegant columns">
 	<div class="image"></div>
 	<div>
 		<h1>Elegant.</h1>
 		<p>
-			Kirigami is smooth and animated, uses consistent components, 
+			Kirigami is smooth and animated, uses consistent components,
 			and a clearly defined workflow. People using Kirigami will appreciate the
 			smart workflow and no-gimmick design.
 		</p>
 	</div>
 </article>
 
 <article class="section-open columns">
 	<div class="image"></div>
 	<div>
 		<h1>Open.</h1>
 		<p>
-			Kirigami is built entirely on open technologies by the KDE community, 
-			developers will never need to pay fees for it, nor will they be locked into 
-			a specific platform. Be confident knowing that Kirigami gives control back 
-			to developers, 
+			Kirigami is built entirely on open technologies by the KDE community,
+			developers will never need to pay fees for it, nor will they be locked into
+			a specific platform. Be confident knowing that Kirigami gives control back
+			to developers,
 		</p>
 		<p>Kirigami is one of the 70 <a href="/products/frameworks">KDE Frameworks</a>, a collection of high quality add on libraries for Qt apps.</p>
 	</div>
 </article>
 
 </main>
 <?php
   require('../../aether/footer.php');