Website: Remove dupliative comic strips. Update press-kit.ejs (#48219)
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Updates** * Refreshed the press kit comic illustration images with updated artwork files. * Adjusted illustration row spacing and improved accessibility text for the illustrations. * **UI Changes** * Removed styling for the “continue” banner section, which may change its appearance or how it’s presented on the page. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Eric <eashaw@sailsjs.com>
This commit is contained in:
Mike McNeil
Binary file not shown.
|
Before Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 397 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 280 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 272 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
Vendored
-155
@@ -82,161 +82,6 @@ html, body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
[purpose='continue-banner'] {
|
||||
z-index: 198;
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 24px;
|
||||
[purpose='banner-body'].invisible {
|
||||
transform: translateY(200px);
|
||||
}
|
||||
[purpose='banner-body'] {
|
||||
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
[purpose='banner-close-button'] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
width: 260px;
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #E2E4EA;
|
||||
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
|
||||
padding: 8px;
|
||||
background: #FFFFFF;
|
||||
[purpose='banner-text'] {
|
||||
width: 100%;
|
||||
padding: 0 0 0 16px;
|
||||
strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
p {
|
||||
color: #192147;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
line-height: 18px; /* 150% */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
[purpose='form-progress-bar'] {
|
||||
height: 6px;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
background: #E2E4EA;
|
||||
border-radius: 3px;
|
||||
[purpose='current-progress'] {
|
||||
background-color: #3DB67B;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
[purpose='continue-button'] {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 0px;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: @core-fleet-black;
|
||||
font-weight: 600;
|
||||
[purpose='button-text'] {
|
||||
color: @core-fleet-black;
|
||||
}
|
||||
[purpose='animated-arrow'] {
|
||||
margin-left: 8px;
|
||||
stroke-width: 2px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
fill: none;
|
||||
stroke: @core-vibrant-green;
|
||||
}
|
||||
[purpose='arrow-line'] {
|
||||
opacity: 0;
|
||||
transition: opacity 10ms ease-out;
|
||||
}
|
||||
[purpose='chevron'] {
|
||||
transition: transform 100ms ease-out;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
[purpose='button-text'] {
|
||||
color: @core-fleet-black;
|
||||
}
|
||||
[purpose='arrow-line'] {
|
||||
opacity: 1;
|
||||
transition: opacity 150ms ease-out;
|
||||
}
|
||||
[purpose='chevron'] {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
[purpose='continue-chevron'] {
|
||||
display: none;
|
||||
}
|
||||
[purpose='banner-image-background'] {
|
||||
background-color: #EEF9FE;
|
||||
border-radius: 4px;
|
||||
}
|
||||
[purpose='banner-image'] {
|
||||
height: 80px;
|
||||
min-width: 80px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 12px;
|
||||
&.stage-one {
|
||||
background-image: url('/images/psystage-1-unaware-558x680@2x.png');
|
||||
}
|
||||
&.stage-two {
|
||||
background-image: url('/images/cta-thumbnail-psystage-2-aware-128x128@2x.png');
|
||||
}
|
||||
&.stage-three {
|
||||
background-image: url('/images/cta-thumbnail-psystage-3-intrigued-128x128@2x.png');
|
||||
}
|
||||
&.stage-four {
|
||||
background-image: url('/images/cta-thumbnail-psystage-4-has-use-case-128x128@2x.png');
|
||||
}
|
||||
&.stage-five {
|
||||
background-image: url('/images/cta-thumbnail-psystage-5-feeling-confident-128x128@2x.png');
|
||||
}
|
||||
&.stage-six {
|
||||
background-image: url('/images/psystage-6-has-team-buy-in-504x784@2x.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
[purpose='banner-body'].collapsed {
|
||||
[purpose='banner-image'] {
|
||||
height: 100px;
|
||||
min-width: 100px;
|
||||
}
|
||||
[purpose='banner-text'] {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
transform: scale(0.8);
|
||||
cursor: pointer;
|
||||
min-height: unset;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
border: 4px solid #FFF;
|
||||
padding: 0;
|
||||
background: #EEF9FE;
|
||||
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
&.invisible {
|
||||
transform: translateY(200px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[purpose='header-ribbon-cta'] {
|
||||
|
||||
Vendored
+5
-39
@@ -81,7 +81,7 @@
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Comic book illustrations</h2>
|
||||
<div class="row d-flex text-center">
|
||||
<div class="row d-flex text-center pb-2">
|
||||
<div class="col-lg-4 pb-lg-0 pb-5 col-12">
|
||||
<div class="m-lg-auto float-sm-left">
|
||||
<img class="preview-image" src="/images/psystage-1-unaware-558x680@2x.png" alt="Comic book illustration">
|
||||
@@ -89,7 +89,7 @@
|
||||
</div>
|
||||
<div class="col-lg-4 col-12 pb-lg-0 pb-5">
|
||||
<div class="m-lg-auto float-sm-left">
|
||||
<img class="preview-image" src="/images/psystage-2-aware-508x784@2x.png" alt="Comic book illustration">
|
||||
<img class="preview-image" src="/images/psystage-2-aware-558x680@2x.png" alt="Comic book illustration">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12 pb-lg-0 pb-5">
|
||||
@@ -101,51 +101,17 @@
|
||||
<div class="row d-flex text-center">
|
||||
<div class="col-lg-4 pb-lg-0 pb-5 col-12">
|
||||
<div class="m-lg-auto float-sm-left">
|
||||
<img class="preview-image" src="/images/psystage-4-has-use-case-508x784@2x.png" alt="Comic book illustration">
|
||||
<img class="preview-image" src="/images/psystage-4-has-use-case-558x680@2x.png" alt="Comic book illustration">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12 pb-lg-0 pb-5">
|
||||
<div class="m-lg-auto float-sm-left">
|
||||
<img class="preview-image" src="/images/psystage-5-feeling-confident-504x784@2x.png" alt="Comic book illustration">
|
||||
<img class="preview-image" src="/images/psystage-5-personally-confident-558x680@2x.png" alt="Comic book illustration">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12 pb-lg-0 pb-5">
|
||||
<div class="m-lg-auto float-sm-left">
|
||||
<img class="preview-image" src="/images/psystage-6-has-team-buy-in-504x784@2x.png" alt="Comic book illustration">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex text-center">
|
||||
<div class="col-lg-4 pb-lg-0 pb-5 col-12">
|
||||
<div class="m-lg-auto float-sm-left">
|
||||
<img class="preview-image" src="/images/psystage-1-unaware-caption-643x784@2x.png" alt="Comic book illustration with caption">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12 pb-lg-0 pb-5">
|
||||
<div class="m-lg-auto float-sm-left">
|
||||
<img class="preview-image" src="/images/psystage-2-aware-caption-643x784@2x.png" alt="Comic book illustration with caption">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12 pb-lg-0 pb-5">
|
||||
<div class="m-lg-auto float-sm-left">
|
||||
<img class="preview-image" src="/images/psystage-3-intrigued-caption-643x784@2x.png" alt="Comic book illustration with caption">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex text-center">
|
||||
<div class="col-lg-4 pb-lg-0 pb-5 col-12">
|
||||
<div class="m-lg-auto float-sm-left">
|
||||
<img class="preview-image" src="/images/psystage-4-has-use-case-caption-643x784@2x.png" alt="Comic book illustration with caption">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12 pb-lg-0 pb-5">
|
||||
<div class="m-lg-auto float-sm-left">
|
||||
<img class="preview-image" src="/images/psystage-5-feeling-confident-caption-643x784@2x.png" alt="Comic book illustration with caption">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12 pb-lg-0 pb-5">
|
||||
<div class="m-lg-auto float-sm-left">
|
||||
<img class="preview-image" src="/images/psystage-6-has-team-buy-in-caption-648x789@2x.png" alt="Comic book illustration with caption">
|
||||
<img class="preview-image" src="/images/psystage-6-has-team-buy-in-558x680@2x.png" alt="Comic book illustration">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user