themes
/
casper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

New global footer

This commit is contained in:
John O'Nolan 2013-09-01 21:45:19 +02:00 committed by Hannah Wolfe
parent b4aba43c97
commit 03d79be55e
9 changed files with 194 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

273
assets/css/screen.css
View File

@ -14,6 +14,56 @@
@import url(normalize.css);
/* ==========================================================================
1. Icons - Sets up the icon font and respective classes
========================================================================== */
/* Import the font file with the icons in it */
@font-face {
font-family: 'icons';
src:url('../fonts/icons.eot');
src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
url('../fonts/icons.woff') format('woff'),
url('../fonts/icons.ttf') format('truetype'),
url('../fonts/icons.svg#icons') format('svg');
font-weight: normal;
font-style: normal;
}
/* Apply these base styles to all icons */
.icon-ghost, .icon-feed, .icon-twitter, .icon-google-plus, .icon-facebook {
font-family: 'icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
text-decoration: none;
}
/* Each icon is created by inserting the corret character into the
content of the :before pseudo element. Like a boss. */
.icon-ghost:before {
content: "\e000";
}
.icon-feed:before {
content: "\e001";
}
.icon-twitter:before {
content: "\e002";
font-size: 1.1em;
}
.icon-google-plus:before {
content: "\e003";
}
.icon-facebook:before {
content: "\e004";
}
/* ==========================================================================
1. General - Setting up some base styles
========================================================================== */
@ -356,7 +406,7 @@ table.plain {
}
/* Add a little circle in the middle of the border-bottom on our .post
just for lolz and stylepoints. */
just for the lolz and stylepoints. */
.post:after {
display: block;
content: "";
@ -452,10 +502,11 @@ table.plain {
1. Single Post - When you click on an individual post
========================================================================== */
/* Remove the border after the .post */
/* Tweak the .post wrapper style */
.post-template .post {
margin-top: 0;
border-bottom: none;
padding-bottom: 0;
}
/* Kill that stylish little circle that was on the border, too */
@ -475,16 +526,12 @@ table.plain {
margin: 0 auto;
}
/* ==========================================================================
1. Footer - The bottom of every page
========================================================================== */
/* The author credit area after the post */
.post-footer {
position: relative;
margin: 8rem 0 0 0;
padding: 6rem 0;
margin: 4rem 0 0 0;
padding: 4rem 0 0 0;
border-top: #EBF2F6 1px solid;
background: #F7FAFB;
}
.post-footer h4 {
@ -498,15 +545,20 @@ table.plain {
line-height: 1.6em;
}
/* Create some space to the right for the share links */
.post-footer .author {
margin-right: 200px;
margin-right: 180px;
}
/* Drop the share links in the space to the right.
Doing it like this means it's easier for the author bio
to be flexible at smaller screen sizes while the share
links remain at a fixed width the whole time */
.post-footer .share {
position: absolute;
top: 0;
top: 4rem;
right: 0;
width: 160px;
width: 140px;
}
.post-footer .share a {
@ -517,7 +569,99 @@ table.plain {
}
.post-footer .share a:hover {
color: #222;
color: #50585D;
}
/* ==========================================================================
1. Pagination
========================================================================== */
/* The main wrapper for our pagination links */
.pagination {
position: relative;
width: 80%;
max-width: 700px;
margin: 4rem auto;
font-family: 'Open Sans', sans-serif;
font-size: 1.3rem;
color: #9EABB3;
text-align: center;
}
.pagination a {
color: #9EABB3;
}
/* Push the previous/next links out to the left/right */
.older-posts,
.newer-posts {
position: absolute;
display: inline-block;
padding: 0 15px;
border: #EBF2F6 2px solid;
text-decoration: none;
border-radius: 30px;
transition: border ease 0.3s;
}
.older-posts {
right: 0;
}
.page-number {
display: inline-block;
padding: 2px 0;
}
.newer-posts {
left: 0;
}
.older-posts:hover,
.newer-posts:hover {
border-color: #9EABB3;
}
/* ==========================================================================
1. Footer - The bottom of every page
========================================================================== */
.site-footer {
position: relative;
margin: 8rem 0 0 0;
padding: 4rem 0;
border-top: #EBF2F6 1px solid;
font-family: 'Open Sans', sans-serif;
font-size: 1.3rem;
line-height: 1.7em;
color: #BBC7CC;
text-align: center;
background: #F7FAFB;
}
.site-footer a {
color: #BBC7CC;
text-decoration: underline;
}
.site-footer a:hover {
color: #50585D;
}
.poweredby .icon-ghost {
font-weight: 700;
text-decoration: none;
}
.poweredby .icon-ghost:hover {
text-decoration: none;
}
.poweredby .icon-ghost:before {
font-size: 1rem;
margin-right: 0.2em;
}
/* The subscribe icon on the footer */
@ -541,9 +685,10 @@ table.plain {
color: #D2DEE3;
font-size: 10px;
position: absolute;
top: 9px;
top: 2px;
left: 9px;
font-weight: bold;
transition: color 0.5s ease;
}
/* Add a box shadow to on hover */
@ -552,6 +697,10 @@ table.plain {
transition: box-shadow 0.25s;
}
.subscribe:hover:before {
color: #50585D;
}
/* CSS tooltip saying "Subscribe!" - initially hidden */
.tooltip {
opacity:0;
@ -593,98 +742,6 @@ table.plain {
}
/* ==========================================================================
1. Pagination
========================================================================== */
.pagination {
position: relative;
width: 80%;
max-width: 700px;
margin: 4rem auto;
font-family: 'Open Sans', sans-serif;
font-size: 1.3rem;
color: #9EABB3;
text-align: center;
}
.pagination a {
color: #9EABB3;
}
.older-posts,
.newer-posts {
position: absolute;
display: inline-block;
padding: 0 15px;
border: #EBF2F6 2px solid;
text-decoration: none;
border-radius: 30px;
}
.older-posts {
right: 0;
}
.page-number {
display: inline-block;
padding: 2px 0;
}
.newer-posts {
left: 0;
}
/* ==========================================================================
1. Icons - Sets up the icon font and respective classes
========================================================================== */
/* Import the font file with the icons in it */
@font-face {
font-family: 'icons';
src:url('../fonts/icons.eot');
src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
url('../fonts/icons.woff') format('woff'),
url('../fonts/icons.ttf') format('truetype'),
url('../fonts/icons.svg#icons') format('svg');
font-weight: normal;
font-style: normal;
}
/* Apply these base styles to all icons */
.icon-feed, .icon-twitter, .icon-google-plus, .icon-facebook, .icon-back {
font-family: 'icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
text-decoration: none;
vertical-align: middle;
}
/* Each icon is created by inserting the corret character into the
content of the :before pseudo element. Like a boss. */
.icon-feed:before {
content: "\e000";
}
.icon-twitter:before {
content: "\e001";
}
.icon-google-plus:before {
content: "\e002";
}
.icon-facebook:before {
content: "\e003";
}
.icon-back:before {
content: "\e004";
}
/* ==========================================================================
1. Media Queries - Smaller than 900px
========================================================================== */
@ -831,6 +888,10 @@ table.plain {
margin: 1.4rem 0.8rem 0 0.8rem;
}
.site-footer {
font-size: 1.1rem;
}
}
/* ==========================================================================

10
assets/fonts/icons.dev.svg
View File

@ -10,11 +10,11 @@ This is a custom SVG font generated by IcoMoon.
<font-face units-per-em="512" ascent="480" descent="-32" />
<missing-glyph horiz-adv-x="512" />
<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
<glyph unicode="&#xe000;" d="M 421.344-32C 420.944,197.616, 220.592,385.264,0,385.696L0,480 c 270.656,0, 512-230.304, 512-512L 421.344-32
<glyph unicode="&#xe001;" d="M 421.344-32C 420.944,197.616, 220.592,385.264,0,385.696L0,480 c 270.656,0, 512-230.304, 512-512L 421.344-32
z M 343.6-31.968l-90.608,0 c 0.304,56.384-28.336,119.488-73.664,166.736C 134.256,182.4, 54.368,212.416, 0.224,212.128L 0.224,306.4
C 169.264,302.752, 340.16,143.088, 343.6-31.968z M 64.256,96.048c 35.312,0, 63.936-28.656, 63.936-64c0-35.328-28.624-63.984-63.936-63.984
S 0.32-3.28, 0.32,32.048C 0.32,67.392, 28.944,96.048, 64.256,96.048z" data-tags="feed, rss" />
<glyph unicode="&#xe001;" d="M 512,382.791c-18.838-8.354-39.082-14.001-60.33-16.54c 21.686,13, 38.343,33.585, 46.186,58.115
<glyph unicode="&#xe002;" d="M 512,382.791c-18.838-8.354-39.082-14.001-60.33-16.54c 21.686,13, 38.343,33.585, 46.186,58.115
c-20.298-12.039-42.778-20.78-66.705-25.49c-19.16,20.415-46.461,33.17-76.673,33.17c-58.011,0-105.044-47.029-105.044-105.039
c0-8.233, 0.929-16.25, 2.72-23.939c-87.3,4.382-164.701,46.2-216.509,109.753c-9.042-15.514-14.223-33.558-14.223-52.809
c0-36.444, 18.544-68.596, 46.73-87.433c-17.219,0.546-33.416,5.271-47.577,13.139c-0.010-0.438-0.010-0.878-0.010-1.321
@ -22,7 +22,7 @@ This is a custom SVG font generated by IcoMoon.
c 13.368-41.73, 52.16-72.103, 98.126-72.948c-35.95-28.175-81.243-44.967-130.458-44.967c-8.479,0-16.84,0.497-25.058,1.47
c 46.486-29.805, 101.701-47.197, 161.021-47.197c 193.211,0, 298.868,160.062, 298.868,298.872c0,4.554-0.103,9.084-0.305,13.59
C 480.11,343.227, 497.918,361.727, 512,382.791z" data-tags="twitter, tweet, social" />
<glyph unicode="&#xe002;" d="M 0.403,45.168c-0.122,1.266-0.226,2.535-0.292,3.815C 0.176,47.703, 0.281,46.434, 0.403,45.168zM 117.954,197.426c 46.005-1.369, 76.867,46.349, 68.931,106.599c-7.947,60.24-51.698,108.584-97.704,109.961
<glyph unicode="&#xe003;" d="M 0.403,45.168c-0.122,1.266-0.226,2.535-0.292,3.815C 0.176,47.703, 0.281,46.434, 0.403,45.168zM 117.954,197.426c 46.005-1.369, 76.867,46.349, 68.931,106.599c-7.947,60.24-51.698,108.584-97.704,109.961
c-46.013,1.365-76.87-44.741-68.926-105C 28.196,248.752, 71.931,198.799, 117.954,197.426zM 512,352L 512,394.655 C 512,441.595, 473.609,480, 426.671,480L 85.343,480 C 39.205,480, 1.337,442.884, 0.061,397.037
c 29.181,25.693, 69.662,47.158, 111.437,47.158c 44.652,0, 178.622,0, 178.622,0l-39.974-33.809l-56.634,0
c 37.565-14.402, 57.578-58.062, 57.578-102.861c0-37.624-20.905-69.977-50.444-92.984c-28.822-22.451-34.286-31.854-34.286-50.939
@ -32,10 +32,10 @@ This is a custom SVG font generated by IcoMoon.
l 0.003-100.865C 26.723,89.408, 58.447,97.032, 92.943,97.032zM 1.71,36.371c-0.556,2.729-0.983,5.503-1.271,8.317C 0.726,41.874, 1.154,39.1, 1.71,36.371zM 227.725,3.577c-7.529,29.403-34.227,43.982-71.444,69.784c-13.536,4.366-28.447,6.937-44.447,7.104
c-44.809,0.482-86.554-17.471-110.108-44.186C 9.686-2.574, 44.243-32, 85.343-32l 143.222,0 c 0.908,5.564, 1.348,11.316, 1.348,17.216
C 229.913-8.517, 229.146-2.388, 227.725,3.577z" data-tags="google plus, social" />
<glyph unicode="&#xe003;" d="M 426.672,480L 85.342,480 C 38.406,480,0,441.593,0,394.656l0-341.313 C0,6.374, 38.406-32, 85.342-32l 341.33,0.001
<glyph unicode="&#xe004;" d="M 426.672,480L 85.342,480 C 38.406,480,0,441.593,0,394.656l0-341.313 C0,6.374, 38.406-32, 85.342-32l 341.33,0.001
c 46.938,0, 85.328,38.373, 85.328,85.344L 512,394.656 C 512,441.593, 473.609,480, 426.672,480z M 435.296,224L 352,224 l0-224 l-96,0 L 256,224 l-46.263,0 l0,73.282 L 256,297.282
l0,47.593 C 256,409.546, 283.896,448, 359.935,448l 87.622,0 l0-79.285 l-71.565,0 c-21.241,0.035-23.876-11.076-23.876-31.756L 352,297.282l 96,0
L 435.296,224z" data-tags="facebook, social" />
<glyph unicode="&#xe004;" d="M 102.4,223.886 L 387.789,415.966 L 387.789,300.425 C 387.789,300.425 716.914,275.166 716.914,31.772 C 716.914,31.772 675.282,131.658 516.050,150.591 C 490.007,153.685 450.435,156.735 387.686,156.735 L 387.686,31.784 L 102.4,223.886 L 102.4,223.886 Z M 102.4,223.886" horiz-adv-x="819.2" data-tags="back" />
<glyph unicode="&#xe000;" d="M0,480 L0,377.6 L 307.2,377.6 L 307.2,480 L0,480 Z M0,480M0,275.2 L0,172.8 L 512,172.8 L 512,275.2 L0,275.2 Z M0,275.2M0,70.4 L0-32 L 204.8-32 L 204.8,70.4 L0,70.4 Z M0,70.4M 307.2,70.4 L 307.2-32 L 512-32 L 512,70.4 L 307.2,70.4 Z M 307.2,70.4M 409.6,480 L 409.6,377.6 L 512,377.6 L 512,480 L 409.6,480 Z M 409.6,480" data-tags="ghst" />
<glyph unicode="&#x20;" horiz-adv-x="256" />
</font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
assets/fonts/icons.eot
View File

Binary file not shown.

10
assets/fonts/icons.svg
View File

@ -10,11 +10,11 @@ This is a custom SVG font generated by IcoMoon.
<font-face units-per-em="512" ascent="480" descent="-32" />
<missing-glyph horiz-adv-x="512" />
<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
<glyph unicode="&#xe000;" d="M 421.344-32C 420.944,197.616, 220.592,385.264,0,385.696L0,480 c 270.656,0, 512-230.304, 512-512L 421.344-32
<glyph unicode="&#xe001;" d="M 421.344-32C 420.944,197.616, 220.592,385.264,0,385.696L0,480 c 270.656,0, 512-230.304, 512-512L 421.344-32
z M 343.6-31.968l-90.608,0 c 0.304,56.384-28.336,119.488-73.664,166.736C 134.256,182.4, 54.368,212.416, 0.224,212.128L 0.224,306.4
C 169.264,302.752, 340.16,143.088, 343.6-31.968z M 64.256,96.048c 35.312,0, 63.936-28.656, 63.936-64c0-35.328-28.624-63.984-63.936-63.984
S 0.32-3.28, 0.32,32.048C 0.32,67.392, 28.944,96.048, 64.256,96.048z" />
<glyph unicode="&#xe001;" d="M 512,382.791c-18.838-8.354-39.082-14.001-60.33-16.54c 21.686,13, 38.343,33.585, 46.186,58.115
<glyph unicode="&#xe002;" d="M 512,382.791c-18.838-8.354-39.082-14.001-60.33-16.54c 21.686,13, 38.343,33.585, 46.186,58.115
c-20.298-12.039-42.778-20.78-66.705-25.49c-19.16,20.415-46.461,33.17-76.673,33.17c-58.011,0-105.044-47.029-105.044-105.039
c0-8.233, 0.929-16.25, 2.72-23.939c-87.3,4.382-164.701,46.2-216.509,109.753c-9.042-15.514-14.223-33.558-14.223-52.809
c0-36.444, 18.544-68.596, 46.73-87.433c-17.219,0.546-33.416,5.271-47.577,13.139c-0.010-0.438-0.010-0.878-0.010-1.321
@ -22,7 +22,7 @@ This is a custom SVG font generated by IcoMoon.
c 13.368-41.73, 52.16-72.103, 98.126-72.948c-35.95-28.175-81.243-44.967-130.458-44.967c-8.479,0-16.84,0.497-25.058,1.47
c 46.486-29.805, 101.701-47.197, 161.021-47.197c 193.211,0, 298.868,160.062, 298.868,298.872c0,4.554-0.103,9.084-0.305,13.59
C 480.11,343.227, 497.918,361.727, 512,382.791z" />
<glyph unicode="&#xe002;" d="M 0.403,45.168c-0.122,1.266-0.226,2.535-0.292,3.815C 0.176,47.703, 0.281,46.434, 0.403,45.168zM 117.954,197.426c 46.005-1.369, 76.867,46.349, 68.931,106.599c-7.947,60.24-51.698,108.584-97.704,109.961
<glyph unicode="&#xe003;" d="M 0.403,45.168c-0.122,1.266-0.226,2.535-0.292,3.815C 0.176,47.703, 0.281,46.434, 0.403,45.168zM 117.954,197.426c 46.005-1.369, 76.867,46.349, 68.931,106.599c-7.947,60.24-51.698,108.584-97.704,109.961
c-46.013,1.365-76.87-44.741-68.926-105C 28.196,248.752, 71.931,198.799, 117.954,197.426zM 512,352L 512,394.655 C 512,441.595, 473.609,480, 426.671,480L 85.343,480 C 39.205,480, 1.337,442.884, 0.061,397.037
c 29.181,25.693, 69.662,47.158, 111.437,47.158c 44.652,0, 178.622,0, 178.622,0l-39.974-33.809l-56.634,0
c 37.565-14.402, 57.578-58.062, 57.578-102.861c0-37.624-20.905-69.977-50.444-92.984c-28.822-22.451-34.286-31.854-34.286-50.939
@ -32,10 +32,10 @@ This is a custom SVG font generated by IcoMoon.
l 0.003-100.865C 26.723,89.408, 58.447,97.032, 92.943,97.032zM 1.71,36.371c-0.556,2.729-0.983,5.503-1.271,8.317C 0.726,41.874, 1.154,39.1, 1.71,36.371zM 227.725,3.577c-7.529,29.403-34.227,43.982-71.444,69.784c-13.536,4.366-28.447,6.937-44.447,7.104
c-44.809,0.482-86.554-17.471-110.108-44.186C 9.686-2.574, 44.243-32, 85.343-32l 143.222,0 c 0.908,5.564, 1.348,11.316, 1.348,17.216
C 229.913-8.517, 229.146-2.388, 227.725,3.577z" />
<glyph unicode="&#xe003;" d="M 426.672,480L 85.342,480 C 38.406,480,0,441.593,0,394.656l0-341.313 C0,6.374, 38.406-32, 85.342-32l 341.33,0.001
<glyph unicode="&#xe004;" d="M 426.672,480L 85.342,480 C 38.406,480,0,441.593,0,394.656l0-341.313 C0,6.374, 38.406-32, 85.342-32l 341.33,0.001
c 46.938,0, 85.328,38.373, 85.328,85.344L 512,394.656 C 512,441.593, 473.609,480, 426.672,480z M 435.296,224L 352,224 l0-224 l-96,0 L 256,224 l-46.263,0 l0,73.282 L 256,297.282
l0,47.593 C 256,409.546, 283.896,448, 359.935,448l 87.622,0 l0-79.285 l-71.565,0 c-21.241,0.035-23.876-11.076-23.876-31.756L 352,297.282l 96,0
L 435.296,224z" />
<glyph unicode="&#xe004;" d="M 102.4,223.886 L 387.789,415.966 L 387.789,300.425 C 387.789,300.425 716.914,275.166 716.914,31.772 C 716.914,31.772 675.282,131.658 516.050,150.591 C 490.007,153.685 450.435,156.735 387.686,156.735 L 387.686,31.784 L 102.4,223.886 L 102.4,223.886 Z M 102.4,223.886" horiz-adv-x="819.2" />
<glyph unicode="&#xe000;" d="M0,480 L0,377.6 L 307.2,377.6 L 307.2,480 L0,480 Z M0,480M0,275.2 L0,172.8 L 512,172.8 L 512,275.2 L0,275.2 Z M0,275.2M0,70.4 L0-32 L 204.8-32 L 204.8,70.4 L0,70.4 Z M0,70.4M 307.2,70.4 L 307.2-32 L 512-32 L 512,70.4 L 307.2,70.4 Z M 307.2,70.4M 409.6,480 L 409.6,377.6 L 512,377.6 L 512,480 L 409.6,480 Z M 409.6,480" />
<glyph unicode="&#x20;" horiz-adv-x="256" />
</font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
assets/fonts/icons.ttf
View File

Binary file not shown.

BIN
assets/fonts/icons.woff
View File

Binary file not shown.

14
default.hbs
View File

@ -25,19 +25,11 @@
{{! Everything else gets inserted here }}
{{{body}}}
<footer class="post-footer">
<footer class="site-footer">
<a class="subscribe icon-feed" href="#"><span class="tooltip">Subscribe!</span></a>
<div class="inner">
<section class="author">
<h4>John O'Nolan</h4>
<p>A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes journalism and publishing platforms.</p>
</section>
<section class="share">
<h4>Share this post</h4>
<a class="icon-twitter" href="http://twitter.com/share?text={{title}}&url={{settings.url}}/{{slug}}"><span class="hidden">Twitter</span></a>
<a class="icon-facebook" href="http://www.facebook.com/sharer.php?u={{settings.url}}/{{slug}}"><span class="hidden">Twitter</span></a>
<a class="icon-google-plus" href="#"><span class="hidden">Twitter</span></a>
</section>
<section class="copyright">All content copyright <a href="/">{{settings.title}}</a> &copy; 2013 &bull; All rights reserved.</section>
<section class="poweredby">Proudly published with <a class="icon-ghost" href="http://tryghost.org">Ghost</a></section>
</div>
</footer>

2
index.hbs
View File

@ -9,7 +9,7 @@
<div id="site-head-content" class="inner">
<a id="blog-logo" href="{{settings.url}}"><img src="/assets/img/user.png" alt="" /></a>
<h1 class="blog-title">{{settings.title}}</h1>
<h2 class="blog-description">A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes journalism and publishing platforms.</h2>
<h2 class="blog-description">{{settings.description}}</h2>
</div>
</div>
</header>

13
post.hbs
View File

@ -24,6 +24,19 @@
{{content}}
</section>
<footer class="post-footer">
<section class="author">
<h4>John O'Nolan</h4>
<p>A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes journalism and publishing platforms.</p>
</section>
<section class="share">
<h4>Share this post</h4>
<a class="icon-twitter" href="http://twitter.com/share?text={{title}}&url={{settings.url}}/{{slug}}"><span class="hidden">Twitter</span></a>
<a class="icon-facebook" href="http://www.facebook.com/sharer.php?u={{settings.url}}/{{slug}}"><span class="hidden">Twitter</span></a>
<a class="icon-google-plus" href="#"><span class="hidden">Twitter</span></a>
</section>
</footer>
</article>
{{/post}}