Permalink
Browse files

[ROBOTS] Added more robots styles for titles

  • Loading branch information...
1 parent b27244e commit da4fe5b7d206167dbb34641380fd69d1da3f1431 @k88hudson committed Jun 11, 2012
@@ -17,7 +17,7 @@
},
{
"type": "titles",
- "path": "{{baseDir}}templates/supported/shared/plugins/titles/popcorn.titles.js"
+ "path": "{{baseDir}}templates/supported/shared/plugins/titles/popcorn.titles.robots.js"
},
{
"type": "googlemap",
@@ -73,6 +73,17 @@ section[role="video-container"] > video {
width: 100%;
}
+.text-overlay {
+ display: table;
+ height: 500px;
+}
+.text-overlay > div {
+ width: 100%;
+ height: 100%;
+ display: table-cell;
+ vertical-align: middle;
+}
+
section[role="suplementary"] {
margin: 40px 0;
font-weight: 400;
@@ -99,7 +110,7 @@ footer {
}
/* /footer */
-/* POPCORN PLUGINS
+/* FLICKR
-------------------------------------------------- */
.popcorn-flickr p {
display: none;
@@ -206,4 +217,28 @@ footer {
width: 400px;
}
-/* ---/ POPCORN PLUGINS ------------------------------- */
+/* ---/ FLICKR ------------------------------- */
+
+/* TITLES
+-------------------------------------------------- */
+.top-title, .bottom-title, .mid-title {
+ text-align: center;
+}
+.top-title {
+ font-family: 'Jolly Lodger', Georgia;
+ font-size: 120px;
+ text-transform: uppercase;
+ color: #FFF;
+}
+.mid-title {
+ font-family: 'Fredericka the Great', Georgia;
+ font-size: 40px;
+}
+.bottom-title {
+ font-family: 'Lovers Quarrel', Georgia;
+ font-size: 100px;
+ margin: 0 20px;
+}
+
+
+/* ---/ TITLES ------------------------------- */
@@ -25,7 +25,7 @@
<script type="text/javascript" src="butter/template.js" data-butter-exclude></script>
<!-- Fonts -->
- <link href="http://fonts.googleapis.com/css?family=Jolly+Lodger|Bangers|Fredericka+the+Great" rel="stylesheet">
+ <link href="http://fonts.googleapis.com/css?family=Jolly+Lodger|Bangers|Fredericka+the+Great|Lovers+Quarrel" rel="stylesheet">
<script type="text/javascript" src="http://use.typekit.com/vjc5yjz.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
@@ -43,7 +43,15 @@ <h2 id="logo" class="logo ">Robots in everytown</h2>
<source src="http://videos-cdn.mozilla.net/serv/webmademovies/robots.ogv">
<source src="http://videos-cdn.mozilla.net/serv/webmademovies/robots.webm">
</video>
- <div id="video-overlay" class="video-overlay" data-butter="target"></div>
+ <div class="video-overlay text-overlay">
+ <div>
+ <div id="top-title" data-butter="target"></div>
+ <div id="mid-title" data-butter="target"></div>
+ <div id="bottom-title" data-butter="target"></div>
+ </div>
+ </div>
+ <div id="video-overlay" class="video-overlay" data-butter="target">
+ </div>
</section>
<section role="suplementary" class="cf">
<article id="Supplementary1" class="block" data-butter="target">
@@ -91,6 +91,11 @@ Enjoy!
/* SPECIAL EFFECTS
-------------------------------------------------- */
+.popcorn-effect-blur {
+ color: transparent;
+ text-shadow: 0 0 3px #FFF;
+}
+
.popcorn-effect-rumble {
-webkit-animation: rumble .1s infinite ease;
-moz-animation: rumble .1s infinite ease;

0 comments on commit da4fe5b

Please sign in to comment.