diff --git a/magazine.css b/magazine.css
index 59c7ab8..2074109 100755
--- a/magazine.css
+++ b/magazine.css
@@ -1,6 +1,6 @@
/* all elements that will behave like a page */
-.cover, .page {
+.page {
/* XXX make this browser-sized... */
display: inline-block;
vertical-align: bottom;
@@ -11,30 +11,72 @@
* one way to go is to use a fixed page layout and scale things manually.
*/
- width: 400px;
- height: 300px;
+ width: 800px;
+ height: 600px;
+ /* change to relative units... */
+ margin-top: -300px;
font-size: 12px;
+}
- border: solid blue 1px;
+.current.page {
}
/* general layout */
-.magazine {
+.viewer {
/* this makes the magazine behave like a ribbon */
width: 100%;
height: 100%;
- overflow: visible;
+ overflow: hidden;
white-space: nowrap;
font-size: 0px;
background: gray;
- border: solid blue 1px;
}
+.scaler {
+ position: relative;
+ overflow: visible;
+
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+
+ -webkit-transition: all 0.2s ease;
+ -moz-transition: all 0.2s ease;
+ -o-transition: all 0.2s ease;
+ -ms-transition: all 0.2s ease;
+ transition: all 0.2s ease;
+}
+
+.aligner {
+ position: relative;
+ left: 50%;
+ height: 100%;
+}
+
+.magazine {
+ position: relative;
+ display: inline-block;
+ vertical-align: bottom;
+ top: 50%;
+
+ /* change to relative units... */
+ margin-left: -400px;
+
+ -webkit-transition: all 0.2s ease;
+ -moz-transition: all 0.2s ease;
+ -o-transition: all 0.2s ease;
+ -ms-transition: all 0.2s ease;
+ transition: all 0.2s ease;
+}
+
+
.magazine > .cover {
background: white;
}
diff --git a/magazine.html b/magazine.html
index 24b84f6..5b856b3 100755
--- a/magazine.html
+++ b/magazine.html
@@ -5,6 +5,58 @@