improve positioning on smaller screens

netcat-fan · May 24, 2014 · f2cee9b · f2cee9b
1 parent b616d87
commit f2cee9b
Show file tree

Hide file tree

Showing 17 changed files with 34 additions and 20 deletions.
diff --git a/css/load1.css b/css/load1.css
@@ -18,7 +18,7 @@
 }
 .load1 .loader {
   text-indent: -9999em;
-  margin: 40% auto;
+  margin: 8em auto;
   position: relative;
   font-size: 11px;
   -webkit-animation-delay: 0.16s;

diff --git a/css/load2.css b/css/load2.css
@@ -23,7 +23,7 @@
 .load2 .loader {
   font-size: 11px;
   text-indent: -99999em;
-  margin: 30% auto;
+  margin: 5em auto;
   position: relative;
   width: 10em;
   height: 10em;

diff --git a/css/load3.css b/css/load3.css
@@ -1,6 +1,6 @@
 .load3 .loader {
   font-size: 10px;
-  margin: 30% auto;
+  margin: 5em auto;
   text-indent: -9999em;
   width: 11em;
   height: 11em;

diff --git a/css/load4.css b/css/load4.css
@@ -1,6 +1,6 @@
 .load4 .loader {
   font-size: 20px;
-  margin: 45% auto;
+  margin: 5em auto;
   width: 1em;
   height: 1em;
   border-radius: 50%;

diff --git a/css/load5.css b/css/load5.css
@@ -1,5 +1,5 @@
 .load5 .loader {
-  margin: 46% auto;
+  margin: 4em auto;
   font-size: 25px;
   width: 1em;
   height: 1em;

diff --git a/css/load6.css b/css/load6.css
@@ -5,7 +5,7 @@
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  margin: 33% auto;
+  margin: 0.8em auto;
   position: relative;
   -webkit-animation: load6 1.7s infinite ease;
   animation: load6 1.7s infinite ease;

diff --git a/css/main.css b/css/main.css
@@ -259,3 +259,8 @@ a.twitter span {
     width: 100%;
   }
 }
+@media (max-width: 500px) {
+  .load-container {
+    width: 100%;
+  }
+}
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Single Element CSS Spinners</title><meta name="viewport" content="width=device-width"><meta name="description" content="A collection of loading spinners animated with CSS"><meta property="og:title" content="Single Element CSS Spinners"><meta property="og:type" content="website"><meta property="og:description" content="A collection of loading spinners animated with CSS"><meta property="og:image" content="http://projects.lukehaas.me/css-loaders/images/css-loaders-screenshot.jpg"><meta property="og:url" content="http://projects.lukehaas.me/css-loaders/"><link rel="stylesheet" href="css/main.css"><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300"><link rel="stylesheet" href="css/load1.css"><link rel="stylesheet" href="css/load2.css"><link rel="stylesheet" href="css/load3.css"><link rel="stylesheet" href="css/load4.css"><link rel="stylesheet" href="css/load5.css"><link rel="stylesheet" href="css/load6.css"><link rel="stylesheet" href="css/load7.css"><link rel="stylesheet" href="css/load8.css"></head><body><header><div class="inner"><h1>Single Element CSS Spinners</h1></div></header><main><div class="inner"><div class="load-container load1"><div class="loader">Loading...</div><a href="#load1">&lt; View Source &gt;</a></div><div class="load-container load2"><div class="loader">Loading...</div><a href="#load2">&lt; View Source &gt;</a></div><div class="load-container load3"><div class="loader">Loading...</div><a href="#load3">&lt; View Source &gt;</a></div><div class="load-container load4"><div class="loader">Loading...</div><a href="#load4">&lt; View Source &gt;</a></div><div class="load-container load5"><div class="loader">Loading...</div><a href="#load5">&lt; View Source &gt;</a></div><div class="load-container load6"><div class="loader">Loading...</div><a href="#load6">&lt; View Source &gt;</a></div><div class="load-container load7"><div class="loader">Loading...</div><a href="#load7">&lt; View Source &gt;</a></div><div class="load-container load8"><div class="loader">Loading...</div><a href="#load8">&lt; View Source &gt;</a></div></div><a href="https://github.com/lukehaas/css-loaders" target="_blank" class="github"><img src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a><div class="overlay hidden"></div><!--really pissed off Jade can handle vars in includes - should be able to just loop this:--><div id="load1" class="source hidden"><textarea readonly class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load1 .loader,
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Single Element CSS Spinners</title><meta name="viewport" content="width=device-width"><meta name="description" content="A collection of loading spinners animated with CSS"><meta property="og:title" content="Single Element CSS Spinners"><meta property="og:type" content="website"><meta property="og:description" content="A collection of loading spinners animated with CSS"><meta property="og:image" content="http://projects.lukehaas.me/css-loaders/images/css-loaders-screenshot.jpg"><meta property="og:url" content="http://projects.lukehaas.me/css-loaders/"><script src="script/modernizr-2.8.2.js"></script><link rel="stylesheet" href="css/main.css"><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300"><link rel="stylesheet" href="css/load1.css"><link rel="stylesheet" href="css/load2.css"><link rel="stylesheet" href="css/load3.css"><link rel="stylesheet" href="css/load4.css"><link rel="stylesheet" href="css/load5.css"><link rel="stylesheet" href="css/load6.css"><link rel="stylesheet" href="css/load7.css"><link rel="stylesheet" href="css/load8.css"></head><body><header><div class="inner"><h1>Single Element CSS Spinners</h1></div></header><main><div class="inner"><div class="load-container load1"><div class="loader">Loading...</div><a href="#load1">&lt; View Source &gt;</a></div><div class="load-container load2"><div class="loader">Loading...</div><a href="#load2">&lt; View Source &gt;</a></div><div class="load-container load3"><div class="loader">Loading...</div><a href="#load3">&lt; View Source &gt;</a></div><div class="load-container load4"><div class="loader">Loading...</div><a href="#load4">&lt; View Source &gt;</a></div><div class="load-container load5"><div class="loader">Loading...</div><a href="#load5">&lt; View Source &gt;</a></div><div class="load-container load6"><div class="loader">Loading...</div><a href="#load6">&lt; View Source &gt;</a></div><div class="load-container load7"><div class="loader">Loading...</div><a href="#load7">&lt; View Source &gt;</a></div><div class="load-container load8"><div class="loader">Loading...</div><a href="#load8">&lt; View Source &gt;</a></div></div><a href="https://github.com/lukehaas/css-loaders" target="_blank" class="github"><img src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a><div class="overlay hidden"></div><!--really pissed off Jade can handle vars in includes - should be able to just loop this:--><div id="load1" class="source hidden"><textarea readonly class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load1 .loader,
 .load1 .loader:before,
 .load1 .loader:after {
   background: #FFF;
@@ -18,7 +18,7 @@
 }
 .load1 .loader {
   text-indent: -9999em;
-  margin: 40% auto;
+  margin: 8em auto;
   position: relative;
   font-size: 11px;
   -webkit-animation-delay: 0.16s;
@@ -78,7 +78,7 @@
 .load2 .loader {
   font-size: 11px;
   text-indent: -99999em;
-  margin: 30% auto;
+  margin: 5em auto;
   position: relative;
   width: 10em;
   height: 10em;
@@ -118,7 +118,7 @@
 }
 </textarea></div><div id="load3" class="source hidden"><textarea readonly class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load3 .loader {
   font-size: 10px;
-  margin: 30% auto;
+  margin: 5em auto;
   text-indent: -9999em;
   width: 11em;
   height: 11em;
@@ -178,7 +178,7 @@
 }
 </textarea></div><div id="load4" class="source hidden"><textarea readonly class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load4 .loader {
   font-size: 20px;
-  margin: 45% auto;
+  margin: 5em auto;
   width: 1em;
   height: 1em;
   border-radius: 50%;
@@ -242,7 +242,7 @@
   }
 }
 </textarea></div><div id="load5" class="source hidden"><textarea readonly class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load5 .loader {
-  margin: 46% auto;
+  margin: 4em auto;
   font-size: 25px;
   width: 1em;
   height: 1em;
@@ -313,7 +313,7 @@
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  margin: 33% auto;
+  margin: 0.8em auto;
   position: relative;
   -webkit-animation: load6 1.7s infinite ease;
   animation: load6 1.7s infinite ease;

diff --git a/jade/index.jade b/jade/index.jade
@@ -11,6 +11,7 @@ html(lang="en")
 		meta(property="og:description",content=config.description)
 		meta(property="og:image",content="http://projects.lukehaas.me/css-loaders/images/css-loaders-screenshot.jpg")
 		meta(property="og:url",content="http://projects.lukehaas.me/css-loaders/")
+		script(src="script/modernizr-2.8.2.js")
 		link(rel="stylesheet",href="css/main.css")
 		link(rel="stylesheet",href="http://fonts.googleapis.com/css?family=Lato:300")
 		- for(var i = 1;i < 9;i++)

diff --git a/less/load1.less b/less/load1.less
@@ -1,4 +1,3 @@
-
 .load1 .loader,.load1 .loader:before,.load1 .loader:after {
   background:#FFF;
   -webkit-animation:load1 1s infinite ease-in-out;
@@ -17,7 +16,7 @@
 }
 .load1 .loader {
   text-indent:-9999em;
-  margin:40% auto;
+  margin:8em auto;
   position:relative;
   font-size:11px;
   -webkit-animation-delay:0.16s;

diff --git a/less/load2.less b/less/load2.less
@@ -23,7 +23,7 @@
 .load2 .loader {
   font-size:11px;
   text-indent:-99999em;
-  margin:30% auto;
+  margin:5em auto;
   position:relative;
   width:10em;
   height:10em;

diff --git a/less/load3.less b/less/load3.less
@@ -2,7 +2,7 @@
 
 .load3 .loader {
   font-size:10px;
-  margin:30% auto;
+  margin:5em auto;
   text-indent:-9999em;
   width:11em;
   height:11em;

diff --git a/less/load4.less b/less/load4.less
@@ -1,7 +1,7 @@
 
 .load4 .loader {
   font-size:20px;
-  margin:45% auto;
+  margin:5em auto;
   width:1em;
   height:1em;
   border-radius:50%;

diff --git a/less/load5.less b/less/load5.less
@@ -1,6 +1,6 @@
 
 .load5 .loader {
-  margin:46% auto;
+  margin:4em auto;
   font-size:25px;
   width:1em;
   height:1em;

diff --git a/less/load6.less b/less/load6.less
@@ -6,7 +6,7 @@
   width:1em;
   height:1em;
   border-radius:50%;
-  margin:33% auto;
+  margin:0.8em auto;
   position:relative;
   -webkit-animation:load6 1.7s infinite ease;
   animation:load6 1.7s infinite ease;

diff --git a/less/main.less b/less/main.less
@@ -172,5 +172,10 @@ a.twitter span {
     width:100%;
   }
 }
+@media (max-width:500px) {
+	.load-container{
+		width:100%;
+	}
+}
 
 
diff --git a/script/modernizr-2.8.2.js b/script/modernizr-2.8.2.js