Accent color usage and subscribe form design update

This commit is contained in:
Sodbileg Gansukh 2021-02-18 11:32:40 +08:00
parent 7e3e891338
commit 306f7b2d9b
7 changed files with 36 additions and 23 deletions

View File

@ -1,2 +1,2 @@
:root{--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:#ff383c;--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}
/*# 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

@ -3,6 +3,7 @@
:root { :root {
/* Colours */ /* Colours */
--brand: #ff383c;
--blue: #3eb0ef; --blue: #3eb0ef;
--green: #a4d037; --green: #a4d037;
--purple: #ad26b4; --purple: #ad26b4;

View File

@ -654,7 +654,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
} }
.post-card-header { .post-card-header {
margin: 15px 0 0; margin: 20px 0 0;
} }
.post-feed .no-image .post-card-content-link { .post-feed .no-image .post-card-content-link {
@ -667,8 +667,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.post-card-primary-tag { .post-card-primary-tag {
margin: 0 0 0.2em; margin: 0 0 0.2em;
color: var(--blue); color: var(--brand);
font-size: 1.2rem; font-size: 1.1rem;
font-weight: 500; font-weight: 500;
letter-spacing: 0.2px; letter-spacing: 0.2px;
text-transform: uppercase; text-transform: uppercase;
@ -953,6 +953,10 @@ make sure this only happens on large viewports / desktop-ish devices.
text-transform: uppercase; text-transform: uppercase;
} }
.post-full-tags a {
color: var(--brand);
}
.post-full-meta-date { .post-full-meta-date {
color: var(--midgrey); color: var(--midgrey);
font-size: 1.2rem; font-size: 1.2rem;
@ -1017,7 +1021,7 @@ make sure this only happens on large viewports / desktop-ish devices.
.post-full-content { .post-full-content {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
padding: 0 170px 6vw; padding: 0 170px 3vw;
min-height: 230px; min-height: 230px;
font-family: Georgia, serif; font-family: Georgia, serif;
font-size: 2.0rem; font-size: 2.0rem;
@ -1090,9 +1094,9 @@ make sure this only happens on large viewports / desktop-ish devices.
} }
.post-full-content a { .post-full-content a {
color: var(--darkgrey); color: var(--brand);
word-break: break-word; word-break: break-word;
box-shadow: var(--darkgrey) 0 -1px 0 inset; box-shadow: var(--brand) 0 -1px 0 inset;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
@ -1168,8 +1172,8 @@ Usage (In Ghost editor):
.post-full-content blockquote { .post-full-content blockquote {
margin: 0 0 1.5em; margin: 0 0 1.5em;
padding: 0 1.5em; padding: 0 1em;
border-left: color-mod(var(--blue)) 3px solid; border-left: var(--brand) 4px solid;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
.post-full-content blockquote { .post-full-content blockquote {
@ -1693,17 +1697,22 @@ Usage (In Ghost editor):
.subscribe-form { .subscribe-form {
margin: 1.5em 0; margin: 1.5em 0;
padding: 6.5vw 7vw 8vw; padding: 6.5vw 7vw 8vw;
border: color-mod(var(--lightgrey) l(+10%)) 1px solid;
text-align: center; text-align: center;
background: linear-gradient(color-mod(var(--whitegrey) l(+6%)), color-mod(var(--whitegrey) l(+4%))); background-color: #f4f8fb;
border-radius: 3px; }
.post-full .subscribe-form {
max-width: 700px;
margin: 0 auto 1.5em;
padding: 4vw 7vw 5vw;
border-top: 4px solid var(--brand);
} }
.subscribe-form-title { .subscribe-form-title {
margin: 0 0 3px 0; margin: 0 0 3px 0;
padding: 0; padding: 0;
color: var(--darkgrey); color: var(--darkgrey);
font-size: 3.5rem; font-size: 3.2rem;
line-height: 1; line-height: 1;
font-weight: 600; font-weight: 600;
} }
@ -1735,7 +1744,7 @@ Usage (In Ghost editor):
width: 100%; width: 100%;
border: color-mod(var(--lightgrey) l(+7%)) 1px solid; border: color-mod(var(--lightgrey) l(+7%)) 1px solid;
color: var(--midgrey); color: var(--midgrey);
font-size: 1.8rem; font-size: 1.6rem;
line-height: 1em; line-height: 1em;
font-weight: normal; font-weight: normal;
user-select: text; user-select: text;
@ -1762,12 +1771,7 @@ Usage (In Ghost editor):
line-height: 39px; line-height: 39px;
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
background: linear-gradient( background: color-mod(var(--darkgrey));
color-mod(var(--blue) whiteness(+7%)),
color-mod(var(--blue) lightness(-7%) saturation(-10%)) 60%,
color-mod(var(--blue) lightness(-7%) saturation(-10%)) 90%,
color-mod(var(--blue) lightness(-4%) saturation(-10%))
);
border-radius: 5px; border-radius: 5px;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;

View File

@ -14,6 +14,14 @@
{{!-- Styles'n'Scripts --}} {{!-- Styles'n'Scripts --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" /> <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
{{#if @site.accent_color}}
<style>
:root {
--brand: {{@site.accent_color}};
}
</style>
{{/if}}
{{!-- This tag outputs SEO meta+structured data and other important settings --}} {{!-- This tag outputs SEO meta+structured data and other important settings --}}
{{ghost_head}} {{ghost_head}}