From 5de05849b60e6e786c39403c96b6cda12df8f3b1 Mon Sep 17 00:00:00 2001
From: Lucian Moldovan <lucian.moldovan@reea.net>
Date: Thu, 10 Nov 2016 14:24:38 +0200
Subject: [PATCH 1/2] Added  "The Grasshopper & The Ants"

---
 css/google-type.css | 112 ++++++++++++++++++++++++++++++++++++++++++++
 index.html          |  34 +++++++++++++-
 2 files changed, 145 insertions(+), 1 deletion(-)

diff --git a/css/google-type.css b/css/google-type.css
index 1a3a5c4..04e572b 100755
--- a/css/google-type.css
+++ b/css/google-type.css
@@ -507,6 +507,99 @@ http://usdawatercolors.nal.usda.gov/pom/home.xhtml */
 .section-butcher-customers .container article section p:last-of-type { columns: 1; font: 1.25em/1.25 'BioRhyme', Georgia, serif; margin-top: 8px; padding: 6px 0; color: #e21; text-align: center; display: inline-block; }
 .section-butcher-customers .container article section .caption { margin: 30px auto 20px auto; }
 
+/* ------------------------------------------- */
+/* Styles for The Grasshopper and The Ants    */
+/* ------------------------------------------- */
+
+.section-grasshopper-ants { 
+    background-color: #333; 
+    background-image:url("http://unsplash.com/photos/MyRBq7GoVK0/download");
+    background-attachment: fixed;
+    background-repeat: no-repeat; 
+    background-size: cover;
+    background-position: center 0;
+}
+
+.section-grasshopper-ants .overlay {
+    padding: 50px;
+    position: relative;
+    background-color: rgba(16, 16, 16, 0.6);
+    max-height: 880px;
+    overflow: hidden;
+}
+
+.section-grasshopper-ants .container {
+    font-size: 12px;
+    max-width: 430px;
+}
+
+.section-grasshopper-ants .container.colophon {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    left: 20px;
+    top: 20px;
+}
+
+.section-grasshopper-ants article {
+    margin: 0px 0 300px;
+    padding: 50px 50px 60px;
+}
+
+.section-grasshopper-ants h2 { 
+    font-family: 'Oswald', sans-serif;
+    font-size: 4.236em;
+    text-transform: lowercase; 
+    text-align: center; 
+    width: 330px; 
+    display: inline-block;
+    line-height: 1.2;
+    position: relative;
+    color: white;
+}
+
+.section-grasshopper-ants h2 span.ampersand { 
+    font-family: 'Merriweather', serif;
+    font-style: italic;
+    font-weight: 400;
+    width: 100%;
+    display: inline-block;
+    text-align: center;
+    color: white;
+    line-height: 0;
+}
+
+.section-grasshopper-ants p { 
+    text-align: justify; 
+    font-family: 'Merriweather', serif;
+    font-weight: 300;
+    font-size: 1em;
+    line-height: 1.8;
+    color: white;
+    width: 325px; 
+    margin-top: 75px;
+}
+
+.section-grasshopper-ants .caption { 
+    color: #da3;
+    margin-left: 0;
+    padding-top: 10px;
+}
+
+.section-grasshopper-ants .caption a { 
+    color: #d8a631; 
+    font-size: 12px; 
+}
+
+.section-grasshopper-ants .caption a:hover { 
+    color: #a57f24;
+}
+
+.section-grasshopper-ants .colophon { 
+    padding-bottom: 11.089em; 
+}
+
+
 /* ---------------------- */
 /* Device-specific styles */
 /* ---------------------- */
@@ -522,6 +615,25 @@ http://usdawatercolors.nal.usda.gov/pom/home.xhtml */
   .section-pomegranate h2{font-size: 4.2rem;}
 	.section-pomegranate h2 span{font-size: 1.75rem;}
 	.section-pomegranate .container img#bramble{position: absolute; bottom: 0px; left: -90px;}
+    
+    /* ------------------------------------------- */
+    /* Styles for The Grasshopper and The Ants    */
+    /* ------------------------------------------- */
+    .section-grasshopper-ants .container {
+        width: 100%;
+    }
+    .section-grasshopper-ants .overlay {
+        padding: 0;
+        padding-top: 100px;
+    }
+    .section-grasshopper-ants article {
+        padding: 50px 20px 60px;
+    }
+    
+    .section-grasshopper-ants article h2,
+    .section-grasshopper-ants article p {
+        width: 100%;
+    }
 
 }
 
