more example stuff

owenversteeg · Jun 23, 2016 · 437b780 · 437b780
1 parent df0dfff
commit 437b780
Show file tree

Hide file tree

Showing 6 changed files with 199 additions and 3 deletions.
diff --git a/docs.html b/docs.html
@@ -90,6 +90,7 @@
 					<a href="examples.html">Examples</a>
 				-->
 				<a href="download.html">Download</a>
+				<a href="#">Examples</a>
 				<a href="https://github.com/owenversteeg/min">Github</a>
 			</div>
 		</nav>

diff --git a/download.html b/download.html
@@ -84,6 +84,7 @@
 					<a href="examples.html">Examples</a>
 				-->
 				<a class="current" href="#">Download</a>
+				<a href="#">Examples</a>
 				<a href="https://github.com/owenversteeg/min">Github</a>
 			</div>
 		</nav>

diff --git a/example-1.jpg b/example-1.jpg
diff --git a/example2.html b/example2.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<title>Your Page Title</title>
+
+		<link href="http://mincss.com/entireframework.min.css" rel="stylesheet" type="text/css">
+
+		<style>
+			.hero {
+				background: #eee;
+				padding: 20px;
+				border-radius: 10px;
+				margin-top: 1em;
+			}
+
+			.hero h1 {
+				margin-top: 0;
+				margin-bottom: 0.3em;
+			}
+
+			.c4 {
+				padding: 10px;
+				box-sizing: border-box;
+			}
+
+			.c4 h3 {
+				margin-top: 0;
+			}
+
+			.c4 a {
+				margin-top: 10px;
+				display: inline-block;
+			}
+		</style>
+	</head>
+	<body>
+		<nav class="nav" tabindex="-1" onclick="this.focus()">
+			<div class="container">
+				<a class="pagename current" href="#">Your Site Name</a>
+				<a href="#">One</a>
+				<a href="#">Two</a> 
+				<a href="#">Three</a>
+			</div>
+		</nav>
+		<button class="btn-close btn btn-sm">×</button>
+		<div class="container">
+			<div class="hero">
+				<h1>Example</h1>
+				<p>You can view the source of this page and copy it to get a quick start on a project with Min!</p>
+				<p>You can view the source of this page and copy it to get a quick start on a project with Min!</p>
+				<a class="btn btn-b" href="http://owenversteeg.com">Go places!</a>
+			</div>
+			<div class="row">
+    <div class="col c4"><h3>Yay headings!</h3>You can view the source of this page and copy it to get a quick start on a project with Min!<br><a href="http://owenversteeg.com" class="btn btn-sm btn-a">Do stuff!</a></div>
+        <div class="col c4"><h3>Yay headings!</h3>You can view the source of this page and copy it to get a quick start on a project with Min!<br><a href="http://owenversteeg.com" class="btn btn-sm btn-b">Do stuff!</a></div>    <div class="col c4"><h3>Yay headings!</h3>You can view the source of this page and copy it to get a quick start on a project with Min!<br><a href="http://owenversteeg.com" class="btn btn-sm btn-c">Do stuff!</a></div>
+</div>
+		</div>
+	</body>
+</html>
diff --git a/examples.html b/examples.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<title>min - examples</title>
+
+		<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
+
+		<!--[if lt IE 9]>
+		<style>
+			html {
+				overflow-x: hidden;
+			}
+		</style>
+		<![endif]-->
+
+		<style type="text/css">
+			/* Min+ plugin*/
+			message {
+				display: block;
+				padding: 2em;
+				background: #def;
+				border-left: 5px solid #44e;
+			}
+
+			.warning {
+				border-color: #e44; 
+				background: #fdd;
+			}
+
+			.great {
+				border-color: #2d2;
+				background: #dfd;
+			}
+
+			/* Fun h1s */
+			h1:not(.exampleh1) {
+				margin: 0.2em 0;
+				border-bottom: 5px solid;
+				margin-bottom: 15px;
+				padding-bottom: 5px;
+			}
+
+			.fourways {
+				color: #666;
+				margin-bottom: 0;
+			}
+			small {
+				color: #6b6;
+				font-size: 0.6em;
+			}
+
+			/* New css */
+			img {
+			 	border: 1px solid;
+				border-radius: 6px;
+				align-self: center;
+				vertical-align: middle;
+				margin-right: 10px;
+			}
+
+			a {
+				color: #5583bb;
+			}
+		</style>
+
+		<!--[if lte IE 6]>
+			<style>
+				.col {
+					margin: 0.5%;
+				}
+				.c12 {
+					margin: 0.5%;
+					margin-left: 0.5%;
+					width: 97%;
+				}
+				.container {
+					width: 90%;
+				}
+			</style>
+		<![endif]-->
+	</head>
+	<body>
+		<nav class="nav" tabindex="-1" onclick="this.focus()">
+			<div class="container">
+				<a class="pagename current" href="index.html">Min</a>
+				<a href="docs.html">Docs</a>
+				<!--
+					<a href="bootstrapconverter.html">Bootstrap Converter</a>
+					<a href="examples.html">Examples</a>
+				-->
+				<a href="#">Download</a>
+				<a class="current" href="#">Examples</a>
+				<a href="https://github.com/owenversteeg/min">Github</a>
+			</div>
+		</nav>
+		<button class="btn btn-sm btn-close">×</button>
+		<div class="container">
+			<h1>Examples</h1>
+			<p>
+				All of these examples are completely free to use, copy, and distribute however you like; they are all MIT licensed.
+				<br><br>
+				<a href="example.html"><img class="exampleimg" src="example-1.jpg">Basic Page w/Nav</a>
+			</p>
+		</div>
+
+		<script src="compiledcss.js" type="text/javascript"></script>
+		<script src="download.js" type="text/javascript"></script>
+
+		<script type="text/javascript">
+			function downloadJSAtOnload() {
+				var element = document.createElement("script");
+				element.src = "defer.js";
+				document.body.appendChild(element);
+			}
+			if (window.addEventListener)
+			window.addEventListener("load", downloadJSAtOnload, false);
+			else if (window.attachEvent)
+			window.attachEvent("onload", downloadJSAtOnload);
+			else window.onload = downloadJSAtOnload;
+		</script>
+		<script src="defer.js"></script>
+	</body>
+</html>
diff --git a/index.html b/index.html
@@ -242,9 +242,13 @@
 			}
 
 			@media (max-width: 870px) {
-			.timeholder {
-				box-shadow: 0 0 0 0;
-			}
+				.timeholder {
+					box-shadow: 0 0 0 0;
+				}
+
+				.btn {
+					padding: 20px 45px 24px;
+				}
 
 				.hero {
 					padding: 14px;