mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Website: Update case study article template (#37438)
Changes: - Updated the template page used for case study articles to match the latest wireframes.
This commit is contained in:
parent
31506bc471
commit
701fc431db
2 changed files with 60 additions and 55 deletions
111
website/assets/styles/pages/articles/case-study.less
vendored
111
website/assets/styles/pages/articles/case-study.less
vendored
|
|
@ -21,27 +21,27 @@
|
|||
h3 {
|
||||
padding-top: 32px;
|
||||
color: #192147;
|
||||
|
||||
/* Title S (FKA h4) */
|
||||
font-family: Inter;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px; /* 120% */
|
||||
font-weight: 700;
|
||||
line-height: 120%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
h4 {
|
||||
color: #192147;
|
||||
|
||||
/* Title XS */
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 19.2px; /* 120% */
|
||||
font-weight: 700;
|
||||
line-height: 120%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
[purpose='page-content'] {
|
||||
max-width: 1072px;
|
||||
margin-left: auto;
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
[purpose='article-title-and-quote'] {
|
||||
max-width: 663px;
|
||||
margin-bottom: 64px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
[purpose='article-title'] {
|
||||
h1 {
|
||||
|
|
@ -125,6 +125,9 @@
|
|||
border: 1px solid #E2E4EA;
|
||||
background: #FFF;
|
||||
padding: 0 32px 32px 32px;
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 0px;
|
||||
list-style-type: none;
|
||||
|
|
@ -137,7 +140,7 @@
|
|||
padding-left: 40px;
|
||||
text-indent: -40px;
|
||||
margin-bottom: 0px;
|
||||
padding-top: 16px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
li::before {
|
||||
|
|
@ -201,22 +204,24 @@
|
|||
}
|
||||
|
||||
[purpose='company-information'] {
|
||||
h4 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 40px;
|
||||
color: #515774;
|
||||
|
||||
/* Body MD (FKA p) */
|
||||
color: #515774;
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 150% */
|
||||
}
|
||||
}
|
||||
[purpose='case-study-links'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
h4 {
|
||||
padding-top: 16px;// "More Customer stories" link
|
||||
}
|
||||
}
|
||||
[purpose='case-study-link'] {
|
||||
display: flex;
|
||||
|
|
@ -537,7 +542,7 @@
|
|||
padding-left: 40px;
|
||||
text-indent: -40px;
|
||||
margin-bottom: 0px;
|
||||
padding-top: 12px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 12px;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0px;
|
||||
|
|
@ -677,35 +682,7 @@
|
|||
padding: 0 24px 16px 24px;
|
||||
}
|
||||
[purpose='article-content'] {
|
||||
[purpose='attribution-quote'] {
|
||||
text-align: center;
|
||||
margin: 64px 0px;
|
||||
&::before {
|
||||
height: 0px;
|
||||
background: none;
|
||||
display: none;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
p:first-of-type {
|
||||
font-style: italic;
|
||||
line-height: 150%;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
strong {
|
||||
color: #515774;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='attribution-quote'] + h2 {
|
||||
margin-top: 128px;
|
||||
}
|
||||
|
|
@ -720,17 +697,14 @@
|
|||
}
|
||||
}
|
||||
[purpose='page-container'] {
|
||||
padding: 48px 24px;
|
||||
padding: 48px 32px;
|
||||
|
||||
}
|
||||
[purpose='page-content'] {
|
||||
max-width: 560px;
|
||||
}
|
||||
[purpose='case-study-quote'] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 64px;
|
||||
padding-bottom: 48px;
|
||||
[purpose='quote-author-image'] {
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
|
@ -754,6 +728,9 @@
|
|||
}
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
&:nth-of-type(2) {
|
||||
padding-top: 32px;
|
||||
}
|
||||
color: #515774;
|
||||
|
||||
/* Body MD (FKA p) */
|
||||
|
|
@ -784,6 +761,33 @@
|
|||
top: 4px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
[purpose='attribution-quote'] {
|
||||
text-align: center;
|
||||
margin: 64px 0px;
|
||||
&::before {
|
||||
left: calc(~'50% - 10.5px');
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
p:first-of-type {
|
||||
font-style: italic;
|
||||
line-height: 150%;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
strong {
|
||||
color: #515774;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -800,8 +804,9 @@
|
|||
[purpose='case-study-quote'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
align-items: flex-start;
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
[purpose='quote-author-image'] {
|
||||
margin-right: 0px;
|
||||
margin-bottom: 16px;
|
||||
|
|
|
|||
4
website/views/pages/articles/case-study.ejs
vendored
4
website/views/pages/articles/case-study.ejs
vendored
|
|
@ -42,7 +42,7 @@
|
|||
<%= thisPage.meta.companyInfoLineTwo %>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div purpose="case-study-links">
|
||||
<h4>More customer stories</h4>
|
||||
<div purpose="case-study-links" >
|
||||
<a href="/case-study/foursquare" purpose="case-study-link" v-if="thisPage.url !== '/case-study/foursquare'">
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
<div purpose="bottom-case-study-links" class="d-flex d-md-none flex-column">
|
||||
<div>
|
||||
<h4>More customer stories</h4>
|
||||
<div purpose="case-study-links" >
|
||||
<div purpose="case-study-links">
|
||||
<a href="/case-study/foursquare" purpose="case-study-link" v-if="thisPage.url !== '/case-study/foursquare'">
|
||||
<div purpose="link-image">
|
||||
<img alt="Foursquare" src="/images/nav-icon-foursquare-40x40@2x.png">
|
||||
|
|
|
|||
Loading…
Reference in a new issue