styles

examples/contact/index.html

@@ -12,12 +12,6 @@
 					font-size: 1em;
 					margin: 1em 0;
 					padding: 1em;
-					border: none;
-					background: rgba(100%, 100%, 100%, 0.9);
-					back-ground: white;
-				}
-				.sigbut {
-					display: inline-block;
 				}
 				.or {
 					display: inline-block;
@@ -34,7 +28,7 @@
 				}
 			</style>
 			<form id="inup" class="sign pad center">
-				<div class="rubric">Welcome,</div>
+				<div class="loud">Welcome,</div>
 				<div class="mid row col">
 					<input name="alias" class="huet jot sap" placeholder="alias">
 					Enter your public username.
@@ -44,27 +38,21 @@
 					And a long private passphrase.
 				</div>
 				<div class="mid row col go">
-					<button class="huet act sigbut">sign in</button>
+					<button class="huet sap act symbol">sign in</button>
 					<div class="or">or</div>
-					<button class="huet act sigbut">sign up</button>
+					<button class="huet sap act symbol">sign up</button>
 				</div>
 				<a href="info">more info</a>
 			</form>
 		</div id="sign">
 		
 		<div id="people" class="hue2 page">
-			<style>
-				#people a {
-					color: white;
-					text-decoration: none;
-				}
-			</style>
 			<ul name="users" class="pad">
 				<h3>Here is a list of people:</h3>
 				<li name="#">
 					<!-- <h3 name="."></h3> -->
 					<ul>
-						<a href="person" name="#">
+						<a href="person" name="#" class="whitet act">
 							<li>
 								<span name="who">
 									<b name="name"></b>
@@ -97,7 +85,6 @@
 		<div id="person" class="hue3 page">
 			<style>
 				#person .back {
-					color: white;
 					position: absolute;
 					top: 0.3em;
 					left: 0.5em;
@@ -106,7 +93,7 @@
 					z-index: 99999;
 				}
 			</style>
-			<a href="people" class="act back">&#8592</a>
+			<a href="people" class="whitet act back">&#8592</a>
 			<div class="pad">
 				<div name="who">
 					<!-- img src="" -->
@@ -115,11 +102,11 @@
 					<span name="bio" contenteditable="true">bio</span>
 					<form id="say" class="center none">
 						<input class="jot" placeholder="Say something!" style="width: 80%;">
-						<input type="submit" id="speak" class="huet2" style="min-width: 5em; width: 10%;" value="speak">
+						<input type="submit" id="speak" class="huet2 sap act symbol" style="min-width: 5em; width: 10%;" value="speak">
 					</form>
 					<div>
 						<ul name="said">
-							<li name="#" class="sort shade rim"><div name="what" class="rim"></div></li>
+							<li name="#" class="sit sort shade rim"><div name="what" class="rim sit"></div></li>
 						</ul>
 					</div>
 				</div>
@@ -131,7 +118,7 @@
 			<p>A mysterious new example app has appeared! It is not finished/ready yet.</p>
 		</div id="info">
 		
-		<div id="tell" class="model">
+		<div id="tell" class="center">
 			<style>
 				#tell {
 					position: fixed;
@@ -139,21 +126,26 @@
 					left: 0;
 					right: 0;
 					height: 0;
-					text-align: center;
 					overflow: visible;
 				}
-				#tell .notify {
+				#tell p {
+					top: -2em;
 					width: 50%;
-					background: black;
 					border: solid #222 0.2em;
-					top: 0.2em;
-					margin: 0 auto;
+					border-top: none;
 					padding: 1%;
+					opacity: 0;
+					visibility: hidden;
+					transition: visibility 2s, all 1s ease-in;
+				}
+				#tell .notify {
+					top: 0em;
 					opacity: 0.8;
-					position-anchor: 50% 50%;
+					visibility: visible;
+					transition: visibility 0s, all 0.25s ease-out;
 				}
 			</style>
-			<p class="notify">Hello world!</p>
+			<p class="mid black">Hello world!</p>
 		</div>
 
 		<!-- script src="/Users/mark/Dropbox/Public/gun/db/examples/jquery.js"></script>
@@ -177,7 +169,6 @@
 				 - SEA should auto redirect to https by default, except if app developer disables it.
 				 - SEA should auto-lock/block itself while login or signup is happening, to prevent duplicates.
 				 - SEA should auto user.leave() if/when errors on login/signup happen to prevent bugs.
-				
 			*/
 			var gun = Gun(location.origin+'/gun');
 			var app = gun.get('example/contacts/6');
