Initial import
authorAntonio Ospite <ao2@ao2.it>
Mon, 4 Jan 2016 16:47:23 +0000 (17:47 +0100)
committerAntonio Ospite <ao2@ao2.it>
Mon, 4 Jan 2016 16:47:23 +0000 (17:47 +0100)
17 files changed:
.gitignore [new file with mode: 0644]
Makefile [new file with mode: 0644]
README [new file with mode: 0644]
favicon.ico [new file with mode: 0644]
files/SaveMySugar-0.1-debug.apk [new file with mode: 0644]
images/CC_by-nc-sa_2.5_it_88x31.png [new file with mode: 0644]
images/logo.png [new file with mode: 0644]
images/savemysugar_plot_codex.png [new file with mode: 0644]
images/savemysugar_plot_savemysugar.png [new file with mode: 0644]
images/symbols_distances.png [new file with mode: 0644]
index.html [new file with mode: 0644]
project/favicon/favicon.ico [new file with mode: 0644]
project/favicon/favicon.xcf [new file with mode: 0644]
project/favicon/to_ico.sh [new file with mode: 0755]
project/logo/icon.svg [new file with mode: 0644]
project/logo/logo.svg [new file with mode: 0644]
style.scss [new file with mode: 0644]

diff --git a/.gitignore b/.gitignore
new file mode 100644 (file)
index 0000000..35c6a07
--- /dev/null
@@ -0,0 +1,4 @@
+css/
+*.css.map
+.sass-cache/
+upload.sh
diff --git a/Makefile b/Makefile
new file mode 100644 (file)
index 0000000..00421ac
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,13 @@
+DESTDIR := css
+
+SOURCES        := $(wildcard [^_]*.scss)
+COMPILED := $(SOURCES:.scss=.css)
+
+update: $(COMPILED)
+
+clean:
+       rm -rf $(DESTDIR) .sass-cache
+
+%.css: %.scss
+       [ -d $(DESTDIR) ] || mkdir -p $(DESTDIR)
+       scss --compass --unix-newlines -t expanded $< $(DESTDIR)/$@
diff --git a/README b/README
new file mode 100644 (file)
index 0000000..3893f97
--- /dev/null
+++ b/README
@@ -0,0 +1,4 @@
+Dependencies:
+  compass-normalize-plugin
+  compass-susy-plugin
+  compass-breakpoint-plugin
diff --git a/favicon.ico b/favicon.ico
new file mode 100644 (file)
index 0000000..5de39fa
Binary files /dev/null and b/favicon.ico differ
diff --git a/files/SaveMySugar-0.1-debug.apk b/files/SaveMySugar-0.1-debug.apk
new file mode 100644 (file)
index 0000000..b3a1482
Binary files /dev/null and b/files/SaveMySugar-0.1-debug.apk differ
diff --git a/images/CC_by-nc-sa_2.5_it_88x31.png b/images/CC_by-nc-sa_2.5_it_88x31.png
new file mode 100644 (file)
index 0000000..30f8ea1
Binary files /dev/null and b/images/CC_by-nc-sa_2.5_it_88x31.png differ
diff --git a/images/logo.png b/images/logo.png
new file mode 100644 (file)
index 0000000..7274579
Binary files /dev/null and b/images/logo.png differ
diff --git a/images/savemysugar_plot_codex.png b/images/savemysugar_plot_codex.png
new file mode 100644 (file)
index 0000000..7ddea85
Binary files /dev/null and b/images/savemysugar_plot_codex.png differ
diff --git a/images/savemysugar_plot_savemysugar.png b/images/savemysugar_plot_savemysugar.png
new file mode 100644 (file)
index 0000000..982fb6d
Binary files /dev/null and b/images/savemysugar_plot_savemysugar.png differ
diff --git a/images/symbols_distances.png b/images/symbols_distances.png
new file mode 100644 (file)
index 0000000..87bfcf4
Binary files /dev/null and b/images/symbols_distances.png differ
diff --git a/index.html b/index.html
new file mode 100644 (file)
index 0000000..a36c530
--- /dev/null
@@ -0,0 +1,139 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
+  <meta name="keywords" content="SMS, SaveMySugar, morse code, phone ring, modem" />
+  <meta name="copyright" content="Copyright 2015 Antonio Ospite, some rights reserved" />
+  <meta name="description" content="SaveMySugar, Exchange messages using phone rings" />
+  <meta name="author" content="Antonio Ospite" />
+  <meta name="language" content="en" />
+  <meta name="robots" content="noindex, nofollow" />
+
+  <title>SMS: Save My Sugar</title>
+  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+
+<body>
+  <div id="header" class="block">
+    <a id="logo" href="/" title="Save My Sugar"><img src="images/logo.png" alt="Save My Suger logo" /></a>
+
+    <h1><a href="/">Save My Sugar</a></h1>
+
+    <p>So you've always thought <acronym title="Short Message Service">SMS</acronym> meant <a title="Wikipedia: SMS" href="http://en.wikipedia.org/wiki/SMS">Short Message Service</a>, haven't you?<br />
+    From now on it means <strong>Save My Sugar</strong>!</p>
+  </div>
+
+  <div id="main-content">
+    <div id="what" class="block">
+      <h2>What</h2>
+
+      <p><strong>SaveMySugar</strong> is an experiment about sending short messages using the <strong>phone ring</strong> as a <a href="http://en.wikipedia.org/wiki/Covert_channel" title="Wikipedia: Covert Channel">covert channel</a>.</p>
+
+      <p>Another classic example of using a covert channel is <a href="http://en.wikipedia.org/wiki/Port_knocking" title="Wikipedia: Port Knocking">Port knocking</a>.</p>
+
+      <p><strong>SaveMySugar</strong> uses the distance between phone calls to represent <a href="http://en.wikipedia.org/wiki/Morse_code" title="Wikipedia: Morse code">Morse code</a> symbols.</p>
+
+      <p>The idea of using phone rings to send information is not new, it was already used by the very cool <a href="http://freshmeat.net/projects/xringd/" title="Freshmeat: Xringd">xringd</a> project by Angelo Haritsis.</p>
+
+      <p>Someone else also proposed it on <a href="http://www.halfbakery.com/idea/Sending_20SMS_20for_20FREE_20using_20MORSE" title="Half Bakery - Sending SMS for FREE using MORSE">Half Bakery</a>.</p>
+
+      <p>However there seems to be no implementation of the technique for exchanging text messaging, and that's what <strong>SaveMySugar</strong> is about.</p>
+
+      <p>The name <strong>SaveMySugar</strong> was born as a take on the price of the old conventional Texting service which is quite high, see <a href="http://web.archive.org/web/20121030162247/http://gthing.net/the-true-price-of-sms-messages/" title="Wayback Machine: The True Price of SMS Messages">The True Price of SMS Messages</a>, and it is also a reference to the distress signal <em>Save Our Soul</em> (SOS) used in Morse communications.</p>
+    </div>
+
+    <div id="why" class="block">
+      <h2>Why</h2>
+
+      <p>There are several reasons why you may want to try <strong>SaveMySugar</strong>:</p>
+
+      <ul>
+        <li>Just because you can, and it is fun.</li>
+
+        <li>It is a possible way to send a short message for free.</li>
+
+        <li>It's beautifully slow.</li>
+      </ul>
+
+      <h3>Why not</h3>
+
+      <p><strong>SaveMySugar</strong> has some limitations:</p>
+
+      <ul>
+        <li>It's awfully slow.</li>
+
+        <li>Phone rings keep the line busy.</li>
+
+        <li>On mobile phones a ring uses a lot of battery, and battery is a precious resource.</li>
+
+        <li>On mobile phones a lot of fake calls will pollute you calls log.</li>
+
+        <li>On mobile phones a malicious recipient can make you pay at every ring!</li>
+
+        <li>If anyone used it, it might end up like <a href="https://youtu.be/doAnB5_eDnw?t=10m11s" title="YouTube: The Lawnmower Man - Ending">this</a>.</li>
+      </ul>
+
+      <p>However it is still fun nonetheless.</p>
+    </div>
+
+    <div id="where" class="block">
+      <h2>Where</h2>
+
+      <p>You can find a prototype implementation written in python called <a href="http://git.ao2.it/SaveMySugar/python3-savemysugar.git/" title="git.ao2.it - python3-savemysugar">python3-savemysugar</a>.</p>
+
+      <p>There is also a prototype Android app <a href="files/SaveMySugar-0.1-debug.apk" title="SaveMySugar-0.1-debug.apk">SaveMySugar-0.1-debug.apk</a>, its souce code is in the <a href="http://git.ao2.it/SaveMySugar/android-savemysugar.git/" title="git.ao2.it - android-savemysugar">android-savemysugar</a> repository.</p>
+
+      <p>Contact <a href="http://ao2.it/contact" title="Antonio Ospite: contact">Antonio&nbsp;Ospite</a> if you want to discuss about porting <strong>SaveMySugar</strong> to other platforms.</p>
+    </div>
+
+    <div id="who" class="block">
+      <h2>Who</h2>
+
+      <p>From an idea by Corrado&nbsp;Rubera.<br />
+      <strong>SaveMySugar</strong> was realized by <a href="http://ao2.it" title="Antonio Ospite">Antonio&nbsp;Ospite</a>.</p>
+    </div>
+
+    <div id="how" class="block">
+      <h2>How</h2>
+
+      <p>This is how a message is transmitted with <strong>SaveMySugar</strong>:</p>
+
+      <ol>
+        <li>The characters in the message are encoded in Morse signals.</li>
+
+        <li>Every symbol of each signal is mapped to a time interval.</li>
+
+        <li>Phone calls are distanced in time according to the intervals from above.</li>
+      </ol>
+
+      <p>On the receiving side the symmetric operations are performed when phone rings are detected.</p>
+
+      <p>This is basically a <em>Pulse-Distance Modulation</em> (PDM), this scheme has been chosen because it's easy to detect when a phone starts ringing, but it's not always easy to detect for how log it rings, or how many rings there are in a single call.</p>
+
+      <p>See an example of the exchange of the message <code>CODEX</code>:<br />
+      <a href="images/savemysugar_plot_codex.png" title="SaveMySugar exchanging the message 'CODEX'"><img src="images/savemysugar_plot_codex.png" alt="SaveMySugar exchanging the message 'CODEX'" /></a></p>
+
+      <p>See an example of the exchange of the message <code>Save My Sugar</code>:<br />
+      <a href="images/savemysugar_plot_savemysugar.png" title="SaveMySugar exchanging the message 'SaveMySugar'"><img src="images/savemysugar_plot_savemysugar.png" alt="SaveMySugar exchanging the message 'Save My Sugar'" /></a></p>
+
+      <p>Morse code has been chosen because it is well known and serves very well the purpose of showing the technique.</p>
+
+      <p>In order for the exchange of the message to work symbols must be differentiated, so they must have different distances.</p>
+
+      <p>However the time between when the transmitter places a call and when the receiver gets the correspondent ring is not constant, so this “noise” must be taken into account by the receiver. This noise can have a quite high variability but can be usually upper and lower bounded, so a reasonably robust communication is still possible. Basically the noise is used to characterize the symbol distances.</p>
+
+      <p>See an example of best-case and worst-case symbol distances:<br />
+      <a href="images/symbols_distances.png" title="SaveMySugar symbols distances"><img src="images/symbols_distances.png" alt="SaveMySugar symbols distances" /></a></p>
+
+    </div>
+  </div>
+
+  <div id="footer" class="block">
+      <p style="margin: 0pt; font-size: small; line-height: 1.2em;"><a title="Creative Commons: Attribution Share Alike" href="http://creativecommons.org/licenses/by-nc-sa/2.5/it/"><img src="images/CC_by-nc-sa_2.5_it_88x31.png" style="border-width: 0pt; float: left; margin-right: 0.5em;" alt="Creative Commons License" /></a> Unless where stated otherwise,<br /> this work is published under a <a title="Creative Commons: Attribution Share Alike" href="http://creativecommons.org/licenses/by-nc-sa/2.5/it/">Creative Commons License</a>.</p>
+  </div>
+</body>
+</html>
diff --git a/project/favicon/favicon.ico b/project/favicon/favicon.ico
new file mode 100644 (file)
index 0000000..5de39fa
Binary files /dev/null and b/project/favicon/favicon.ico differ
diff --git a/project/favicon/favicon.xcf b/project/favicon/favicon.xcf
new file mode 100644 (file)
index 0000000..4dcdc77
Binary files /dev/null and b/project/favicon/favicon.xcf differ
diff --git a/project/favicon/to_ico.sh b/project/favicon/to_ico.sh
new file mode 100755 (executable)
index 0000000..a4dd9d0
--- /dev/null
@@ -0,0 +1,19 @@
+#!/bin/sh
+
+set -e
+
+XCF_FILE="favicon.xcf"
+
+BASENAME="$(basename "$XCF_FILE" .xcf)"
+
+PPM_FILE="${BASENAME}.ppm"
+PPM_FILE_4BPP="${BASENAME}_4bpp.ppm"
+ICO_FILE="${BASENAME}.ico"
+
+convert "$XCF_FILE" "$PPM_FILE"
+
+ppmquant 16 "$PPM_FILE" > "$PPM_FILE_4BPP"
+rm "$PPM_FILE"
+
+ppmtowinicon "$PPM_FILE_4BPP" > "$ICO_FILE" 
+rm "$PPM_FILE_4BPP"
diff --git a/project/logo/icon.svg b/project/logo/icon.svg
new file mode 100644 (file)
index 0000000..208d974
--- /dev/null
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="744.09375"
+   height="744.09375"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="icon.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.6547516"
+     inkscape:cx="479.72022"
+     inkscape:cy="457.80186"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="mm"
+     inkscape:window-width="1280"
+     inkscape:window-height="910"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Livello 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-308.9375)">
+    <rect
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="rect2837-9"
+       width="734.09583"
+       height="734.09583"
+       x="4.9993281"
+       y="313.93329"
+       rx="79.349281"
+       ry="79.349289"
+       inkscape:export-xdpi="300"
+       inkscape:export-ydpi="300" />
+    <rect
+       style="color:#000000;fill:none;stroke:#1976d2;stroke-width:10;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1"
+       id="rect2837"
+       width="734.09583"
+       height="734.09583"
+       x="4.9993281"
+       y="313.93329"
+       rx="79.349281"
+       ry="79.349289"
+       inkscape:export-xdpi="300"
+       inkscape:export-ydpi="300" />
+    <g
+       id="g3136"
+       transform="matrix(0,1,-1,0,1051.6261,310.29609)">
+      <circle
+         transform="matrix(0.70143061,0.70146822,-0.70143061,0.70146822,168.1798,241.23622)"
+         id="path2839"
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#82b1ff;stroke:#1976d2;stroke-width:4;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         inkscape:export-xdpi="300"
+         inkscape:export-ydpi="300"
+         cx="162.14285"
+         cy="169.09448"
+         r="66.428574" />
+      <circle
+         id="path2839-1"
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#82b1ff;stroke:#1976d2;stroke-width:4;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         transform="matrix(0.70143061,0.70146822,-0.70143061,0.70146822,376.51848,449.58607)"
+         inkscape:export-xdpi="300"
+         inkscape:export-ydpi="300"
+         cx="162.14285"
+         cy="169.09448"
+         r="66.428574" />
+      <circle
+         id="path2839-7"
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#82b1ff;stroke:#1976d2;stroke-width:4;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         transform="matrix(0.70143061,0.70146822,-0.70143061,0.70146822,582.90236,655.98102)"
+         inkscape:export-xdpi="300"
+         inkscape:export-ydpi="300"
+         cx="162.14285"
+         cy="169.09448"
+         r="66.428574" />
+    </g>
+  </g>
+</svg>
diff --git a/project/logo/logo.svg b/project/logo/logo.svg
new file mode 100644 (file)
index 0000000..076e50f
--- /dev/null
@@ -0,0 +1,186 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="156"
+   height="48"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="logo.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.7232039"
+     inkscape:cx="82.456798"
+     inkscape:cy="41.23452"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="mm"
+     inkscape:window-width="1280"
+     inkscape:window-height="910"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Livello 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(39.2491,-36.595457)">
+    <g
+       id="g3009-9"
+       transform="matrix(0,0.06263725,-0.06263725,0,27.365304,37.292579)">
+      <rect
+         inkscape:export-ydpi="300"
+         inkscape:export-xdpi="300"
+         ry="80"
+         rx="80"
+         y="310.33691"
+         x="2.0290723"
+         height="740"
+         width="740"
+         id="rect2837-0"
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#1976d2;stroke-width:26.31622314;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+      <g
+         transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,589.61731,-62.832178)"
+         id="g2932-9">
+        <circle
+           r="66.428574"
+           cy="169.09448"
+           cx="162.14285"
+           inkscape:export-ydpi="300"
+           inkscape:export-xdpi="300"
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#82b1ff;stroke:#1976d2;stroke-width:13.05798912;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="path2839-17"
+           transform="translate(-87.11527,511.22048)" />
+        <circle
+           r="66.428574"
+           cy="169.09448"
+           cx="162.14285"
+           inkscape:export-ydpi="300"
+           inkscape:export-xdpi="300"
+           transform="translate(209.90439,511.22048)"
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#82b1ff;stroke:#1976d2;stroke-width:13.05798912;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="path2839-1-7" />
+        <circle
+           r="66.428574"
+           cy="169.09448"
+           cx="162.14285"
+           inkscape:export-ydpi="300"
+           inkscape:export-xdpi="300"
+           transform="translate(504.13717,511.22048)"
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#82b1ff;stroke:#1976d2;stroke-width:13.05798912;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="path2839-7-1" />
+      </g>
+    </g>
+    <g
+       id="g3836-1"
+       transform="matrix(0.06265477,0,0,0.06265447,-52.564435,18.047638)">
+      <rect
+         ry="80"
+         rx="80"
+         y="309.08673"
+         x="1087.4363"
+         height="740"
+         width="740"
+         id="rect2837-6-6"
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#1976d2;stroke-width:26.10567474;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+      <g
+         transform="translate(292.3591,6.6142447e-6)"
+         id="g3016-5">
+        <g
+           id="g3005-9"
+           transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,820.94123,-627.15989)">
+          <rect
+             ry="19.852139"
+             rx="21.74482"
+             transform="scale(1,-1)"
+             y="-723.42261"
+             x="799.92078"
+             height="86.215263"
+             width="292.4437"
+             id="rect2937-7"
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#82b1ff;stroke:#1976d2;stroke-width:12.95351601;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+          <rect
+             ry="19.852139"
+             rx="21.74482"
+             transform="scale(1,-1)"
+             y="-723.42261"
+             x="1233.2792"
+             height="86.215263"
+             width="292.4437"
+             id="rect2937-8-7"
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#82b1ff;stroke:#1976d2;stroke-width:12.95351601;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+        </g>
+      </g>
+    </g>
+    <g
+       id="g3009-6-7"
+       transform="matrix(0,-0.06263725,0.06263725,0,50.136496,83.898335)">
+      <rect
+         ry="80"
+         rx="80"
+         y="310.33691"
+         x="2.0290723"
+         height="740"
+         width="740"
+         id="rect2837-60-3"
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#1976d2;stroke-width:26.31622314;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+      <g
+         transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,589.61731,-62.832178)"
+         id="g2932-4-6">
+        <circle
+           r="66.428574"
+           cy="169.09448"
+           cx="162.14285"
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#82b1ff;stroke:#1976d2;stroke-width:13.05798912;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="path2839-5-5"
+           transform="translate(-87.11527,511.22048)" />
+        <circle
+           r="66.428574"
+           cy="169.09448"
+           cx="162.14285"
+           transform="translate(209.90439,511.22048)"
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#82b1ff;stroke:#1976d2;stroke-width:13.05798912;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="path2839-1-8-6" />
+        <circle
+           r="66.428574"
+           cy="169.09448"
+           cx="162.14285"
+           transform="translate(504.13717,511.22048)"
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#82b1ff;stroke:#1976d2;stroke-width:13.05798912;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="path2839-7-2-3" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/style.scss b/style.scss
new file mode 100644 (file)
index 0000000..9d2e87d
--- /dev/null
@@ -0,0 +1,107 @@
+@import "normalize";
+@import "susy";
+
+@import "breakpoint";
+@include breakpoint-set('to ems', true);
+
+@import "compass/css3";
+@import "compass/typography/links/link-colors";
+@import "compass/utilities/general/clearfix";
+
+// See [1] below
+@include border-box-sizing;
+
+$susy: (
+container: 70em,
+columns: 12,
+global-box-sizing: border-box, // [1] http://stackoverflow.com/questions/27590328
+gutters: 1/6,
+);
+
+$text-color: rgba(0, 0, 0, 0.87);
+
+$background-color: #fafafa;
+$background-color-alternate: #f5f5f5;
+
+// Blue from Android Material
+$primary-color: #1976d2; // 700
+$primary-color-darker: #0d47a1; // 900
+$primary-color-lighter: #2196f3; // 500
+
+// Deep Orange from Android Material
+$accent-color: #dd2c00; // A700
+$accent-color-lighter: #ff3d00; // A400
+$accent-color-darker: #bf360c; // 900
+
+
+// Flexible objects
+img, embed, object, video
+{
+  max-width: 100%;
+  padding-top: .5em; 
+}
+
+body {
+  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
+  background: $background-color;
+  color: $text-color;
+
+  @include container;
+  padding: gutter(12);
+}
+
+abbr, acronym {
+  border-bottom: 1px dashed $primary-color;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: $primary-color;
+  a {
+    @include link-colors($primary-color, $primary-color-lighter, $primary-color, $primary-color-darker, $primary-color);
+  }
+}
+
+a {
+  @include link-colors($accent-color, $accent-color-lighter, $accent-color, $accent-color-darker, $accent-color);
+  text-decoration: none;
+}
+
+.block {
+  @include span(full);
+}
+
+#header {
+  h1 {
+    margin-top: .2em;
+  }
+}
+
+#main-content {
+  .block {
+    padding: gutter(12);
+    margin-bottom: gutter(12);
+
+    @include border-radius(.5em);
+    @include box-shadow($primary-color-darker 0px 2px 3px);
+    background: $background-color-alternate;
+    border: $primary-color-lighter 1px solid;
+  }
+}
+
+@include breakpoint(481px) {
+  #what, #where {
+    @include span(6 of 12);
+  }
+  #why, #who {
+    @include span(6 last of 12);
+  }
+}
+
+@include breakpoint(769px) {
+  #what, #why {
+    @include span(4);
+  }
+  #who, #where {
+    @include span(4 last of 12);
+  }
+}