initial

mrflix · mrflix · commit 9c6d9f2dd21e · 2014-06-29T17:27:08.000+02:00
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<title>IndieWeb Building Blocks for Mobile Communication CSS</title>
+<link rel="stylesheet" href="style.css">
+
+<h2>Contact</h2>
+<ol>
+  <li><a href="sms:user@example.com">
+      <img src="http://media.idownloadblog.com/wp-content/uploads/2013/06/Messages-icon-iOS-7.png" width="60" height="60"
+           alt=""/>
+      txt message
+  </a></li>
+  <li><a href="fb-messenger://user-thread/4">
+      <img src="http://a1.mzstatic.com/us/r30/Purple/v4/f1/78/4d/f1784dfc-4fde-c050-fb09-e7ca857fcc08/mzl.kboatkno.350x350-75.jpg" width="60" height="60"
+           alt=""/>
+      <abbr title="Facebook">FB</abbr> message
+  </a></li>
+  <li><a href="aim:goim?screenname=tantekc&message=hi">
+      <img src="http://a4.mzstatic.com/us/r30/Purple6/v4/f4/5f/67/f45f676c-cc79-1eba-c910-7bfead9e92ea/mzl.agcbnvdg.350x350-75.jpg" width="60" height="60"
+           alt=""/>
+      AIM chat
+  </a></li>
+  <li><a href="facetime:user@example.com">
+      <img src="http://www.downloadios7.org/wp-content/uploads/apple_facetime_ios_7_logo.png" width="60" height="60"
+           alt=""/>
+      FaceTime call
+  </a></li>
+  <li><a href="skype:echo123?call">
+      <img src="http://a4.mzstatic.com/us/r30/Purple/v4/f7/64/47/f76447e6-460c-5a25-3030-eec67e9dd775/mzl.atbvkciq.350x350-75.jpg" width="60" height="60"
+           alt=""/>
+      Skype call
+  </a></li>
+  <li><a href="https://mobile.twitter.com/t/messages">
+      <img src="http://a2.mzstatic.com/us/r30/Purple4/v4/45/2a/6c/452a6ce3-8514-d1fc-8beb-53d9b1c4cfee/mzl.xpibyegh.350x350-75.jpg" width="60" height="60"
+           alt=""/>
+      Twitter DM
+  </a></li>
+</ol>
diff --git a/mockup.jpg b/mockup.jpg
diff --git a/style.css b/style.css
@@ -0,0 +1,51 @@
+body {
+  margin: 0;
+  background: black;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+h2 {
+  color: white;
+  font-weight: 100;
+  font-size: 30px;
+  margin: 40px 0;
+  letter-spacing: 2px; 
+}
+
+ol {
+  padding: 22px 10px 18px;
+  margin: 0;
+  width: 100%;
+  max-width: 320px;
+  display: flex;
+  flex-wrap: wrap;
+  background: #4e4e50;
+  list-style: none;
+  border-radius: 32px;
+  box-sizing: border-box;
+}
+
+li {
+  width: 33%;
+  text-align: center;
+}
+
+a {
+  font-size: 11px;
+  font-weight: 100;
+  letter-spacing: 0.08em;
+  padding: 7px 0;
+  display: block;
+  color: white;
+  text-decoration: none;
+}
+
+a img {
+  border-radius: 13px;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto 5px;
+}
