mirror of
https://github.com/GenZmeY/casper-i18n.git
synced 2025-07-12 16:56:06 +00:00
Compare commits
40 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4f78d99112 | |||
| f5b7b45f2e | |||
| d34ff1d32b | |||
| 73a1ab52da | |||
| 5ec77dfb31 | |||
| 269d2b5787 | |||
| d1d0bca2d8 | |||
| d92dda3523 | |||
| ca325285bf | |||
| aee9f69bb0 | |||
| a7d5c885bd | |||
| 9bc5c92628 | |||
| 0f3651c23f | |||
| d739bb52a4 | |||
| 8d17e9a452 | |||
| e4e6bb9c5a | |||
| d2375a3917 | |||
| 577b92811c | |||
| 2f385ba5f1 | |||
| b024b544e4 | |||
| 9caeb2a2e7 | |||
| 12d139aa7d | |||
| 690e1bad1f | |||
| c63804006d | |||
| 65d0104224 | |||
| ba10cb1516 | |||
| d7ca6fd2f6 | |||
| 10f11bb14f | |||
| 7d4f93bf23 | |||
| 11f61782ad | |||
| fd108b1b40 | |||
| 33005666ca | |||
| 1767ca59b8 | |||
| 5cafa756ef | |||
| 08e5cbe021 | |||
| 615d8a9001 | |||
| f08f07fd7e | |||
| 2565c16916 | |||
| 4b66223bb3 | |||
| 35e91ecee9 |
17
.editorconfig
Normal file
17
.editorconfig
Normal file
@ -0,0 +1,17 @@
|
||||
# http://editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.hbs]
|
||||
insert_final_newline = false
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
19
.github/ISSUE_TEMPLATE.md
vendored
Normal file
19
.github/ISSUE_TEMPLATE.md
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
Do you need help or have a question? Please come chat in Slack: https://ghost.org/slack 👫.
|
||||
|
||||
If you're filing a bug 🐛, please include the following information:
|
||||
|
||||
### Screenshot
|
||||
|
||||
![]()
|
||||
|
||||
### Steps to Reproduce
|
||||
|
||||
1. This is the first step
|
||||
2. This may be the post content used to cause an issue...
|
||||
|
||||
### Technical details
|
||||
|
||||
* Casper Version:
|
||||
* Ghost Version:
|
||||
* Browser Version:
|
||||
* OS Version:
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
@ -13,9 +13,12 @@ results
|
||||
|
||||
npm-debug.log
|
||||
node_modules
|
||||
package-lock.json
|
||||
|
||||
.idea/*
|
||||
*.iml
|
||||
projectFilesBackup
|
||||
|
||||
.DS_Store
|
||||
.DS_Store
|
||||
|
||||
dist/
|
||||
|
||||
12
README.md
12
README.md
@ -34,12 +34,18 @@ One really neat trick is that you can also create custom one-off templates just
|
||||
|
||||
Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node and Gulp installed globally. After that, from the theme's root directory:
|
||||
|
||||
`$ npm install`
|
||||
|
||||
`$ gulp`
|
||||
```bash
|
||||
$ npm install
|
||||
$ gulp
|
||||
```
|
||||
|
||||
Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.
|
||||
|
||||
The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site.
|
||||
|
||||
```bash
|
||||
$ gulp zip
|
||||
```
|
||||
|
||||
# PostCSS Features Used
|
||||
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
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:#3c484e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.5rem;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 #e3e9ed}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:1em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}li{margin:.5em 0;padding-left:.5em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171a;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 #e5eff5}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:#26a8ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:700;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5rem;font-weight:700}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size: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}
|
||||
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:#3c484e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.5rem;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 #e3e9ed}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}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171a;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 #e5eff5}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:#26a8ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:700;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5rem;font-weight:700}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size: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 */
|
||||
|
||||
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
240
assets/css/csscomb.json
Normal file
240
assets/css/csscomb.json
Normal file
@ -0,0 +1,240 @@
|
||||
{
|
||||
"remove-empty-rulesets": true,
|
||||
"always-semicolon": true,
|
||||
"color-case": "lower",
|
||||
"block-indent": " ",
|
||||
"color-shorthand": true,
|
||||
"element-case": "lower",
|
||||
"eof-newline": true,
|
||||
"leading-zero": true,
|
||||
"quotes": "double",
|
||||
"space-before-colon": "",
|
||||
"space-after-colon": " ",
|
||||
"space-before-combinator": " ",
|
||||
"space-after-combinator": " ",
|
||||
"space-between-declarations": "\n",
|
||||
"space-before-opening-brace": " ",
|
||||
"space-after-opening-brace": "\n",
|
||||
"space-after-selector-delimiter": "\n",
|
||||
"space-before-selector-delimiter": "",
|
||||
"space-before-closing-brace": "\n",
|
||||
"strip-spaces": true,
|
||||
"tab-size": 4,
|
||||
"unitless-zero": true,
|
||||
"sort-order": [ [
|
||||
"content",
|
||||
"visibility",
|
||||
"position",
|
||||
"top",
|
||||
"right",
|
||||
"bottom",
|
||||
"left",
|
||||
"z-index",
|
||||
"order",
|
||||
"flex",
|
||||
"flex-grow",
|
||||
"flex-shrink",
|
||||
"flex-basis",
|
||||
"align-self",
|
||||
"display",
|
||||
"flex-flow",
|
||||
"flex-direction",
|
||||
"justify-content",
|
||||
"align-items",
|
||||
"align-content",
|
||||
"flex-wrap",
|
||||
"flex-order",
|
||||
"flex-pack",
|
||||
"flex-align",
|
||||
"float",
|
||||
"clear",
|
||||
"box-sizing",
|
||||
"width",
|
||||
"height",
|
||||
"min-width",
|
||||
"min-height",
|
||||
"max-width",
|
||||
"max-height",
|
||||
"overflow",
|
||||
"overflow-x",
|
||||
"overflow-y",
|
||||
"clip",
|
||||
"margin",
|
||||
"margin-top",
|
||||
"margin-right",
|
||||
"margin-bottom",
|
||||
"margin-left",
|
||||
"padding",
|
||||
"padding-top",
|
||||
"padding-right",
|
||||
"padding-bottom",
|
||||
"padding-left",
|
||||
"outline",
|
||||
"outline-width",
|
||||
"outline-style",
|
||||
"outline-color",
|
||||
"outline-offset",
|
||||
"border",
|
||||
"border-spacing",
|
||||
"border-collapse",
|
||||
"border-width",
|
||||
"border-style",
|
||||
"border-color",
|
||||
"border-top",
|
||||
"border-top-width",
|
||||
"border-top-style",
|
||||
"border-top-color",
|
||||
"border-right",
|
||||
"border-right-width",
|
||||
"border-right-style",
|
||||
"border-right-color",
|
||||
"border-bottom",
|
||||
"border-bottom-width",
|
||||
"border-bottom-style",
|
||||
"border-bottom-color",
|
||||
"border-left",
|
||||
"border-left-width",
|
||||
"border-left-style",
|
||||
"border-left-color",
|
||||
"border-image",
|
||||
"border-image-source",
|
||||
"border-image-slice",
|
||||
"border-image-width",
|
||||
"border-image-outset",
|
||||
"border-image-repeat",
|
||||
"border-top-image",
|
||||
"border-right-image",
|
||||
"border-bottom-image",
|
||||
"border-left-image",
|
||||
"border-corner-image",
|
||||
"border-top-left-image",
|
||||
"border-top-right-image",
|
||||
"border-bottom-right-image",
|
||||
"border-bottom-left-image",
|
||||
"table-layout",
|
||||
"caption-side",
|
||||
"empty-cells",
|
||||
"list-style",
|
||||
"list-style-position",
|
||||
"list-style-type",
|
||||
"list-style-image",
|
||||
"quotes",
|
||||
"counter-increment",
|
||||
"counter-reset",
|
||||
"vertical-align",
|
||||
"stroke",
|
||||
"fill",
|
||||
"stroke-width",
|
||||
"stroke-opacity",
|
||||
"color",
|
||||
"font",
|
||||
"font-family",
|
||||
"font-size",
|
||||
"line-height",
|
||||
"font-weight",
|
||||
"font-style",
|
||||
"font-variant",
|
||||
"font-size-adjust",
|
||||
"font-stretch",
|
||||
"text-rendering",
|
||||
"font-feature-settings",
|
||||
"letter-spacing",
|
||||
"hyphens",
|
||||
"text-align",
|
||||
"text-align-last",
|
||||
"text-decoration",
|
||||
"text-emphasis",
|
||||
"text-emphasis-position",
|
||||
"text-emphasis-style",
|
||||
"text-emphasis-color",
|
||||
"text-indent",
|
||||
"text-justify",
|
||||
"text-outline",
|
||||
"text-transform",
|
||||
"text-wrap",
|
||||
"text-overflow",
|
||||
"text-overflow-ellipsis",
|
||||
"text-overflow-mode",
|
||||
"text-shadow",
|
||||
"white-space",
|
||||
"word-spacing",
|
||||
"word-wrap",
|
||||
"word-break",
|
||||
"tab-size",
|
||||
"user-select",
|
||||
"src",
|
||||
"resize",
|
||||
"cursor",
|
||||
"nav-index",
|
||||
"nav-up",
|
||||
"nav-right",
|
||||
"nav-down",
|
||||
"nav-left",
|
||||
"background",
|
||||
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
|
||||
"background-color",
|
||||
"background-image",
|
||||
"background-size",
|
||||
"background-attachment",
|
||||
"background-position",
|
||||
"background-position-x",
|
||||
"background-position-y",
|
||||
"background-clip",
|
||||
"background-origin",
|
||||
"background-repeat",
|
||||
"border-radius",
|
||||
"border-top-left-radius",
|
||||
"border-top-right-radius",
|
||||
"border-bottom-right-radius",
|
||||
"border-bottom-left-radius",
|
||||
"box-decoration-break",
|
||||
"box-shadow",
|
||||
"opacity",
|
||||
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
|
||||
"filter",
|
||||
"transition",
|
||||
"transition-delay",
|
||||
"transition-timing-function",
|
||||
"transition-duration",
|
||||
"transition-property",
|
||||
"transform",
|
||||
"transform-origin",
|
||||
"animation",
|
||||
"animation-name",
|
||||
"animation-duration",
|
||||
"animation-play-state",
|
||||
"animation-timing-function",
|
||||
"animation-delay",
|
||||
"animation-iteration-count",
|
||||
"animation-direction",
|
||||
"animation-fill-mode",
|
||||
"pointer-events",
|
||||
"unicode-bidi",
|
||||
"direction",
|
||||
"columns",
|
||||
"column-span",
|
||||
"column-width",
|
||||
"column-count",
|
||||
"column-fill",
|
||||
"column-gap",
|
||||
"column-rule",
|
||||
"column-rule-width",
|
||||
"column-rule-style",
|
||||
"column-rule-color",
|
||||
"break-before",
|
||||
"break-inside",
|
||||
"break-after",
|
||||
"page-break-before",
|
||||
"page-break-inside",
|
||||
"page-break-after",
|
||||
"orphans",
|
||||
"widows",
|
||||
"zoom",
|
||||
"max-zoom",
|
||||
"min-zoom",
|
||||
"user-zoom",
|
||||
"orientation",
|
||||
"-webkit-overflow-scrolling",
|
||||
"-ms-overflow-scrolling"
|
||||
] ]
|
||||
}
|
||||
@ -341,7 +341,7 @@ blockquote {
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 1em;
|
||||
padding-left: 1.3em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
@ -362,7 +362,7 @@ ol {
|
||||
|
||||
li {
|
||||
margin: 0.5em 0;
|
||||
padding-left: 0.5em;
|
||||
padding-left: 0.3em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
|
||||
@ -36,8 +36,8 @@ body {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
@ -51,6 +51,17 @@ body {
|
||||
/* 2. Layout - Page building blocks
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.site-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.site-main {
|
||||
z-index: 100;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* Full width page blocks */
|
||||
.outer {
|
||||
position: relative;
|
||||
@ -59,9 +70,9 @@ body {
|
||||
|
||||
/* Centered content container blocks */
|
||||
.inner {
|
||||
margin: 0 auto;
|
||||
max-width: 1040px;
|
||||
width: 100%;
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Usage:
|
||||
@ -81,12 +92,12 @@ body {
|
||||
.home-template .post-feed,
|
||||
.tag-template .post-feed,
|
||||
.author-template .post-feed {
|
||||
margin-top: -110px;
|
||||
margin-top: -70px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.home-template .site-nav {
|
||||
position: relative;
|
||||
top: -70px;
|
||||
z-index: 300;
|
||||
}
|
||||
}
|
||||
|
||||
@ -134,19 +145,18 @@ body {
|
||||
}
|
||||
|
||||
.site-header-content {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10vw 4vw;
|
||||
min-height: 200px;
|
||||
max-height: 450px;
|
||||
padding: 10vw 4vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
z-index: 10;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 3.8rem;
|
||||
@ -158,6 +168,7 @@ body {
|
||||
}
|
||||
|
||||
.site-description {
|
||||
z-index: 10;
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
font-size: 2.2rem;
|
||||
@ -181,12 +192,12 @@ body {
|
||||
|
||||
.site-nav {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
z-index: 300;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
overflow-y: hidden;
|
||||
height: 40px;
|
||||
overflow-y: hidden;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@ -199,7 +210,6 @@ body {
|
||||
padding-bottom: 80px;
|
||||
letter-spacing: 0.4px;
|
||||
white-space: nowrap;
|
||||
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-scrolling: touch;
|
||||
}
|
||||
@ -216,6 +226,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
margin-right: 24px;
|
||||
padding: 11px 0;
|
||||
color: #fff;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1em;
|
||||
@ -337,19 +348,19 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||
}
|
||||
|
||||
.rss-button svg {
|
||||
margin-bottom: 1px;
|
||||
height: 2.1rem;
|
||||
margin-bottom: 1px;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.site-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.site-nav-left {
|
||||
padding-left: 4vw;
|
||||
margin-right: 0;
|
||||
padding-left: 4vw;
|
||||
}
|
||||
.site-nav-right {
|
||||
display: none;
|
||||
@ -362,7 +373,6 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||
|
||||
.post-feed {
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -20px;
|
||||
@ -373,9 +383,9 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||
flex: 1 1 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 300px;
|
||||
overflow: hidden;
|
||||
margin: 0 20px 40px;
|
||||
min-height: 300px;
|
||||
background: #fff center center;
|
||||
background-size: cover;
|
||||
border-radius: 5px;
|
||||
@ -391,6 +401,9 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||
|
||||
.post-card-image-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.post-card-image {
|
||||
@ -442,10 +455,12 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||
}
|
||||
|
||||
.author-profile-image {
|
||||
margin-right: 5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-right: 5px;
|
||||
border-radius: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.post-card-author {
|
||||
@ -470,6 +485,7 @@ The first (most recent) post in the list is styled to be bigger than the others
|
||||
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image {
|
||||
@ -533,11 +549,16 @@ The first (most recent) post in the list is styled to be bigger than the others
|
||||
/* ^ Required to make .post-full-content:before/after z-index stacking work */
|
||||
|
||||
.post-full-header {
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
padding: 6vw 3vw 3vw;
|
||||
max-width: 1040px;
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.post-full-header {
|
||||
padding: 14vw 3vw 10vw;
|
||||
}
|
||||
}
|
||||
|
||||
.post-full-meta {
|
||||
display: flex;
|
||||
@ -564,8 +585,8 @@ The first (most recent) post in the list is styled to be bigger than the others
|
||||
}
|
||||
|
||||
.post-full-image {
|
||||
margin: 0 -10vw -165px;
|
||||
height: 800px;
|
||||
margin: 0 -10vw -165px;
|
||||
background: var(--lightgrey) center center;
|
||||
background-size: cover;
|
||||
border-radius: 5px;
|
||||
@ -573,8 +594,8 @@ The first (most recent) post in the list is styled to be bigger than the others
|
||||
|
||||
@media (max-width: 1170px) {
|
||||
.post-full-image {
|
||||
margin: 0 -4vw -100px;
|
||||
height: 600px;
|
||||
margin: 0 -4vw -100px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@ -587,9 +608,9 @@ The first (most recent) post in the list is styled to be bigger than the others
|
||||
|
||||
.post-full-content {
|
||||
position: relative;
|
||||
min-height: 230px;
|
||||
margin: 0 auto;
|
||||
padding: 70px 100px 0;
|
||||
min-height: 230px;
|
||||
font-family: Georgia, serif;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.6em;
|
||||
@ -651,22 +672,31 @@ The first (most recent) post in the list is styled to be bigger than the others
|
||||
max-width: 920px;
|
||||
}
|
||||
|
||||
.post-full-content p,
|
||||
.post-full-content ul,
|
||||
.post-full-content ol,
|
||||
.post-full-content dl,
|
||||
.post-full-content pre,
|
||||
.post-full-content h1,
|
||||
.post-full-content h2,
|
||||
.post-full-content h3,
|
||||
.post-full-content h4,
|
||||
.post-full-content h5,
|
||||
.post-full-content h6,
|
||||
.post-full-content p,
|
||||
.post-full-content ul,
|
||||
.post-full-content ol,
|
||||
.post-full-content dl,
|
||||
.post-full-content pre,
|
||||
.post-full-content blockquote,
|
||||
.post-full-comments,
|
||||
.footnotes {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.post-full-content li {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.post-full-content li p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post-template .kg-card-markdown > p:first-child {
|
||||
font-size: 1.25em;
|
||||
line-height: 1.5em;
|
||||
@ -699,8 +729,8 @@ The first (most recent) post in the list is styled to be bigger than the others
|
||||
.post-full-content img,
|
||||
.post-full-content video {
|
||||
display: block;
|
||||
margin: 1.5em auto;
|
||||
max-width: 1040px;
|
||||
margin: 1.5em auto;
|
||||
}
|
||||
@media (max-width: 1040px) {
|
||||
.post-full-content img,
|
||||
@ -709,42 +739,56 @@ The first (most recent) post in the list is styled to be bigger than the others
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
If an image url has #full on the end, give it special wide styles.
|
||||
|
||||
/* Full bleed images (#full)
|
||||
Super neat trick courtesy of @JoelDrapper
|
||||
|
||||
Usage (In Ghost edtior):
|
||||
|
||||
|
||||
|
||||
*/
|
||||
.post-full-content img[src$="#full"] {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.post-full-content blockquote {
|
||||
margin: 0 0 1.5em 0;
|
||||
padding: 1.5em 0;
|
||||
border: 0;
|
||||
color: var(--blue);
|
||||
font-size: 3rem;
|
||||
line-height: 1.6em;
|
||||
text-align: center;
|
||||
|
||||
/* Image captions
|
||||
|
||||
Usage (In Ghost editor):
|
||||
|
||||
|
||||
<small>Your image caption</small>
|
||||
|
||||
*/
|
||||
.post-full-content img + br + small {
|
||||
display: block;
|
||||
margin-top: -3em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.post-full-content blockquote:before {
|
||||
content: open-quote;
|
||||
|
||||
.post-full-content iframe {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.post-full-content blockquote {
|
||||
margin: 0 0 1.5em;
|
||||
padding: 0 1.5em;
|
||||
border-left: #3eb0ef 3px solid;
|
||||
}
|
||||
|
||||
.post-full-content blockquote p {
|
||||
margin: 0;
|
||||
margin: 0 0 1em 0;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.post-full-content blockquote {
|
||||
max-width: 1060px;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
.post-full-content blockquote + blockquote {
|
||||
padding-top: 0;
|
||||
.post-full-content blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-full-content code {
|
||||
@ -757,10 +801,10 @@ Super neat trick courtesy of @JoelDrapper
|
||||
}
|
||||
|
||||
.post-full-content pre {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
margin: 1.5em 0 3em;
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
border: color(var(--darkgrey) l(-10%)) 1px solid;
|
||||
color: var(--whitegrey);
|
||||
font-size: 1.4rem;
|
||||
@ -790,9 +834,9 @@ Super neat trick courtesy of @JoelDrapper
|
||||
top: -15px;
|
||||
left: 50%;
|
||||
display: block;
|
||||
margin-left: -10px;
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
margin-left: -10px;
|
||||
background: color(var(--lightgrey) l(+10%));
|
||||
box-shadow: #fff 0 0 0 5px;
|
||||
transform: rotate(45deg);
|
||||
@ -809,27 +853,82 @@ Super neat trick courtesy of @JoelDrapper
|
||||
}
|
||||
|
||||
.post-full-content h1 {
|
||||
font-size: 5rem;
|
||||
margin: 0.5em 0 0.2em 0;
|
||||
font-size: 4.6rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.post-full-content h1 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.post-full-content h2 {
|
||||
font-size: 3.5rem;
|
||||
margin: 0.5em 0 0.2em 0;
|
||||
font-size: 3.6rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.post-full-content h2 {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.post-full-content h3 {
|
||||
font-size: 2.5rem;
|
||||
margin: 0.5em 0 0.2em 0;
|
||||
font-size: 2.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.post-full-content h3 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.post-full-content h4 {
|
||||
font-size: 1.6rem;
|
||||
margin: 0.5em 0 0.2em 0;
|
||||
font-size: 2.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.post-full-content h4 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.post-full-content h5 {
|
||||
font-size: 1.4rem;
|
||||
display: block;
|
||||
margin: 0.5em 0;
|
||||
padding: 1em 0 1.5em;
|
||||
border: 0;
|
||||
color: var(--blue);
|
||||
font-family: Georgia,serif;
|
||||
font-size: 3.2rem;
|
||||
line-height: 1.35em;
|
||||
text-align: center;
|
||||
}
|
||||
@media (min-width: 1180px) {
|
||||
.post-full-content h5 {
|
||||
width: 100vw;
|
||||
max-width: 1060px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.post-full-content h5 {
|
||||
padding: 0 0 0.5em;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.post-full-content h6 {
|
||||
font-size: 1.4rem;
|
||||
margin: 0.5em 0 0.2em 0;
|
||||
font-size: 2.3rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.post-full-content h6 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footnotes-sep {
|
||||
@ -872,60 +971,52 @@ Super neat trick courtesy of @JoelDrapper
|
||||
.post-full-content:after {
|
||||
display: none;
|
||||
}
|
||||
.post-full-content h1 {
|
||||
font-size: 2.9rem;
|
||||
}
|
||||
.post-full-content h2 {
|
||||
font-size: 2.9rem;
|
||||
}
|
||||
.post-full-content h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.post-full-content table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin: 0.5em 0 2.5em;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 1.6rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.post-full-content table {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
|
||||
background-size: 10px 100%, 10px 100%;
|
||||
background-attachment: scroll, scroll;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.post-full-content table td:first-child {
|
||||
background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.post-full-content table td:last-child {
|
||||
background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 0;
|
||||
background-size: 20px 100%;
|
||||
background-position: 100% 0;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.post-full-content table th {
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.2px;
|
||||
color: var(--darkgrey);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2px;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
background: color(var(--whitegrey) l(+4%));
|
||||
background-color: color(var(--whitegrey) l(+4%));
|
||||
}
|
||||
|
||||
.post-full-content table th,
|
||||
@ -934,16 +1025,6 @@ Super neat trick courtesy of @JoelDrapper
|
||||
border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.post-full-content table {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 7.1. Subscribe Form
|
||||
/* ---------------------------------------------------------- */
|
||||
@ -978,8 +1059,8 @@ Super neat trick courtesy of @JoelDrapper
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.subscribe-form .form-group {
|
||||
@ -988,8 +1069,8 @@ Super neat trick courtesy of @JoelDrapper
|
||||
|
||||
.subscribe-email {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: color(var(--lightgrey) l(+7%)) 1px solid;
|
||||
color: var(--midgrey);
|
||||
font-size: 1.8rem;
|
||||
@ -1009,9 +1090,9 @@ Super neat trick courtesy of @JoelDrapper
|
||||
|
||||
.subscribe-form button {
|
||||
display: inline-block;
|
||||
height: 41px;
|
||||
margin: 0 0 0 10px;
|
||||
padding: 0 20px;
|
||||
height: 41px;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
@ -1066,9 +1147,9 @@ Super neat trick courtesy of @JoelDrapper
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 840px;
|
||||
margin: 0 auto;
|
||||
padding: 3vw 0 6vw 0;
|
||||
max-width: 840px;
|
||||
}
|
||||
|
||||
.author-card {
|
||||
@ -1077,9 +1158,9 @@ Super neat trick courtesy of @JoelDrapper
|
||||
}
|
||||
|
||||
.author-card .author-profile-image {
|
||||
margin-right: 15px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.author-card-name {
|
||||
@ -1131,8 +1212,8 @@ Super neat trick courtesy of @JoelDrapper
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.post-full-comments {
|
||||
margin: 0 auto;
|
||||
max-width: 840px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
@ -1217,9 +1298,8 @@ Super neat trick courtesy of @JoelDrapper
|
||||
|
||||
.read-next-divider svg {
|
||||
width: 40px;
|
||||
fill: transparent;
|
||||
stroke: #fff;
|
||||
|
||||
fill: transparent;
|
||||
stroke-width: 0.5px;
|
||||
stroke-opacity: 0.65;
|
||||
}
|
||||
@ -1237,8 +1317,8 @@ Super neat trick courtesy of @JoelDrapper
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.read-next-card-content li {
|
||||
@ -1254,9 +1334,9 @@ Super neat trick courtesy of @JoelDrapper
|
||||
display: block;
|
||||
padding: 20px 0;
|
||||
border-bottom: rgba(255,255,255,0.3) 1px solid;
|
||||
vertical-align: top;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
vertical-align: top;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
@ -1318,6 +1398,7 @@ Super neat trick courtesy of @JoelDrapper
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--darkgrey);
|
||||
line-height: 1.1em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@ -1326,8 +1407,8 @@ Super neat trick courtesy of @JoelDrapper
|
||||
}
|
||||
|
||||
.floating-header-logo img {
|
||||
margin: 0 10px 0 0;
|
||||
max-height: 20px;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.floating-header-divider {
|
||||
@ -1378,9 +1459,9 @@ Super neat trick courtesy of @JoelDrapper
|
||||
}
|
||||
|
||||
.floating-header-share-label svg {
|
||||
margin: 0 5px 0 10px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0 5px 0 10px;
|
||||
stroke: rgba(0,0,0,0.7);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
@ -1427,6 +1508,10 @@ Super neat trick courtesy of @JoelDrapper
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
.progress::-moz-progress-bar {
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -1484,17 +1569,19 @@ Super neat trick courtesy of @JoelDrapper
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.site-header-content .author-profile-image {
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
margin: 0 0 20px 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 0 20px 0;
|
||||
box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
|
||||
}
|
||||
|
||||
.site-header-content .author-bio {
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
margin: 5px 0 10px 0;
|
||||
max-width: 600px;
|
||||
margin: 5px 0 10px 0;
|
||||
font-size: 2rem;
|
||||
line-height: 1.3em;
|
||||
font-weight: 300;
|
||||
@ -1503,6 +1590,7 @@ Super neat trick courtesy of @JoelDrapper
|
||||
}
|
||||
|
||||
.site-header-content .author-meta {
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -1645,8 +1733,8 @@ Super neat trick courtesy of @JoelDrapper
|
||||
}
|
||||
|
||||
.subscribe-overlay-description {
|
||||
margin: 0 auto 50px;
|
||||
max-width: 650px;
|
||||
margin: 0 auto 50px;
|
||||
font-family: Georgia, serif;
|
||||
font-size: 3rem;
|
||||
line-height: 1.3em;
|
||||
@ -1658,8 +1746,8 @@ Super neat trick courtesy of @JoelDrapper
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.subscribe-overlay .form-group {
|
||||
@ -1668,8 +1756,8 @@ Super neat trick courtesy of @JoelDrapper
|
||||
|
||||
.subscribe-overlay .subscribe-email {
|
||||
display: block;
|
||||
padding: 14px 20px;
|
||||
width: 100%;
|
||||
padding: 14px 20px;
|
||||
border: none;
|
||||
color: var(--midgrey);
|
||||
font-size: 2rem;
|
||||
@ -1690,9 +1778,9 @@ Super neat trick courtesy of @JoelDrapper
|
||||
|
||||
.subscribe-overlay button {
|
||||
display: inline-block;
|
||||
height: 52px;
|
||||
margin: 0 0 0 15px;
|
||||
padding: 0 25px;
|
||||
height: 52px;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 1.7rem;
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
/*jshint browser:true */
|
||||
/*!
|
||||
* FitVids 1.1
|
||||
* FitVids 1.3
|
||||
*
|
||||
* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
|
||||
*
|
||||
* Copyright 2017, Chris Coyier + Dave Rupert + Ghost Foundation
|
||||
* This is an unofficial release, ported by John O'Nolan
|
||||
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
|
||||
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
|
||||
* Released under the MIT license
|
||||
*
|
||||
*/
|
||||
|
||||
@ -21,7 +23,7 @@
|
||||
if(!document.getElementById('fit-vids-style')) {
|
||||
// appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
|
||||
var head = document.head || document.getElementsByTagName('head')[0];
|
||||
var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
|
||||
var css = '.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
|
||||
var div = document.createElement("div");
|
||||
div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
|
||||
head.appendChild(div.childNodes[1]);
|
||||
@ -74,7 +76,7 @@
|
||||
$this.attr('name', videoName);
|
||||
$.fn.fitVids._count++;
|
||||
}
|
||||
$this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
|
||||
$this.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
|
||||
$this.removeAttr('height').removeAttr('width');
|
||||
});
|
||||
});
|
||||
|
||||
56
error-404.hbs
Normal file
56
error-404.hbs
Normal file
@ -0,0 +1,56 @@
|
||||
{{!--
|
||||
This error template is used for all 404 errors, which might occur on your site.
|
||||
It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
|
||||
--}}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>{{meta_title}}</title>
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
|
||||
</head>
|
||||
<body class="error-template">
|
||||
<div class="site-wrapper">
|
||||
|
||||
<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
|
||||
<div class="inner">
|
||||
<nav class="site-nav-center">
|
||||
{{#if @blog.logo}}
|
||||
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
|
||||
{{else}}
|
||||
<a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="site-main" class="site-main outer" role="main">
|
||||
<div class="inner">
|
||||
|
||||
<section class="error-message">
|
||||
<h1 class="error-code">{{code}}</h1>
|
||||
<p class="error-description">{{message}}</p>
|
||||
<a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{#get "posts" limit="3"}}
|
||||
<aside class="outer">
|
||||
<div class="inner">
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
{{> "post-card"}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
{{/get}}
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
17
error.hbs
17
error.hbs
@ -1,5 +1,7 @@
|
||||
{{!--
|
||||
This error template is used for all 400/500 errors which might occur on your site. It's a good idea to keep this template as minimal as possible in terms of both file size and complexity. You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in this file.
|
||||
This error template is used for all 400/500 errors, except 404, which might occur on your site.
|
||||
It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
|
||||
You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in this file.
|
||||
--}}
|
||||
|
||||
<!DOCTYPE html>
|
||||
@ -56,19 +58,6 @@ This error template is used for all 400/500 errors which might occur on your sit
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{#get "posts" limit="3"}}
|
||||
<aside class="outer">
|
||||
<div class="inner">
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
{{> "post-card"}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
{{/get}}
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
14
gulpfile.js
14
gulpfile.js
@ -6,6 +6,7 @@ var livereload = require('gulp-livereload');
|
||||
var nodemon = require('gulp-nodemon');
|
||||
var postcss = require('gulp-postcss');
|
||||
var sourcemaps = require('gulp-sourcemaps');
|
||||
var zip = require('gulp-zip');
|
||||
|
||||
// postcss plugins
|
||||
var autoprefixer = require('autoprefixer');
|
||||
@ -36,7 +37,8 @@ gulp.task('css', function () {
|
||||
autoprefixer({browsers: ['last 2 versions']}),
|
||||
cssnano()
|
||||
];
|
||||
gulp.src('assets/css/*.css')
|
||||
|
||||
return gulp.src('assets/css/*.css')
|
||||
.on('error', swallowError)
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(postcss(processors))
|
||||
@ -49,6 +51,16 @@ gulp.task('watch', function () {
|
||||
gulp.watch('assets/css/**', ['css']);
|
||||
});
|
||||
|
||||
gulp.task('zip', ['css'], function() {
|
||||
var targetDir = 'dist/';
|
||||
var themeName = require('./package.json').name;
|
||||
var filename = themeName + '.zip';
|
||||
|
||||
return gulp.src(['**', '!node_modules', '!node_modules/**'])
|
||||
.pipe(zip(filename))
|
||||
.pipe(gulp.dest(targetDir));
|
||||
});
|
||||
|
||||
gulp.task('default', ['build'], function () {
|
||||
gulp.start('watch');
|
||||
});
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
"name": "casper",
|
||||
"description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
|
||||
"demo": "https://demo.ghost.io",
|
||||
"version": "2.0.1",
|
||||
"version": "2.1.3",
|
||||
"engines": {
|
||||
"ghost": ">=1.0.0"
|
||||
"ghost": ">=1.2.0"
|
||||
},
|
||||
"license": "MIT",
|
||||
"screenshots": {
|
||||
@ -43,6 +43,7 @@
|
||||
"gulp-sourcemaps": "1.6.0",
|
||||
"gulp-util": "3.0.7",
|
||||
"gulp-watch": "4.3.8",
|
||||
"gulp-zip": "4.0.0",
|
||||
"postcss-color-function": "2.0.1",
|
||||
"postcss-custom-properties": "5.0.1",
|
||||
"postcss-easy-import": "1.0.1"
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
<div class="post-card-content">
|
||||
<a class="post-card-content-link" href="{{url}}">
|
||||
<header class="post-card-header">
|
||||
{{#if tags}}
|
||||
<span class="post-card-tags">{{tags.[0].name}}</span>
|
||||
{{#if primary_tag}}
|
||||
<span class="post-card-tags">{{primary_tag.name}}</span>
|
||||
{{/if}}
|
||||
<h2 class="post-card-title">{{title}}</h2>
|
||||
</header>
|
||||
|
||||
25
post.hbs
25
post.hbs
@ -20,9 +20,9 @@ into the {body} of the default.hbs template --}}
|
||||
<header class="post-full-header">
|
||||
<section class="post-full-meta">
|
||||
<time class="post-full-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM YYYY"}}</time>
|
||||
{{#if tags}}
|
||||
<span class="date-divider">/</span> <a href="{{@blog.url}}/tag/{{tags.[0].slug}}">{{tags.[0].name}}</a>
|
||||
{{/if}}
|
||||
{{#primary_tag}}
|
||||
<span class="date-divider">/</span> <a href="{{url}}">{{name}}</a>
|
||||
{{/primary_tag}}
|
||||
</section>
|
||||
<h1 class="post-full-title">{{title}}</h1>
|
||||
</header>
|
||||
@ -101,11 +101,12 @@ into the {body} of the default.hbs template --}}
|
||||
<aside class="read-next outer">
|
||||
<div class="inner">
|
||||
<div class="read-next-feed">
|
||||
|
||||
{{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3"}}
|
||||
{{#if primary_tag}}
|
||||
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
|
||||
{{#if related_posts}}
|
||||
<article class="read-next-card"
|
||||
{{#if ../tags.[0].feature_image}}
|
||||
style="background-image: url({{../tags.[0].feature_image}})"
|
||||
{{#if ../primary_tag.feature_image}}
|
||||
style="background-image: url({{../primary_tag.feature_image}})"
|
||||
{{else}}
|
||||
{{#if @blog.cover_image}}
|
||||
style="background-image: url({{@blog.cover_image}})"{{/if}}
|
||||
@ -113,21 +114,25 @@ into the {body} of the default.hbs template --}}
|
||||
>
|
||||
<header class="read-next-card-header">
|
||||
<small class="read-next-card-header-sitetitle">— {{@blog.title}} —</small>
|
||||
<h3 class="read-next-card-header-title"><a href="{{@blog.url}}/tag/{{../tags.[0].slug}}/">{{../tags.[0].name}}</a></h3>
|
||||
{{#../primary_tag}}
|
||||
<h3 class="read-next-card-header-title"><a href="{{url}}">{{name}}</a></h3>
|
||||
{{/../primary_tag}}
|
||||
</header>
|
||||
<div class="read-next-divider">{{> "icons/infinity"}}</div>
|
||||
<div class="read-next-card-content">
|
||||
<ul>
|
||||
{{#foreach posts}}
|
||||
{{#foreach related_posts}}
|
||||
<li><a href="{{url}}">{{title}}</a></li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
</div>
|
||||
<footer class="read-next-card-footer">
|
||||
<a href="{{@blog.url}}/tag/{{../tags.[0].slug}}/">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} →</a>
|
||||
<a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} →</a>
|
||||
</footer>
|
||||
</article>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
{{/if}}
|
||||
|
||||
{{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
|
||||
{{#next_post}}
|
||||
|
||||
Reference in New Issue
Block a user