From 9abc4a7fb40310339ef435403a721a7f8f39d34d Mon Sep 17 00:00:00 2001 From: Erik Klop Date: Fri, 27 Feb 2015 17:15:17 +0100 Subject: [PATCH 1/3] Added HTML and CSS for "The Lamp" --- css/google-type.css | 102 ++++++++++++++++++++++++++++++++++++++++++++ index.html | 23 ++++++++++ 2 files changed, 125 insertions(+) diff --git a/css/google-type.css b/css/google-type.css index 8ef8264..84b4091 100755 --- a/css/google-type.css +++ b/css/google-type.css @@ -375,6 +375,108 @@ h1, h2, p { margin: 0; padding: 0; } + +/* -------------------------------- */ +/* The Lamp */ +/* -------------------------------- */ + +#the-lamp +{ + margin: 0; + font-size: 100%; + background: #020C1D; + color: rgba(255,255,255,0.1); +} + +.story-container +{ + cursort: default; + height: 100%; + padding: 0; + width: 400px; + margin: 0 auto; + padding-bottom: 15%; +} + +.story-title +{ + font-family: 'Mountains of Christmas', cursive; + text-align: center; + margin: 40px 0; + font-size: 40px; +} + +.story-body +{ + font-family: "Roboto"; + line-height: 145%; + letter-spacing: 0.5px; + font-size: 16px; + font-weight: 200; + text-align: center; + text-align: justify; + cursor: default; +} + +.lamp-pole +{ + z-index: 1; + background: rgba(255,255,255,0.03); + width: 4px; + height: 100px; + position: relative; + top: 0px; + left: 198px; +} + +.lamp-bulb-top +{ + z-index: 2; + background: rgba(255,255,255,0.05); + width: 10px; + height: 20px; + position: relative; + top: 0px; + left: 195px; +} + +.lamp-bulb +{ + z-index: 3; + background: rgba(255,255,255,0.03); + width: 20px; + height: 20px; + position: relative; + top: 0px; + left: 190px; + border-radius: 100%; +} + +.story-container:hover .lamp-bulb +{ + background: rgb(239, 255, 0); + box-shadow: 0px 0px 80px #fff; +} + +.story-container:hover .lamp-bulb-top +{ + background: rgba(255,255,255,0.1); +} + +.story-container:hover .story-title, .story-container:hover .story-body +{ + color: rgba(255,255,255,0.25); + background: -webkit-linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.12)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + + + + + + + /* ---------------------- */ /* Device-specific styles */ /* ---------------------- */ diff --git a/index.html b/index.html index 7c7347f..7284960 100755 --- a/index.html +++ b/index.html @@ -60,6 +60,11 @@ + + + + + @@ -402,6 +407,24 @@

Jupiter And The Tortoise

+ + +
+ +
+
+
 
+
 
+
 
+
+

The Lamp

+

A Lamp, well filled with oil, burned with a clear and steady light, and began to swell with pride and boast that it shone more brightly than the sun himself. Just then a puff of wind came and blew it out. Some one struck a match and lit it again, and said, "You just keep alight, and never mind the sun. Why, even the stars never need to be relit as you had to be just now." +

