added speaker placeholders

datajconf · Feb 8, 2017 · 7b2d6c8 · 7b2d6c8
1 parent 6c7f69e
commit 7b2d6c8
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
 Website for the European Data and Computational Journalism Conference.
 
-Cover Image: CC-BY-ND 2.0 by LenDog64 https://www.flickr.com/photos/lendog64/5574663324/ 
+Cover Image: CC-BY-ND 2.0 by LenDog64 https://www.flickr.com/photos/lendog64/5574663324/
diff --git a/app/_assets/scss/main.scss b/app/_assets/scss/main.scss
@@ -36,8 +36,6 @@ $medium-break:         600px;
 $large-break:          1000px;
 
 
-
-
 // Use media queries like this:
 // @include media-query($on-palm) {
 //     .wrapper {

diff --git a/app/_assets/scss/partials/_layout.scss b/app/_assets/scss/partials/_layout.scss
@@ -38,7 +38,7 @@ nav {
 
 .wrapper {
 
-    padding-top: $spacing-unit*3;
+    padding-top: $spacing-unit * 2;
     height: 100%;
     width: 95%;
     margin: auto;

diff --git a/app/_assets/scss/partials/_sections.scss b/app/_assets/scss/partials/_sections.scss
@@ -100,6 +100,38 @@
     }
 }
 
+#speakers {
+    background: url(../img/microphone.jpg);
+    background-size: cover;
+    padding-bottom: $spacing-unit;
+    color: white;
+
+    .flex-wrapper {
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .speaker {
+        background-color: rgba($grey-colour-dark, 0.9);
+        padding-top: $spacing-unit/2;
+        border-radius: 50px;
+        margin: $gap-size;
+        text-align: center;
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: 1;
+
+        .fa-user {
+            font-size: 80px;
+        }
+    }
+
+    .explainer {
+        padding-bottom: $spacing-unit;
+    }
+}
+
 @include media-query($small-break) {
 
     .hero {
@@ -177,4 +209,12 @@
             margin-top: 20vh;
         }
     }
+
+    #speakers {
+        .flex-wrapper {
+            padding-top: 10vh;
+            flex-direction: row;
+        }
+    }
+
 }
diff --git a/app/_includes/head.html b/app/_includes/head.html
@@ -5,11 +5,12 @@
 
       <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
       <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
-      <link href="https://fonts.googleapis.com/css?family=Roboto:100,300" rel="stylesheet">
+      <link href="https://fonts.googleapis.com/css?family=Roboto:100,700" rel="stylesheet">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
       <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
       <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
       <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
       <script src="//cdnjs.cloudflare.com/ajax/libs/countdown/2.6.0/countdown.min.js"></script>
       <script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
+      <script src="//use.fontawesome.com/974e2a5af3.js"></script>
 </head>
diff --git a/app/img/lecture.jpg b/app/img/lecture.jpg
diff --git a/app/img/microphone.jpg b/app/img/microphone.jpg
diff --git a/app/index.html b/app/index.html
@@ -60,6 +60,26 @@ <h1>The Conference</h1>
 <section class="half-page-height" id="speakers">
   <div class="wrapper">
     <h1>Speakers</h1>
+    <div class="explainer">
+      Joining us will be three industry leaders to deliver keynote talks during the conference on the real world practice of Data and Computational Journalism.
+    </div>
+    <div class="flex-wrapper">
+      <div class="speaker">
+          <i class="fa fa-user" aria-hidden="true"></i>
+          <h2>Speaker tbc</h2>
+          <p>... speaker to be confirmed ...</p>
+      </div>
+      <div class="speaker">
+          <i class="fa fa-user" aria-hidden="true"></i>
+          <h2>Speaker tbc</h2>
+          <p>... speaker to be confirmed ...</p>
+      </div>
+      <div class="speaker">
+          <i class="fa fa-user" aria-hidden="true"></i>
+          <h2>Speaker tbc</h2>
+          <p>... speaker to be confirmed ...</p>
+      </div>
+    </div>
 
   </div>
 </section>

diff --git a/todo.md b/todo.md
@@ -11,4 +11,4 @@
 
 * * *
 
-Last generated: Wed Feb 08 2017 14:43:54 by [grunt-todo](https://github.com/leny/grunt-todo).
+Last generated: Wed Feb 08 2017 20:06:50 by [grunt-todo](https://github.com/leny/grunt-todo).