fix merdia queries issue, reworked markup, added mq reactive ascii thingies

html/assets/css/squatconf.css

@@ -1,3 +1,31 @@
 .btn{background-color: #fff}
 .leftCol{padding-top: 15px;}
-.page-header pre {margin-bottom: 0;}
+.page-header pre {margin-bottom: 0;}
+.formCont{
+  border: 2px solid #000000;
+  -webkit-box-shadow: 0 0 0 5px, 11px 13px 0 4px black;
+  -moz-box-shadow: 0 0 0 5px, 11px 13px 0 4px black;
+  box-shadow: 0 0 0 5px, 11px 13px 0 4px black;
+  background: #bbbbbb;
+  padding: 10px 15px;
+  margin: 10px 5px;
+  margin-left: -5px;
+}
+input{width: 100%;}
+
+/*mq madness*/
+.maxW, .dskW,.tblW{display:none;}
+
+@media (min-width: 1200px) {
+  .maxW{display:block;}
+}
+@media (min-width: 980px) and (max-width: 1199px) {
+  .dskW{display:block;}
+}
+@media (min-width: 768px) and (max-width: 979px) {}
+@media (max-width: 767px) {}
+@media (max-width: 480px) {}
+@media (max-width: 979px) {
+  .tblW{display:block;}
+}
+@media (min-width: 980px) {}

html/index.html

@@ -22,21 +22,21 @@
       </ul>
       <br /><br />
 
-      <form method="GET" action="http://localhost:8000/email">
-      <fieldset>
-      <ul class="nav nav-list">
-      <!-- WARNING: This only works for development system (localhost) -->
-          <legend>JOIN US</legend>
-          <label class="text-info">Enter your email..</label>
-          <input type="text" name="email">
-          <span class="help-block">we'll send you info about future events</span>
-          <label class="checkbox text-info">
-            <input type="checkbox" name="paris"> Paris Nov.2014?
-          </label>
-          <button type="submit" class="btn">Send</button>
-      </ul>
-      </fieldset>
-      </form>
+      <div class="formCont">
+        <form method="GET" action="http://localhost:8000/email">
+        <fieldset>
+            <legend>JOIN US</legend>
+        <!-- WARNING: This only works for development system (localhost) -->
+            <label class="text-info">Enter your email..</label>
+            <input type="text" name="email" class='input e'>
+            <span class="help-block">we'll send you info about future events</span>
+            <label class="checkbox text-info">
+              <input type="checkbox" name="paris"> Paris Nov.2014?
+            </label>
+            <button type="submit" class="btn">Send</button>
+        </fieldset>
+        </form>
+      </div>
 
       <br /><br />
 
@@ -55,7 +55,7 @@
     <!-- content -->
     <div class="span9">
       <div class="page-header">
-        <pre><small>
+        <pre class="maxW"><small>
      .d8888b.                         888                            .d888
     d88P  Y88b                        888                           d88P"
     Y88b.                             888                           888
@@ -67,7 +67,21 @@
                    888
                    888
                    888
-</small></pre>
+<br></small></pre>
+<pre class="dskW">
+         ____                    _    ____             __
+        / ___|  __ _ _   _  __ _| |_ / ___|___  _ __  / _|
+        \___ \ / _` | | | |/ _` | __| |   / _ \| '_ \| |_
+         ___) | (_| | |_| | (_| | |_| |__| (_) | | | |  _|
+        |____/ \__, |\__,_|\__,_|\__|\____\___/|_| |_|_|
+                  |_|
+<br></pre>
+<pre class="tblW">
+
+  (~ _     _ _|_/~` _  _  |`
+  _)(_||_|(_| | \_,(_)| |~|~
+      |/
+<br></pre>
       </div>
       <div>
         <h2 id="what-is-squatconf-">What is SquatConf ?</h2>