Added more performant way of displaying dark mode animated logo

ref https://linear.app/tryghost/issue/IPC-121/add-dark-mode-version-of-the-animated-ghost-logo
This commit is contained in:
Djordje Vlaisavljevic 2024-03-28 15:48:54 +00:00
parent ac90c5691d
commit 60b8316bb6
3 changed files with 10 additions and 21 deletions

View File

@ -1,11 +1,15 @@
<div class="gh-onboarding-wrapper" data-test-dashboard="onboarding-checklist">
<div class="gh-onboarding-header">
<video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px; margin-bottom: 24px;" class="gh-onboarding-ghost-logo--light">
<source src="assets/videos/logo-loader.mp4" type="video/mp4" />
</video>
<video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px; margin-bottom: 24px;" class="gh-onboarding-ghost-logo--dark">
<source src="assets/videos/logo-loader-dark.mp4" type="video/mp4" />
</video>
{{#if (feature "nightShift")}}
<video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px; margin-bottom: 24px;" class="gh-onboarding-ghost-logo--dark">
<source src="assets/videos/logo-loader-dark.mp4" type="video/mp4" />
</video>
{{else}}
<video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px; margin-bottom: 24px;" class="gh-onboarding-ghost-logo--light">
<source src="assets/videos/logo-loader.mp4" type="video/mp4" />
</video>
{{/if}}
<h2 class="gh-canvas-title">{{this.siteUrl}} is ready to go!</h2>
<p>Lets set your brand new publication up for success.</p>
</div>

View File

@ -1380,13 +1380,6 @@ Onboarding checklist */
background: #1c1e21;
}
.gh-onboarding-ghost-logo--light {
display: none;
}
.gh-onboarding-ghost-logo--dark {
display: inline-block;
}
/* ---------------------------------
Onboarding checklist: Share publication modal */

View File

@ -2781,14 +2781,6 @@ Onboarding checklist */
margin-bottom: 40px;
}
.gh-onboarding-ghost-logo--light {
display: inline-block;
}
.gh-onboarding-ghost-logo--dark {
display: none;
}
.gh-onboarding-header p {
margin-top: 8px;
margin-bottom: 0;