diff --git a/css/style.scss b/css/style.scss
index a9411bd..3102099 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -1,6 +1,179 @@
 ---
 ---
 
+html {
+  background: #ededed;
+  font-family: 'Open Sans', sans-serif;
+  line-height: 1.4;
+}
+h1 {
+  font-family: 'Merriweather', serif;
+  font-weight: normal; // reset for mobile - http://css-tricks.com/forums/discussion/comment/44182/#Comment_44182
+  margin-top: 0;
+}
+img {
+  max-width: 100%;
+}
+pre,
+code {
+  background-color: #fcfcfc;
+  border-radius: 4px;
+  border: 1px solid #c5c5c5;
+  padding: 2px;
+
+  // https://css-tricks.com/snippets/css/make-pre-text-wrap/
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+}
+pre code {
+  border: none;
+}
+
+.navbar {
+  text-align: center;
+}
+
+.navbar a {
+  font-family: 'Merriweather', serif;
+  color: gray;
+}
+.content {
+  max-width: 640px;
+  margin: auto;
+  min-height: 80%;
+  padding: 50px 20px 80px;
+}
+.footer {
+  margin-bottom: 1em;
+  text-align: center;
+
+  a {
+    color: gray;
+  }
+}
+
+/* homepage */
+.page-index {
+  .content {
+    padding: 200px 20px 125px;
+    text-align: center;
+  }
+  h1 {
+    font-size: 5em;
+    margin-bottom: 0.2em;
+  }
+  h2 {
+    font-size: 1.4em;
+    font-weight: normal;
+  }
+}
+.meetupLink {
+  display: block;
+  text-decoration: none;
+  color: black;
+}
+
+.dateRow {
+  opacity: 0;
+}
+#dateMs,
+#dateStr {
+  -webkit-transition: opacity 0.4s linear;
+  -moz-transition: opacity 0.4s linear;
+  -o-transition: opacity 0.4s linear;
+  -ms-transition: opacity 0.4s linear;
+  transition: opacity 0.4s linear;
+}
+#dateStr {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 18em;
+  text-align: left;
+  opacity: 0;
+}
+#meetupDate {
+  position: relative;
+
+  &:hover {
+    #dateMs {
+      opacity: 0;
+    }
+    #dateStr {
+      opacity: 1;
+    }
+  }
+}
+
+
+.header-link {
+  $width: 1em;
+  color: black;
+  font-size: 0.8em;
+  left: -1 * $width;
+  opacity: 0;
+  position: absolute;
+  text-decoration: none;
+  top: 0.2em;
+  width: $width;
+}
+h2,
+h3,
+h4 {
+  position: relative;
+  &:hover .header-link {
+    opacity: 1;
+  }
+}
+
+/* open source workshop */
+.page-oss-workshop {
+  .event-details {
+    font-size: 1.2em;
+  }
+  .addthisevent-drop img {
+    background-color: white;
+    margin-left: 6px;
+    width: 17px;
+  }
+
+  .name {
+    font-size: 1.1em;
+  }
+
+  .github-username {
+    color: black;
+    // copy from GitHub
+    font-family: Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+    font-weight: bold;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+
+@media all and (max-height: 360px) {
+  p {
+    font-size: 1.2em;
+  }
+}
+@media all and (max-height: 650px) {
+  p {
+    font-size: 1.1em;
+  }
+  .page-index {
+    .content {
+      padding: 20px 5px;
+    }
+  }
+}
+
 @import "base";
 @import "pages/index";
 @import "pages/oss-workshop";