@@ -195,6 +186,7 @@
 					var no;
 					Gun.node.is(at.put.users, function(val, key){
 						Gun.SEA.read(val, false, function(val){
+						//Gun.SEA.read(val, false, function(val){
 							if('alias/'+key === Gun.val.rel.is(val)){ return }
 							no = true;
 						})
@@ -271,11 +263,10 @@
 					sessionStorage.tmp = data.pass;
 				}
 				c.tell = function(what, n){
-					var e = $('#tell');
-					e.find('p').text(what);
-					e.show();
+					var e = $('#tell').find('p');
+					e.addClass('notify').text(what);
 					clearTimeout(c.tell.to);
-					c.tell.to = setTimeout(function(){e.hide()}, n || 2500);
+					c.tell.to = setTimeout(function(){e.removeClass('notify')}, n || 2500);
 				}
 			}());
 			(function(){

examples/style.css

@@ -7,42 +7,86 @@ html, body {
 	position: relative;
 }
 
-div, ul, li, form, p, span, input, textarea {
-	margin: 0;
-	padding: 0;
-	position: relative;
-	overflow: hidden;
-	-webkit-transition: all 0.3s;
-	transition: all 0.3s;
-	box-sizing: border-box;
-}
-
-ul, li {
-	list-style: none;
-}
-
 body {
 	font-size: 18pt;
 }
 
-.model { display: none }
-.mid { margin-left: auto; margin-right: auto; }
-.row { width: 100%; }
-.col { max-width: 33em; }
+div, ul, li, form, p, span, button, input, textarea {
+  margin: 0;
+  padding: 0;
+  position: relative;
+  overflow: hidden;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  box-sizing: border-box;
+}
+
 input, textarea {
 	border: none;
 	width: 100%;
 }
 
-.none {
-	display: none;
+ul, li {
+  list-style: none;
 }
 
+.model, .none { display: none }
+
 .page {
-	width: 100%;
-	min-height: 100vh;
+  width: 100%;
+  min-height: 100vh;
 }
 
+.pad {
+  margin: 5% auto;
+  min-width: 250px;
+  width: 95%;
+  max-width: 50em;
+}
+
+.right {
+  float: right;
+}
+.left {
+  float: left;
+}
+.center {
+  text-align: center;
+}
+.mid { 
+  margin-left: auto;
+  margin-right: auto; 
+}
+
+.sit { margin-bottom: 0; }
+.row { width: 100%; }
+.col { max-width: 33em; }
+.act {
+  display: block;
+  font-weight: normal;
+  text-decoration: none;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+.symbol {
+  display: inline-block;
+}
+
+.rim {
+  margin: 2%;
+}
+.loud {
+  font-size: 150%;
+}
+.jot {
+  border-bottom: 1px dashed #95B2CA;
+}
+.sap {
+  border-radius: 0.1em;
+}
+
+
 .red {
 	background: #ea3224;
 }
@@ -88,47 +132,6 @@ input, textarea {
 	color: white;
 }
 
-.pad {
-	margin: 5% auto;
-	min-width: 250px;
-	width: 95%;
-	max-width: 50em;
-}
-
-.rim {
-  margin: 2%;
-}
-
-.right {
-	float: right;
-}
-.left {
-	float: left;
-}
-
-.act {
-	display: block;
-	font-weight: normal;
-	text-decoration: none;
-	-webkit-transition: all 0.3s;
-	transition: all 0.3s;
-	cursor: pointer;
-}
-
-.rubric {
-	font-size: 150%;
-}
-.center {
-	text-align: center;
-}
-
-.jot {
-	border-bottom: 1px dashed #95B2CA;
-}
-.sap {
-	border-radius: 0.1em;
-}
-
 .hue {
   background: #4D79D8;
   -webkit-animation: hue 900s infinite;

test/panic/scale.js

@@ -81,13 +81,6 @@ describe("Stress test GUN with SEA users causing PANIC!", function(){
 					if(0 >= file.indexOf('<script src="/gun.js"></script>')){ return }
 					file = file.replace('<script src="/gun.js"></script>',
 							"<script src='"+purl+"/panic.js'></script><script>panic.server('"+purl+"')</script><script src='/gun.js'></script><script>localStorage.clear();sessionStorage.clear();</script>");
-
-
-
-				// https://rawgit.com/mhelander/gun/sea/sea.js
-
-
-
 					return file;
 				});
 			}, {i: i += 1, config: config}));