--- /dev/null
+css/
+*.css.map
+.sass-cache/
+upload.sh
--- /dev/null
+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)/$@
--- /dev/null
+Dependencies:
+ compass-normalize-plugin
+ compass-susy-plugin
+ compass-breakpoint-plugin
--- /dev/null
+<!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 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 Rubera.<br />
+ <strong>SaveMySugar</strong> was realized by <a href="http://ao2.it" title="Antonio Ospite">Antonio 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>
--- /dev/null
+#!/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"
--- /dev/null
+<?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>
--- /dev/null
+<?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>
--- /dev/null
+@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);
+ }
+}
projects / SaveMySugar / savemysugar-website.git / commitdiff