+
+ +
+ + From 78cbb7fad3f5832750e036232eb64bafb81af371 Mon Sep 17 00:00:00 2001 From: Erik Klop Date: Sat, 28 Feb 2015 13:40:05 +0100 Subject: [PATCH 2/3] Added responsive styles and author link --- css/google-type.css | 113 +++++++------------------------------------- index.html | 31 ++++++------ 2 files changed, 35 insertions(+), 109 deletions(-) diff --git a/css/google-type.css b/css/google-type.css index 84b4091..3ee5803 100755 --- a/css/google-type.css +++ b/css/google-type.css @@ -373,109 +373,27 @@ h1, h2, p { margin: 0; padding: 0; } .section-jupiter-and-the-tortoise p{text-align: justify;} } - - - /* -------------------------------- */ /* The Lamp */ /* -------------------------------- */ -#the-lamp -{ - margin: 0; - font-size: 100%; - background: #020C1D; - color: rgba(255,255,255,0.1); -} - -.story-container -{ - cursort: default; - height: 100%; - padding: 0; - width: 400px; - margin: 0 auto; - padding-bottom: 15%; -} - -.story-title -{ - font-family: 'Mountains of Christmas', cursive; - text-align: center; - margin: 40px 0; - font-size: 40px; -} - -.story-body -{ - font-family: "Roboto"; - line-height: 145%; - letter-spacing: 0.5px; - font-size: 16px; - font-weight: 200; - text-align: center; - text-align: justify; - cursor: default; -} - -.lamp-pole -{ - z-index: 1; - background: rgba(255,255,255,0.03); - width: 4px; - height: 100px; - position: relative; - top: 0px; - left: 198px; -} - -.lamp-bulb-top -{ - z-index: 2; - background: rgba(255,255,255,0.05); - width: 10px; - height: 20px; - position: relative; - top: 0px; - left: 195px; -} - -.lamp-bulb -{ - z-index: 3; - background: rgba(255,255,255,0.03); - width: 20px; - height: 20px; - position: relative; - top: 0px; - left: 190px; - border-radius: 100%; -} - -.story-container:hover .lamp-bulb -{ - background: rgb(239, 255, 0); - box-shadow: 0px 0px 80px #fff; -} - -.story-container:hover .lamp-bulb-top -{ - background: rgba(255,255,255,0.1); -} - -.story-container:hover .story-title, .story-container:hover .story-body -{ - color: rgba(255,255,255,0.25); - background: -webkit-linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.12)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - - +.section-the-lamp { margin: 0;font-size: 100%;background: #02122D;color: rgba(255,255,255,0.1);} +.section-the-lamp .story-container{ cursor: default; height: 100%; padding: 0; width: 100%; margin: 0 auto; } +.section-the-lamp .story-title{ font-family: 'Mountains of Christmas', cursive; text-align: center; margin: 40px 0; font-size: 40px;} +.section-the-lamp .story-body { font-family: "Roboto"; line-height: 145%; letter-spacing: 0.5px; font-size: 16px; font-weight: 200; text-align: justify; width: 50%; margin-left: 25%; cursor: default;} +.section-the-lamp .lamp-pole { z-index: 1; background: rgba(255,255,255,0.03); width: 4px; height: 100px; margin: 0 auto; } +.section-the-lamp .lamp-bulb-top { z-index: 2; background: rgba(255,255,255,0.05); width: 10px; height: 20px; margin: 0 auto;} +.section-the-lamp .lamp-bulb{ z-index: 3; background: rgba(255,255,255,0.03); width: 20px; height: 20px; margin: 0 auto; border-radius: 100%;} +.section-the-lamp .story-container:hover .lamp-bulb { background: rgb(239, 255, 0); box-shadow: 0px 0px 80px #fff; } +.section-the-lamp .story-container:hover .lamp-bulb-top { background: rgba(255,255,255,0.1); } +.section-the-lamp .story-container:hover .story-title, .story-container:hover .story-body, .author-container .caption{color: rgba(255,255,255,0.25);background: -webkit-linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.12));-webkit-background-clip: text;-webkit-text-fill-color: transparent;} +.section-the-lamp .author-container{ width: 50%; margin-left: 40px; margin-top: 15%; } +.section-the-lamp .author-container .avatar{display: block;margin-left: 20px;padding-bottom: 10px;} +.section-the-lamp .author-container .caption a:hover{background: transparent;color: rgba(255,255,255,0.8);} /* ---------------------- */ /* Device-specific styles */ @@ -498,6 +416,11 @@ h1, h2, p { margin: 0; padding: 0; } .section-fox-lion .container { width: 90%; } + +.section-the-lamp .story-body { width: 70%; margin-left: 15%; } +.section-the-lamp .author-container {width: 70%; margin-left: 15%;} +.section-the-lamp .author-container .avatar, .author-container .caption{margin-left: 0;} + } /* min-width 641px and max-width 1024px, medium screens */ diff --git a/index.html b/index.html index 7284960..ea41eaa 100755 --- a/index.html +++ b/index.html @@ -408,25 +408,28 @@

Jupiter And The Tortoise

- -
- +
-
-
 
-
 
-
 
-
-

The Lamp

-

A Lamp, well filled with oil, burned with a clear and steady light, and began to swell with pride and boast that it shone more brightly than the sun himself. Just then a puff of wind came and blew it out. Some one struck a match and lit it again, and said, "You just keep alight, and never mind the sun. Why, even the stars never need to be relit as you had to be just now." -

+
+
 
+
 
+
 
+
+

The Lamp

+

A Lamp, well filled with oil, burned with a clear and steady light, and began to swell with pride and boast that it shone more brightly than the sun himself. Just then a puff of wind came and blew it out. Some one struck a match and lit it again, and said, "You just keep alight, and never mind the sun. Why, even the stars never need to be relit as you had to be just now." +

+
+ eklop + +
+ Mountains of Christmas, + Roboto +
+
-
- -