Better styling for the Finishing Touches screen

refs: https://github.com/TryGhost/Team/issues/1303

- fixed glaring styling issues after technical implementation
- got to a place for testing, though small issues remain
This commit is contained in:
James Morris 2022-02-09 18:10:02 +00:00
parent b38e21995a
commit 510b115329
3 changed files with 95 additions and 10 deletions

View File

@ -19,7 +19,7 @@
{{svg-jar "get-started-migrations"}}
<h4>Migrating data</h4>
<p>Import content from other tools into Ghost with ease.</p>
<p><a href="https://docs.ghost.org" class="gh-btn" target="_blank" rel="noopener noreferrer" {{on "click" @close}}><span>Learn more</span></a></p>
<p><a href=" https://ghost.org/docs/migration/" class="gh-btn" target="_blank" rel="noopener noreferrer" {{on "click" @close}}><span>Learn more</span></a></p>
</div>
</div>
</div>

View File

@ -1795,7 +1795,80 @@ section.gh-ds h2 {
}
/* Get started modal
/* Finishing touches */
/* ---------------------------------------------------- */
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(32px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.gh-finishing-touches {
background: #DFDFDF;
flex-direction: column;
}
.gh-finishing-touches header {
padding: 32px 0 24px;
}
.gh-finishing-touches header h1 {
font-size: 4.1rem;
letter-spacing: -0.025em;
color: rgb(21, 23, 26);
margin: 0;
}
.gh-finishing-touches header p {
font-size: 1.9rem;
line-height: 1.5em;
margin: 0.5rem 0 2rem;
color: rgb(112, 123, 139);
}
.gh-finishing-touches main {
background: #ffffff;
box-shadow: 0 0 30px rgba(0,0,0,0.075);
width: calc(100% - 32px);
border-radius: 8px;
margin: 0 16px 16px;
animation: fadeUp ease 300ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.gh-finishing-touches .gh-nav-design-settings {
background: transparent;
padding-top: 31px;
}
.gh-finishing-touches .gh-setting-desc {
padding-right: 2rem;
}
.gh-finishing-touches .gh-browserpreview-previewcontainer {
box-shadow: 0 8px 30px rgba(0,0,0,0.1);
border-radius: 5px !important;
overflow: hidden;
}
.gh-finishing-touches .gh-browserpreview-browser .tabs {
background: #fff;
}
.gh-finishing-touches .gh-browserpreview-browser .tabs div {
display: none;
}
/* Get started modal */
/* ---------------------------------------------------- */
.gh-get-started-welcome {
@ -1819,3 +1892,15 @@ section.gh-ds h2 {
.gh-get-started-extras .br {
border-color: var(--whitegrey);
}
.gh-get-started-extras .pa4:first-child {
padding-left: 0;
padding-bottom: 0;
padding-right: 3rem;
}
.gh-get-started-extras .pa4:last-child {
padding-right: 0;
padding-bottom: 0;
padding-left: 3rem;
}

View File

@ -1,9 +1,9 @@
<div class="gh-flow">
<div class="tc">
<div class="gh-flow gh-finishing-touches">
<header class="tc">
<h1>Finishing touches</h1>
<p>You chose a look, now it's time to make it your own.</p>
</div>
<div class="flex flex-row h-100">
<p>You chose a theme, now it's time to make it your own.</p>
</header>
<main class="flex flex-row h-100">
<div class="gh-nav gh-nav-contextual gh-nav-design">
<div class="flex flex-column h-100">
<div class="gh-nav-body">
@ -16,9 +16,9 @@
</div>
<div class="pa4">
<GhTaskButton
class="gh-btn gh-btn-black gh-btn-icon w-100"
class="gh-btn gh-btn-large gh-btn-black gh-btn-icon w-100"
@task={{this.saveAndContinueTask}}
@buttonText="Let's get writing →"
@buttonText="Continue →"
@runningText="Saving..."
@showSuccess={{false}}
data-test-button="save-and-continue"
@ -32,5 +32,5 @@
<GhHtmlIframe class="site-frame" @html={{this.themeManagement.previewHtml}} />
</GhBrowserPreview>
</div>
</div>
</main>
</div>