remove whitespace, rename styles.css > demo.css

hakimel · Dec 19, 2013 · 2a0d586 · 2a0d586
1 parent 3e42432
commit 2a0d586
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 28 deletions.
diff --git a/css/avgrund.css b/css/avgrund.css
@@ -5,7 +5,7 @@
  *
  * Created by Hakim El Hattab, http://hakim.se
  */
- 
+
 .avgrund-active body {
 	-webkit-transform: scale( 0.9 );
 	   -moz-transform: scale( 0.9 );

diff --git a/css/styles.css → css/demo.css b/css/styles.css → css/demo.css
@@ -1,17 +1,14 @@
 /*!
- * avgrund 0.1
- * http://lab.hakim.se/avgrund
- * MIT licensed
- *
- * Created by Hakim El Hattab, http://hakim.se
+ * Styles intended only for this demo page. If you want to
+ * try and use Avgrund in your project, don't include these.
  */
 
 * {
 	margin: 0;
 	padding: 0;
 }
 
-html, 
+html,
 body {
 	height: 100%;
 	overflow: hidden;
@@ -23,7 +20,7 @@ html {
 	background-repeat: repeat;
 }
 
-h1, 
+h1,
 h2 {
 	font-size: 24px;
 }
@@ -70,6 +67,8 @@ button {
 	background: #7aa76d;
 	font-size: 15px;
 
+	outline: none;
+
 	-webkit-transition: 0.15s background ease;
 	   -moz-transition: 0.15s background ease;
 	    -ms-transition: 0.15s background ease;

diff --git a/index.html b/index.html
@@ -1,19 +1,19 @@
-<!doctype html>  
+<!doctype html>
 <html lang="en">
-	
+
 	<head>
 		<meta charset="utf-8">
-		
+
 		<title>Avgrund - A modal UI concept</title>
 
 		<meta name="description" content="A modal concept which aims to give a sense of depth between the page and modal layers">
 		<meta name="author" content="Hakim El Hattab">
 
 		<meta name="viewport" content="width=800, user-scalable=no">
-		
+
 		<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
-		
-		<link rel="stylesheet" href="css/styles.css">
+
+		<link rel="stylesheet" href="css/demo.css">
 		<link rel="stylesheet" href="css/avgrund.css">
 
 		<script>
@@ -26,7 +26,7 @@
 		</script>
 
 	</head>
-	
+
 	<body>
 
 		<aside id="default-popup" class="avgrund-popup">
@@ -47,7 +47,7 @@ <h1>Avgrund</h1>
 			</p>
 			<button onclick="javascript:openDialog();">Open Avgrund</button>
 			<p>
-				Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of 
+				Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of
 				it, not intended for any practical use.
 			</p>
 			<p>
@@ -59,8 +59,8 @@ <h1>Avgrund</h1>
 
 			<div class="sharing">
 				<a href="http://twitter.com/share" class="twitter-share-button" data-text="Avgrund - a depth-based modal concept from @hakimel" data-url="http://lab.hakim.se/avgrund" data-count="small" data-related="hakimel"></a>
-				
-				<iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Favgrund%2F&layout=button_count&show_faces=false&width=83&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe> 
+
+				<iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Favgrund%2F&layout=button_count&show_faces=false&width=83&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe>
 			</div>
 		</article>
 

diff --git a/multiple.html b/multiple.html
@@ -1,19 +1,19 @@
-<!doctype html>  
+<!doctype html>
 <html lang="en">
-	
+
 	<head>
 		<meta charset="utf-8">
-		
+
 		<title>Avgrund - A modal UI concept</title>
 
 		<meta name="description" content="A modal concept which aims to give a sense of depth between the page and modal layers">
 		<meta name="author" content="Hakim El Hattab">
 
 		<meta name="viewport" content="width=800, user-scalable=no">
-		
+
 		<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
-		
-		<link rel="stylesheet" href="css/styles.css">
+
+		<link rel="stylesheet" href="css/demo.css">
 		<link rel="stylesheet" href="css/avgrund.css">
 
 		<script>
@@ -29,7 +29,7 @@
 		</script>
 
 	</head>
-	
+
 	<body>
 
 		<aside id="default-popup" class="avgrund-popup">
@@ -59,7 +59,7 @@ <h1>Avgrund</h1>
 			<button onclick="javascript:openDialog();">Open Avgrund</button>
 			<button onclick="javascript:openSecondDialog();">Open Second Avgrund</button>
 			<p>
-				Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of 
+				Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of
 				it, not intended for any practical use.
 			</p>
 			<p>
@@ -71,8 +71,8 @@ <h1>Avgrund</h1>
 
 			<div class="sharing">
 				<a href="http://twitter.com/share" class="twitter-share-button" data-text="Avgrund - a depth-based modal concept from @hakimel" data-url="http://lab.hakim.se/avgrund" data-count="small" data-related="hakimel"></a>
-				
-				<iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Favgrund%2F&layout=button_count&show_faces=false&width=83&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe> 
+
+				<iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Favgrund%2F&layout=button_count&show_faces=false&width=83&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe>
 			</div>
 		</article>