diff --git a/index.html b/index.html
index a93024d..d6cc1e7 100755
--- a/index.html
+++ b/index.html
@@ -69,7 +69,7 @@
         <link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
 
         <!-- Google web fonts for "The Bee and Jupiter" -->
-        <link href='https://fonts.googleapis.com/css?family=Yeseva+One|Merriweather+Sans:300|Merriweather:400italic' rel='stylesheet' type='text/css'>
+        <link href='https://fonts.googleapis.com/css?family=Yeseva+One|Merriweather+Sans:300|Merriweather:300,400,300italic,400italic' rel='stylesheet' type='text/css'>
 
     		<!-- Google web fonts for "The Pomegranate, the Apple-Tree, and the Bramble" -->
     		<link href='https://fonts.googleapis.com/css?family=Mr+De+Haviland|Neuton:200,700,400italic' rel='stylesheet' type='text/css'>
@@ -537,6 +537,38 @@ <h2>The Butcher<span>and his Customers</span></h2>
           </div>
         </div>
         <!-- end The Butcher and his Customers -->
+        
+        <!-- The Grasshopper and The Ants -->
+        <div class="container-fluid section-grasshopper-ants" id="lucianmldvn">
+            <div class="overlay">
+                <div class="container colophon">
+                    <a href="https://twitter.com/lucianmldvn" class="avatar" target="_blank" title="Lucian Moldovan">
+                        <img src="https://pbs.twimg.com/profile_images/734427446590754816/vKgiXbyZ_400x400.jpg" alt="lucianmldvn">
+                    </a>
+                    <div class="caption">
+                        <a href="https://www.google.com/fonts/specimen/Oswald" target="_blank">
+                            Oswald
+                        </a>, 
+                        <a href="https://www.google.com/fonts/specimen/Merriweather">
+                            Merriweather
+                        </a>
+                    </div>
+                </div>
+                <div class="container">
+                    <article>
+                        <h2>
+                            the grasshopper
+                            <span class="ampersand">&amp; </span>
+                            the ants
+                        </h2>
+                        <p>
+                            One fine day in winter some Ants were busy drying their store of corn, which had got rather damp during a long spell of rain. Presently up came a Grasshopper and begged them to spare her a few grains, "For," she said, "I'm simply starving." The Ants stopped work for a moment, though this was against their principles. "May we ask," said they, "what you were doing with yourself all last summer? Why didn't you collect a store of food for the winter?" "The fact is," replied the Grasshopper, "I was so busy singing that I hadn't the time." "If you spent the summer singing," replied the Ants, "you can't do better than spend the winter dancing." And they chuckled and went on with their work.
+                        </p>
+                    </article>
+                </div>
+                </div>
+        </div>
+        <!-- end The Grasshopper and The Ants -->
 
 
         <script src="scripts/jquery-1.11.1.min.js"></script>

From 283cf875499ce97ce082fee1d40c403bf4237427 Mon Sep 17 00:00:00 2001
From: Lucian Moldovan <lucian.moldovan@reea.net>
Date: Thu, 10 Nov 2016 14:25:43 +0200
Subject: [PATCH 2/2] - fixed Merriweather link

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index d6cc1e7..15c2f7d 100755
--- a/index.html
+++ b/index.html
@@ -549,7 +549,7 @@ <h2>The Butcher<span>and his Customers</span></h2>
                         <a href="https://www.google.com/fonts/specimen/Oswald" target="_blank">
                             Oswald
                         </a>, 
-                        <a href="https://www.google.com/fonts/specimen/Merriweather">
+                        <a href="https://www.google.com/fonts/specimen/Merriweather" target="_blank">
                             Merriweather
                         </a>
                     </div>