Style and copy tweaks to the Add Done page

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

- adjust line heights for paragraphs
- vertical align content
- added subheader for actions
- added import members link
- updated action for customise site
This commit is contained in:
James Morris 2022-03-03 11:39:50 +00:00
parent 192b22b92d
commit 6ecbe64cac
2 changed files with 23 additions and 30 deletions

View File

@ -1828,12 +1828,16 @@ section.gh-ds h2 {
.gh-done header p {
font-size: 1.9rem;
line-height: 1.5em;
line-height: 1.3em;
margin: 0.5rem 0 2rem;
padding: 0 4rem 0 0;
color: var(--midgrey);
}
.gh-done h4 {
margin: 0 0 4rem;
}
.gh-done section h2 {
font-size: 1.8rem;
margin: 0 0 4rem;
@ -1853,54 +1857,40 @@ section.gh-ds h2 {
.gh-done section a {
display: grid;
grid-template-columns: 56px auto;
grid-template-areas:
"icon top"
"icon content";
margin: 0 0 3.5rem;
padding: 0;
}
.gh-done section span {
grid-area: icon;
grid-row: 1 / 3;
grid-column: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
background: #fff;
background: var(--black);
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 999px;
color: #fff;
color: var(--white);
margin: 0 8px 0 0;
}
.gh-done section a.gh-done-yellow span {
background: #ffb41f;
/* color: #ffb41f;
border: 1px solid #ffb41f; */
background: var(--yellow);
}
.gh-done section a.gh-done-blue span {
background: #14b8ff;
/* color: #14b8ff;
border: 1px solid #14b8ff; */
background: var(--blue);
}
.gh-done section a.gh-done-green span {
background: #30cf43;
/* color: #30cf43;
border: 1px solid #30cf43; */
background: var(--green);
}
.gh-done section a.gh-done-pink span {
background: #fb2d8d;
/* color: #fb2d8d;
border: 1px solid #fb2d8d; */
background: var(--pink);
}
.gh-done section a:hover span {
@ -1913,16 +1903,18 @@ section.gh-ds h2 {
}
.gh-done section a h6 {
grid-area: top;
grid-column: 2;
margin: 0 0 4px;
font-size: 1.5rem;
font-weight: 600;
}
.gh-done section a p {
color: #7c8b9a;
grid-area: content;
grid-column: 2;
color: var(--midgrey);
margin: 0;
padding: 0 4rem 0 0;
line-height: 1.45em;
}
.gh-done .gh-done-panel {
@ -1932,7 +1924,7 @@ section.gh-ds h2 {
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
align-items: flex-start;
}
.gh-done .gh-done-panel .gh-stack {

View File

@ -9,6 +9,7 @@
<h1>All done!</h1>
<p>Your brand new publication is set up and ready to go.</p>
</header>
<h4>What do you want to do first?</h4>
<section>
<LinkTo class="gh-done-yellow" @route="editor.new" @model="post">
<span>{{svg-jar "posts"}}</span>
@ -17,14 +18,14 @@
</LinkTo>
<LinkTo class="gh-done-green" @route="settings.design">
<span>{{svg-jar "paint-palette"}}</span>
<h6>Customise your design</h6>
<h6>Customise your site</h6>
<p>Drop into the theme editor to tweak your site and make it your own.</p>
</LinkTo>
<a class="gh-done-blue" href="https://ghost.org/docs/migration/">
<LinkTo class="gh-done-blue" @route="members.import">
<span>{{svg-jar "members"}}</span>
<h6>Import members</h6>
<p>Learn how to move over to Ghost from other tools with our migration guides.</p>
</a>
</LinkTo>
<LinkTo class="gh-done-pink" @route="dashboard">
<span>{{svg-jar "house"}}</span>
<h6>Explore Ghost admin</h6>