Style refresh

This commit is contained in:
John O'Nolan 2021-02-28 20:10:09 -05:00
parent f9d9b1fab5
commit 5fd447b815
7 changed files with 49 additions and 109 deletions

View File

@ -1,2 +1,2 @@
:root{--brand:#0071ff;--blue:#3eb0ef;--green:#a4d037;--purple:#ad26b4;--yellow:#fecd35;--red:#f05230;--darkgrey:#15171a;--midgrey:#738a94;--lightgrey:#c5d2d9;--whitegrey:#e5eff5;--pink:#fa3a57;--brown:#a3821a;--darkmode:#1a1c20}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:var(--darkgrey);font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:.5em solid var(--whitegrey)}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#26a6ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5.5rem;font-weight:600}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2.2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500} :root{--brand:#0071ff;--blue:#3eb0ef;--green:#a4d037;--purple:#ad26b4;--yellow:#fecd35;--red:#f05230;--darkgrey:#15171a;--midgrey:#738a94;--lightgrey:#c5d2d9;--whitegrey:#e5eff5;--pink:#fa3a57;--darkmode:#1a1c20}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:var(--darkgrey);font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:.5em solid var(--whitegrey)}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#26a6ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:5rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.6rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem}
/*# sourceMappingURL=global.css.map */ /*# sourceMappingURL=global.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -14,7 +14,6 @@
--lightgrey: #c5d2d9; --lightgrey: #c5d2d9;
--whitegrey: #e5eff5; --whitegrey: #e5eff5;
--pink: #fa3a57; --pink: #fa3a57;
--brown: #a3821a;
--darkmode: color-mod(var(--darkgrey) l(+2%)); --darkmode: color-mod(var(--darkgrey) l(+2%));
} }
@ -435,14 +434,16 @@ h6 {
line-height: 1.15; line-height: 1.15;
font-weight: 600; font-weight: 600;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
letter-spacing: -0.01em;
} }
h1 { h1 {
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
font-size: 5.5rem; font-size: 5rem;
font-weight: 600; font-weight: 700;
letter-spacing: -0.015em;
} }
@media (max-width: 500px) { @media (max-width: 600px) {
h1 { h1 {
font-size: 2.2rem; font-size: 2.2rem;
} }
@ -450,11 +451,12 @@ h1 {
h2 { h2 {
margin: 1.5em 0 0.5em 0; margin: 1.5em 0 0.5em 0;
font-size: 2.2rem; font-size: 2.8rem;
font-weight: 700;
} }
@media (max-width: 500px) { @media (max-width: 600px) {
h2 { h2 {
font-size: 1.8rem; font-size: 2.6rem;
} }
} }
@ -463,7 +465,7 @@ h3 {
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 500; font-weight: 500;
} }
@media (max-width: 500px) { @media (max-width: 600px) {
h3 { h3 {
font-size: 1.7rem; font-size: 1.7rem;
} }
@ -472,17 +474,14 @@ h3 {
h4 { h4 {
margin: 1.5em 0 0.5em 0; margin: 1.5em 0 0.5em 0;
font-size: 1.6rem; font-size: 1.6rem;
font-weight: 500;
} }
h5 { h5 {
margin: 1.5em 0 0.5em 0; margin: 1.5em 0 0.5em 0;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 500;
} }
h6 { h6 {
margin: 1.5em 0 0.5em 0; margin: 1.5em 0 0.5em 0;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 500;
} }

View File

@ -293,8 +293,8 @@ body {
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
overflow: hidden; overflow: hidden;
height: 64px; height: 68px;
font-size: 1.3rem; font-size: 1.5rem;
} }
.site-nav-left-wrapper { .site-nav-left-wrapper {
@ -313,8 +313,6 @@ body {
margin-right: 10px; margin-right: 10px;
padding: 10px 0 80px; padding: 10px 0 80px;
font-weight: 500; font-weight: 500;
letter-spacing: 0.2px;
text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
-ms-overflow-scrolling: touch; -ms-overflow-scrolling: touch;
@ -326,9 +324,16 @@ body {
/* Site Nav Hack Explanation (above): /* Site Nav Hack Explanation (above):
What's happening above is .site-nav-left is set to overflow-x and allow sideways scrolling, so that when there isn't enough space for all nav items (either due to lots of nav items, or a small viewport), you can still scroll side-to-side to reach them. Also, there is a small gradient on the left and right side covering the menu so that the menu goes offscreen smoothly. What's happening above is .site-nav-left is set to overflow-x and
allow sideways scrolling, so that when there isn't enough space for
all nav items (either due to lots of nav items, or a small viewport),
you can still scroll side-to-side to reach them. Also, there is a
small gradient on the left and right side covering the menu so that
the menu goes offscreen smoothly.
The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px of padding-bottom and a 40px fixed height parent (.site-nav) hides that entirely. Slightly hacky code. But nice clean end-result. The knock-on effect of this is ugly browser-scroll bars at the bottom,
so 80px of padding-bottom and a 40px fixed height parent (.site-nav)
hides that entirely. Slightly hacky code. But nice clean end-result.
*/ */
@ -387,8 +392,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
display: block; display: block;
padding: 12px 12px; padding: 12px 12px;
color: #fff; color: #fff;
opacity: 0.8; opacity: 0.7;
transition: opacity 0.35s ease-in-out;
} }
.nav li a:hover { .nav li a:hover {
@ -396,23 +400,6 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
opacity: 1; opacity: 1;
} }
.nav li a:before {
content: "";
position: absolute;
right: 100%;
bottom: 8px;
left: 12px;
height: 1px;
background: #fff;
opacity: 0.25;
transition: all 0.35s ease-in-out;
}
.nav li a:hover:before {
right: 12px;
opacity: 0.5;
}
.nav-post-title-active .nav { .nav-post-title-active .nav {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
@ -514,11 +501,12 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.subscribe-button { .subscribe-button {
display: block; display: block;
margin: 0 0 0 10px; margin: 0 0 0 10px;
padding: 4px 10px; padding: 5px 10px;
border: #fff 1px solid; border: #fff 1px solid;
color: #fff; color: #fff;
font-size: 1.3rem;
line-height: 1em; line-height: 1em;
border-radius: 10px; border-radius: 5px;
opacity: 0.8; opacity: 0.8;
} }
@ -608,7 +596,6 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
margin: 0 0 40px; margin: 0 0 40px;
padding: 0 20px 40px; padding: 0 20px 40px;
min-height: 220px; min-height: 220px;
border-bottom: 1px solid color-mod(var(--lightgrey) l(+12%));
background-size: cover; background-size: cover;
} }
@ -660,7 +647,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.post-card-title { .post-card-title {
margin: 0 0 0.4em; margin: 0 0 0.4em;
line-height: 1.15em; font-size: 2.4rem;
transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out;
} }
@ -677,7 +664,6 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.post-card-excerpt { .post-card-excerpt {
max-width: 56em; max-width: 56em;
color: color-mod(var(--midgrey) l(-8%)); color: color-mod(var(--midgrey) l(-8%));
font-family: Georgia, serif;
} }
.post-card-excerpt p { .post-card-excerpt p {
@ -686,7 +672,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.post-card-meta { .post-card-meta {
display: flex; display: flex;
align-items: flex-start; align-items: center;
padding: 0; padding: 0;
} }
@ -725,8 +711,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
display: block; display: block;
overflow: hidden; overflow: hidden;
margin: 0 0 0 -6px; margin: 0 0 0 -6px;
width: 34px; width: 36px;
height: 34px; height: 36px;
border: #fff 2px solid; border: #fff 2px solid;
border-radius: 100%; border-radius: 100%;
} }
@ -765,13 +751,11 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
flex: 1 1 50%; flex: 1 1 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 2px 0 0 6px; margin: 0 0 0 6px;
color: color-mod(var(--midgrey) l(+10%)); color: color-mod(var(--midgrey) l(+10%));
font-size: 1.2rem; font-size: 1.3rem;
line-height: 1.4em; line-height: 1.2em;
font-weight: 400; font-weight: 400;
letter-spacing: 0.2px;
text-transform: uppercase;
} }
.post-card-byline-content span { .post-card-byline-content span {
@ -874,8 +858,8 @@ make sure this only happens on large viewports / desktop-ish devices.
.post-card-large .post-card-excerpt p { .post-card-large .post-card-excerpt p {
margin-bottom: 1.5em; margin-bottom: 1.5em;
font-size: 1.8rem; font-size: 1.7rem;
line-height: 1.5em; line-height: 1.55em;
} }
} }
@ -933,6 +917,7 @@ make sure this only happens on large viewports / desktop-ish devices.
color: var(--midgrey); color: var(--midgrey);
font-size: 1.3rem; font-size: 1.3rem;
line-height: 1.4em; line-height: 1.4em;
letter-spacing: 0.02em;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
} }
@ -973,11 +958,9 @@ make sure this only happens on large viewports / desktop-ish devices.
.post-full-custom-excerpt { .post-full-custom-excerpt {
margin: 20px 0 0; margin: 20px 0 0;
color: color-mod(var(--midgrey) l(-8%)); font-size: 2rem;
font-family: Georgia, serif;
font-size: 2.3rem;
line-height: 1.4em; line-height: 1.4em;
font-weight: 300; opacity: 0.6;
} }
.date-divider { .date-divider {
@ -1274,9 +1257,6 @@ Usage (In Ghost editor):
.post-full-content h2 { .post-full-content h2 {
margin: 0.5em 0 0.4em; margin: 0.5em 0 0.4em;
font-size: 3.2rem;
line-height: 1.25em;
font-weight: 600;
} }
.post-full-content p + h2 { .post-full-content p + h2 {
margin-top: 0.8em; margin-top: 0.8em;
@ -1284,8 +1264,6 @@ Usage (In Ghost editor):
@media (max-width: 800px) { @media (max-width: 800px) {
.post-full-content h2 { .post-full-content h2 {
margin-bottom: 0.3em; margin-bottom: 0.3em;
font-size: 2.8rem;
line-height: 1.25em;
} }
} }
@ -1489,14 +1467,12 @@ Usage (In Ghost editor):
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 35px 0 0; margin: 35px 0 0;
padding-top: 15px;
border-top: 1px solid color-mod(var(--lightgrey) l(+10%));
} }
.post-full-byline-content { .post-full-byline-content {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
align-items: flex-start; align-items: center;
} }
.post-full-byline-content .author-list { .post-full-byline-content .author-list {
@ -1505,23 +1481,18 @@ Usage (In Ghost editor):
} }
.post-full-byline-meta { .post-full-byline-meta {
margin: 2px 0 0; color: color-mod(var(--midgrey));
color: color-mod(var(--midgrey) l(+10%));
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1.2em; line-height: 1.2em;
letter-spacing: 0.2px;
text-transform: uppercase;;
} }
.post-full-byline-meta h4 { .post-full-byline-meta h4 {
margin: 0 0 3px; margin: 0 0 3px;
font-size: 1.3rem; font-size: 1.4rem;
line-height: 1.4em;
font-weight: 500;
} }
.post-full-byline-meta h4 a { .post-full-byline-meta h4 a {
color: color-mod(var(--darkgrey) l(+10%)); color: color-mod(var(--darkgrey));
} }
.post-full-byline-meta h4 a:hover { .post-full-byline-meta h4 a:hover {
@ -1530,7 +1501,7 @@ Usage (In Ghost editor):
.post-full-byline-meta .bull { .post-full-byline-meta .bull {
display: inline-block; display: inline-block;
margin: 0 4px; margin: 0 2px;
opacity: 0.6; opacity: 0.6;
} }
@ -1557,7 +1528,7 @@ Usage (In Ghost editor):
font-size: 1.4rem; font-size: 1.4rem;
line-height: 1.5em; line-height: 1.5em;
background: white; background: white;
border-radius: 3px; border-radius: 5px;
box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.06) 1px 3px 8px; box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.06) 1px 3px 8px;
opacity: 0; opacity: 0;
transition: all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);
@ -2798,8 +2769,8 @@ Usage (In Ghost editor):
.site-footer { .site-footer {
position: relative; position: relative;
padding-top: 20px; padding-top: 30px;
padding-bottom: 60px; padding-bottom: 120px;
color: #fff; color: #fff;
background: color-mod(var(--darkgrey) l(-5%)); background: color-mod(var(--darkgrey) l(-5%));
} }

View File

@ -58,36 +58,6 @@
<a class="subscribe-close-button" href="javascript:;"></a> <a class="subscribe-close-button" href="javascript:;"></a>
Could not sign up! Invalid sign up link. Could not sign up! Invalid sign up link.
</div> </div>
<div id="subscribe" class="subscribe-overlay">
<a class="subscribe-close-overlay" href="#"></a>
<a class="subscribe-close-button" href="#"></a>
<div class="subscribe-overlay-content">
{{#if @site.logo}}
<img class="subscribe-overlay-logo" src="{{@site.logo}}" alt="{{@site.title}}" />
{{/if}}
<div class="subscribe-form">
<h1 class="subscribe-overlay-title">Subscribe to {{@site.title}}</h1>
<p class="subscribe-overlay-description">Stay up to date! Get all the latest & greatest posts delivered straight to your inbox</p>
<form data-members-form="subscribe">
<div class="form-group">
<input class="subscribe-email" data-members-email placeholder="youremail@example.com"
autocomplete="false" />
<button class="button primary" type="submit">
<span class="button-content">Subscribe</span>
<span class="button-loader">{{> "icons/loader"}}</span>
</button>
</div>
<div class="message-success">
<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.
</div>
<div class="message-error">
Please enter a valid email address!
</div>
</form>
</div>
</div>
</div>
{{/if}} {{/if}}
{{!-- jQuery, required for fitvids --}} {{!-- jQuery, required for fitvids --}}