From fb87fa7538a423611a6e46795e48701a0a7c9405 Mon Sep 17 00:00:00 2001 From: Kurt Yalcin Date: Tue, 12 Aug 2014 17:12:53 -0400 Subject: [PATCH 1/6] added my fable --- css/google-type.css | 14 ++++++++++++++ index.html | 22 ++++++++++++++++++++++ 2 files changed, 36 insertions(+) diff --git a/css/google-type.css b/css/google-type.css index ff84f52..d3e0147 100644 --- a/css/google-type.css +++ b/css/google-type.css @@ -18,6 +18,20 @@ h1, h2, p { margin: 0; padding: 0; } .section-intro a { color: #000; text-decoration: none; } .section-intro a:hover { background-color: #ddd; } +.section-moon {background: url(http://i.imgur.com/lRUgmVg.jpg); opacity: .9; no-repeat; background-size: cover; padding: 500px 0 500px;} +.section-moon h2 { font: 50px/48px 'Libre Baskerville', Georgia, serif; color: #000; margin: 0 0 2px 50px; } +.section-moon h3 { font: 22px/20px 'Libre Baskerville', Georgia, serif; color: #000; margin: 0 0 2px 50px; } +.section-moon h4 { font: 22px/20px 'Libre Baskerville', Georgia, serif; color: #000; margin: 0 0 0 50px; padding: 2px 2px; line-height: 1;} +.section-moon h5 { font: 50px/48px 'Libre Baskerville', Georgia, serif; color: #000; margin: 0 0 2px 5px; } +.section-moon p { font: 18px/18px 'News Cycle', Georgia, serif; max-width: 600px; color: #000; margin: 10px 0 0 50px;} +.section-moon span {display: inline-block; background-color: #000; border-radius: 50%; width: 37px; height: 37px; margin: auto -40px auto 0px;} +.section-moon .wrapper {float: left; position: relative; overflow: hidden;} +.section-moon .wrapper1 {float: inherit; position: relative; overflow: hidden;} +.section-moon .avatar img { margin: 0 0 10px 50px; } +.section-moon .caption { margin: 0 0 40px 50px; color: #eee; } +.section-moon .caption a { color: #eee; } +.section-moon .caption a:hover { background-color: #ffffff; color: #2e2361;} + .section-forest { background: url(../images/forest.jpg) no-repeat; background-size: cover; padding: 90px 0 100px;} .section-forest h2 { font: 70px/68px 'Playfair Display', Georgia, serif; color: #fff; text-transform: uppercase; margin: 0 0 60px 20px; } .section-forest p { font: 16px/30px 'Fauna One', Georgia, serif; max-width: 540px; color: #fff; margin: 0 0 12px 20px; } diff --git a/index.html b/index.html index 93dcd89..7f1f462 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,9 @@ + + + @@ -46,11 +49,30 @@

All passages are from the Project Gutenberg transcript of Æsop’s Fables. All photographic images are from Unsplash.com. If you’d like to contribute to this project, please send me a tweet or simply fork it on Github.

+
Playfair Display, Abril Fatface, Alegreya
+ + +
+
+ turkishdlite +
Libre Baskerville, News Cycle
+

The

+

MOON

+

and
her

+
MOTHER
+

The Moon once begged her Mother to make her a gown.

+

"How can I?" replied she; "there's no fitting your figure.

+

At one time you're a New Moon, and at another you're a Full

+

Moon; and between whiles you're neither one nor the other."

+
+
+ +
femmebot From 8bd75c2c5e8d8cf3a200483271ff82a4b7a0915f Mon Sep 17 00:00:00 2001 From: Kurt Yalcin Date: Tue, 12 Aug 2014 18:18:22 -0400 Subject: [PATCH 2/6] removed image from background --- css/google-type.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/css/google-type.css b/css/google-type.css index d3e0147..dfab58e 100644 --- a/css/google-type.css +++ b/css/google-type.css @@ -18,13 +18,13 @@ h1, h2, p { margin: 0; padding: 0; } .section-intro a { color: #000; text-decoration: none; } .section-intro a:hover { background-color: #ddd; } -.section-moon {background: url(http://i.imgur.com/lRUgmVg.jpg); opacity: .9; no-repeat; background-size: cover; padding: 500px 0 500px;} -.section-moon h2 { font: 50px/48px 'Libre Baskerville', Georgia, serif; color: #000; margin: 0 0 2px 50px; } -.section-moon h3 { font: 22px/20px 'Libre Baskerville', Georgia, serif; color: #000; margin: 0 0 2px 50px; } -.section-moon h4 { font: 22px/20px 'Libre Baskerville', Georgia, serif; color: #000; margin: 0 0 0 50px; padding: 2px 2px; line-height: 1;} -.section-moon h5 { font: 50px/48px 'Libre Baskerville', Georgia, serif; color: #000; margin: 0 0 2px 5px; } -.section-moon p { font: 18px/18px 'News Cycle', Georgia, serif; max-width: 600px; color: #000; margin: 10px 0 0 50px;} -.section-moon span {display: inline-block; background-color: #000; border-radius: 50%; width: 37px; height: 37px; margin: auto -40px auto 0px;} +.section-moon {background: #000000; opacity: .9; no-repeat; background-size: contain; padding: 90px 0 100px;} +.section-moon h2 { font: 50px/48px 'Libre Baskerville', Georgia, serif; color: #fff; margin: 0 0 2px 50px; } +.section-moon h3 { font: 22px/20px 'Libre Baskerville', Georgia, serif; color: #fff; margin: 0 0 2px 50px; } +.section-moon h4 { font: 22px/20px 'Libre Baskerville', Georgia, serif; color: #fff; margin: 0 0 0 50px; padding: 2px 2px; line-height: 1;} +.section-moon h5 { font: 50px/48px 'Libre Baskerville', Georgia, serif; color: #fff; margin: 0 0 2px 5px; } +.section-moon p { font: 18px/18px 'News Cycle', Georgia, serif; max-width: 600px; color: #fff; margin: 10px 0 0 50px;} +.section-moon span {display: inline-block; background-color: #fff; border-radius: 50%; width: 37px; height: 37px; margin: auto -40px auto 0px;} .section-moon .wrapper {float: left; position: relative; overflow: hidden;} .section-moon .wrapper1 {float: inherit; position: relative; overflow: hidden;} .section-moon .avatar img { margin: 0 0 10px 50px; } From 9f8f3136741d808d96a2e10131bc489b898d489a Mon Sep 17 00:00:00 2001 From: femme bot Date: Tue, 12 Aug 2014 23:00:08 -0400 Subject: [PATCH 3/6] updated README --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index c2941e1..2bcb47d 100644 --- a/README.md +++ b/README.md @@ -9,4 +9,6 @@ If you'd like to contribute to this project, here are the *game rules*: * Must use at least one of the tales from Aesop’s Fables: http://www.gutenberg.org/ebooks/11339 * When including third-party images and similar artwork, please make sure they are public domain. [Here's a great resource for stock images that don't suck](https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b). +Please apply [practical typographic rules](http://practicaltypography.com). Refer to [http://www.typography.com/techniques/](http://www.typography.com/techniques/) for pointers on combining typefaces. + Have questions? [Contact me @femmebot on Twitter](https://twitter.com/femmebot) \ No newline at end of file From 78aa1708212652a24661a021cd54b3aec3d68c87 Mon Sep 17 00:00:00 2001 From: femme bot Date: Wed, 13 Aug 2014 00:37:54 -0400 Subject: [PATCH 4/6] README update --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2bcb47d..571c450 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,6 @@ If you'd like to contribute to this project, here are the *game rules*: * Must use at least one of the tales from Aesop’s Fables: http://www.gutenberg.org/ebooks/11339 * When including third-party images and similar artwork, please make sure they are public domain. [Here's a great resource for stock images that don't suck](https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b). -Please apply [practical typographic rules](http://practicaltypography.com). Refer to [http://www.typography.com/techniques/](http://www.typography.com/techniques/) for pointers on combining typefaces. +Refer to [practical typographic rules](http://practicaltypography.com) for pointers on web typography and [http://www.typography.com/techniques/](http://www.typography.com/techniques/) for pointers on combining typefaces. Have questions? [Contact me @femmebot on Twitter](https://twitter.com/femmebot) \ No newline at end of file From 2690edd7c7554fc718c5149949fbe6f7c420bab7 Mon Sep 17 00:00:00 2001 From: Kurt Yalcin Date: Wed, 13 Aug 2014 06:36:41 -0400 Subject: [PATCH 5/6] updated fork --- css/google-type.css | 14 ++++++++++++++ index.html | 18 ++++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/css/google-type.css b/css/google-type.css index facd51c..5394598 100644 --- a/css/google-type.css +++ b/css/google-type.css @@ -117,6 +117,20 @@ h1, h2, p { margin: 0; padding: 0; } .section-the-fox-and-the-grapes h2 { color: #8EC9D2; font: 36px 'Ovo', serif; text-align: center; margin-bottom: 16px; } .section-the-fox-and-the-grapes p { color: #B7B8BF; font: 15px/21px 'Muli', sans-serif; font-weight: 300; text-align: justify; } +.section-moon {background: #000000; opacity: .9; no-repeat; background-size: contain; padding: 90px 0 100px;} +.section-moon h2 { font: 50px/48px 'Libre Baskerville', Georgia, serif; color: #fff; margin: 0 0 2px 50px; } +.section-moon h3 { font: 22px/20px 'Libre Baskerville', Georgia, serif; color: #fff; margin: 0 0 2px 50px; } +.section-moon h4 { font: 22px/20px 'Libre Baskerville', Georgia, serif; color: #fff; margin: 0 0 0 50px; padding: 2px 2px; line-height: 1;} +.section-moon h5 { font: 50px/48px 'Libre Baskerville', Georgia, serif; color: #fff; margin: 0 0 2px 5px; } +.section-moon p { font: 18px/18px 'News Cycle', Georgia, serif; max-width: 600px; color: #fff; margin: 10px 0 0 50px;} +.section-moon span {display: inline-block; background-color: #fff; border-radius: 50%; width: 37px; height: 37px; margin: auto -40px auto 0px;} +.section-moon .wrapper {float: left; position: relative; overflow: hidden;} +.section-moon .wrapper1 {float: inherit; position: relative; overflow: hidden;} +.section-moon .avatar img { margin: 0 0 10px 50px; } +.section-moon .caption { margin: 0 0 40px 50px; color: #eee; } +.section-moon .caption a { color: #eee; } +.section-moon .caption a:hover { background-color: #ffffff; color: #2e2361;} + @-webkit-keyframes shake { 0% { -webkit-transform: translate(0, 0) rotate(0); } 1% { -webkit-transform: translate(-1px, -2px) rotate(-10deg); } diff --git a/index.html b/index.html index fdbc3f6..8767a3a 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,9 @@ + + + @@ -173,6 +176,21 @@

The Fox & the Grapes

+
+
+ turkishdlite +
Libre Baskerville, News Cycle
+

The

+

MOON

+

and
her

+
MOTHER
+

The Moon once begged her Mother to make her a gown.

+

"How can I?" replied she; "there's no fitting your figure.

+

At one time you're a New Moon, and at another you're a Full

+

Moon; and between whiles you're neither one nor the other."

+
+
+ From bea179f67c7d0dc00991cf37d9d0de469a323f34 Mon Sep 17 00:00:00 2001 From: Kurt Yalcin Date: Thu, 14 Aug 2014 06:59:49 -0400 Subject: [PATCH 6/6] post fastforward --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 8767a3a..3d7ab93 100644 --- a/index.html +++ b/index.html @@ -180,10 +180,10 @@

The Fox & the Grapes

turkishdlite
Libre Baskerville, News Cycle
-

The

+

The

MOON

-

and
her

-
MOTHER
+

and
her

+

MOTHER

The Moon once begged her Mother to make her a gown.

"How can I?" replied she; "there's no fitting your figure.

At one time you're a New Moon, and at another you're a Full