From ca26979ec3e0f76c6623e9b488bfb976cd976566 Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Mon, 9 Apr 2012 19:23:37 -0700 Subject: Contact info config hooked up --- js/slides.js | 49 +++++++++++-- template.html | 39 +++++----- theme/css/default.css | 191 ++++++++++++++++++++++++++---------------------- theme/sass/default.scss | 24 ++++-- 4 files changed, 184 insertions(+), 119 deletions(-) diff --git a/js/slides.js b/js/slides.js index 30aee54..e397d96 100644 --- a/js/slides.js +++ b/js/slides.js @@ -158,14 +158,6 @@ SlideDeck.prototype.loadConfig_ = function() { this.addFavIcon_(settings.favIcon); } - if (settings.title) { - document.title = settings.title; - } - - if (settings.title) { - document.title = settings.title; - } - if (!!!('usePrettify' in settings) || settings.usePrettify) { prettyPrint(); } @@ -181,6 +173,47 @@ SlideDeck.prototype.loadConfig_ = function() { if (!!!('useBuilds' in settings) || settings.useBuilds) { this.makeBuildLists_(); } + + if (settings.title) { + document.title = settings.title + ' - Google IO 2012'; + document.querySelector('[data-config-title]').textContent = settings.title; + } + + if (settings.subtitle) { + document.querySelector('[data-config-subtitle]').textContent = settings.subtitle; + } + + if (this.config_.presenters) { + var presenters = this.config_.presenters; + + var html = []; + if (presenters.length == 1) { + var p = presenters[0] + + html = [p.name, p.company].join('
'); + + var gplus = p.gplus ? 'g+' + p.gplus + '' : ''; + + var twitter = p.twitter ? 'twitter' + + '' + + p.twitter + '' : ''; + + var www = p.www ? 'www' + p.www + '' : ''; + + var html2 = [gplus, twitter, www].join('
'); + + document.querySelector('[data-config-contact]').innerHTML = html2; + } else { + for (var i = 0, p; p = presenters[i]; ++i) { + html.push(p.name + ' - ' + p.company); + } + html = html.join('
'); + } + + document.querySelector('[data-config-presenter]').innerHTML = html; + } }; /** diff --git a/template.html b/template.html index afac672..b0e2dc6 100644 --- a/template.html +++ b/template.html @@ -25,13 +25,11 @@ URL: https://code.google.com/p/io-2012-slides +
-

Title Goes Here

-

Subtitle Goes Here

-

- Speaker Name
- Title -

+

+

+

@@ -87,7 +85,7 @@ URL: https://code.google.com/p/io-2012-slides
  • Subtitle capitalization is title case
  • -
  • Titles and subtitles should never have a period at the end
  • +
  • Titles and subtitles should never have a period at the end
  • @@ -189,10 +187,10 @@ function helloWorld(world) {

    <Thank You!>

    Important contact information goes here.

    -

    - Insert contact info
    +

    +

    @@ -208,7 +206,8 @@ function helloWorld(world) { var slideConfig = { // Slide settings settings: { - title: 'A Fancy Slide Deck - Google IO 2012', + title: 'Title Goes Here', + subtitle: 'Subtitle Goes Here', theme: 'default', hashtag: '#html5', //TODO useBuilds: true, @@ -224,13 +223,19 @@ function helloWorld(world) { }, // Author information - author: [{ - name: 'Luke Mahe', - gplus: 'http://www.google.com' - }, { + presenters: [{ + name: 'Firstname Lastname', + company: 'Job Title, Google', + gplus: 'http://plus.google.com/1234567890', + twitter: '@yourhandle', + www: 'http://www.you.com' + }/*, { name: 'Eric Bidelman', - gplus: 'http://plus.ericbidelman.com' - }] + gplus: 'http://plus.ericbidelman.com', + company: 'Senior Developer Programs Engineer, Google Chrome', + twitter: '@ebidel', + www: 'http://www.ericbidelman.com' + }*/] }; diff --git a/theme/css/default.css b/theme/css/default.css index 276c29e..39b7f53 100644 --- a/theme/css/default.css +++ b/theme/css/default.css @@ -490,23 +490,25 @@ b { /* line 229, ../sass/default.scss */ a { - color: #0066cc; -} -/* line 232, ../sass/default.scss */ -a:visited { - color: rgba(0, 102, 204, 0.75); -} -/* line 236, ../sass/default.scss */ + color: #2a7cdf; + text-decoration: none; + padding-bottom: 2px; + border-bottom: 1px solid rgba(42, 124, 223, 0.5); + /* &:visited { + color: rgba(0, 102, 204, 0.75); + }*/ +} +/* line 239, ../sass/default.scss */ a:hover { - color: black; + color: black !important; } -/* line 241, ../sass/default.scss */ +/* line 244, ../sass/default.scss */ h1, h2, h3 { font-weight: 600; } -/* line 245, ../sass/default.scss */ +/* line 248, ../sass/default.scss */ h2 { font-size: 45px; line-height: 45px; @@ -514,7 +516,7 @@ h2 { color: #515151; } -/* line 252, ../sass/default.scss */ +/* line 255, ../sass/default.scss */ h3 { font-size: 30px; letter-spacing: -1px; @@ -523,38 +525,38 @@ h3 { color: #797979; } -/* line 260, ../sass/default.scss */ +/* line 263, ../sass/default.scss */ ul { margin-left: 1.2em; margin-bottom: 1em; } -/* line 264, ../sass/default.scss */ +/* line 267, ../sass/default.scss */ ul li { margin-bottom: 0.5em; } -/* line 267, ../sass/default.scss */ +/* line 270, ../sass/default.scss */ ul li ul { margin-left: 2em; margin-bottom: 0; } -/* line 271, ../sass/default.scss */ +/* line 274, ../sass/default.scss */ ul li ul li:before { content: '-'; font-weight: 600; } -/* line 278, ../sass/default.scss */ +/* line 281, ../sass/default.scss */ ul > li:before { content: '·'; margin-left: -1em; position: absolute; font-weight: 600; } -/* line 286, ../sass/default.scss */ +/* line 289, ../sass/default.scss */ ul ul { margin-top: .5em; } -/* line 291, ../sass/default.scss */ +/* line 294, ../sass/default.scss */ pre { font-family: 'Inconsolata', 'Courier New', monospace; font-size: 20px; @@ -572,7 +574,7 @@ pre { box-sizing: border-box; /*overflow: hidden;*/ } -/* line 305, ../sass/default.scss */ +/* line 308, ../sass/default.scss */ pre:after { content: attr(data-lang); background-color: #a9a9a9; @@ -585,14 +587,14 @@ pre:after { text-transform: uppercase; } -/* line 318, ../sass/default.scss */ +/* line 321, ../sass/default.scss */ code { font-size: 95%; font-family: 'Inconsolata', 'Courier New', monospace; color: black; } -/* line 324, ../sass/default.scss */ +/* line 327, ../sass/default.scss */ iframe { width: 100%; height: 620px; @@ -601,17 +603,17 @@ iframe { margin: -1px; } -/* line 332, ../sass/default.scss */ +/* line 335, ../sass/default.scss */ dt { font-weight: bold; } -/* line 336, ../sass/default.scss */ +/* line 339, ../sass/default.scss */ h3 + iframe { height: 540px; } -/* line 340, ../sass/default.scss */ +/* line 343, ../sass/default.scss */ button { display: inline-block; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9), color-stop(70%, #e3e3e3)); @@ -640,12 +642,12 @@ button { font-size: 10pt; } -/* line 355, ../sass/default.scss */ +/* line 358, ../sass/default.scss */ button:hover { border-color: black; } -/* line 359, ../sass/default.scss */ +/* line 362, ../sass/default.scss */ button:active { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9)); background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); @@ -655,62 +657,62 @@ button:active { background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%); } -/* line 363, ../sass/default.scss */ +/* line 366, ../sass/default.scss */ .blue { color: #0066cc; } -/* line 366, ../sass/default.scss */ +/* line 369, ../sass/default.scss */ .yellow { color: #ffd319; } -/* line 369, ../sass/default.scss */ +/* line 372, ../sass/default.scss */ .green { color: #008a35; } -/* line 372, ../sass/default.scss */ +/* line 375, ../sass/default.scss */ .red { color: red; } -/* line 375, ../sass/default.scss */ +/* line 378, ../sass/default.scss */ .black { color: black; } -/* line 378, ../sass/default.scss */ +/* line 381, ../sass/default.scss */ .white { color: white; } -/* line 381, ../sass/default.scss */ +/* line 384, ../sass/default.scss */ .dark { background-color: rgba(0, 0, 0, 0.2); color: white; } -/* line 386, ../sass/default.scss */ +/* line 389, ../sass/default.scss */ img.centered { margin: 0 auto; display: block; } -/* line 391, ../sass/default.scss */ +/* line 394, ../sass/default.scss */ table { width: 100%; border-collapse: collapse; margin-top: 40px; } -/* line 397, ../sass/default.scss */ +/* line 400, ../sass/default.scss */ th { font-weight: 600; text-align: left; } -/* line 403, ../sass/default.scss */ +/* line 406, ../sass/default.scss */ td, th { border: 1px solid #e0e0e0; @@ -718,25 +720,25 @@ th { vertical-align: top; } -/* line 409, ../sass/default.scss */ +/* line 412, ../sass/default.scss */ q { font-size: 45px; line-height: 72px; } -/* line 413, ../sass/default.scss */ +/* line 416, ../sass/default.scss */ q:before { content: '“'; position: absolute; margin-left: -0.5em; } -/* line 418, ../sass/default.scss */ +/* line 421, ../sass/default.scss */ q:after { content: '”'; position: absolute; margin-left: 0.1em; } -/* line 425, ../sass/default.scss */ +/* line 428, ../sass/default.scss */ slide.fill { -moz-border-radius: 5px; -webkit-border-radius: 5px; @@ -745,7 +747,7 @@ slide.fill { -khtml-border-radius: 5px; border-radius: 5px; } -/* line 428, ../sass/default.scss */ +/* line 431, ../sass/default.scss */ slide.fill h3 { background: rgba(255, 255, 255, 0.75); padding-top: .2em; @@ -756,7 +758,7 @@ slide.fill h3 { margin-right: -60px; padding-right: 60px; } -/* line 439, ../sass/default.scss */ +/* line 442, ../sass/default.scss */ slide.fill h4 { display: inline; position: absolute; @@ -765,91 +767,91 @@ slide.fill h4 { } /* Size variants */ -/* line 450, ../sass/default.scss */ +/* line 453, ../sass/default.scss */ article.smaller p, article.smaller ul { font-size: 20px; line-height: 24px; letter-spacing: 0; } -/* line 455, ../sass/default.scss */ +/* line 458, ../sass/default.scss */ article.smaller table { font-size: 20px; line-height: 24px; letter-spacing: 0; } -/* line 460, ../sass/default.scss */ +/* line 463, ../sass/default.scss */ article.smaller pre { font-size: 15px; line-height: 20px; letter-spacing: 0; } -/* line 465, ../sass/default.scss */ +/* line 468, ../sass/default.scss */ article.smaller q { font-size: 40px; line-height: 48px; } -/* line 469, ../sass/default.scss */ +/* line 472, ../sass/default.scss */ article.smaller q:before, article.smaller q:after { font-size: 60px; } /* Builds */ -/* line 478, ../sass/default.scss */ +/* line 481, ../sass/default.scss */ .build > * { -moz-transition: opacity 0.5s ease-in-out 0.2s; -webkit-transition: opacity 0.5s ease-in-out 0.2s; -o-transition: opacity 0.5s ease-in-out 0.2s; transition: opacity 0.5s ease-in-out 0.2s; } -/* line 482, ../sass/default.scss */ +/* line 485, ../sass/default.scss */ .build .to-build { opacity: 0; } -/* line 486, ../sass/default.scss */ +/* line 489, ../sass/default.scss */ .build .build-fade { opacity: 0.3; } -/* line 489, ../sass/default.scss */ +/* line 492, ../sass/default.scss */ .build .build-fade:hover { opacity: 1.0; } /* Pretty print */ -/* line 498, ../sass/default.scss */ +/* line 501, ../sass/default.scss */ .prettyprint .str, .prettyprint .atv { /* a markup attribute value */ color: #009f5d; } -/* line 502, ../sass/default.scss */ +/* line 505, ../sass/default.scss */ .prettyprint .kwd, .prettyprint .tag { /* a markup tag name */ color: #0066cc; } -/* line 505, ../sass/default.scss */ +/* line 508, ../sass/default.scss */ .prettyprint .com { /* a comment */ color: #797979; font-style: italic; } -/* line 509, ../sass/default.scss */ +/* line 512, ../sass/default.scss */ .prettyprint .lit { /* a literal value */ color: #f6c000; } -/* line 514, ../sass/default.scss */ +/* line 517, ../sass/default.scss */ .prettyprint .pun, .prettyprint .opn, .prettyprint .clo { color: #515151; } -/* line 520, ../sass/default.scss */ +/* line 523, ../sass/default.scss */ .prettyprint .typ, .prettyprint .atn, .prettyprint .dec, @@ -858,18 +860,18 @@ article.smaller q:before, article.smaller q:after { color: #d94d3a; } -/* line 523, ../sass/default.scss */ +/* line 526, ../sass/default.scss */ .prettyprint .pln { color: #515151; } -/* line 527, ../sass/default.scss */ +/* line 530, ../sass/default.scss */ .with-notes .note { opacity: 1; pointer-events: auto; } -/* line 532, ../sass/default.scss */ +/* line 535, ../sass/default.scss */ .note { position: absolute; z-index: 100; @@ -908,7 +910,7 @@ article.smaller q:before, article.smaller q:after { -khtml-border-radius: 5px; border-radius: 5px; } -/* line 549, ../sass/default.scss */ +/* line 552, ../sass/default.scss */ .note > section { background: #fff; -moz-border-radius: 5px; @@ -925,17 +927,17 @@ article.smaller q:before, article.smaller q:after { padding: 2em; } -/* line 558, ../sass/default.scss */ +/* line 561, ../sass/default.scss */ input, button { vertical-align: middle; } -/* line 562, ../sass/default.scss */ +/* line 565, ../sass/default.scss */ .centered { text-align: center; } -/* line 566, ../sass/default.scss */ +/* line 569, ../sass/default.scss */ .reflect { -webkit-box-reflect: below 3px -webkit-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%); -moz-box-reflect: below 3px -moz-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%); @@ -944,7 +946,7 @@ input, button { box-reflect: below 3px linear-gradient(rgba(255, 255, 255, 0) 85%, #ffffff 150%); } -/* line 574, ../sass/default.scss */ +/* line 577, ../sass/default.scss */ .flexbox { display: -webkit-box !important; display: -moz-box !important; @@ -953,7 +955,7 @@ input, button { display: box !important; } -/* line 578, ../sass/default.scss */ +/* line 581, ../sass/default.scss */ .flexbox.vcenter { -moz-box-orient: vertical; -webkit-box-orient: vertical; @@ -971,7 +973,7 @@ input, button { width: 100%; } -/* line 584, ../sass/default.scss */ +/* line 587, ../sass/default.scss */ .flexbox.vleft { -moz-box-orient: vertical; -webkit-box-orient: vertical; @@ -989,7 +991,7 @@ input, button { width: 100%; } -/* line 590, ../sass/default.scss */ +/* line 593, ../sass/default.scss */ .auto-fadein { -moz-transition: opacity 0.6s ease-in 1s; -webkit-transition: opacity 0.6s ease-in 1s; @@ -999,52 +1001,52 @@ input, button { } /* ===== SLIDE CONTENT ===== */ -/* line 597, ../sass/default.scss */ +/* line 600, ../sass/default.scss */ .logoslide img { width: 383px; height: 92px; } -/* line 603, ../sass/default.scss */ +/* line 606, ../sass/default.scss */ .segue { padding: 60px 120px; } -/* line 606, ../sass/default.scss */ +/* line 609, ../sass/default.scss */ .segue h2 { color: #e6e6e6; font-size: 60px; } -/* line 610, ../sass/default.scss */ +/* line 613, ../sass/default.scss */ .segue h3 { color: #e6e6e6; line-height: 2.8; } -/* line 614, ../sass/default.scss */ +/* line 617, ../sass/default.scss */ .segue aside { width: 215px !important; } -/* line 617, ../sass/default.scss */ +/* line 620, ../sass/default.scss */ .segue hgroup { position: absolute; bottom: 150px; } -/* line 623, ../sass/default.scss */ +/* line 626, ../sass/default.scss */ .thank-you-slide { background: #4387fd; color: white; } -/* line 627, ../sass/default.scss */ +/* line 630, ../sass/default.scss */ .thank-you-slide h2 { font-size: 60px; color: inherit; } -/* line 632, ../sass/default.scss */ +/* line 635, ../sass/default.scss */ .thank-you-slide article > p { margin-top: 2em; font-size: 20pt; } -/* line 637, ../sass/default.scss */ +/* line 640, ../sass/default.scss */ .thank-you-slide > p { position: absolute; bottom: 80px; @@ -1052,7 +1054,7 @@ input, button { line-height: 1.3; } -/* line 645, ../sass/default.scss */ +/* line 648, ../sass/default.scss */ aside.gdbar { height: 97px; width: 155px; @@ -1082,7 +1084,7 @@ aside.gdbar { transition: all 0.5s ease-out 0.5s; /* Better to transition only on background-size, but not sure how to do that with the mixin. */ } -/* line 657, ../sass/default.scss */ +/* line 660, ../sass/default.scss */ aside.gdbar.right { right: 0; left: -moz-initial; @@ -1095,7 +1097,7 @@ aside.gdbar.right { -ms-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 664, ../sass/default.scss */ +/* line 667, ../sass/default.scss */ aside.gdbar.right img { -moz-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); @@ -1103,13 +1105,13 @@ aside.gdbar.right img { -ms-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 669, ../sass/default.scss */ +/* line 672, ../sass/default.scss */ aside.gdbar.bottom { top: -moz-initial; top: initial; bottom: 60px; } -/* line 675, ../sass/default.scss */ +/* line 678, ../sass/default.scss */ aside.gdbar img { width: 85px; height: 85px; @@ -1118,20 +1120,20 @@ aside.gdbar img { margin: 8px 15px; } -/* line 687, ../sass/default.scss */ +/* line 690, ../sass/default.scss */ .title-slide hgroup h1 { font-size: 65px; line-height: 1.4; letter-spacing: -3px; color: #515151; } -/* line 694, ../sass/default.scss */ +/* line 697, ../sass/default.scss */ .title-slide hgroup h2 { font-size: 34px; color: #a9a9a9; font-weight: inherit; } -/* line 700, ../sass/default.scss */ +/* line 703, ../sass/default.scss */ .title-slide hgroup p { font-size: 20px; color: #797979; @@ -1139,14 +1141,25 @@ aside.gdbar img { margin-top: 2em; } -/* line 709, ../sass/default.scss */ +/* line 712, ../sass/default.scss */ .quote { color: #e6e6e6; } -/* line 712, ../sass/default.scss */ +/* line 715, ../sass/default.scss */ .quote .author { font-size: 24px; position: absolute; bottom: 80px; line-height: 1.4; } + +/* line 724, ../sass/default.scss */ +[data-config-contact] a { + color: white; + border-bottom: none; +} +/* line 728, ../sass/default.scss */ +[data-config-contact] span { + width: 115px; + display: inline-block; +} diff --git a/theme/sass/default.scss b/theme/sass/default.scss index e583d5d..3815f8a 100644 --- a/theme/sass/default.scss +++ b/theme/sass/default.scss @@ -227,14 +227,17 @@ b { } a { - color: rgb(0, 102, 204); + color: $brand-blue-secondary2; + text-decoration: none; + padding-bottom: 2px; + border-bottom: 1px solid rgba(42, 124, 223, 0.5); - &:visited { - color: rgba(0, 102, 204, .75); - } +/* &:visited { + color: rgba(0, 102, 204, 0.75); + }*/ &:hover { - color: black; + color: black !important; } } @@ -716,3 +719,14 @@ aside.gdbar { line-height: 1.4; } } + +[data-config-contact] { + a { + color: rgb(255, 255, 255); + border-bottom: none; + } + span { + width: 115px; + display: inline-block; + } +} \ No newline at end of file -- cgit v1.2.3