Refined unsubscribe screen design

This commit is contained in:
Peter Zimon 2019-11-15 14:01:34 +01:00
parent c99f40957e
commit b409a665b5
2 changed files with 70 additions and 5 deletions

View File

@ -8,12 +8,43 @@
{{#if member}}Successfully Unsubscribed{{/if}}
{{#if error}}Unsubscribe Failed{{/if}}
</title>
<link rel="stylesheet" href="{{asset "public/ghost.css" hasMinFile="true"}}" />
</head>
<body>
<p><a href="{{@site.url}}">Back to site</a></p>
<p>
{{#if member}}Success! {{member.email}} has been successfully unsubscribed.{{/if}}
{{#if error}}Uh oh! Unsubscribe failed: "{{error}}"{{/if}}
</p>
<div class="gh-app">
<div class="gh-viewport">
<main class="gh-main" role="main">
<div class="gh-flow">
<header class="gh-flow-head">
<nav class="gh-flow-nav">
<a href="{{@site.url}}" class="gh-flow-back-plain">
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<svg width="17px" height="27px" viewBox="0 0 17 27" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
stroke-linecap="round" stroke-linejoin="round">
<g id="Stroke-42" transform="translate(2.000000, 2.000000)" stroke-width="3"
stroke="#7d878a">
<polyline points="13.5401 0.4256 0.3971 11.9256 13.5401 23.4256"></polyline>
</g>
</g>
</svg>
Back to {{@site.title}}
</a>
</nav>
</header>
<div class="gh-flow-content-wrap">
<section class="gh-flow-content gh-flow-content-regular">
<p>
{{#if member}}<span class="gh-flow-em">{{member.email}}</span> has been successfully unsubscribed{{/if}}
{{#if error}}Uh oh! Unsubscribe failed: "{{error}}"{{/if}}
</p>
</section>
</div>
</div>
</main>
</div>
</div>
</body>
</html>

View File

@ -691,6 +691,33 @@ h2 {
.gh-flow-back:hover {
border: #dae1e3 1px solid;
}
.gh-flow-back-plain {
position: absolute;
top: 0;
left: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin: 0 0 0 3%;
padding: 2px 9px 2px 5px;
color: #7d878a;
font-weight: 300;
transition: all 0.3s ease;
text-decoration: none;
}
.gh-flow-back-plain svg {
margin-right: 4px;
height: 12px;
line-height: 14px;
}
.gh-flow-back-plain svg path {
stroke: #7d878a;
stroke-width: 1.2px;
}
.gh-flow-back-plain:hover {
color: #15212A;
}
.gh-flow-nav {
position: relative;
-ms-flex: 1;
@ -714,6 +741,10 @@ h2 {
padding-left: 35px;
}
.gh-flow-content-regular {
font-weight: 300;
}
@media (max-width: 500px) {
.gh-flow-content {
font-size: 4vw;
@ -747,6 +778,9 @@ h2 {
line-height: 1.4em;
font-weight: 100;
}
.gh-flow-em {
font-weight: 500;
}
/* Sign in
/* ---------------------------------------------------------- */