First pass on major Casper overhaul and new Multi-user support

- Introduces author.hbs page template
- Completely refactors header styling with new full-screen cover images
- Adds new, improved pagination with additional styles for archive pages
- Cleans up a fuckload of bloat and old styles
This commit is contained in:
John O'Nolan 2014-07-21 14:45:34 +02:00
parent 3db098c1e0
commit 088a867cea
8 changed files with 438 additions and 209 deletions

View File

@ -151,7 +151,15 @@ table { border-collapse: collapse; border-spacing: 0; }
.icon-arrow-left:before { .icon-arrow-left:before {
content: "\e005"; content: "\e005";
} }
.icon-stats:before {
content: "\e006";
}
.icon-location:before {
content: "\e007";
}
.icon-link:before {
content: "\e008";
}
/* ========================================================================== /* ==========================================================================
@ -196,7 +204,7 @@ h4, h5, h6 {
font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
color: #2E2E2E; color: #2E2E2E;
line-height: 1.15em; line-height: 1.15em;
margin: 0 0 0.5em 0; margin: 0 0 0.3em 0;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
} }
@ -234,7 +242,7 @@ a {
} }
a:hover { a:hover {
color: #57A3E8; color: #111;
} }
h1 a, h2 a, h3 a, h1 a, h2 a, h3 a,
@ -468,79 +476,170 @@ margin on the iframe, cause it breaks stuff. */
========================================================================== */ ========================================================================== */
/* Big cover image on the home page */ /* Big cover image on the home page */
.site-head { .main-header {
position: relative; position: relative;
display: table; display: table;
width: 100%; width: 100%;
height: 60%; height: 100%;
margin-bottom: 5rem; margin-bottom: 5rem;
text-align: center; text-align: center;
background: #303538 no-repeat center center; background: #222 no-repeat center center;
background-size: cover; background-size: cover;
} }
.blog-logo { .main-header .inner {
text-decoration: none; width: 80%;
} }
/* Yo-logo. Yolo-go. Upload one in ghost/settings/ */ .main-nav {
.blog-logo img { position: relative;
padding: 15px;
margin: 0 0 30px 0;
}
/* Appears in the top right corner of your home page */
.blog-logo {
display: block; display: block;
max-height: 100px; float: left;
background: none !important;
border: none !important;
}
.blog-logo img {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
height: 38px;
padding: 2px 0 6px 0;
width: auto; width: auto;
margin: 0 auto; }
.back-button {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
float: left;
height: 38px;
padding: 0 15px 0 10px;
border: transparent 1px solid;
color: #9EABB3;
text-align: center;
font-size: 12px;
text-transform: uppercase;
line-height: 35px;
border-radius: 3px;
transition: all ease 0.3s;
}
.back-button:before {
position: relative;
bottom: -2px;
font-size: 13px;
line-height: 0; line-height: 0;
margin-right: 8px;
}
.subscribe-button {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
float: right;
height: 38px;
padding: 0 20px;
border: transparent 1px solid;
color: #9EABB3;
text-align: center;
font-size: 12px;
text-transform: uppercase;
line-height: 35px;
border-radius: 3px;
transition: all ease 0.3s;
}
.subscribe-button:before {
font-size: 9px;
margin-right: 6px;
}
/* Special styles when overlaid on an image*/
.main-nav.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
border: none;
}
.main-nav.overlay a {
color: #fff;
}
.main-nav.overlay .back-button,
.main-nav.overlay .subscribe-button {
border-color: #fff;
}
.main-nav.overlay a:hover {
color: #222;
border-color: rgba(255,255,255,0.8);
background: rgba(255,255,255,0.8);
transition: all 0.1s ease;
}
/* Add a border to the buttons on hover */
.back-button:hover,
.subscribe-button:hover {
border-color: #bfc8cd;
color: #9EABB3;
} }
/* The details of your blog. Defined in ghost/settings/ */ /* The details of your blog. Defined in ghost/settings/ */
.blog-title { .page-title {
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
font-size: 5.6rem; font-size: 5.6rem;
letter-spacing: -1px; letter-spacing: -1px;
font-weight: 700; font-weight: 700;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
color: #fff; color: #fff;
text-shadow: 0 1px 6px rgba(0,0,0,0.1);
} }
.blog-description { .page-description {
margin: 0; margin: 0;
font-size: 2.4rem; font-size: 2.2rem;
line-height: 1.6em; line-height: 1.5em;
font-weight: 400; font-weight: 400;
font-family: "Noto Serif", serif; font-family: "Noto Serif", serif;
letter-spacing: 0; letter-spacing: 0;
color: rgba(255,255,255,0.8); color: rgba(255,255,255,0.8);
text-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.no-cover.main-header {
background: #f5f8fa;
}
.no-cover .page-title {
color: rgba(0,0,0,0.8);
}
.no-cover .page-description {
color: rgba(0,0,0,0.5);
} }
/* Add subtle load-in animation for content on the home page */ /* Add subtle load-in animation for content on the home page */
.home-template .site-head { .home-template .page-title {
-webkit-animation: fade-in-down-subtle 2s; -webkit-animation: fade-in-down 0.6s;
animation: fade-in-down-subtle 2s; animation: fade-in-down 0.6s;
}
.home-template .blog-logo img {
-webkit-animation: fade-in-down 1s;
animation: fade-in-down 1s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.home-template .blog-title {
-webkit-animation: fade-in-down 1s;
animation: fade-in-down 1s;
-webkit-animation-delay: 0.2s; -webkit-animation-delay: 0.2s;
animation-delay: 0.2s; animation-delay: 0.2s;
} }
.home-template .blog-description { .home-template .page-description {
-webkit-animation: fade-in-down 1s; -webkit-animation: fade-in-down 0.9s;
animation: fade-in-down 1s; animation: fade-in-down 0.9s;
-webkit-animation-delay: 0.1s; -webkit-animation-delay: 0.1s;
animation-delay: 0.1s; animation-delay: 0.1s;
} }
.home-template .content {
-webkit-animation: fade-in-up-subtle 2s;
animation: fade-in-up-subtle 2s;
}
/* Every post, on every page, gets this style on its <article> tag */ /* Every post, on every page, gets this style on its <article> tag */
.post { .post {
@ -645,89 +744,11 @@ margin on the iframe, cause it breaks stuff. */
line-height: 1.5em; line-height: 1.5em;
} }
/* ========================================================================== /* ==========================================================================
5. Single Post - When you click on an individual post 5. Single Post - When you click on an individual post
========================================================================== */ ========================================================================== */
.main-nav {
position: relative;
padding: 15px;
margin: 0 0 30px 0;
}
.back-button {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
float: left;
height: 40px;
padding: 0 15px 0 10px;
border: transparent 1px solid;
color: #9EABB3;
text-align: center;
font-size: 12px;
text-transform: uppercase;
line-height: 37px;
border-radius: 3px;
transition: all ease 0.3s;
}
.back-button:before {
position: relative;
bottom: -2px;
font-size: 13px;
line-height: 0;
margin-right: 8px;
}
.subscribe-button {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
float: right;
height: 40px;
padding: 0 20px;
border: transparent 1px solid;
color: #9EABB3;
text-align: center;
font-size: 12px;
text-transform: uppercase;
line-height: 37px;
border-radius: 40px;
transition: all ease 0.3s;
}
.subscribe-button:before {
font-size: 9px;
margin-right: 6px;
}
/* Special styles when overlaid on an image*/
.main-nav.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
border: none;
}
.main-nav.overlay a {
color: rgba(255,255,255,0.7);
}
.main-nav.overlay a:hover {
color: #fff;
border-color: #fff;
background: transparent;
}
/* Add a border to the buttons on hover */
.back-button:hover,
.subscribe-button:hover {
border-color: #bfc8cd;
color: #9EABB3;
}
/* Stop .full-img from creating horizontal scroll - slight hack due to /* Stop .full-img from creating horizontal scroll - slight hack due to
imperfections with browser width % calculations and rounding */ imperfections with browser width % calculations and rounding */
.post-template .content { .post-template .content {
@ -814,7 +835,7 @@ margin on the iframe, cause it breaks stuff. */
color: #9EABB3; color: #9EABB3;
} }
.author-meta a:hover { .author-meta a:hover {
color: #57A3E8; color: #111;
} }
/* Create some space to the right for the share links */ /* Create some space to the right for the share links */
@ -922,18 +943,114 @@ margin on the iframe, cause it breaks stuff. */
top: -33px; top: -33px;
} }
/* ==========================================================================
6. Author profile
========================================================================== */
.tag-head.main-header {
height: 40%;
min-height: 180px;
}
.author-head.main-header {
height: 40%;
min-height: 180px;
margin-bottom: -60px; /* Pull the author bio up to overlap the cover */
}
.author-profile {
padding-bottom: 5rem;
border-bottom: #EBF2F6 1px solid;
text-align: center;
}
/* Add a little circle in the middle of the border-bottom */
.author-profile:after {
display: block;
content: "";
width: 7px;
height: 7px;
border: #E7EEF2 1px solid;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -5px;
background: #FFF;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
box-shadow: #FFF 0 0 0 5px;
}
.author-image {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
position: relative;
width: 120px;
height: 120px;
margin: 0 auto;
border-radius: 100%;
overflow: hidden;
padding: 3px;
background: #fff;
z-index: 2;
}
.author-image .img {
display: block;
width: 114px;
height: 114px;
background-size: cover;
background-position: center center;
border-radius: 100%;
}
.author-title {
margin: 1.5rem 0 1rem;
}
.author-bio {
font-size: 1.8rem;
line-height: 1.5em;
font-weight: 200;
color: #50585D;
letter-spacing: 0;
text-indent: 0;
}
/* Location, website, and link */
.author-profile .author-meta {
margin: 2rem 0;
font-family: "Noto Serif", serif;
font-size: 1.7rem;
}
.author-profile .author-meta span {
margin-left: 2rem;
}
.author-profile .author-meta span:first-child {
margin-left: 0;
}
.author-profile .author-meta a {
text-decoration: none;
}
/* Turn off meta for page2+ to make room for extra
pagination prev/next links */
.archive-template .author-profile .author-meta {
display: none;
}
/* ========================================================================== /* ==========================================================================
7. Third Party Elements - Embeds from other services 7. Third Party Elements - Embeds from other services
========================================================================== */ ========================================================================== */
/* Github */ /* Github */
.gist table { .gist table {
margin: 0; margin: 0;
font-size: 1.4rem; font-size: 1.4rem;
} }
.gist .line-number { .gist .line-number {
min-width: 25px; min-width: 25px;
font-size: 1.1rem; font-size: 1.1rem;
@ -991,6 +1108,40 @@ margin on the iframe, cause it breaks stuff. */
border-color: #9EABB3; border-color: #9EABB3;
} }
.extra-pagination {
display: none;
border-bottom: #EBF2F6 1px solid;
}
.extra-pagination:after {
display: block;
content: "";
width: 7px;
height: 7px;
border: #E7EEF2 1px solid;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -5px;
background: #FFF;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
box-shadow: #FFF 0 0 0 5px;
}
.extra-pagination .pagination {
width: auto;
}
/* On page2+ make all the headers smaller */
.archive-template .main-header {
max-height: 30%;
}
/* On page2+ show extra pagination controls at the top of post list */
.archive-template .extra-pagination {
display: block;
}
/* ========================================================================== /* ==========================================================================
9. Footer - The bottom of every page 9. Footer - The bottom of every page
@ -999,12 +1150,13 @@ margin on the iframe, cause it breaks stuff. */
.site-footer { .site-footer {
position: relative; position: relative;
margin: 8rem 0 0 0; margin: 8rem 0 0 0;
padding: 0.5rem 35px; padding: 0.5rem 15px;
border-top: #EBF2F6 1px solid; border-top: #EBF2F6 1px solid;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-size: 1rem; font-size: 1rem;
line-height: 1.7em; line-height: 1.7em;
color: #BBC7CC; color: #BBC7CC;
background: #f5f8fa;
} }
.site-footer a { .site-footer a {
@ -1035,11 +1187,11 @@ margin on the iframe, cause it breaks stuff. */
@media only screen and (max-width: 1600px) { @media only screen and (max-width: 1600px) {
.blog-title { .page-title {
font-size: 5rem; font-size: 5rem;
} }
.blog-description { .page-description {
font-size: 2rem; font-size: 2rem;
line-height: 1.5em; line-height: 1.5em;
} }
@ -1055,7 +1207,7 @@ margin on the iframe, cause it breaks stuff. */
.post, .post,
.inner, .inner,
.tag-archive-header { .pagination {
max-width: 710px; max-width: 710px;
} }
@ -1105,21 +1257,31 @@ margin on the iframe, cause it breaks stuff. */
margin-left: 0; margin-left: 0;
} }
.site-head { .main-header {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
height: auto; height: auto;
min-height: 240px; min-height: 240px;
height: 60%;
padding: 15% 0; padding: 15% 0;
} }
.blog-title { .archive-template .main-header {
min-height: 180px;
padding: 10% 0;
}
.blog-logo img {
padding: 4px 0;
}
.page-title {
font-size: 4rem; font-size: 4rem;
letter-spacing: -1px; letter-spacing: -1px;
} }
.blog-description { .page-description {
font-size: 1.8rem; font-size: 1.8rem;
line-height: 1.5em; line-height: 1.5em;
} }
@ -1165,8 +1327,23 @@ margin on the iframe, cause it breaks stuff. */
font-size: 1.8rem; font-size: 1.8rem;
} }
.site-footer { .author-profile {
padding: 0.5rem 15px; padding-bottom: 4rem;
}
.author-profile .author-bio {
font-size: 1.6rem;
}
.author-profile .author-meta span {
display: block;
margin: 1.5rem 0;
font-size: 1.6rem;
}
.tag-head.main-header,
.author-head.main-header {
height: 30%;
} }
} }
@ -1178,8 +1355,15 @@ margin on the iframe, cause it breaks stuff. */
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.site-head { .main-header {
margin-bottom: 0; margin-bottom: 0;
height: 40%;
}
.archive-template .main-header {
max-height: 20%;
min-height: 160px;
padding: 10% 0;
} }
.main-nav { .main-nav {
@ -1188,6 +1372,14 @@ margin on the iframe, cause it breaks stuff. */
border-bottom: #e0e4e7 1px solid; border-bottom: #e0e4e7 1px solid;
} }
.blog-logo {
padding: 10px 10px;
}
.blog-logo img {
height: 26px;
}
.back-button, .back-button,
.subscribe-button { .subscribe-button {
height: 44px; height: 44px;
@ -1213,16 +1405,22 @@ margin on the iframe, cause it breaks stuff. */
.main-nav.overlay { .main-nav.overlay {
color: #fff; color: #fff;
background: rgba(0,0,0,0.4); background: rgba(0,0,0,0.4);
background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
} }
.main-nav.overlay a:hover { .main-nav.overlay a:hover {
color: #fff;
border-color: transparent; border-color: transparent;
background: transparent; background: transparent;
} }
.main-nav.overlay .back-button,
.main-nav.overlay .subscribe-button {
border-color: transparent;
}
.blog-logo img { .blog-logo img {
max-height: 80px; max-height: 80px;
} }
@ -1230,8 +1428,7 @@ margin on the iframe, cause it breaks stuff. */
.inner, .inner,
.pagination { .pagination {
width: auto; width: auto;
margin-left: 16px; margin: 2rem auto;
margin-right: 16px;
} }
.post { .post {
@ -1241,8 +1438,7 @@ margin on the iframe, cause it breaks stuff. */
margin-left: 16px; margin-left: 16px;
margin-right: 16px; margin-right: 16px;
padding-bottom: 2rem; padding-bottom: 2rem;
font-size: 0.8em; line-height: 1.55em;
line-height: 1.6em;
} }
.post-template .post-title { .post-template .post-title {
@ -1254,14 +1450,15 @@ margin on the iframe, cause it breaks stuff. */
} }
p, ul, ol, dl { p, ul, ol, dl {
font-size: 0.95em;
margin: 0 0 2rem 0; margin: 0 0 2rem 0;
} }
.blog-title { .page-title {
font-size: 3rem; font-size: 3rem;
} }
.blog-description { .page-description {
font-size: 1.6rem; font-size: 1.6rem;
} }
@ -1365,6 +1562,23 @@ margin on the iframe, cause it breaks stuff. */
margin-top: 3rem; margin-top: 3rem;
} }
.author-profile {
padding-bottom: 2rem;
}
.tag-head.main-header,
.author-head.main-header {
height: 20%;
}
.author-profile .author-meta span {
font-size: 1.5rem;
}
.archive-template .main-header .page-description {
display: none;
}
} }
@ -1375,7 +1589,7 @@ margin on the iframe, cause it breaks stuff. */
@-webkit-keyframes fade-in-down { @-webkit-keyframes fade-in-down {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: translateY(-5px); -webkit-transform: translateY(-10px);
} }
60% { 60% {
opacity: 1; opacity: 1;
@ -1387,7 +1601,7 @@ margin on the iframe, cause it breaks stuff. */
@keyframes fade-in-down { @keyframes fade-in-down {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: translateY(-5px); -webkit-transform: translateY(-10px);
} }
60% { 60% {
opacity: 1; opacity: 1;
@ -1397,57 +1611,6 @@ margin on the iframe, cause it breaks stuff. */
} }
} }
@-webkit-keyframes fade-in-down-subtle {
0% {
opacity: 0.8;
-webkit-transform: translateY(-5px);
}
30% {
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
}
}
@keyframes fade-in-down-subtle {
0% {
opacity: 0.8;
-webkit-transform: translateY(-5px);
}
30% {
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
}
}
@-webkit-keyframes fade-in-up-subtle {
0% {
opacity: 0.3;
-webkit-transform: translateY(3px);
}
30% {
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
}
}
@keyframes fade-in-down-subtle {
0% {
opacity: 0.3;
-webkit-transform: translateY(3px);
}
30% {
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
}
}
/* ========================================================================== /* ==========================================================================
End of file. Animations should be the last thing here. Do not add stuff End of file. Animations should be the last thing here. Do not add stuff

Binary file not shown.

View File

@ -13,4 +13,7 @@
<glyph unicode="&#xe003;" d="M0.806 90.336c-0.244 2.532-0.452 5.070-0.584 7.63 0.13-2.56 0.34-5.098 0.584-7.63zM235.908 394.852c92.010-2.738 153.734 92.698 137.862 213.198-15.894 120.48-103.396 217.168-195.408 219.922-92.026 2.73-153.74-89.482-137.852-210 15.882-120.468 103.352-220.374 195.398-223.12zM1024 704v85.31c0 93.88-76.782 170.69-170.658 170.69h-682.656c-92.276 0-168.012-74.232-170.564-165.926 58.362 51.386 139.324 94.316 222.874 94.316 89.304 0 357.244 0 357.244 0l-79.948-67.618h-113.268c75.13-28.804 115.156-116.124 115.156-205.722 0-75.248-41.81-139.954-100.888-185.968-57.644-44.902-68.572-63.708-68.572-101.878 0-32.578 61.746-88 94.032-110.788 94.382-66.538 124.916-128.312 124.916-231.456 0-16.428-2.042-32.83-6.066-48.96h307.742c93.874 0 170.656 76.75 170.656 170.69v533.308h-192v-191.998h-64v192h-191.998v64h191.998v192h64v-192h192zM185.886 194.064c21.614 0 41.422 0.59 61.936 0.59-27.146 26.334-48.626 58.6-48.626 98.38 0 23.608 7.564 46.336 18.134 66.52-10.782-0.77-21.79-0.994-33.126-0.994-74.356 0-137.506 24.076-184.204 63.854v-67.242l0.006-201.73c53.44 25.374 116.888 40.622 185.88 40.622zM3.42 72.742c-1.112 5.458-1.966 11.006-2.542 16.634 0.574-5.628 1.43-11.176 2.542-16.634zM455.45 7.154c-15.058 58.806-68.454 87.964-142.888 139.568-27.072 8.732-56.894 13.874-88.894 14.208-89.618 0.964-173.108-34.942-220.216-88.372 15.92-77.706 85.034-136.558 167.234-136.558h286.444c1.816 11.128 2.696 22.632 2.696 34.432 0 12.534-1.534 24.792-4.376 36.722z" /> <glyph unicode="&#xe003;" d="M0.806 90.336c-0.244 2.532-0.452 5.070-0.584 7.63 0.13-2.56 0.34-5.098 0.584-7.63zM235.908 394.852c92.010-2.738 153.734 92.698 137.862 213.198-15.894 120.48-103.396 217.168-195.408 219.922-92.026 2.73-153.74-89.482-137.852-210 15.882-120.468 103.352-220.374 195.398-223.12zM1024 704v85.31c0 93.88-76.782 170.69-170.658 170.69h-682.656c-92.276 0-168.012-74.232-170.564-165.926 58.362 51.386 139.324 94.316 222.874 94.316 89.304 0 357.244 0 357.244 0l-79.948-67.618h-113.268c75.13-28.804 115.156-116.124 115.156-205.722 0-75.248-41.81-139.954-100.888-185.968-57.644-44.902-68.572-63.708-68.572-101.878 0-32.578 61.746-88 94.032-110.788 94.382-66.538 124.916-128.312 124.916-231.456 0-16.428-2.042-32.83-6.066-48.96h307.742c93.874 0 170.656 76.75 170.656 170.69v533.308h-192v-191.998h-64v192h-191.998v64h191.998v192h64v-192h192zM185.886 194.064c21.614 0 41.422 0.59 61.936 0.59-27.146 26.334-48.626 58.6-48.626 98.38 0 23.608 7.564 46.336 18.134 66.52-10.782-0.77-21.79-0.994-33.126-0.994-74.356 0-137.506 24.076-184.204 63.854v-67.242l0.006-201.73c53.44 25.374 116.888 40.622 185.88 40.622zM3.42 72.742c-1.112 5.458-1.966 11.006-2.542 16.634 0.574-5.628 1.43-11.176 2.542-16.634zM455.45 7.154c-15.058 58.806-68.454 87.964-142.888 139.568-27.072 8.732-56.894 13.874-88.894 14.208-89.618 0.964-173.108-34.942-220.216-88.372 15.92-77.706 85.034-136.558 167.234-136.558h286.444c1.816 11.128 2.696 22.632 2.696 34.432 0 12.534-1.534 24.792-4.376 36.722z" />
<glyph unicode="&#xe004;" d="M853.344 960h-682.66c-93.872 0-170.684-76.814-170.684-170.688v-682.626c0-93.938 76.812-170.686 170.684-170.686l682.66 0.002c93.876 0 170.656 76.746 170.656 170.688v682.622c0 93.874-76.782 170.688-170.656 170.688zM870.592 448h-166.592v-448h-192v448h-92.526v146.564h92.526v95.186c0 129.342 55.792 206.25 207.87 206.25h175.244v-158.57h-143.13c-42.482 0.070-47.752-22.152-47.752-63.512l-0.232-79.354h192l-25.408-146.564z" /> <glyph unicode="&#xe004;" d="M853.344 960h-682.66c-93.872 0-170.684-76.814-170.684-170.688v-682.626c0-93.938 76.812-170.686 170.684-170.686l682.66 0.002c93.876 0 170.656 76.746 170.656 170.688v682.622c0 93.874-76.782 170.688-170.656 170.688zM870.592 448h-166.592v-448h-192v448h-92.526v146.564h92.526v95.186c0 129.342 55.792 206.25 207.87 206.25h175.244v-158.57h-143.13c-42.482 0.070-47.752-22.152-47.752-63.512l-0.232-79.354h192l-25.408-146.564z" />
<glyph unicode="&#xe005;" d="M737.229 68.198c13.722-13.875 13.722-36.25 0-50.125s-35.891-13.875-49.613 0l-400.896 404.838c-13.722 13.875-13.722 36.301 0 50.125l400.896 404.89c13.722 13.875 35.891 13.875 49.613 0s13.722-36.25 0-50.125l-365.568-379.802 365.568-379.802z" /> <glyph unicode="&#xe005;" d="M737.229 68.198c13.722-13.875 13.722-36.25 0-50.125s-35.891-13.875-49.613 0l-400.896 404.838c-13.722 13.875-13.722 36.301 0 50.125l400.896 404.89c13.722 13.875 35.891 13.875 49.613 0s13.722-36.25 0-50.125l-365.568-379.802 365.568-379.802z" />
<glyph unicode="&#xe006;" d="M870.4 908.8h-112.64c-28.262 0-40.96-22.938-40.96-51.2v-870.4h204.8v870.4c0 28.262-22.886 51.2-51.2 51.2zM563.2 601.6h-112.64c-28.262 0-40.96-22.938-40.96-51.2v-563.2h204.8v563.2c0 28.262-22.886 51.2-51.2 51.2zM256 294.4h-112.64c-28.262 0-40.96-22.886-40.96-51.2v-256h204.8v256c0 28.314-22.938 51.2-51.2 51.2z" />
<glyph unicode="&#xe007;" d="M512 857.6c-141.414 0-256-114.637-256-256 0-244.429 256-563.2 256-563.2s256 318.771 256 563.2c0 141.363-114.586 256-256 256zM512 460.288c-76.339 0-138.24 61.901-138.24 138.24s61.901 138.24 138.24 138.24 138.24-61.901 138.24-138.24-61.901-138.24-138.24-138.24z" />
<glyph unicode="&#xe008;" d="M402.381 207.667l-41.472-41.165c-35.942-35.584-94.362-35.635-130.253 0-17.254 17.152-26.726 39.834-26.726 64.051s9.523 46.95 26.726 64.102l152.576 151.398c31.59 31.386 91.085 77.517 134.451 34.509 19.917-19.763 52.070-19.61 71.782 0.256 19.763 19.866 19.661 52.019-0.256 71.782-73.677 73.114-182.63 59.597-277.504-34.509l-152.576-151.398c-36.557-36.352-56.73-84.685-56.73-136.141 0-51.405 20.173-99.738 56.781-136.090 37.683-37.427 87.142-56.064 136.602-56.064s99.021 18.637 136.704 56.064l41.472 41.216c19.917 19.763 20.019 51.917 0.256 71.731-19.763 19.866-51.917 19.968-71.834 0.256zM864.819 795.699c-79.155 78.541-189.798 82.79-263.117 10.086l-51.661-51.251c-19.917-19.763-20.070-51.866-0.307-71.782 19.814-19.917 51.917-20.019 71.782-0.256l51.661 51.251c37.939 37.683 87.654 22.067 120.115-10.086 17.254-17.101 26.726-39.885 26.726-64.051 0-24.218-9.523-46.95-26.726-64.051l-162.816-161.485c-74.394-73.83-109.363-39.219-124.262-24.422-19.917 19.763-52.019 19.61-71.731-0.256-19.763-19.917-19.661-52.070 0.256-71.782 34.15-33.894 73.216-50.688 114.074-50.688 50.074 0 102.963 25.19 153.242 75.11l162.765 161.485c36.608 36.301 56.781 84.634 56.781 136.038s-20.173 99.789-56.781 136.141z" />
</font></defs></svg> </font></defs></svg>

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

Binary file not shown.

54
author.hbs Normal file
View File

@ -0,0 +1,54 @@
{{!< default}}
{{! The comment above "< default" means - insert everything in this file into
the {body} of the default.hbs template, which contains our header/footer. }}
{{! The big featured header on the homepage, with the site logo and description }}
<header class="main-header author-head" {{#if @blog.cover}}style="background-image: url({{author.cover}})"{{/if}}>
<nav class="main-nav overlay clearfix">
<a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
<a class="subscribe-button icon-feed" href="{{@blog.url}}/author/{{author.slug}}/rss/">{{author.name}}</a>
</nav>
</header>
<section class="author-profile inner">
{{#if author.image}}
<figure class="author-image">
<div class="img" style="background-image: url({{author.image}})"><span class="hidden">{{author.name}}'s Picture</span></div>
</figure>
{{/if}}
<h1 class="author-title">{{author.name}}</h1>
<h2 class="author-bio">{{author.bio}}</h2>
<div class="author-meta">
{{#if author.location}}<span class="author-location"><i class="icon-location"></i> {{author.location}}</span>{{/if}}
{{#if author.website}}<span class="author-link"><i class="icon-link"></i> <a href="{{author.website}}">{{author.website}}</a></span>{{/if}}
<span class="author-stats"><i class="icon-stats"></i> {{pagination.total}} posts</span>
</div>
</section>
{{! The main content area on the homepage }}
<main class="content" role="main">
{{! Previous/next page links - only displayed on page 2+ }}
<div class="extra-pagination inner">
{{pagination}}
</div>
{{! Each post will be output using this markup }}
{{#foreach posts}}
<article class="{{post_class}}">
<header class="post-header">
<span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span>
<h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
</header>
<section class="post-excerpt">
<p>{{excerpt}} <a class="read-more" href="{{url}}">&raquo;</a></p>
</section>
</article>
{{/foreach}}
{{! After all the posts, we have the previous/next pagination links }}
{{pagination}}
</main>

View File

@ -4,12 +4,15 @@
the {body} of the default.hbs template, which contains our header/footer. }} the {body} of the default.hbs template, which contains our header/footer. }}
{{! The big featured header on the homepage, with the site logo and description }} {{! The big featured header on the homepage, with the site logo and description }}
<header class="site-head" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}> <header class="main-header {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
<div class="vertical"> <nav class="main-nav overlay clearfix">
<div class="site-head-content inner">
{{#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 Logo" /></a>{{/if}}
<h1 class="blog-title">{{@blog.title}}</h1> <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
<h2 class="blog-description">{{@blog.description}}</h2> </nav>
<div class="vertical">
<div class="main-header-content inner">
<h1 class="page-title">{{@blog.title}}</h1>
<h2 class="page-description">{{@blog.description}}</h2>
</div> </div>
</div> </div>
</header> </header>
@ -17,22 +20,25 @@
{{! The main content area on the homepage }} {{! The main content area on the homepage }}
<main class="content" role="main"> <main class="content" role="main">
{{! Previous/next page links - only displayed on page 2+ }}
<div class="extra-pagination inner">
{{pagination}}
</div>
{{! Each post will be output using this markup }} {{! Each post will be output using this markup }}
{{#foreach posts}} {{#foreach posts}}
<article class="{{post_class}}"> <article class="{{post_class}}">
<header class="post-header"> <header class="post-header">
<span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span> <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span>
<h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2> <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
</header> </header>
<section class="post-excerpt"> <section class="post-excerpt">
<p>{{excerpt}}&hellip; <a class="read-more" href="{{url}}">&raquo;</a></p> <p>{{excerpt}} <a class="read-more" href="{{url}}">&raquo;</a></p>
</section> </section>
</article> </article>
{{/foreach}} {{/foreach}}
{{!! After all the posts, we have the previous/next pagination links }} {{! Previous/next page links - only displayed on every page }}
{{pagination}} {{pagination}}
</main> </main>

17
tag.hbs
View File

@ -4,15 +4,15 @@
the {body} of the default.hbs template, which contains our header/footer. }} the {body} of the default.hbs template, which contains our header/footer. }}
{{! The big featured header on the homepage, with the site logo and description }} {{! The big featured header on the homepage, with the site logo and description }}
<header class="site-head" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}> <header class="tag-head main-header" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
<nav class="main-nav overlay clearfix"> <nav class="main-nav overlay clearfix">
<a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a> <a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
<a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a> <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
</nav> </nav>
<div class="vertical"> <div class="vertical">
<div class="site-head-content inner"> <div class="main-header-content inner">
<h1 class="blog-title">{{tag.name}}</h1> <h1 class="page-title">{{tag.name}}</h1>
<h2 class="blog-description">A {{pagination.total}}-post collection</h2> <h2 class="page-description">A {{pagination.total}}-post collection</h2>
</div> </div>
</div> </div>
</header> </header>
@ -20,9 +20,13 @@
{{! The main content area on the homepage }} {{! The main content area on the homepage }}
<main class="content" role="main"> <main class="content" role="main">
{{! Previous/next page links - only displayed on page 2+ }}
<div class="extra-pagination inner">
{{pagination}}
</div>
{{! Each post will be output using this markup }} {{! Each post will be output using this markup }}
{{#foreach posts}} {{#foreach posts}}
<article class="{{post_class}}"> <article class="{{post_class}}">
<header class="post-header"> <header class="post-header">
<span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span> <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span>
@ -30,10 +34,9 @@
</header> </header>
<section class="post-excerpt"> <section class="post-excerpt">
<p>{{excerpt}}&hellip;</p> <p>{{excerpt}} <a class="read-more" href="{{url}}">&raquo;</a></p>
</section> </section>
</article> </article>
{{/foreach}} {{/foreach}}
{{! After all the posts, we have the previous/next pagination links }} {{! After all the posts, we have the previous/next pagination links }}