Use media queries to resize spiral as window size changes.

nelstrom · Nov 6, 2010 · be2d223 · be2d223
1 parent 637e5d2
commit be2d223
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 7 deletions.
diff --git a/public/stylesheets/ratio.css b/public/stylesheets/ratio.css
@@ -32,10 +32,6 @@ body {
 #container div {
   background-color: rgba(0, 0, 0, 0.07); }
 
-#container > div {
-  width: 950px;
-  height: 587.132px; }
-
 .cycle,
 .cycle > div > div {
   width: 100%;
@@ -105,3 +101,63 @@ body {
   -webkit-box-pack: end;
   -moz-box-pack: end;
   box-pack: end; }
+
+@media screen and (min-width: 1200px) {
+  #container > div {
+    width: 1200px;
+    height: 741.641px; } }
+
+@media screen and (max-width: 1200px) {
+  #container > div {
+    width: 1100px;
+    height: 679.837px; } }
+
+@media screen and (max-width: 1100px) {
+  #container > div {
+    width: 1000px;
+    height: 618.034px; } }
+
+@media screen and (max-width: 1100px) {
+  #container > div {
+    width: 1000px;
+    height: 618.034px; } }
+
+@media screen and (max-width: 1000px) {
+  #container > div {
+    width: 900px;
+    height: 556.231px; } }
+
+@media screen and (max-width: 900px) {
+  #container > div {
+    width: 800px;
+    height: 494.427px; } }
+
+@media screen and (max-width: 800px) {
+  #container > div {
+    width: 700px;
+    height: 432.624px; } }
+
+@media screen and (max-width: 700px) {
+  #container > div {
+    width: 600px;
+    height: 370.82px; } }
+
+@media screen and (max-width: 600px) {
+  #container > div {
+    width: 500px;
+    height: 309.017px; } }
+
+@media screen and (max-width: 500px) {
+  #container > div {
+    width: 400px;
+    height: 247.214px; } }
+
+@media screen and (max-width: 400px) {
+  #container > div {
+    width: 300px;
+    height: 185.41px; } }
+
+@media screen and (max-width: 300px) {
+  #container > div {
+    width: 200px;
+    height: 123.607px; } }
diff --git a/sass/ratio.scss b/sass/ratio.scss
@@ -6,9 +6,6 @@ body { background-color: white; }
 #container div {
   background-color: rgba(0, 0, 0, 0.07);
 }
-#container > div {
-  @include golden_landscape(950px);
-}
 .cycle,
 .cycle > div > div {
   width:   100%;
@@ -29,3 +26,64 @@ body { background-color: white; }
 .cycle > div             { @include dock-top; }
 .cycle > div > div       { @include dock-left; }
 .cycle > div > div > div { @include dock-bottom; }
+
+@media screen and (min-width: 1200px) {
+  #container > div {
+    @include golden_landscape(1200px);
+  }
+}
+@media screen and (max-width: 1200px) {
+  #container > div {
+    @include golden_landscape(1100px);
+  }
+}
+@media screen and (max-width: 1100px) {
+  #container > div {
+    @include golden_landscape(1000px);
+  }
+}
+@media screen and (max-width: 1100px) {
+  #container > div {
+    @include golden_landscape(1000px);
+  }
+}
+@media screen and (max-width: 1000px) {
+  #container > div {
+    @include golden_landscape(900px);
+  }
+}
+@media screen and (max-width: 900px) {
+  #container > div {
+    @include golden_landscape(800px);
+  }
+}
+@media screen and (max-width: 800px) {
+  #container > div {
+    @include golden_landscape(700px);
+  }
+}
+@media screen and (max-width: 700px) {
+  #container > div {
+    @include golden_landscape(600px);
+  }
+}
+@media screen and (max-width: 600px) {
+  #container > div {
+    @include golden_landscape(500px);
+  }
+}
+@media screen and (max-width: 500px) {
+  #container > div {
+    @include golden_landscape(400px);
+  }
+}
+@media screen and (max-width: 400px) {
+  #container > div {
+    @include golden_landscape(300px);
+  }
+}
+@media screen and (max-width: 300px) {
+  #container > div {
+    @include golden_landscape(200px);
+  }
+}