docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

_scss: some refactoring of landing-page cta-banners 

Signed-off-by: Sebastiaan van Stijn <github@gone.nl>
This commit is contained in:
Sebastiaan van Stijn 2020-10-27 12:32:04 +01:00
parent fbc8a83ab8
commit 3ab44b9cd6
No known key found for this signature in database
GPG Key ID: 76698F39D527CE8C
7 changed files with 43 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
_includes/landing-page/community-banner.html
View File

@ -1,19 +1,18 @@
<section class="join-community slack"> <section class="cta-banner slack">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7"> <div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">
<h5 class="title"> <h2>Join the Docker Community Slack channel</h2>
<h5>
Connect with Docker Captains and Docker enthusiasts through our Connect with Docker Captains and Docker enthusiasts through our
Community Slack channel. Community Slack channel. It’s a great place to learn and ask questions
along your journey.
</h5> </h5>
<p>
It’s a great place to learn and ask questions along your journey.
</p>
</div> </div>
<div class="col-xs-12 col-md-6 col-lg-4 text-center"> <div class="col-xs-12 col-md-6 col-lg-4 text-center">
<a href="http://dockr.ly/slack" class="slack-button"> <a href="http://dockr.ly/slack" class="btn slack-button">
<img src="/images/slack-icon.svg" alt="slack" /> <img src="/images/slack-icon.svg" width="56" height="56" alt="slack" />
<span>Join the community</span> Join the community
</a> </a>
</div> </div>
</div> </div>

2
_includes/landing-page/docker-aci.html
View File

@ -1,4 +1,4 @@
<section class="join-community dockercon"> <section class="cta-banner dockercon">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7"> <div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">

2
_includes/landing-page/docker-hub-signup.html
View File

@ -1,4 +1,4 @@
<section class="join-community dockercon"> <section class="cta-banner dockercon">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7"> <div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">

2
_includes/landing-page/docker-pricing.html
View File

@ -1,4 +1,4 @@
<section class="join-community dockercon"> <section class="cta-banner dockercon">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7"> <div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">

2
_includes/landing-page/dockercon-banner.html
View File

@ -1,4 +1,4 @@
<section class="join-community dockercon"> <section class="cta-banner dockercon">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7"> <div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">

2
_includes/landing-page/dockercon-wrapup-banner.html
View File

@ -1,4 +1,4 @@
<section class="join-community dockercon"> <section class="cta-banner dockercon">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7"> <div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">

79
_scss/_landing.scss
View File

@ -243,65 +243,46 @@ body.landing {
} }
} }
section.join-community { section.cta-banner {
background-color: $dark-blue; background-color: $dark-blue;
padding: 75px 0; padding: 75px 0;
h2, h5, p { h2, h5, p {
color: white; color: white;
} }
&.dockercon { text-align: center;
text-align: center;
@include md-width { @include md-width {
text-align: left; text-align: left;
}
img {
margin-bottom: 20px;
max-height: 100px;
}
h2 {
color: white;
font-size: 32px;
line-height: 37px;;
}
a.btn {
background-color: #FF3F73;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
font-weight: bold;
padding: 20px 60px;
margin-top: 50px;
}
} }
&.slack { img {
a.slack-button { margin-bottom: 20px;
background: #FFFFFF; max-height: 100px;
border: 2px solid #FFFFFF; }
box-sizing: border-box;
border-radius: 3px;
align-items: center;
display: inline-flex;
padding: 0 26px 0 2px;
text-transform: none;
margin-top: 2rem;
img { h2 {
height: 56px; font-size: 32px;
width: 56px; line-height: 37px;;
} }
span {
font-weight: bold; a.btn {
font-size: 17px; background: #FF3F73;
line-height: 24px; color: white;
color: $dark-blue; font-size: 17px;
} font-weight: bold;
margin-top: 50px;
padding: 20px 60px;
img {
margin: 0;
}
&.slack-button {
background: white;
color: $dark-blue;
padding: 2px 25px 2px 10px;
} }
} }
} }