r3165 committed - labs: improved layout and behaviour of overview page
Revision: 3165
Author: paul.bakaus
Date: Fri Aug 28 01:50:57 2009
Log: labs: improved layout and behaviour of overview page
http://code.google.com/p/jquery-ui/source/detail?r=3165
Modified:
/branches/labs/assets/style.css
/branches/labs/index.html
=======================================
--- /branches/labs/assets/style.css Thu Aug 27 01:39:36 2009
+++ /branches/labs/assets/style.css Fri Aug 28 01:50:57 2009
@@ -3,6 +3,56 @@
padding: 0;
font-size: 12px;
font-family: Arial;
+ background: #666;
+}
+
+#intro {
+ padding: 2em;
+}
+
+#intro h1 {
+ margin: 0;
+ color: #fff;
+ text-shadow: 0px 1px 1px #000;
+}
+
+#intro p {
+ margin: 0;
+ color: #000;
+ font-size: 1.2em;
+ text-shadow: 0px 1px 1px #999;
+ width: 40em;
+}
+
+#intro a {
+ color: #fff;
+ text-shadow: 0px 1px 1px #000;
+}
+
+#menu {
+ font-size: 1.5em;
+ position: absolute;
+ top: 2em;
+ right: 1em;
+}
+
+#intro #menu a {
+ display: block;
+ float: left;
+ margin: 0.5em;
+ -webkit-border-radius: 0.5em;
+ background: #555;
+ padding: 0.5em;
+ text-decoration: none;
+ -webkit-transition: all 0.5s;
+}
+
+#intro #menu a.active {
+ background: #333;
+}
+
+#intro #menu a:hover {
+ background: #333;
}
#settings {
@@ -13,6 +63,8 @@
#projects {
margin: 0;
+ margin-left: 0.5em;
+ margin-right: 0.5em;
padding: 0;
list-style-type: none;
position: relative;
@@ -31,6 +83,7 @@
list-style-type: none;
margin: 0;
padding: 0;
+ padding-bottom: 2em;
background: #888894;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(50, 50,
50)), color-stop(0.13, rgb(138, 138, 150)), color-stop(0.13, rgb(138, 138,
150)), color-stop(0.95, rgb(138, 138, 150)), to(rgb(132, 132, 136)));
}
@@ -41,7 +94,7 @@
background-color: rgba(240,240,240, 0.6);
-webkit-box-shadow: 0px 1em 1em #666;
-moz-box-shadow: 0px 1em 1em #666;
- -webkit-transition: all 0.3s;
+ -webkit-transition:all 0.3s;
position: relative;
}
@@ -55,8 +108,8 @@
#projects ul li:hover {
background-color: rgba(240,240,240, 0.4);
- -webkit-box-shadow: 0px 2em 1em #333;
- -moz-box-shadow: 0px 1em 1em #333;
+ -webkit-box-shadow: 0px 2em 1em #444;
+ -moz-box-shadow: 0px 1em 1em #444;
}
#projects.compact ul li {
@@ -92,6 +145,7 @@
margin: 0.5em;
margin-top: 0;
border: 0;
+ -webkit-box-reflect:below 2px -webkit-gradient(linear, left top, left
bottom, from(transparent), color-stop(0.8, transparent),
to(rgba(255,255,255,0.5)));
}
#projects.detailed ul li img {
=======================================
--- /branches/labs/index.html Thu Aug 27 01:39:36 2009
+++ /branches/labs/index.html Fri Aug 28 01:50:57 2009
@@ -43,12 +43,29 @@
}
}).filter(':gt(0)').change();
+ $('#menu a').bind('click', function() {
+
+
+ });
+
});
</script>
</head>
<body>
+ <div id="intro">
+ <h1>About jQuery UI Labs</h1>
+
+ Welcome to very own UI laboratory, a place to let your ideas flow
without hassle. Have a look at one of our recent ideas and be vocal about
it. Or even better, become inspired and <a href="#">create your own</a>.
+
+ <div id="menu">
+ <a href="javascript:;" class="active projects">Projects</a>
+ <a href="javascript:;" class="learnmore">Learn more</a>
+ <a href="javascript:;" class="getinvolved">Get involved!</a>
+ </div>
+ </div>
+
<ul id="projects" class="detailed">
<li>
<h2>Widgets</h2>
Topic Participants
Richard Worth
Paul Bakaus
Jörn Zaefferer
scott.gonzalez