diff --git a/assets/css/screen.css b/assets/css/screen.css
index df3c140..888dc8f 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -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 */
diff --git a/assets/fonts/icons.dev.svg b/assets/fonts/icons.dev.svg
new file mode 100644
index 0000000..2555a3f
--- /dev/null
+++ b/assets/fonts/icons.dev.svg
@@ -0,0 +1,41 @@
+
+
+
\ No newline at end of file
diff --git a/assets/fonts/icons.eot b/assets/fonts/icons.eot
new file mode 100644
index 0000000..86dfad6
Binary files /dev/null and b/assets/fonts/icons.eot differ
diff --git a/assets/fonts/icons.svg b/assets/fonts/icons.svg
new file mode 100644
index 0000000..6e330ac
--- /dev/null
+++ b/assets/fonts/icons.svg
@@ -0,0 +1,41 @@
+
+
+
\ No newline at end of file
diff --git a/assets/fonts/icons.ttf b/assets/fonts/icons.ttf
new file mode 100644
index 0000000..7c0ae65
Binary files /dev/null and b/assets/fonts/icons.ttf differ
diff --git a/assets/fonts/icons.woff b/assets/fonts/icons.woff
new file mode 100644
index 0000000..c976673
Binary files /dev/null and b/assets/fonts/icons.woff differ
diff --git a/post.hbs b/post.hbs
index 5450429..66d804d 100644
--- a/post.hbs
+++ b/post.hbs
@@ -20,15 +20,20 @@
{{/post}}
-