diff --git a/css/google-type.css b/css/google-type.css index 8ef8264..1561c18 100755 --- a/css/google-type.css +++ b/css/google-type.css @@ -373,7 +373,27 @@ h1, h2, p { margin: 0; padding: 0; } .section-jupiter-and-the-tortoise p{text-align: justify;} } +/* -------------------------------- */ +/* The Lamp */ +/* -------------------------------- */ + +.section-the-lamp { margin: 0;font-size: 100%;background: #02122D;color: rgba(255,255,255,0.12);} + +.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, .lit .story-container .lamp-bulb { background: rgb(255, 255, 255); box-shadow: 0px 0px 80px #fff; } +.section-the-lamp .story-container:hover .lamp-bulb-top, .lit .story-container .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,.lit .story-container .story-title, .lit .story-container .story-body, .lit .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 */ @@ -396,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 7c7347f..ea41eaa 100755 --- a/index.html +++ b/index.html @@ -60,6 +60,11 @@ + + + + + @@ -402,7 +407,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." +

+
+ eklop + +
+ Mountains of Christmas, + Roboto +
+
+
+
+ diff --git a/scripts/scripts.js b/scripts/scripts.js index 7e50be6..7e934ac 100755 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -13,4 +13,30 @@ $(document).ready(function() { $('#grapes').mouseover(run); // end the fox and the grapes scripts + // the lamp scripts + function litlamp() + { + $('.section-the-lamp').toggleClass('lit'); + } + + function randRange(data) + { + var newTime = data[Math.floor(data.length * Math.random())]; + return newTime; + } + + function toggleSomething() + { + //var timeArray = new Array(200, 400, 600, 1200, 1400, 1600, 4000); + var timeArray = new Array(50, 80, 50, 1000, 600, 150, 1200); + + litlamp(); + clearInterval(timer); + timer = setInterval(toggleSomething, randRange(timeArray)); + } + + var timer = setInterval(toggleSomething, 1000); + + //end of the lamp scripts + }); \ No newline at end of file