fleet/website/assets/styles/pages/articles/basic-article.less
Mike Thomas 3c648d6925
Add schedule demo CTA (#6446)
* Add schedule demo CTA

Added a CTA to schedule a demo on:

- get-started.ejs
- basic-article.ejs

* Update get-started.ejs

Added UTM link

* Added tracking to calendly and get-started button

- Added standard source tag to calendly
- added "?tryitnow" to get-started button so GA can track clicks as conversions

Co-authored-by: Tim Kern <tim@fleetdm.com>
2022-06-30 08:44:28 -05:00

203 lines
3.9 KiB
Plaintext
Vendored

#basic-article {
padding: 0px 24px 0px 24px;
h1 {
font-size: 36px;
}
hr {
margin-top: 40px;
margin-bottom: 40px;
border-top: 2px solid @core-vibrant-blue-15;
width: 100%;
}
[purpose='article-title'] {
padding-top: 80px;
margin-bottom: 28px;
h1 {
margin-bottom: 4px;
line-height: 38px;
}
h2 {
font-size: 24px;
font-weight: 400;
line-height: 32px;
}
}
[purpose='article-details'] {
font-size: 14px;
line-height: 20px;
span {
color: @core-fleet-black-50;
}
p {
margin-block-end: 0px;
}
img {
height: 28px;
}
}
[purpose='article-content'] {
padding-top: 24px;
padding-bottom: 24px;
h1:first-of-type {
display: none;
}
h1:first-of-type + h2:first-of-type {
display: none;
}
img {
max-width: 100%;
width: auto;
height: auto;
max-height: 100%;
margin-left: auto;
margin-right: auto;
padding: 24px 0px 16px 0px;
}
a {
color: @core-vibrant-blue;
word-break: break-word;
}
h2 {
font-size: 24px;
margin-top: 40px;
margin-bottom: 24px;
}
h3 {
font-size: 20px;
margin-top: 40px;
margin-bottom: 24px;
}
h4 {
font-size: 16px;
margin-top: 24px;
margin-bottom: 24px;
}
p {
font-size: 16px;
line-height: 28px;
margin-bottom: 24px;
}
img + em { // Image captions
position: relative;
top: -12px;
display: flex;
align-items: center;
flex-direction: column;
margin-bottom: 16px;
}
ul, ol {
padding-left: 16px;
}
li {
padding-bottom: 16px;
}
li::marker {
color: @core-vibrant-blue;
}
code:not(.nohighlight) {
background: #F1F0FF;
padding: 4px 8px;
font-family: @code-font;
font-size: 13px;
line-height: 16px;
color: @core-fleet-black;
}
pre {
code:not(.nohighlight) {
background: none;
padding: 0px;
font-family: @code-font;
font-size: 13px;
line-height: 16px;
color: @core-fleet-black;
}
padding: 24px;
border: 1px solid #E2E4EA;
border-radius: 6px;
margin: 0px 0px 40px;
font-family: @code-font;
background: #F9FAFC;
white-space: break-spaces;
}
blockquote {
margin: 16px 0 32px;
background: #F7F7FC;
border: 1px solid @core-vibrant-blue-50;
padding: 16px;
border-radius: 8px;
display: inline-flex;
img {
display: flex;
margin: 4px 12px 0 0;
height: 16px;
width: 16px;
padding: 0px;
}
p {
display: block;
margin-bottom: 0px;
line-height: 24px;
font-size: 16px;
}
}
iframe {
align-self: center;
}
}
[purpose='bottom-cta'] {
padding-bottom: 80px;
[purpose='next-steps-button'] {
padding: 16px 24px;
line-height: 24px;
font-size: 16px;
img {
height: 24px;
}
a {
color: unset;
}
}
}
[purpose='large-button-text'] {
display: block;
}
@media (max-width: 991px) {
[purpose='article-title'] {
padding-top: 60px;
}
[purpose='article-content'] {
padding-bottom: 0px;
}
}
@media (max-width: 769px) {
[purpose='article-title'] {
padding-top: 40px;
margin-bottom: 8px;
h1 {
font-size: 28px;
line-height: 38px;
}
}
[purpose='article-content'] {
img {
padding-bottom: 0px;
}
img + em { // Image captions
top: 4px;
margin-bottom: 16px;
}
}
}
@media (max-width: 375px) {
[purpose='large-button-text'] { // Changes the Slack call to action (Join the Fleet community on Slack -> Join Fleet on Slack)
display: none;
}
}
}