mirror of
https://github.com/GenZmeY/casper-i18n.git
synced 2025-07-12 16:56:06 +00:00
Compare commits
55 Commits
Author | SHA1 | Date | |
---|---|---|---|
de91a4006b | |||
1c3803352f | |||
7d9c5ea1fc | |||
1196a13aef | |||
1c092c7be0 | |||
834f0bc4ff | |||
6f46594d36 | |||
ede6b03afa | |||
31025f2f15 | |||
dfd94ece96 | |||
8f6f4a962b | |||
c4f631b28d | |||
dd9d027709 | |||
1a3dd91f81 | |||
01c46dd225 | |||
8fda6ac74f | |||
c1443a6e04 | |||
cd4563935a | |||
53c6d32849 | |||
2f45eda1ca | |||
cfbb7842a9 | |||
6f5138dcd2 | |||
6c04f651aa | |||
f81730e108 | |||
c06a731384 | |||
2773ac926a | |||
cc59624ba4 | |||
6b42e9535c | |||
bc38e7df61 | |||
ab2a8261d7 | |||
ffea9590ea | |||
d32e9db4cb | |||
88666559f6 | |||
c94651d8fb | |||
5d01cb7a7c | |||
4f1c76f2e7 | |||
dd02a12258 | |||
e587980ccd | |||
b071548965 | |||
acc6896393 | |||
025fa6ea80 | |||
1b86190c4d | |||
37d7d0b4f0 | |||
329dfef410 | |||
baea6bb2fd | |||
dffc9f3cb3 | |||
7f42eaabfe | |||
dcfddacfa1 | |||
031ac1fb40 | |||
9339635abd | |||
0d3bafde1e | |||
7af816a48e | |||
a5dcaf6cd5 | |||
e59dcaa256 | |||
8b35959ff6 |
2
LICENSE
2
LICENSE
@ -1,4 +1,4 @@
|
||||
Copyright (c) 2013-2015 Ghost Foundation
|
||||
Copyright (c) 2013-2016 Ghost Foundation
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
|
@ -6,7 +6,7 @@ To download, visit the [releases](https://github.com/TryGhost/Casper/releases) p
|
||||
|
||||
## Copyright & License
|
||||
|
||||
Copyright (c) 2013-2015 Ghost Foundation - Released under the MIT License.
|
||||
Copyright (c) 2013-2016 Ghost Foundation - Released under the MIT License.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
|
@ -11,12 +11,13 @@
|
||||
4. General
|
||||
5. Single Post
|
||||
6. Tag Archive
|
||||
7. Third Party Elements
|
||||
8. Pagination
|
||||
9. Footer
|
||||
10. Media Queries (Tablet)
|
||||
11. Media Queries (Mobile)
|
||||
12. Animations
|
||||
7. Read Next
|
||||
8. Third Party Elements
|
||||
9. Pagination
|
||||
10. Footer
|
||||
11. Media Queries (Tablet)
|
||||
12. Media Queries (Mobile)
|
||||
13. Animations
|
||||
|
||||
*/
|
||||
|
||||
@ -106,11 +107,11 @@ table { border-collapse: collapse; border-spacing: 0; }
|
||||
/* Import the font file with the icons in it */
|
||||
@font-face {
|
||||
font-family: "casper-icons";
|
||||
src:url("../fonts/casper-icons.eot");
|
||||
src:url("../fonts/casper-icons.eot?#iefix") format("embedded-opentype"),
|
||||
url("../fonts/casper-icons.woff") format("woff"),
|
||||
url("../fonts/casper-icons.ttf") format("truetype"),
|
||||
url("../fonts/casper-icons.svg#icons") format("svg");
|
||||
src:url("../fonts/casper-icons.eot?v=1");
|
||||
src:url("../fonts/casper-icons.eot?v=1#iefix") format("embedded-opentype"),
|
||||
url("../fonts/casper-icons.woff?v=1") format("woff"),
|
||||
url("../fonts/casper-icons.ttf?v=1") format("truetype"),
|
||||
url("../fonts/casper-icons.svg?v=1#icons") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@ -160,6 +161,14 @@ table { border-collapse: collapse; border-spacing: 0; }
|
||||
.icon-link:before {
|
||||
content: "\f608";
|
||||
}
|
||||
.icon-menu:before {
|
||||
content: "\f609";
|
||||
}
|
||||
/*
|
||||
IMPORTANT: When making any changes to the icon font, be sure to increment
|
||||
the version number by 1 in the @font-face rule. `?v=1` becomes `?v=2`
|
||||
This forces browsers to download the new font file.
|
||||
*/
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
@ -324,7 +333,7 @@ blockquote cite {
|
||||
blockquote cite a { font-weight: normal; }
|
||||
|
||||
mark {
|
||||
background-color: #FFC336;
|
||||
background-color: #fdffb6;
|
||||
}
|
||||
|
||||
code, tt {
|
||||
@ -352,7 +361,7 @@ pre {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre code, tt {
|
||||
pre code, pre tt {
|
||||
font-size: inherit;
|
||||
white-space: pre-wrap;
|
||||
background: transparent;
|
||||
@ -476,9 +485,12 @@ margin on the iframe, cause it breaks stuff. */
|
||||
}
|
||||
|
||||
body.nav-opened .site-wrapper {
|
||||
overflow-x: hidden;
|
||||
-webkit-transform: translate3D(-240px, 0, 0);
|
||||
-ms-transform: translate3D(-240px, 0, 0);
|
||||
transform: translate3D(-240px, 0, 0);
|
||||
-webkit-transition: -webkit-transform 0.3s ease;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
@ -550,9 +562,9 @@ body.nav-closed .nav {
|
||||
|
||||
body.nav-opened .nav {
|
||||
opacity: 1;
|
||||
-webkit-transition: -webkit-transform 0.5s ease,
|
||||
-webkit-transition: -webkit-transform 0.3s ease,
|
||||
opacity 0s ease 0s;
|
||||
transition: -webkit-transform 0.5s ease,
|
||||
transition: transform 0.3s ease,
|
||||
opacity 0s ease 0s;
|
||||
-webkit-transform: translate3D(0, 0, 0);
|
||||
-ms-transform: translate3D(0, 0, 0);
|
||||
@ -683,7 +695,7 @@ body.nav-opened .nav {
|
||||
right: 30px;
|
||||
height: 38px;
|
||||
padding: 0 20px;
|
||||
color: #111 !important;
|
||||
color: #111 !important; /* Overides `.nav a:link, .nav a:visited` colour */
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
@ -751,12 +763,12 @@ body.nav-opened .nav {
|
||||
display: none
|
||||
}
|
||||
|
||||
/* Appears in the top right corner of your home page */
|
||||
/* Appears in the top left corner of your home page */
|
||||
.blog-logo {
|
||||
display: block;
|
||||
float: left;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
background: none !important; /* Makes sure there is never a background */
|
||||
border: none !important; /* Makes sure there is never a border */
|
||||
}
|
||||
|
||||
.blog-logo img {
|
||||
@ -777,37 +789,63 @@ body.nav-opened .nav {
|
||||
float: right;
|
||||
height: 38px;
|
||||
padding: 0 15px;
|
||||
border: #bfc8cd 1px solid;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
opacity: 1;
|
||||
color: #9EABB3;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
line-height: 35px;
|
||||
white-space: nowrap;
|
||||
border-radius: 3px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
transition: all 0.6s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.menu-button:before {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-right: 6px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.menu-button:hover {
|
||||
background: #fff;
|
||||
}
|
||||
.menu-button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.menu-button .burger {
|
||||
font-size: 12px;
|
||||
margin-right: 6px;
|
||||
|
||||
/* When the navigation is closed */
|
||||
.nav-closed .menu-button {
|
||||
color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.nav-closed .menu-button:hover {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
body.nav-opened .menu-button {
|
||||
/* When the navigation is closed and there is no cover image */
|
||||
.nav-closed .no-cover .menu-button {
|
||||
border-color: #BFC8CD;
|
||||
color: #9EABB3;
|
||||
}
|
||||
.nav-closed .no-cover .menu-button:hover {
|
||||
border-color: #555;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* When the navigation is opened */
|
||||
.nav-opened .menu-button {
|
||||
padding: 0 12px;
|
||||
background: #111 !important;
|
||||
border-color: #111 !important;
|
||||
color: #fff !important;
|
||||
background: #111;
|
||||
border-color: #111;
|
||||
color: #fff;
|
||||
-webkit-transform: translate3D(94px, 0, 0);
|
||||
-ms-transform: translate3D(94px, 0, 0);
|
||||
transform: translate3D(94px, 0, 0);
|
||||
transition: all 0.4s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
body.nav-opened .menu-button .word {
|
||||
|
||||
.nav-opened .menu-button .word {
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@ -822,31 +860,10 @@ body.nav-opened .menu-button .word {
|
||||
border: none;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
|
||||
}
|
||||
.no-cover .main-nav.overlay,
|
||||
.no-cover .menu-button {
|
||||
.no-cover .main-nav.overlay {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.main-nav.overlay a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-nav.overlay .menu-button {
|
||||
border-color: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
.main-nav.overlay a:hover {
|
||||
color: #222;
|
||||
border-color: #fff;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Add a border to the buttons on hover */
|
||||
.menu-button:hover {
|
||||
border-color: #555;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* The details of your blog. Defined in ghost/settings/ */
|
||||
.page-title {
|
||||
margin: 10px 0 10px 0;
|
||||
@ -869,7 +886,7 @@ body.nav-opened .menu-button .word {
|
||||
|
||||
.no-cover.main-header {
|
||||
min-height: 160px;
|
||||
max-height: 40%;
|
||||
max-height: 40vh;
|
||||
background: #f5f8fa;
|
||||
}
|
||||
|
||||
@ -881,11 +898,6 @@ body.nav-opened .menu-button .word {
|
||||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.no-cover .main-nav.overlay .menu-button {
|
||||
color: rgba(0,0,0,0.4);
|
||||
border-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Add subtle load-in animation for content on the home page */
|
||||
.home-template .page-title {
|
||||
-webkit-animation: fade-in-down 0.6s;
|
||||
@ -909,10 +921,6 @@ body.nav-opened .menu-button .word {
|
||||
padding-bottom: 4rem;
|
||||
border-bottom: #EBF2F6 1px solid;
|
||||
word-wrap: break-word;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
/* Add a little circle in the middle of the border-bottom on our .post
|
||||
@ -1052,8 +1060,9 @@ body:not(.post-template) .post-title {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Stop .full-img from creating horizontal scroll - slight hack due to
|
||||
imperfections with browser width % calculations and rounding */
|
||||
/* Stop elements, such as img wider than the post content, from
|
||||
creating horizontal scroll - slight hack due to imperfections
|
||||
with browser width % calculations and rounding */
|
||||
.post-template .content {
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -1070,23 +1079,43 @@ body:not(.post-template) .post-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Keep images centred and within the bounds of the post-width */
|
||||
/* Keep images centered, and allow images wider than the main
|
||||
text column to break out. */
|
||||
.post-content img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-width: 126%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
padding: 0.6em 0;
|
||||
/* Centers an image by (1) pushing its left edge to the
|
||||
center of its container and (2) shifting the entire image
|
||||
in the opposite direction by half its own width.
|
||||
Works for images that are larger than their containers. */
|
||||
position: relative;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%); /* for Safari and iOS */
|
||||
-ms-transform: translateX(-50%); /* for IE9 */
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* Break out larger images to be wider than the main text column
|
||||
the class is applied with jQuery */
|
||||
.post-content .full-img {
|
||||
width: 126%;
|
||||
max-width: none;
|
||||
margin: 0 -13%;
|
||||
.footnotes {
|
||||
font-style: italic;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.footnotes li {
|
||||
margin: 0.6rem 0;
|
||||
}
|
||||
|
||||
.footnotes p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footnotes p a:last-child {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* The author credit area after the post */
|
||||
.post-footer {
|
||||
position: relative;
|
||||
@ -1157,8 +1186,14 @@ body:not(.post-template) .post-title {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-footer .share a:hover {
|
||||
color: #50585D;
|
||||
.post-footer .share .icon-twitter:hover {
|
||||
color: #55acee;
|
||||
}
|
||||
.post-footer .share .icon-facebook:hover {
|
||||
color: #3b5998;
|
||||
}
|
||||
.post-footer .share .icon-google-plus:hover {
|
||||
color: #dd4b39;
|
||||
}
|
||||
|
||||
|
||||
@ -1294,14 +1329,141 @@ body:not(.post-template) .post-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
7. Third Party Elements - Embeds from other services
|
||||
7. Read More - Next/Prev Post Links
|
||||
========================================================================== */
|
||||
|
||||
.read-next {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: stretch;
|
||||
-webkit-align-items: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.read-next-story {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
min-width: 50%;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #222 no-repeat center center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
.read-next-story:hover:before {
|
||||
background: rgba(0,0,0,0.8);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.read-next-story:hover .post:before {
|
||||
color: #222;
|
||||
background: #fff;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.read-next-story:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.read-next-story .post {
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.read-next-story .post:before {
|
||||
content: "Read This Next";
|
||||
padding: 4px 10px 5px;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.1rem;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
color: rgba(255,255,255,0.8);
|
||||
border: rgba(255,255,255,0.5) 1px solid;
|
||||
border-radius: 4px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.read-next-story.prev .post:before {
|
||||
content: "You Might Enjoy";
|
||||
}
|
||||
|
||||
.read-next-story h2 {
|
||||
margin-top: 1rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.read-next-story p {
|
||||
margin: 0;
|
||||
color: rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
/* Special styles for posts with no cover images */
|
||||
.read-next-story.no-cover {
|
||||
background: #f5f8fa;
|
||||
}
|
||||
|
||||
.read-next-story.no-cover:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.read-next-story.no-cover .post:before {
|
||||
color: rgba(0,0,0,0.5);
|
||||
border-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.read-next-story.no-cover h2 {
|
||||
color: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.read-next-story.no-cover p {
|
||||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* if there are two posts without covers, put a border between them */
|
||||
.read-next-story.no-cover + .read-next-story.no-cover {
|
||||
border-left: rgba(0,0,100,0.04) 1px solid;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Correctly position site-footer when next to the .read-next container */
|
||||
.read-next + .site-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
8. Third Party Elements - Embeds from other services
|
||||
========================================================================== */
|
||||
|
||||
/* Github */
|
||||
.gist table {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
text-rendering: auto;
|
||||
}
|
||||
.gist td {
|
||||
line-height: 1.4;
|
||||
@ -1315,8 +1477,9 @@ body:not(.post-template) .post-title {
|
||||
margin-bottom: 1.75em;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
8. Pagination - Tools to let you flick between pages
|
||||
9. Pagination - Tools to let you flick between pages
|
||||
========================================================================== */
|
||||
|
||||
/* The main wrapper for our pagination links */
|
||||
@ -1392,7 +1555,7 @@ body:not(.post-template) .post-title {
|
||||
|
||||
/* On page2+ make all the headers smaller */
|
||||
.archive-template .main-header {
|
||||
max-height: 30%;
|
||||
max-height: 30vh;
|
||||
}
|
||||
|
||||
/* On page2+ show extra pagination controls at the top of post list */
|
||||
@ -1402,14 +1565,13 @@ body:not(.post-template) .post-title {
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
9. Footer - The bottom of every page
|
||||
10. Footer - The bottom of every page
|
||||
========================================================================== */
|
||||
|
||||
.site-footer {
|
||||
position: relative;
|
||||
margin: 8rem 0 0 0;
|
||||
padding: 0.5rem 15px;
|
||||
border-top: #EBF2F6 1px solid;
|
||||
padding: 1rem 15px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.75em;
|
||||
@ -1423,7 +1585,7 @@ body:not(.post-template) .post-title {
|
||||
}
|
||||
|
||||
.site-footer a:hover {
|
||||
color: #50585D;
|
||||
border-bottom: #bbc7cc 1px solid;
|
||||
}
|
||||
|
||||
.poweredby {
|
||||
@ -1441,7 +1603,7 @@ body:not(.post-template) .post-title {
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
10. Media Queries - Smaller than 900px
|
||||
11. Media Queries - Smaller than 900px
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
@ -1456,7 +1618,7 @@ body:not(.post-template) .post-title {
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
min-height: 240px;
|
||||
height: 60%;
|
||||
height: 60vh;
|
||||
padding: 15% 0;
|
||||
}
|
||||
|
||||
@ -1540,12 +1702,12 @@ body:not(.post-template) .post-title {
|
||||
}
|
||||
|
||||
.post-head.main-header {
|
||||
height:45%;
|
||||
height:45vh;
|
||||
}
|
||||
|
||||
.tag-head.main-header,
|
||||
.author-head.main-header {
|
||||
height: 30%;
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.no-cover.post-head.main-header {
|
||||
@ -1557,26 +1719,44 @@ body:not(.post-template) .post-title {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.read-next {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.read-next p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.read-next-story.no-cover + .read-next-story.no-cover {
|
||||
border-top: rgba(0,0,100,0.06) 1px solid;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
11. Media Queries - Smaller than 500px
|
||||
12. Media Queries - Smaller than 500px
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
|
||||
.main-header {
|
||||
margin-bottom: 15px;
|
||||
height: 40%;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.no-cover.main-header {
|
||||
height: 30%;
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.archive-template .main-header {
|
||||
max-height: 20%;
|
||||
max-height: 20vh;
|
||||
min-height: 160px;
|
||||
padding: 10% 0;
|
||||
}
|
||||
@ -1597,7 +1777,7 @@ body:not(.post-template) .post-title {
|
||||
.menu-button {
|
||||
padding: 0 5px;
|
||||
border-radius: 0;
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
color: #2e2e2e;
|
||||
background: transparent;
|
||||
}
|
||||
@ -1607,8 +1787,8 @@ body:not(.post-template) .post-title {
|
||||
background: none;
|
||||
}
|
||||
body.nav-opened .menu-button {
|
||||
background: none !important;
|
||||
border: transparent !important;
|
||||
background: none;
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
.main-nav.overlay a:hover {
|
||||
@ -1726,23 +1906,13 @@ body:not(.post-template) .post-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.post-template .post {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-template .site-footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.post-content img {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post-content .full-img {
|
||||
width: auto;
|
||||
width: calc(100% + 32px); /* expand with to image + margins */
|
||||
margin: 0 -16px; /* get rid of margins */
|
||||
min-width: 0;
|
||||
max-width: 112%; /* fallback when calc doesn't work */
|
||||
}
|
||||
@ -1801,12 +1971,12 @@ body:not(.post-template) .post-title {
|
||||
}
|
||||
|
||||
.post-head.main-header {
|
||||
height: 30%;
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.tag-head.main-header,
|
||||
.author-head.main-header {
|
||||
height: 20%;
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
.author-profile .author-image {
|
||||
@ -1821,11 +1991,20 @@ body:not(.post-template) .post-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.read-next {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: -37px;
|
||||
}
|
||||
|
||||
.read-next .post {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
12. Animations
|
||||
13. Animations
|
||||
========================================================================== */
|
||||
|
||||
/* Used to fade in title/desc on the home page */
|
||||
|
Binary file not shown.
@ -16,4 +16,5 @@
|
||||
<glyph unicode="" d="M435.2 454.4h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-435.2h102.4v435.2c0 14.131-11.443 25.6-25.6 25.6zM281.6 300.8h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-281.6h102.4v281.6c0 14.131-11.443 25.6-25.6 25.6zM128 147.2h-56.32c-14.131 0-20.48-11.443-20.48-25.6v-128h102.4v128c0 14.157-11.469 25.6-25.6 25.6z" />
|
||||
<glyph unicode="" d="M256 428.8c-70.707 0-128-57.319-128-128 0-122.214 128-281.6 128-281.6s128 159.386 128 281.6c0 70.681-57.293 128-128 128zM256 230.144c-38.169 0-69.12 30.951-69.12 69.12s30.951 69.12 69.12 69.12 69.12-30.951 69.12-69.12-30.95-69.12-69.12-69.12z" />
|
||||
<glyph unicode="" d="M201.19 103.834l-20.736-20.582c-17.971-17.792-47.181-17.817-65.126 0-8.627 8.576-13.363 19.917-13.363 32.026s4.761 23.475 13.363 32.051l76.288 75.699c15.795 15.693 45.542 38.759 67.226 17.255 9.959-9.881 26.035-9.805 35.891 0.128 9.882 9.933 9.83 26.010-0.128 35.891-36.839 36.557-91.315 29.798-138.752-17.255l-76.288-75.699c-18.279-18.176-28.365-42.343-28.365-68.070 0-25.702 10.087-49.869 28.391-68.045 18.841-18.714 43.571-28.032 68.301-28.032s49.511 9.318 68.352 28.032l20.736 20.608c9.958 9.882 10.010 25.959 0.128 35.865-9.881 9.933-25.958 9.984-35.917 0.128zM432.409 397.85c-39.577 39.27-94.899 41.395-131.558 5.043l-25.831-25.626c-9.959-9.882-10.035-25.933-0.154-35.891 9.907-9.958 25.959-10.010 35.891-0.128l25.83 25.625c18.969 18.841 43.827 11.034 60.058-5.043 8.627-8.55 13.363-19.942 13.363-32.026 0-12.109-4.762-23.475-13.363-32.026l-81.408-80.742c-37.197-36.915-54.682-19.61-62.131-12.211-9.958 9.882-26.010 9.805-35.865-0.128-9.881-9.959-9.831-26.035 0.128-35.891 17.075-16.947 36.608-25.344 57.037-25.344 25.037 0 51.481 12.595 76.621 37.555l81.382 80.743c18.304 18.151 28.39 42.317 28.39 68.019s-10.087 49.894-28.39 68.070z" />
|
||||
<glyph unicode="" d="M64 362.667h384q8.834 0 15.084-6.25t6.25-15.083-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.083 15.084 6.25zM64 106.667h384q8.834 0 15.084-6.25t6.25-15.084-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.084 15.084 6.25zM64 234.667h384q8.834 0 15.084-6.25t6.25-15.084-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.084 15.084 6.25z" />
|
||||
</font></defs></svg>
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
Binary file not shown.
@ -3,60 +3,16 @@
|
||||
*/
|
||||
|
||||
/* globals jQuery, document */
|
||||
(function ($, sr, undefined) {
|
||||
(function ($, undefined) {
|
||||
"use strict";
|
||||
|
||||
var $document = $(document),
|
||||
|
||||
// debouncing function from John Hann
|
||||
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
|
||||
debounce = function (func, threshold, execAsap) {
|
||||
var timeout;
|
||||
|
||||
return function debounced () {
|
||||
var obj = this, args = arguments;
|
||||
function delayed () {
|
||||
if (!execAsap) {
|
||||
func.apply(obj, args);
|
||||
}
|
||||
timeout = null;
|
||||
}
|
||||
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
} else if (execAsap) {
|
||||
func.apply(obj, args);
|
||||
}
|
||||
|
||||
timeout = setTimeout(delayed, threshold || 100);
|
||||
};
|
||||
};
|
||||
var $document = $(document);
|
||||
|
||||
$document.ready(function () {
|
||||
|
||||
var $postContent = $(".post-content");
|
||||
$postContent.fitVids();
|
||||
|
||||
function updateImageWidth() {
|
||||
var $this = $(this),
|
||||
contentWidth = $postContent.outerWidth(), // Width of the content
|
||||
imageWidth = this.naturalWidth; // Original image resolution
|
||||
|
||||
if (imageWidth >= contentWidth) {
|
||||
$this.addClass('full-img');
|
||||
} else {
|
||||
$this.removeClass('full-img');
|
||||
}
|
||||
}
|
||||
|
||||
var $img = $("img").on('load', updateImageWidth);
|
||||
function casperFullImg() {
|
||||
$img.each(updateImageWidth);
|
||||
}
|
||||
|
||||
casperFullImg();
|
||||
$(window).smartresize(casperFullImg);
|
||||
|
||||
$(".scroll-down").arctic_scroll();
|
||||
|
||||
$(".menu-button, .nav-cover, .nav-close").on("click", function(e){
|
||||
@ -66,9 +22,6 @@
|
||||
|
||||
});
|
||||
|
||||
// smartresize
|
||||
jQuery.fn[sr] = function(fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
|
||||
|
||||
// Arctic Scroll by Paul Adam Davis
|
||||
// https://github.com/PaulAdamDavis/Arctic-Scroll
|
||||
$.fn.arctic_scroll = function (options) {
|
||||
@ -100,4 +53,4 @@
|
||||
});
|
||||
|
||||
};
|
||||
})(jQuery, 'smartresize');
|
||||
})(jQuery);
|
||||
|
@ -7,9 +7,9 @@
|
||||
{{#author}}
|
||||
<header class="main-header author-head {{#if cover}}" style="background-image: url({{cover}}){{else}}no-cover{{/if}}">
|
||||
<nav class="main-nav overlay clearfix">
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
|
||||
{{#if @blog.navigation}}
|
||||
<a class="menu-button" href="#"><span class="burger">☰</span><span class="word">Menu</span></a>
|
||||
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
</header>
|
||||
|
@ -37,11 +37,13 @@
|
||||
|
||||
</div>
|
||||
|
||||
{{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}}
|
||||
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
{{! Ghost outputs important scripts and data with this tag }}
|
||||
{{ghost_foot}}
|
||||
|
||||
{{! The main JavaScript file for Casper }}
|
||||
<script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
|
||||
{{! The main JavaScript file for Casper }}
|
||||
<script type="text/javascript" src="{{asset "js/index.js"}}"></script>
|
||||
|
||||
</body>
|
||||
|
@ -4,9 +4,9 @@
|
||||
{{! The big featured header }}
|
||||
<header class="main-header {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
|
||||
<nav class="main-nav overlay clearfix">
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
|
||||
{{#if @blog.navigation}}
|
||||
<a class="menu-button" href="#"><span class="burger">☰</span><span class="word">Menu</span></a>
|
||||
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
<div class="vertical">
|
||||
|
@ -1,4 +1,4 @@
|
||||
{
|
||||
"name": "Casper",
|
||||
"version": "1.1.6"
|
||||
"version": "1.2.7"
|
||||
}
|
||||
|
4
page.hbs
4
page.hbs
@ -8,9 +8,9 @@
|
||||
|
||||
<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
|
||||
<nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
|
||||
{{#if @blog.navigation}}
|
||||
<a class="menu-button" href="#"><span class="burger">☰</span><span class="word">Menu</span></a>
|
||||
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
</header>
|
||||
|
@ -13,7 +13,7 @@
|
||||
<p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">»</a></p>
|
||||
</section>
|
||||
<footer class="post-meta">
|
||||
{{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" nopin="nopin" />{{/if}}
|
||||
{{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
|
||||
{{author}}
|
||||
{{tags prefix=" on "}}
|
||||
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
|
||||
|
25
post.hbs
25
post.hbs
@ -8,9 +8,9 @@
|
||||
|
||||
<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
|
||||
<nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
|
||||
{{#if @blog.navigation}}
|
||||
<a class="menu-button" href="#"><span class="burger">☰</span><span class="word">Menu</span></a>
|
||||
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
</header>
|
||||
@ -58,7 +58,7 @@
|
||||
|
||||
<section class="share">
|
||||
<h4>Share this post</h4>
|
||||
<a class="icon-twitter" href="https://twitter.com/share?text={{encode title}}&url={{url absolute="true"}}"
|
||||
<a class="icon-twitter" href="https://twitter.com/intent/tweet?text={{encode title}}&url={{url absolute="true"}}"
|
||||
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
|
||||
<span class="hidden">Twitter</span>
|
||||
</a>
|
||||
@ -77,4 +77,23 @@
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<aside class="read-next">
|
||||
{{#next_post}}
|
||||
<a class="read-next-story {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">
|
||||
<section class="post">
|
||||
<h2>{{title}}</h2>
|
||||
<p>{{excerpt words="19"}}…</p>
|
||||
</section>
|
||||
</a>
|
||||
{{/next_post}}
|
||||
{{#prev_post}}
|
||||
<a class="read-next-story prev {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">
|
||||
<section class="post">
|
||||
<h2>{{title}}</h2>
|
||||
<p>{{excerpt words="19"}}…</p>
|
||||
</section>
|
||||
</a>
|
||||
{{/prev_post}}
|
||||
</aside>
|
||||
|
||||
{{/post}}
|
||||
|
4
tag.hbs
4
tag.hbs
@ -4,9 +4,9 @@
|
||||
{{! If we have a tag cover, display that - else blog cover - else nothing }}
|
||||
<header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}{{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}{{/if}}">
|
||||
<nav class="main-nav overlay clearfix">
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
|
||||
{{#if @blog.navigation}}
|
||||
<a class="menu-button" href="#"><span class="burger">☰</span><span class="word">Menu</span></a>
|
||||
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
<div class="vertical">
|
||||
|
Reference in New Issue
Block a user