From 192b0ee5cdbd8a233045858b5fccaceeba5db33d Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Mon, 21 Jan 2013 03:32:28 +0400 Subject: [PATCH] done basic CSS layout, animations, navigation and zooming... Signed-off-by: Alex A. Naanou --- magazine.css | 56 ++++++++++++-- magazine.html | 208 ++++++++++++++++++++++++++++++++------------------ 2 files changed, 182 insertions(+), 82 deletions(-) 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 @@