Demos: New homepage. Fixes #6652.

jquery-archive · Nov 26, 2013 · 93d5b24 · 93d5b24
1 parent 25ccf72
commit 93d5b24
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 3 deletions.
diff --git a/demos/_assets/css/jqm-demos.css b/demos/_assets/css/jqm-demos.css
@@ -4,7 +4,7 @@
 .jqm-demos .jqm-header {
 	background: #fff;
 	border-top: 4px solid #3eb249;
-	border-bottom-color: #f5f5f5;
+	border-bottom-color: #eee;
 }
 .jqm-demos .jqm-header h2 {
 	padding: .4em 0 .1em;
@@ -131,6 +131,47 @@
 	font-weight: 400;
 }
 
+/* Homepage */
+.jqm-home > .jqm-content > img {
+	width: 400px;
+	max-width: 100%;
+	display: block;
+	margin: 2.5em 0;
+}
+.jqm-home .ui-grid-a {
+	margin: 2.5em -.5em -.5em;
+}
+.jqm-block-content {
+	margin: .5em;
+	padding: 1em;
+	background: #fff;
+	border: 1px solid #eee;
+	-webkit-border-radius: .3125em;
+	border-radius: .3125em;
+	font-family: 'Open Sans', sans-serif;
+}
+.jqm-block-content h3 {
+	font-size: 1.5em;
+	font-weight: 300;
+	color: #3eb249;
+	border-bottom: 1px solid #ddd;
+	padding-bottom: .25em;
+	margin: 0 0 .5em;
+}
+.jqm-block-content p {
+	font-size: 1.1em;
+	font-weight: 300;
+	line-height: 1.4;
+	margin: .7em 0;
+}
+.jqm-block-content p:last-child {
+	margin-bottom: 0;
+}
+.jqm-block-content a:link {
+	font-weight: 300;
+	text-decoration: none;
+}
+
 /* Code */
 .jqm-content pre,
 .jqm-content code {
@@ -385,6 +426,9 @@
 		left: -17em;
 		right: 17em;
 	}
+	.jqm-block-content {
+		min-height: 18em;
+	}
 }
 
 /* View source popup */

diff --git a/demos/_assets/img/devices.png b/demos/_assets/img/devices.png
diff --git a/demos/index.php b/demos/index.php
@@ -26,9 +26,59 @@
 
 		<h1>Demos</h1>
 
-		<p>jQuery Mobile is a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.</p>
+		<p><strong>jQuery Mobile is a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.</strong></p>
 
-        <p>For technical info, visit the <a href="http://api.jquerymobile.com" title="jQuery Mobile API documentation" target="_blank">API documentation</a>. Downloads and info about the project can be found on <a href="http://jquerymobile.com" title="jQuery Mobile web site" target="_blank">jquerymobile.com</a>.</p>
+		<img src="_assets/img/devices.png">
+
+		<p>New to jQuery Mobile? Get started by reading this <a href="intro/" data-ajax="false">introduction</a>. For technical info, visit the <a href="http://api.jquerymobile.com" title="jQuery Mobile API documentation" target="_blank">API documentation</a>. Downloads and info about the project can be found on <a href="http://jquerymobile.com" title="jQuery Mobile web site" target="_blank">jquerymobile.com</a>.</p>
+
+        <div class="ui-grid-a ui-responsive">
+        	<div class="ui-block-a">
+        		<div class="jqm-block-content">
+        			<h3>Pages &amp; Navigation</h3>
+
+        			<p><a href="pages/" data-ajax="false">Pages</a></p>
+        			<p><a href="navigation/" data-ajax="false">Navigation</a></p>
+        			<p><a href="loader/" data-ajax="false">Loader</a></p>
+        			<p><a href="transitions/" data-ajax="false">Transitions</a></p>
+        		</div>
+        	</div>
+        	<div class="ui-block-b">
+        		<div class="jqm-block-content">
+        			<h3>CSS Framework</h3>
+
+        			<p><a href="theme-default/" data-ajax="false">Theming</a></p>
+        			<p><a href="button-markup/" data-ajax="false">Buttons</a></p>
+        			<p><a href="icons/" data-ajax="false">Icons</a></p>
+        			<p><a href="grids/" data-ajax="false">Grids</a></p>
+        			<p><a href="../body-bar-classes/" data-ajax="false">Body and bar classes</a></p>
+        		</div>
+        	</div>        	
+        	<div class="ui-block-a">
+        		<div class="jqm-block-content">
+        			<h3>Widgets</h3>
+
+        			<p><a href="toolbar/" data-ajax="false">Toolbar</a>, <a href="navbar/" data-ajax="false">Navbar</a></p>
+        			<p><a href="tabs/" data-ajax="false">Tabs</a>, <a href="panel/" data-ajax="false">Panel</a>, <a href="popup/" data-ajax="false">Popup</a></p>
+        			<p><a href="listview/" data-ajax="false">Listview</a></p>
+        			<p><a href="collapsible/" data-ajax="false">Collapsible</a>, <a href="collapsibleset/" data-ajax="false">Collapsible set</a></p>
+        			<p><a href="table-reflow/" data-ajax="false">Table Reflow</a>, <a href="table-column-toggle/" data-ajax="false">Table Column Toggle</a></p>
+        			<p><a href="filterable/" data-ajax="false">Filterable</a></p>
+        		</div>
+        	</div>
+        	<div class="ui-block-b">
+        		<div class="jqm-block-content">
+        			<h3>Form widgets</h3>
+
+        			<p><a href="checkboxradio-checkbox/" data-ajax="false">Checkboxes</a>, <a href="checkboxradio-radio/" data-ajax="false">Radio buttons</a></p>
+        			<p><a href="selectmenu/" data-ajax="false">Selectmenu</a>, <a href="selectmenu-custom/" data-ajax="false">Custom menu</a></p>
+        			<p><a href="flipswitch/" data-ajax="false">Flipswitch</a></p>
+        			<p><a href="slider/" data-ajax="false">Slider</a>, <a href="rangeslider/" data-ajax="false">Rangeslider</a></p>
+        			<p><a href="button/" data-ajax="false">Input button</a></p>
+        			<p><a href="controlgroup/" data-ajax="false">Controlgroup</a></p>
+        		</div>
+        	</div>
+        </div>
 
 	</div><!-- /content -->