Commit 1e34dcfb authored by Sean Packham's avatar Sean Packham

Merge branch '956-fix-styling-issues-on-new-blog-template' into 'master'

Simplified columns and  increased full article width

This MR only addresses: 
- Weird issue with column height
- Full blog post is too narrow
- Heading is purple on purple background https://about.gitlab.com/gitlab-com/ 
- Blog cover image opacity not using a linear gradient
- Blog h2/h3 not using a heavy-enough weight
- Callout anchor is white and not visible

Can you please leave the source branch after merging as I will add other smaller fixes to it.

See merge request !4060
parents 15f7ea05 8c1f6c3b
Pipeline #5276764 failed with stages
in 7 minutes and 54 seconds
......@@ -9,7 +9,8 @@ suppress_header: true
.section
= partial "includes/newsletter-signup.html"
= partial "includes/blog/list", locals: {articles: blog.articles[0...4]}
= partial "includes/blog/list", locals: {articles: blog.articles[0...2]}
= partial "includes/blog/list", locals: {articles: blog.articles[2...4]}
.callout
%h3
......@@ -19,11 +20,13 @@ suppress_header: true
%a.contact{href: "https://about.gitlab.com/sales/"} Contact us.
%a.btn.btn-lg.btn-red{ href: "/free-trial/" } Get Your Free Trial Today
= partial "includes/blog/list", locals: {articles: blog.articles[4...8]}
= partial "includes/blog/list", locals: {articles: blog.articles[4...6]}
= partial "includes/blog/list", locals: {articles: blog.articles[6...8]}
= partial "includes/blog/install"
= partial "includes/blog/list", locals: {articles: blog.articles[8...12]}
= partial "includes/blog/list", locals: {articles: blog.articles[8...10]}
= partial "includes/blog/list", locals: {articles: blog.articles[10...12]}
.wrapper
.section
......
......@@ -38,8 +38,8 @@ $blog-color-mk-border: #ccc;
$blog-color-date: #888;
$blog-color-overlay-border: #eee;
$blog-color-border-shadow: rgba(0, 0, 0, .1);
$blog-color-image-from: rgba(255, 255, 255, .6);
$blog-color-image-to: rgba(255, 255, 255, .6);
$blog-color-image-from: rgba(255, 255, 255, .65);
$blog-color-image-to: rgba(255, 255, 255, .95);
$blog-color-ipanel-heading: rgba(221, 221, 221, .5);
$blog-color-legacy-image-from: rgba(85, 68, 136, .8);
$blog-color-legacy-image-to: rgba(72, 135, 197, .92);
......
......@@ -13,12 +13,14 @@
h2,
h3,
h4 {
margin-top: 20px 0 14px;
margin: 20px 0 14px;
font-weight: 600;
}
.wrapper {
max-width: 1050px;
margin: 0 auto;
clear: both;
}
.alert-webcast {
......@@ -32,6 +34,10 @@
a {
color: $color-white;
&.contact {
color: $blog-color-purple;
}
}
h3 {
......@@ -61,16 +67,24 @@
.sticky-banner {
height: inherit;
padding: 6px 15px 4px;
padding: 6px 0 4px;
.sticky-banner-content {
width: 740px;
max-width: 1050px;
padding: 0 75px;
margin: 0 auto;
max-width: inherit;
}
.sticky-banner-text {
display: inline-block;
float: left;
}
.action {
padding-top: 11px;
display: inline-block;
float: right;
flex: 0;
}
}
......@@ -80,29 +94,13 @@
clear: both;
}
@media only screen and (max-width : 768px) {
.section {
margin: 0 0 10px;
clear: both;
}
}
.panel {
box-shadow: 0 3px 3px $blog-color-border-shadow;
margin: 0 10px;
}
// scss-lint:disable VendorPrefix
.articles {
width: 100%;
-webkit-column-count: 2;
-webkit-column-gap: 25px;
-webkit-column-fill: balance;
-moz-column-count: 2;
-moz-column-gap: 25px;
-moz-column-fill: balance;
column-count: 2;
column-gap: 25px;
column-fill: balance;
}
.article {
......@@ -110,24 +108,15 @@
background: $color-white;
box-shadow: 0 3px 3px $blog-color-border-shadow;
padding: 25px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
margin-bottom: 25px;
margin: 0 10px 25px;
float: left;
width: calc(50% - 20px);
a {
color: $blog-color-purple;
}
}
@media only screen and (max-width : 768px) {
.article {
padding: 10px;
margin-bottom: 15px;
}
}
// scss-lint:enable VendorPrefix
.cover {
text-decoration: none;
display: block;
......@@ -199,28 +188,32 @@
color: $color-white;
}
@media only screen and (max-width : 992px) {
@media only screen and (max-width : 768px) {
.section {
margin: 0 0 10px;
clear: both;
}
.panel {
margin: 0 0 15px;
}
// scss-lint:disable VendorPrefix
.articles {
width: 100%;
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
// scss-lint:enable VendorPrefix
.article {
float: none;
width: 100%;
height: inherit;
margin: 0 0 15px;
padding: 10px;
}
}
}
&.article {
.wrapper {
max-width: 890px;
padding: 75px;
box-shadow: 0 3px 3px $blog-color-border-shadow;
}
......@@ -652,4 +645,8 @@
text-align: center;
height: 500px;
background: linear-gradient(-225deg, $blog-color-legacy-image-from 0%, $blog-color-legacy-image-to, 100%);
h1 {
color: $color-white;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment