Style refresh
This commit is contained in:
John O'Nolan
parent
f9d9b1fab5
commit
5fd447b815
|
|
@ -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 */
|
||||
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
|
|
@ -14,7 +14,6 @@
|
|||
--lightgrey: #c5d2d9;
|
||||
--whitegrey: #e5eff5;
|
||||
--pink: #fa3a57;
|
||||
--brown: #a3821a;
|
||||
--darkmode: color-mod(var(--darkgrey) l(+2%));
|
||||
}
|
||||
|
||||
|
|
@ -435,14 +434,16 @@ h6 {
|
|||
line-height: 1.15;
|
||||
font-weight: 600;
|
||||
text-rendering: optimizeLegibility;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 0.5em 0;
|
||||
font-size: 5.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
@media (max-width: 600px) {
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
|
@ -450,11 +451,12 @@ h1 {
|
|||
|
||||
h2 {
|
||||
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 {
|
||||
font-size: 1.8rem;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -463,7 +465,7 @@ h3 {
|
|||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
@media (max-width: 600px) {
|
||||
h3 {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
|
@ -472,17 +474,14 @@ h3 {
|
|||
h4 {
|
||||
margin: 1.5em 0 0.5em 0;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 1.5em 0 0.5em 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin: 1.5em 0 0.5em 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -293,8 +293,8 @@ body {
|
|||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
height: 64px;
|
||||
font-size: 1.3rem;
|
||||
height: 68px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.site-nav-left-wrapper {
|
||||
|
|
@ -313,8 +313,6 @@ body {
|
|||
margin-right: 10px;
|
||||
padding: 10px 0 80px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
|
||||
-ms-overflow-scrolling: touch;
|
||||
|
|
@ -326,9 +324,16 @@ body {
|
|||
|
||||
/* 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;
|
||||
padding: 12px 12px;
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.35s ease-in-out;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
visibility: hidden;
|
||||
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 {
|
||||
display: block;
|
||||
margin: 0 0 0 10px;
|
||||
padding: 4px 10px;
|
||||
padding: 5px 10px;
|
||||
border: #fff 1px solid;
|
||||
color: #fff;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1em;
|
||||
border-radius: 10px;
|
||||
border-radius: 5px;
|
||||
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;
|
||||
padding: 0 20px 40px;
|
||||
min-height: 220px;
|
||||
border-bottom: 1px solid color-mod(var(--lightgrey) l(+12%));
|
||||
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 {
|
||||
margin: 0 0 0.4em;
|
||||
line-height: 1.15em;
|
||||
font-size: 2.4rem;
|
||||
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 {
|
||||
max-width: 56em;
|
||||
color: color-mod(var(--midgrey) l(-8%));
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
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;
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 -6px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: #fff 2px solid;
|
||||
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%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 2px 0 0 6px;
|
||||
margin: 0 0 0 6px;
|
||||
color: color-mod(var(--midgrey) l(+10%));
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.4em;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.2em;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin-bottom: 1.5em;
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.5em;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.55em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -933,6 +917,7 @@ make sure this only happens on large viewports / desktop-ish devices.
|
|||
color: var(--midgrey);
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.4em;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -973,11 +958,9 @@ make sure this only happens on large viewports / desktop-ish devices.
|
|||
|
||||
.post-full-custom-excerpt {
|
||||
margin: 20px 0 0;
|
||||
color: color-mod(var(--midgrey) l(-8%));
|
||||
font-family: Georgia, serif;
|
||||
font-size: 2.3rem;
|
||||
font-size: 2rem;
|
||||
line-height: 1.4em;
|
||||
font-weight: 300;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.date-divider {
|
||||
|
|
@ -1274,9 +1257,6 @@ Usage (In Ghost editor):
|
|||
|
||||
.post-full-content h2 {
|
||||
margin: 0.5em 0 0.4em;
|
||||
font-size: 3.2rem;
|
||||
line-height: 1.25em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.post-full-content p + h2 {
|
||||
margin-top: 0.8em;
|
||||
|
|
@ -1284,8 +1264,6 @@ Usage (In Ghost editor):
|
|||
@media (max-width: 800px) {
|
||||
.post-full-content h2 {
|
||||
margin-bottom: 0.3em;
|
||||
font-size: 2.8rem;
|
||||
line-height: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1489,14 +1467,12 @@ Usage (In Ghost editor):
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 35px 0 0;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid color-mod(var(--lightgrey) l(+10%));
|
||||
}
|
||||
|
||||
.post-full-byline-content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.post-full-byline-content .author-list {
|
||||
|
|
@ -1505,23 +1481,18 @@ Usage (In Ghost editor):
|
|||
}
|
||||
|
||||
.post-full-byline-meta {
|
||||
margin: 2px 0 0;
|
||||
color: color-mod(var(--midgrey) l(+10%));
|
||||
color: color-mod(var(--midgrey));
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.2em;
|
||||
letter-spacing: 0.2px;
|
||||
text-transform: uppercase;;
|
||||
}
|
||||
|
||||
.post-full-byline-meta h4 {
|
||||
margin: 0 0 3px;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.4em;
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -1530,7 +1501,7 @@ Usage (In Ghost editor):
|
|||
|
||||
.post-full-byline-meta .bull {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
margin: 0 2px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
|
|
@ -1557,7 +1528,7 @@ Usage (In Ghost editor):
|
|||
font-size: 1.4rem;
|
||||
line-height: 1.5em;
|
||||
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;
|
||||
opacity: 0;
|
||||
transition: all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);
|
||||
|
|
@ -2798,8 +2769,8 @@ Usage (In Ghost editor):
|
|||
|
||||
.site-footer {
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 60px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 120px;
|
||||
color: #fff;
|
||||
background: color-mod(var(--darkgrey) l(-5%));
|
||||
}
|
||||
|
|
|
|||
30
default.hbs
30
default.hbs
|
|
@ -58,36 +58,6 @@
|
|||
<a class="subscribe-close-button" href="javascript:;"></a>
|
||||
Could not sign up! Invalid sign up link.
|
||||
</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}}
|
||||
|
||||
{{!-- jQuery, required for fitvids --}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue