vividboarder/Vivid-Casper
1
0
Fork 0
mirror of https://github.com/ViViDboarder/Vivid-Casper.git synced 2024-12-22 11:37:38 +00:00
Code Issues Releases Wiki Activity

THE NEXT ONE

Browse Source 
* Introducing icon fonts
* New post footer
* Many responsive refinements and enhancements
* Few new helpers
This commit is contained in:
John O'Nolan 2013-08-27 19:35:23 +02:00 committed by Hannah Wolfe
parent b5021db970
commit bf1dd0e9d4
7 changed files with 285 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

239
assets/css/screen.css
View File

@ -30,7 +30,7 @@ body {
font-family: 'Open Sans', sans-serif;
font-size: 2.0rem;
line-height: 1.6em;
color: #50585D;
color: #3A4145;
}
::-moz-selection {
@ -82,6 +82,7 @@ h6 {
a {
color: #4a4a4a;
transition: color ease 0.3s;
}
a:hover {
@ -262,6 +263,25 @@ table.plain {
}
}
/* ==========================================================================
1. Utility
========================================================================== */
.hidden {
text-indent: -9999px;
visibility: hidden;
display: none;
}
.inner {
position: relative;
width: 80%;
max-width: 700px;
margin: 0 auto;
}
/* ==========================================================================
1. General
========================================================================== */
@ -283,14 +303,14 @@ table.plain {
height: 18px;
padding: 4px;
position: absolute;
top: 40px;
right: 40px;
top: 43px;
right: 43px;
z-index: 950;
opacity: 0.4;
color: #fff;
text-indent: -9999px;
text-decoration: none;
background: rgba(0,0,0,0.2) url(../img/ghost.png) 4px 4px no-repeat;
background: rgba(0,0,0,0.15) url(../img/ghost.png) 4px 4px no-repeat;
border-radius: 2px;
transition: opacity ease 0.5s;
}
@ -334,14 +354,16 @@ table.plain {
/* Create home icon for blog icon overlay */
#blog-icon:after {
display: block;
content: "";
position: absolute;
top: 0;
top: 50%;
left: 0;
bottom: 0;
right: 0;
z-index: 950;
background: url(../img/home.png) center center no-repeat;
margin-top: -10px;
content: "\e004";
color: #fff;
text-align: center;
opacity:0;
transition: opacity ease 0.5s;
}
@ -399,9 +421,9 @@ table.plain {
position: relative;
width:80%;
max-width: 700px;
border-bottom: #DDE6EB 1px solid;
margin: 3rem auto;
padding-bottom: 3rem;
border-bottom: #EBF2F6 1px solid;
margin: 4rem auto;
padding-bottom: 4rem;
word-break: break-word;
hyphens: auto;
}
@ -411,7 +433,7 @@ table.plain {
content: "";
width: 7px;
height: 7px;
border: #DDE6EB 1px solid;
border: #EBF2F6 1px solid;
position: absolute;
bottom: -5px;
left: 50%;
@ -433,6 +455,8 @@ table.plain {
.post-excerpt p {
margin: 0;
font-size: 0.9em;
line-height: 1.6em;
}
.post-content {
@ -440,7 +464,9 @@ table.plain {
}
.post-meta {
font-size: 1.4rem;
display: inline-block;
margin: 0.8rem 0;
font-size: 1.5rem;
color: #9EABB3;
}
@ -505,14 +531,6 @@ table.plain {
line-height: 1.5em;
}
.related-footer {
position: relative;
margin: 6rem 0 0 0;
padding: 6rem 0;
border-top: #DDE6EB 1px solid;
background: #F2F5F7;
}
.subscribe {
width: 28px;
height: 28px;
@ -528,37 +546,119 @@ table.plain {
transition: box-shadow 0.5s;
}
.subscribe:before {
color: #BBC7CC;
font-size: 10px;
position: absolute;
top: 9px;
left: 9px;
font-weight: bold;
}
.subscribe:hover {
box-shadow: rgba(0,0,0,0.05) 0 0 0 3px;
transition: box-shadow 0.25s;
}
.related-post {
max-width: 700px;
margin: 0 auto;
.post-footer {
position: relative;
margin: 6rem 0 0 0;
padding: 6rem 0;
border-top: #DDE6EB 1px solid;
}
.related-title {
font-size: 2.2rem;
opacity: 0.9;
}
.related-meta {
font-size: 1.4rem;
color: #9EABB3;
}
.related-content {
.post-footer h4 {
font-size: 1.8rem;
opacity: 0.9;
}
.related-content p {
margin: 0;
}
.post-footer p {
margin: 1rem 0;
font-size: 1.4rem;
}
.post-footer .author {
margin-right: 200px;
}
.post-footer .share {
position: absolute;
top: 0;
right: 0;
width: 160px;
}
.post-footer .share a {
font-size: 1.8rem;
display: inline-block;
margin: 1.4rem 1.6rem 1.6rem 0;
color: #BBC7CC;
}
.post-footer .share a:hover {
color: #222;
}
.pagination {
position: relative;
width: 80%;
max-width: 700px;
margin: 1.6em auto;
font-size: 1.4rem;
}
/* --- */
@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;
}
#blog-icon, .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;
vertical-align: middle;
}
.icon-feed:before {
content: "\e000";
}
.icon-twitter:before {
content: "\e001";
font-size: 1.1em;
}
.icon-google-plus:before {
content: "\e002";
}
.icon-facebook:before {
content: "\e003";
}
.icon-home:before {
content: "\e004";
}
@media only screen and (max-width: 900px) {
#ghost {
top: 16px;
right: 16px;
}
#site-head {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -597,6 +697,10 @@ table.plain {
line-height: 1.6em;
}
.post-template .post {
padding-bottom: 1rem;
}
h1 {
font-size: 4.8rem;
}
@ -605,28 +709,33 @@ table.plain {
font-size: 3.8rem;
}
h3 {
font-size: 3.3rem;
}
h4 {
font-size: 2.8rem;
}
}/* max 900 */
@media only screen and (max-width: 500px) {
.inner, .pagination {
width: auto;
margin-left: 16px;
margin-right: 16px;
}
.post {
width:auto;
margin-left: 1.6rem;
margin-right: 1.6rem;
margin-left: 16px;
margin-right: 16px;
font-size: 0.8em;
line-height: 1.6em;
}
#ghost {
top: 16px;
right: 16px;
}
#blog-icon {
}
#site-head .wrap {
margin: 0 16px -40px 16px;
width: auto;
@ -648,5 +757,37 @@ table.plain {
letter-spacing: 0;
}
h3 {
font-size: 2.8rem;
}
h4 {
font-size: 2.3rem;
}
.post-template .post {
padding-bottom: 0;
}
.post-footer {
padding: 4rem 0;
text-align: center;
}
.post-footer .author {
margin: 0 0 2rem 0;
padding: 0 0 1.6rem 0;
border-bottom: #DDE6EB 1px dashed;
}
.post-footer .share {
position: static;
width: auto;
}
.post-footer .share a {
margin: 1.4rem 0.8rem 0 0.8rem;
}
}/* max 500 */

41
assets/fonts/icons.dev.svg Normal file
View File

@ -0,0 +1,41 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
This is a custom SVG font generated by IcoMoon.
<iconset grid="16"></iconset>
</metadata>
<defs>
<font id="icons" horiz-adv-x="512" >
<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
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
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
c0-50.894, 36.209-93.348, 84.261-103c-8.813-2.4-18.094-3.686-27.674-3.686c-6.769,0-13.349,0.66-19.764,1.886
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
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
c0-16.289, 30.873-44, 47.016-55.394c 47.191-33.269, 62.458-64.156, 62.458-115.728c0-8.214-1.021-16.415-3.033-24.48l 153.871,0
C 473.609-32, 512,6.375, 512,53.345L 512,319.999 l-96,0 L 416,224 l-32,0 l0,96 l-95.999,0 l0,32 L 384,352 L 384,448 l 32,0 l0-96 L 512,352 zM 92.943,97.032c 10.807,0, 20.711,0.295, 30.968,0.295c-13.573,13.167-24.313,29.3-24.313,49.19
c0,11.804, 3.782,23.168, 9.067,33.26c-5.391-0.385-10.895-0.497-16.563-0.497c-37.178,0-68.753,12.038-92.102,31.927l0-33.621
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
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 430.905,213.063 L 533.333,213.063 L 266.788,480 L0,213.063 L 99.136,213.063 L 99.136-32 L 217.493-32 L 217.493,120.242 L 316.316,120.242 L 316.316-32 L 430.905-32 L 430.905,213.063 Z M 430.905,213.063" horiz-adv-x="533.333" data-tags="home" />
<glyph unicode="&#x20;" horiz-adv-x="256" />
</font></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
assets/fonts/icons.eot Normal file
View File

Binary file not shown.

41
assets/fonts/icons.svg Normal file
View File

@ -0,0 +1,41 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
This is a custom SVG font generated by IcoMoon.
<iconset grid="16"></iconset>
</metadata>
<defs>
<font id="icons" horiz-adv-x="512" >
<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
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
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
c0-50.894, 36.209-93.348, 84.261-103c-8.813-2.4-18.094-3.686-27.674-3.686c-6.769,0-13.349,0.66-19.764,1.886
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
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
c0-16.289, 30.873-44, 47.016-55.394c 47.191-33.269, 62.458-64.156, 62.458-115.728c0-8.214-1.021-16.415-3.033-24.48l 153.871,0
C 473.609-32, 512,6.375, 512,53.345L 512,319.999 l-96,0 L 416,224 l-32,0 l0,96 l-95.999,0 l0,32 L 384,352 L 384,448 l 32,0 l0-96 L 512,352 zM 92.943,97.032c 10.807,0, 20.711,0.295, 30.968,0.295c-13.573,13.167-24.313,29.3-24.313,49.19
c0,11.804, 3.782,23.168, 9.067,33.26c-5.391-0.385-10.895-0.497-16.563-0.497c-37.178,0-68.753,12.038-92.102,31.927l0-33.621
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
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 430.905,213.063 L 533.333,213.063 L 266.788,480 L0,213.063 L 99.136,213.063 L 99.136-32 L 217.493-32 L 217.493,120.242 L 316.316,120.242 L 316.316-32 L 430.905-32 L 430.905,213.063 Z M 430.905,213.063" horiz-adv-x="533.333" />
<glyph unicode="&#x20;" horiz-adv-x="256" />
</font></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
assets/fonts/icons.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/icons.woff Normal file
View File

Binary file not shown.

21
post.hbs
View File

@ -20,15 +20,20 @@
{{/post}}
<footer class="related-footer">
<a class="subscribe" href="#"><img src="http://f.cl.ly/items/3t1h041Y310P1b292W2U/rss.png" alt="RSS" /></a>
<article class="related-post">
<h2 class="related-title">The Future of Mankind Depends on Your Voice</h2>
<span class="related-meta">John O'Nolan on The Future</span>
<section class="related-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip...</p>
<footer class="post-footer">
<a class="subscribe icon-feed" href="#"><span class="hidden">Subscribe to RSS</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>
</article>
<section class="share">
<h4>Share this post</h4>
<a class="icon-twitter" href="http://twitter.com/share?text={{title}}&url={{url}}"><span class="hidden">Twitter</span></a>
<a class="icon-facebook" href="http://www.facebook.com/sharer.php?u={{url}}"><span class="hidden">Twitter</span></a>
<a class="icon-google-plus" href="#"><span class="hidden">Twitter</span></a>
</section>
</div>
</footer>
</main>