reworked some design

nychtml5 · Jun 6, 2014 · 1bfede4 · 1bfede4
1 parent 3a36a3e
commit 1bfede4
Show file tree

Hide file tree

Showing 7 changed files with 482 additions and 93 deletions.
diff --git a/lib/routes.js b/lib/routes.js
@@ -1,7 +1,5 @@
 'use strict';
 
-var async = require('async');
-var twitter = require('./twitter');
 var meetups = require('./meetups');
 var React = require('react');
 var _ = require('lodash');
@@ -10,17 +8,12 @@ var meetupView = require('./views/meetup-com');
 
 module.exports = function(app) {
   // index
-  app.get('/', function(req, res, next) {
-
-    async.parallel({
-      tweets: twitter.get
-    }, function(err, results) {
-      if (err) return next(err);
-
-      results.meetups = meetups;
-      results.env = app.get('env');
-      res.render('index', results);
-    });
+  app.get('/', function(req, res) {
+    var data = {
+      meetups: meetups,
+      env: app.get('env')
+    };
+    res.render('index', data);
   });
 
   // render meetup

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "nychtml5-www",
   "private": true,
   "license": "ISC",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "NYC HTML5 Website",
   "main": "index.js",
   "scripts": {

diff --git a/public/css/main.css b/public/css/main.css
@@ -1,5 +1,5 @@
 .masthead {
-  margin: 30px 0;
+  margin: 20px 0;
   font-family: 'Open Sans', Arial, Helvetica, Sans-Serif !important;
 }
 .masthead .container {
@@ -111,18 +111,6 @@
 #content table td:last-child {
   text-align: right;
 }
-.timeline-heading {
-  background-color: #111;
-  color: #fff;
-}
-.twitter-heading {
-  background-color: #555;
-  color: #eee;
-}
-.about-heading {
-  background-color: #888 !important;
-  color: #fff !important;
-}
 iframe {
   border: 0;
 }
@@ -184,3 +172,232 @@ img.grayscale {
 a .fa {
   color: #454545;
 }
+.timeline {
+  list-style: none;
+  padding: 20px 0 20px;
+  position: relative;
+}
+.timeline h3 {
+  font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+}
+.timeline:before {
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  content: " ";
+  width: 3px;
+  background-color: #eee;
+  left: 50%;
+  margin-left: -1.5px;
+}
+.timeline > li {
+  margin-bottom: 20px;
+  position: relative;
+}
+.timeline > li:before,
+.timeline > li:after {
+  content: " ";
+  display: table;
+}
+.timeline > li:after {
+  clear: both;
+}
+.timeline > li:before,
+.timeline > li:after {
+  content: " ";
+  display: table;
+}
+.timeline > li:after {
+  clear: both;
+}
+.timeline .timeline-header {
+  text-align: center;
+  background: #f7f7f7;
+}
+.timeline > li > .timeline-panel {
+  width: 46%;
+  float: left;
+  border: 1px solid #d4d4d4;
+  border-radius: 2px;
+  padding: 20px;
+  position: relative;
+  -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175);
+  box-shadow: 0 1px 6px rgba(0,0,0,0.175);
+}
+.timeline > li > .timeline-panel:before {
+  position: absolute;
+  top: 26px;
+  right: -15px;
+  display: inline-block;
+  border-top: 15px solid transparent;
+  border-left: 15px solid #ccc;
+  border-right: 0 solid #ccc;
+  border-bottom: 15px solid transparent;
+  content: " ";
+}
+.timeline > li > .timeline-panel:after {
+  position: absolute;
+  top: 27px;
+  right: -14px;
+  display: inline-block;
+  border-top: 14px solid transparent;
+  border-left: 14px solid #fff;
+  border-right: 0 solid #fff;
+  border-bottom: 14px solid transparent;
+  content: " ";
+}
+.timeline > li > .timeline-badge {
+  color: #fff;
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  font-size: 1.4em;
+  text-align: center;
+  position: absolute;
+  top: 16px;
+  left: 50%;
+  margin-left: -25px;
+  background-color: #f72b2b;
+  z-index: 100;
+  border-top-right-radius: 50%;
+  border-top-left-radius: 50%;
+  border-bottom-right-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+.timeline > li.timeline-inverted > .timeline-panel {
+  float: right;
+}
+.timeline > li.timeline-inverted > .timeline-panel:before {
+  border-left-width: 0;
+  border-right-width: 15px;
+  left: -15px;
+  right: auto;
+}
+.timeline > li.timeline-inverted > .timeline-panel:after {
+  border-left-width: 0;
+  border-right-width: 14px;
+  left: -14px;
+  right: auto;
+}
+.timeline-badge.primary {
+  background-color: #2e6da4 !important;
+}
+.timeline-badge.success {
+  background-color: #3f903f !important;
+}
+.timeline-badge.warning {
+  background-color: #f0ad4e !important;
+}
+.timeline-badge.danger {
+  background-color: #d9534f !important;
+}
+.timeline-badge.info {
+  background-color: #5bc0de !important;
+}
+.timeline-title {
+  margin-top: 0;
+  color: inherit;
+}
+.timeline-date {
+  color: #777;
+}
+.timeline-body > p,
+.timeline-body > ul {
+  margin-bottom: 0;
+}
+.timeline-body > p + p {
+  margin-top: 5px;
+}
+@media (max-width: 767px) {
+  ul.timeline:before {
+    background: transparent;
+  }
+  ul.timeline > li {
+    margin-bottom: 20px;
+    position: relative;
+    width: 100%;
+    float: left;
+    clear: left;
+  }
+  ul.timeline > li > .timeline-panel {
+    width: 100%;
+  }
+  ul.timeline > li > .timeline-badge {
+    display: none;
+  }
+  ul.timeline > li > .timeline-panel:before {
+    content: '';
+    border: none;
+  }
+  ul.timeline > li > .timeline-panel:after {
+    content: '';
+    border: none;
+  }
+  .timeline > li.timeline-inverted {
+    float: left;
+    clear: left;
+    margin-top: 30px;
+    margin-bottom: 30px;
+  }
+  .timeline > li.timeline-inverted > .timeline-badge {
+    left: 28px;
+  }
+  .speaker .pull-left {
+    float: none !important;
+  }
+}
+#social {
+  margin-top: 20px;
+  font-size: 21px;
+}
+#social i {
+  font-size: 25px;
+  margin: 0 2px;
+}
+.box > .icon {
+  text-align: center;
+  position: relative;
+}
+.box > .icon > .image {
+  position: relative;
+  z-index: 2;
+  margin: auto;
+  width: 88px;
+  height: 88px;
+  border: 8px solid #fff;
+  line-height: 88px;
+  border-radius: 50%;
+  background: #0d83d3;
+  vertical-align: middle;
+}
+.box > .icon > .image > i {
+  font-size: 36px !important;
+  color: #fff !important;
+}
+.box > .icon > .info {
+  margin-top: -24px;
+  background: rgba(0,0,0,0.04);
+  border: 1px solid #e0e0e0;
+  padding: 15px 0 10px 0;
+}
+.box > .icon > .info > h3.title {
+  font-size: 16px;
+  color: #222;
+  font-weight: 500;
+}
+.box > .icon > .info > p {
+  font-size: 13px;
+  color: #666;
+  line-height: 1.5em;
+  margin: 20px;
+}
+.box > .icon > .info > .more a {
+  font-size: 12px;
+  color: #222;
+  line-height: 12px;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+.box .space {
+  height: 30px;
+}