Browse Source

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

2015
Jérôme Loï 7 years ago
parent
commit
8bb84d46b0
  1. 30
      html/assets/css/squatconf.css
  2. 48
      html/index.html

30
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) {}

48
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>

Loading…
Cancel
Save