From 1d3a0366c241a9e34369e96fe9da633b0d3b96c8 Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Sun, 29 Mar 2015 12:37:03 +0200 Subject: [PATCH] New onboarding markup and styles --- ghost/admin/app/html/install1.html | 47 +++ ghost/admin/app/html/install2.html | 86 ++++ ghost/admin/app/html/install3.html | 90 ++++ ghost/admin/app/html/install4.html | 54 +++ ghost/admin/app/styles/layouts/setup.scss | 446 +++++++++++++++----- ghost/admin/app/styles/patterns/global.scss | 2 - 6 files changed, 620 insertions(+), 105 deletions(-) create mode 100644 ghost/admin/app/html/install1.html create mode 100644 ghost/admin/app/html/install2.html create mode 100644 ghost/admin/app/html/install3.html create mode 100644 ghost/admin/app/html/install4.html diff --git a/ghost/admin/app/html/install1.html b/ghost/admin/app/html/install1.html new file mode 100644 index 0000000000..99eb5338ca --- /dev/null +++ b/ghost/admin/app/html/install1.html @@ -0,0 +1,47 @@ + + + + + + +Ghost Admin + + + + + + + + + + +
+
+ +
+ +
+
+
+

Welcome to Ghost!

+

So far there have been 542,952 Ghost blogs made by people all over the world. Today we’re making yours.

+
+ + Ghost screenshot + + Create your account +
+
+
+ + + + diff --git a/ghost/admin/app/html/install2.html b/ghost/admin/app/html/install2.html new file mode 100644 index 0000000000..b6da1c2355 --- /dev/null +++ b/ghost/admin/app/html/install2.html @@ -0,0 +1,86 @@ + + + + + + +Ghost Admin + + + + + + + + + + +
+
+ +
+ +
+
+
+

Create your account

+
+ +
+ +
+ + + + +
+
+ + + + +
+
+ + + +
+
+
+
+
+
+
+ +
+
+ + + + +
+
+ + Last step: Invite your team +
+
+
+ + + + diff --git a/ghost/admin/app/html/install3.html b/ghost/admin/app/html/install3.html new file mode 100644 index 0000000000..aa7820de09 --- /dev/null +++ b/ghost/admin/app/html/install3.html @@ -0,0 +1,90 @@ + + + + + + +Ghost Admin + + + + + + + + + + +
+
+ +
+ +
+
+
+

Create your account

+
+ +
+ +
+ + + + +

Lookin' good

+
+
+ + + + +

Nice to meet you, John! Upload a photo?

+
+
+ + + +
+
+
+
+
+ +
+ +

Too short, dear

+
+
+ + + + +
+
+ + Last step: Invite your team +

The password fairy does not approve

+
+
+
+ + + + diff --git a/ghost/admin/app/html/install4.html b/ghost/admin/app/html/install4.html new file mode 100644 index 0000000000..34b6551dab --- /dev/null +++ b/ghost/admin/app/html/install4.html @@ -0,0 +1,54 @@ + + + + + + +Ghost Admin + + + + + + + + + + +
+
+ +
+ +
+
+
+

Invite your team

+

Ghost works best when shared with others. Collaborate, get feedback on your posts & work together on ideas.

