Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit 36a24f40ada82c0dca0afa2178e29e739b822fa9 @hakimel committed Jul 30, 2011
Showing with 502 additions and 0 deletions.
  1. +5 −0 .gitignore
  2. +19 −0 LICENSE
  3. +17 −0 README.md
  4. +244 −0 css/main.css
  5. +18 −0 css/reset.css
  6. +96 −0 index.html
  7. +47 −0 js/header.js
  8. +55 −0 js/sphere.js
  9. +1 −0 js/sphere.min.js
@@ -0,0 +1,5 @@
+.DS_Store
+.svn
+log/*.log
+tmp/**
+
19 LICENSE
@@ -0,0 +1,19 @@
+Copyright (C) 2011 Hakim El Hattab, http://hakim.se
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
@@ -0,0 +1,17 @@
+# Sphere
+
+When bored, I sometimes open a blank JavaScript
+file and start writing without any clear objective
+of where I want to take it. This is the result of one
+such coding session.
+
+After some fiddling and minification I was able to
+squeeze the JavaScript source into 372 bytes.
+
+Curious about how this looks in action? [Check out the live demo.](http://hakim.se/experiments/html5/sphere).
+
+# License
+
+MIT licensed
+
+Copyright (C) 2011 Hakim El Hattab, http://hakim.se
@@ -0,0 +1,244 @@
+
+
+/*********************************************
+ * GLOBAL
+ *********************************************/
+
+body, html {
+ overflow: hidden;
+ font-family: Helvetica, Arial, sans-serif;
+ color: #fff;
+ font-size: 11px;
+ background: #010c12;
+}
+
+
+/*********************************************
+ * HEADER
+ *********************************************/
+
+header {
+ position: relative;
+ width: 100%;
+ height: 27px;
+ margin: 0;
+ padding: 0 8px 8px 8px;
+ overflow: hidden;
+ z-index: 5;
+
+ background: rgba( 60, 60, 60, 0.5 );
+ color: #eee;
+
+ -webkit-transition: height .22s ease-out;
+ -moz-transition: height .22s ease-out;
+ -o-transition: height .22s ease-out;
+ transition: height .22s ease-out;
+}
+
+ header.open {
+ height: 165px;
+ }
+
+ header h1 {
+ font-family: Molengo, Helvetica, Arial, sans-serif;
+ float: left;
+ margin-top: 1px;
+ }
+
+ header .header-instruction {
+ float: left;
+ margin: 12px 0 0 15px;
+
+ font-size: 10px;
+ font-style: italic;
+ color: #999;
+
+ -webkit-transition: opacity .18s linear;
+ -moz-transition: opacity .18s linear;
+ -o-transition: opacity .18s linear;
+ transition: opacity .18s linear;
+ }
+ header.open .header-instruction {
+ opacity: 0;
+ }
+ header div.extra {
+ margin: 45px 0 0 20px;
+ clear: both;
+
+ -webkit-transition: opacity .18s linear;
+ -moz-transition: opacity .18s linear;
+ -o-transition: opacity .18s linear;
+ transition: opacity .18s linear;
+ }
+ header div.extra h3 {
+ margin-bottom: 10px;
+ }
+ header a {
+ padding: 2px 4px 2px 2px;
+ color: #999;
+
+ -webkit-transition: all .1s ease-out;
+ -moz-transition: all .1s ease-out;
+ -o-transition: all .1s ease-out;
+ transition: all .1s ease-in;
+ }
+ header a:hover {
+ padding: 2px 4px 2px 2px;
+
+ color: #ddd;
+ background-color: #333;
+ border-radius: 1px;
+ }
+ header section {
+ height: 120px;
+ padding: 0 25px;
+ float: left;
+
+ border-left: 1px #333 solid;
+ }
+ header p {
+ margin-bottom: 5px;
+
+ font-size: 12px;
+ letter-spacing: 0.05em;
+ }
+ #about {
+ padding-left: 0;
+ border: none;
+ }
+ #about p.credits {
+ margin: 15px 0 2px 0;
+
+ font-style: italic;
+ color: #666;
+ font-size: 11px;
+ line-height: 1.4em;
+ }
+ #about a:hover {
+ padding: 2px 10px 2px 8px;
+ }
+ #share iframe,
+ #share div {
+ display: inline-block;
+ }
+ #retweet-button {
+ margin-right: 6px;
+ }
+
+a[href="http://www.w3counter.com"] {
+ display: none!important;
+}
+
+.no-canvas {
+ color: #999999;
+ font-size: 24px;
+ text-align: center;
+ margin-top: 150px;
+}
+
+
+/*********************************************
+ * EXPERIMENT STYLES
+ *********************************************/
+
+canvas {
+ z-index: 1;
+}
+
+#background {
+ border: none;
+ z-index: 0;
+}
+
+.ui {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 10px;
+ color: #999999;
+ text-align: left;
+ padding: 8px;
+ background-color: rgba(0,0,0,0.5);
+ float: left;
+}
+
+#status {
+ width: 884px;
+ height: 15px;
+ padding: 8px;
+ display: none;
+ position: absolute;
+ z-index: 2;
+}
+
+#status span {
+ color: #bbbbbb;
+ font-weight: bold;
+ margin-right: 5px;
+}
+
+#status .fps {
+ float: right;
+}
+
+#panels {
+ width: 100%;
+ position: absolute;
+ z-index: 3;
+}
+
+#message {
+ padding: 16px;
+ margin-top: 10px;
+ width: 225px;
+}
+
+.ui h2 {
+ margin-bottom: 20px;
+ color: #eeeeee;
+}
+
+.ui ul {
+ margin: 10px 0;
+}
+
+.ui ul li {
+ margin: 0 0 2px 0;
+}
+
+.ui a {
+ outline: none;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 38px;
+ text-decoration: none;
+ color: #bbbbbb;
+ padding: 2px;
+ display: block;
+ transition: all .18s linear;
+ -o-transition: all .18s linear;
+ -moz-transition: all .18s linear;
+ -webkit-transition: all .18s linear;
+}
+
+.ui a:hover {
+ color: #ffffff;
+ background-color: #000000;
+ transition: all .18s linear;
+ -o-transition: all .18s linear;
+ -moz-transition: all .18s linear;
+ -webkit-transition: all .18s linear;
+}
+
+.ui a.external {
+ outline: none;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 10px;
+ font-weight: bold;
+ text-decoration: none;
+ color: #bbbbbb;
+ display: inline;
+ padding: 0;
+}
+
+.ui a.external:hover {
+ color: #ffffff;
+}
+
@@ -0,0 +1,18 @@
+html{color:#000;background:#222222;}
+a{cursor:pointer;}
+html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
+table{border-collapse:collapse;border-spacing:0;}
+fieldset,img{border:0;}
+address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
+li{list-style:none;}
+caption,th{text-align:left;}
+/* h1,h2,h3,h4,h5,h6{font-size:100%;} */
+q:before,q:after{content:'';}
+abbr,acronym {border:0;font-variant:normal;}
+sup {vertical-align:text-top;}
+sub {vertical-align:text-bottom;}
+input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;}
+legend{color:#000;}
+a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style: none; border:0px;}
+/*input[type="Submit"]{cursor:pointer;}*/
+strong {font-weight: bold;}
Oops, something went wrong.

0 comments on commit 36a24f4

Please sign in to comment.