From 0b6161c6741cb327af4939be90ee7f6d4bf6aaeb Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Mon, 16 May 2016 11:51:37 +0200
Subject: [PATCH] Minor box layout improvements

* Fixed icon colors
* Improved margins/paddings
* Fixed mobile version
---
 wcfsetup/install/files/style/layout/box.scss  | 128 ++++++++++++++----
 .../install/files/style/layout/layout.scss    |  16 +--
 .../files/style/layout/pageHeader.scss        |   4 +
 .../files/style/layout/pageNavigation.scss    |   4 +
 4 files changed, 112 insertions(+), 40 deletions(-)

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index c63bd79276..ef2bd551e7 100644
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -22,12 +22,25 @@
 }
 
 .boxContent {
-	& + .boxContent,
+	& + .boxContent {
+		margin-top: 20px;
+	}
+}
+
+.boxContent {
 	& + .boxTitle {
 		margin-top: 30px;
 	}
 }
 
+.boxContentSeparator {
+	background: $wcfContentBorderInner;
+	border: 0;
+	height: 1px;
+	margin: 30px auto;
+	width: 60%;
+}
+
 /* styling for boxes in <hero> position */
 .boxesHero {
 	.box {
@@ -58,45 +71,77 @@
 
 /* styling for boxes in <headerBoxes> position */
 .boxesHeaderBoxes {
-	background-color: rgb(247, 248, 250); // @todo
+	background-color: $wcfFooterBoxBackground;
+	color: $wcfFooterBoxText;
+	
+	a {
+		color: $wcfFooterBoxLink;
+		
+		&:hover {
+			color: $wcfFooterBoxLinkActive;
+			text-decoration: underline;
+			
+			.icon {
+				color: $wcfFooterBoxLinkActive;
+			}
+		}
+	}
+	
+	.icon {
+		color: inherit;
+	}
 	
 	.boxContainer {
-		display: flex;
-		flex-wrap: wrap;
 		margin-left: -10px;
 		margin-right: -10px;
-		padding: 40px 0;
+		
+		@include screen-sm-down {
+			padding: 20px 0;
+		}
+		
+		@include screen-md-up {
+			display: flex;
+			flex-wrap: wrap;
+			margin-bottom: -20px;
+			padding: 40px 0;
+		}
 	}
 	
 	.box {
-		flex: 0 0 25%;
 		overflow: hidden;
 		padding-left: 10px;
 		padding-right: 10px;
 		
-		&:nth-child(4n+1):not(:first-child) {
-			margin-top: 20px;
-		}
-		
-		/* one item */
-		&:first-child:nth-last-child(1) {
-			flex-basis: 100%;
-		}
-		
-		/* two items */
-		&:first-child:nth-last-child(2),
-		&:first-child:nth-last-child(2) ~ .box {
-			flex-basis: 50%;
-		}
-		
-		/* three items */
-		&:first-child:nth-last-child(3),
-		&:first-child:nth-last-child(3) ~ .box {
-			flex-basis: 33.3333%;
+		@include screen-sm-down {
+			& + .box {
+				margin-top: 20px;
+			}
 		}
 		
-		a:hover {
-			text-decoration: underline;
+		@include screen-md-up {
+			flex: 0 0 25%;
+			margin-bottom: 20px;
+			
+			&.boxFullWidth {
+				flex-basis: 100%;
+			}
+			
+			/* one item */
+			&:first-child:nth-last-child(1) {
+				flex-basis: 100%;
+			}
+			
+			/* two items */
+			&:first-child:nth-last-child(2),
+			&:first-child:nth-last-child(2) ~ .box {
+				flex-basis: 50%;
+			}
+			
+			/* three items */
+			&:first-child:nth-last-child(3),
+			&:first-child:nth-last-child(3) ~ .box {
+				flex-basis: 33.3333%;
+			}
 		}
 	}
 	
@@ -324,8 +369,8 @@
 	}
 }
 
-.boxesContentTop {
-	margin-bottom: 40px;
+.boxesContentTop:not(:first-child) {
+	margin-top: 40px;
 }
 
 .boxesContentBottom {
@@ -417,6 +462,31 @@
 
 /* styling for boxes in <footer> position */
 .boxesFooter {
+	background-color: $wcfFooterBackground;
+	color: $wcfFooterText;
+	flex: 0 0 auto;
+	
+	@include screen-md-up {
+		padding: 40px 0;
+	}
+	
+	@include screen-sm-down {
+		padding: 20px 0;
+	}
+	
+	.icon {
+		color: $wcfFooterText;
+	}
+	
+	a {
+		color: $wcfFooterLink;
+		
+		&:hover {
+			color: $wcfFooterLinkActive;
+			text-decoration: underline;
+		}
+	}
+	
 	.box {
 		&:not(:first-child) {
 			margin-top: 20px;
diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index 0b157c11f4..2708c78f4e 100644
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -18,6 +18,8 @@ html, body {
 }
 
 body {
+	background-color: $wcfContentBackground;
+	color: $wcfContentText;
 	font-family: $wcfFontFamily;
 	position: relative;
 	width: 100%;
@@ -25,15 +27,17 @@ body {
 }
 
 a {
+	color: $wcfContentLink;
 	cursor: pointer;
 	text-decoration: none;
 	
 	&:hover {
+		color: $wcfContentLinkActive;
 		text-decoration: none;
 	}
 }
 
-#pageContainer {
+.pageContainer {
 	display: flex;
 	height: 100%;
 	flex-direction: column;
@@ -45,8 +49,6 @@ a {
 }
 
 .main {
-	background-color: $wcfContentBackground;
-	color: $wcfContentText;
 	flex: 1 0 auto;
 	
 	@include screen-md-down {
@@ -57,14 +59,6 @@ a {
 	@include screen-lg {
 		padding: 60px 0;
 	}
-	
-	a {
-		color: $wcfContentLink;
-		
-		&:hover {
-			color: $wcfContentLinkActive;
-		}
-	}
 }
 
 /* use flex-box to enforce a proper side-by-side layout on desktop */
diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index 8a241fdb90..649f488211 100644
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -10,6 +10,10 @@
 			color: $wcfHeaderLinkActive;
 		}
 	}
+	
+	.icon {
+		color: inherit;
+	}
 }
 
 .pageHeader .layoutBoundary {
diff --git a/wcfsetup/install/files/style/layout/pageNavigation.scss b/wcfsetup/install/files/style/layout/pageNavigation.scss
index d6639ba1ea..0b06410fb2 100644
--- a/wcfsetup/install/files/style/layout/pageNavigation.scss
+++ b/wcfsetup/install/files/style/layout/pageNavigation.scss
@@ -29,6 +29,10 @@
 		}
 	}
 	
+	.boxesHeaderBoxes + .pageNavigation {
+		margin-top: 1px;
+	}
+	
 	.pageNavigationIcons {
 		display: flex;
 		flex: 0 0 auto;
-- 
2.20.1