+
+ + + +
+ + +
+ + I'll do this later, take me to my blog! +
+
+
+ + + + diff --git a/ghost/admin/app/styles/layouts/setup.scss b/ghost/admin/app/styles/layouts/setup.scss index 8032570b37..d6c8b3b303 100644 --- a/ghost/admin/app/styles/layouts/setup.scss +++ b/ghost/admin/app/styles/layouts/setup.scss @@ -1,7 +1,6 @@ // ------------------------------------------------------------ // Setup // -// Styles for the Tag Management screen // Slug: /ghost/setup/ // // * Page @@ -11,140 +10,381 @@ // -// Page -// -------------------------------------------------- -// Applied to the element +// Layout +// ------------------------------------------------------------ -.ghost-setup { - color: $midgrey; - background: $darkgrey; +.gh-setup { + min-height: 100vh; + display: flex; + flex-direction: column; +} - @media (max-width: 550px) { - background: darken($darkgrey, 5%); +.gh-setup-head { + display: flex; + justify-content: space-between; + padding-top: 4vh; + padding-bottom: 20px; +} + +.gh-setup-content-wrap { + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 8vh; + margin: 0 5%; +} + +// +// Header +// ------------------------------------------------------------ +.gh-setup-back { + position: absolute; + top: 0; + left: 0; + border: transparent 1px solid; + padding: 2px 9px 2px 5px; + margin: 0 0 0 3%; + font-weight: 100; + color: #7d878a; + border-radius: 4px; + transition: all 0.3s ease; + + &:hover { + border: #DAE1E3 1px solid; + } +} + +.gh-setup-nav { + position: relative; + flex: 1; + + ol { + width: 160px; + display: flex; + justify-content: space-between; + list-style: none; + margin: 0 auto; + padding: 0; } - main { - padding-top: 15px; - overflow: auto; - -webkit-overflow-scrolling: touch; + li { + margin: 0; + } - @media (max-width: 550px) { - top: 0; + // Set the default divider to green, and then override it to + // grey using the next~sibling selector. Means that all + // dividers before .current will be automatically green. + .divider { + align-self: center; + width: 22px; + height: 2px; + background-image: linear-gradient(to right, $green 33%, rgba(255,255,255,0) 0%); + background-position: bottom; + background-size: 6px 2px; + background-repeat: repeat-x; + } + .current ~ .divider { + background-image: linear-gradient(to right, #E3E3E3 33%, rgba(255,255,255,0) 0%); + } + + .step { + display: table-cell; + vertical-align: middle; + text-align: center; + width: 30px; + height: 30px; + border: transparent 2px solid; + font-size: 1.3rem; + text-align: center; + color: #fff; + background: $green; + border-radius: 100%; + + .num { + display: none; } } -} + .current ~ li:not(divider) .step { + border: #E3E3E3 2px solid; + color: #CDCDCD; + background: transparent; -// -// Wrapper -// -------------------------------------------------- -// Centered in the middle of the screen - -.setup-box { - display: table; - max-width: 500px; - height: 90%; - margin: 0 auto; - padding: 0; -} - - -// -// Form -// -------------------------------------------------- - -.setup-form { - max-width: 530px; - padding: 40px; - color: lighten($midgrey, 15%); - border-radius: 2px; - - @media (max-width: 400px) { - padding: 15px; + .num { + display: block; + } + i { + display: none; + } } - @media (min-width: 551px) { - background: darken($darkgrey, 5%); + .current .step { + border: $green 2px solid; + color: $green; + font-weight: bold; + background: transparent; + cursor: default; + + .num { + display: block; + } + i { + display: none; + } + } + + .done { + background: $green; + border: none; + color: #fff; + } + +} + +.gh-setup-content { + width: 100%; + max-width: 700px; + font-size: 1.9rem; + line-height: 1.5em; + font-weight: 100; + color: $midgrey; + text-align: center; + + @media (max-width: 500px) { + font-size: 4vw; } header { - margin-bottom: 30px; - } - - label { - color: $lightgrey; - font-weight: 300; - - @media (max-width: 550px) { - width: 100%; - } - } - - .form-group input { - padding: 7px; - border: none; - color: #fff; - background: lighten($darkgrey, 10%); - transition: background 0.25s ease; - - &:focus { - border:none; - background: lighten($darkgrey, 15%); - } - } - - // Chrome auto-fill style - input:-webkit-autofill { - -webkit-box-shadow: 0 0 0px 1000px $lightgrey inset !important; + max-width: 520px; + margin: 0 auto; } h1 { + font-size: 4.2rem; + font-weight: 100; + letter-spacing: -1px; + + @media (max-width: 600px) { + font-size: 7vw; + } + } + + strong { + font-weight: 400; + } + + em { + color: $blue; + font-weight: 400; + font-style: normal; + } + + img { + max-width: 100%; + } + + .gh-setup-screenshot { + position: relative; + left: -38px; + + @media (max-width: 860px) { + left: 0; + } + + } + + .btn { + display: block; + max-width: 400px; + margin: 20px auto 0; + } + + // + // Create your account + // ------------------------------------------------------------ + + .gh-setup-create { + position: relative; + max-width: 400px; + padding: 50px 40px 25px; + margin: 70px auto 30px; + border: #DAE1E3 1px solid; + text-align: left; + background: #F8FBFD; + border-radius: 5px; + } + + .account-image { + position: absolute; + top: -50px; + left: 50%; margin: 0; - font-weight: 200; - font-size: 26px; - letter-spacing: 0; - color: $lightgrey; + margin-left: -50px; + width: 100px; + height: 100px; + padding: 4px; + border: #D1D9DB 1px solid; + text-align: center; + background: #fff; + border-radius: 100%; + overflow: hidden; - @media (max-width: 400px) { - font-size: 18px; - } - - @media (max-width: 550px) { - font-size: 20px; + &:hover { + .edit-account-image { + opacity: 1; + } } } - h2 { - margin: 6px 0 0 0; - padding: 0; - border: none; - font-weight: 200; - font-size: 16px; - letter-spacing: 0; - color: $midgrey; + .edit-account-image { + position: absolute; + top: 4px; + right: 4px; + bottom: 4px; + left: 4px; + border-radius: 100%; + width: calc(100% - 8px); + background: rgba(87,163,232,0.7); + opacity: 0; + color: #fff; + font-size: 3rem; + line-height: 90px; + text-transform: uppercase; + text-decoration: none; + transition: opacity 0.3s ease; + } - @media (max-width: 400px) { - font-size: 12px; + .img { + display: block; + width: 90px; + height: 90px; + background-color: #F8FBFD; + background-size: cover; + background-position: center center; + border-radius: 100%; + animation: fade-in 1s; + } + + .form-group { + margin-bottom: 2.5rem; + + label { + margin: 0; + font-size: 1.4rem; + font-weight: 400; } - @media (max-width: 550px) { - font-size: 14px; + a { + text-decoration: underline; } } - p { - font-size: 12px; + + input { + padding: 10px; + border: #DAE1E3 1px solid; + font-size: 1.6rem; line-height: 1.4em; - color: $midgrey; + font-weight: 100; } - footer { - margin: 30px 0 5px 0; + .pw-strength { + padding: 0 10px; + height: 24px; + position: absolute; + top: 50%; + right: 1px; + margin-top: -11px; + background: rgba(255,255,255,0.9); } - .btn-green { + .pw-strength-dot { + display: block; + height: 3px; + width: 3px; + margin-top: 2px; + background-color: #D9E0E3; + border-radius: 100%; + + &:first-child { + margin-top: 0; + } + } + + .pw-strength-activedot { + background-color: $red; + } + + // @TODO hack - replace with proper icon input + .input-icon[class*='icon-']:before { + transform: translateY(-49%); + } + + .gh-setup-invite { width: 100%; - padding: 0.9em 1.8em; - font-size: 13px; + max-width: 400px; + margin: 0 auto; + text-align: left; + + @media (max-width: 460px) { + label i {display: none;} + } } -}//.setup-form \ No newline at end of file + + .gh-setup-faces { + margin-bottom: 3vw; + } + + textarea { + width: 100%; + height: 160px; + margin-bottom: 40px; + font-size: 1.6rem; + font-weight: 100; + + @media (max-width: 1200px) { + margin-bottom: 3vw; + } + } + + + // + // Validation + // ------------------------------------------------------------ + + .response { + position: absolute; + bottom: -25px; + right: 0; + margin: 0; + text-align: right; + font-size: 1.2rem; + color: #A6B0B3; + } + + .success { + .input-icon:before { + color: $green; + } + } + + .error { + input { + border-color: $red; + } + .input-icon:before { + color: $red; + } + .response { + color: $red; + } + } + + // Appears under submit button + .main-error { + color: $red; + font-size: 1.3rem; + margin-top: 5px; + } +} diff --git a/ghost/admin/app/styles/patterns/global.scss b/ghost/admin/app/styles/patterns/global.scss index 031cc8b443..6c3118f332 100644 --- a/ghost/admin/app/styles/patterns/global.scss +++ b/ghost/admin/app/styles/patterns/global.scss @@ -30,7 +30,6 @@ html { body { color: lighten($darkgrey, 10%); font-size: 1.4rem; - font-feature-settings: "kern" 1; // Prevent elastic scrolling on the whole page height: 100%; @@ -54,7 +53,6 @@ h4, h5, h6 { line-height: 1.15em; color: $darkgrey; text-rendering: optimizeLegibility; - font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1; } h1 {