Minor box layout improvements

* Fixed icon colors
* Improved margins/paddings
* Fixed mobile version

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index c63bd7927651fe66d8aff6e08f1a76201a1f6ed3..ef2bd551e774a601be22fdf902597f8dacd79d45 100644 (file)
--- 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 0b157c11f4e87d2664d88210a5ed28171ab15bd2..2708c78f4e0098bc62fcc2658963904c4c38c159 100644 (file)
--- 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 8a241fdb902f6edbf2c6302f9be44a2206d9ef80..649f488211c80d19cfcb3aa774768c3d283efc01 100644 (file)
--- 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 d6639ba1ea96f8c34ca56dbd47f99cee934ecc5a..0b06410fb2036f43155b403e1651bc47076d4ff4 100644 (file)
--- 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;