diff --git a/lister.css b/lister.css deleted file mode 100755 index 163b235..0000000 --- a/lister.css +++ /dev/null @@ -1,201 +0,0 @@ -/********************************************************************** -* -**********************************************************************/ - -body { - padding: 0; - margin: 0; -} - - - -/************************************* layers and hidable elements ***/ -.hidden { - display: none; -} -/* keep this empty... */ -.shown { -} - - - -/*********************************************************** pages ***/ -.page { - /* XXX make this browser-sized... */ - position: relative; - text-align: left; - overflow: hidden; - - text-align: center; - - width: 100%; - height: auto; - - font-size: 12px; - - background: white; -} - -.page .content { - display: inline-block; - text-align: left; - position: relative; - overflow: visible; - white-space: normal; - - /* these set the "safe" marks for page content */ - width: 800px; - height: 600px; - - border: dashed 1px red; -} -.content:after { - display: block; - position: absolute; - top: 10px; - right: -90px; - width: 80px; - height: 30px; - padding-left: 15px; - - font-size: 20px; - - background: gray; - color: white; - border-left: solid 5px black; - - opacity: 0.3; -} - -.page .content:after { - content: "Page"; -} -.cover .content:after { - content: "Cover"; -} - -.page .content:before { - position: absolute; - content: ""; - z-index: 9999; - right: 0px; - top: 0px; - width: 50px; - height: 50px; - - border-bottom: dashed red 1px; - border-left: dashed red 1px; -} - - - -/************************************************** general layout ***/ - -.viewer { - position: relative; - background: silver; - - padding-top: 50px; - padding-bottom: 50px; -} - -.magazine { - position: relative; -} - -/* magazine article, this can contain a cover and a number of pages */ -.article { - position: relative; - overflow: visible; - font-size: 0px; - min-width: 200px; - - border: dashed red 1px; -} - -.article:after { - display: block; - position: absolute; - content: 'Article'; - top: 0px; - left: 0px; - width: 100px; - height: 30px; - - padding-right: 5px; - text-align: right; - font-size: 20px; - - background: gray; - color: white; - border-right: solid 5px black; - - opacity: 0.3; -} - -.article > .cover { -} - - - -/******************************************************** toolbars ***/ - -.left-toolbar { - position: fixed; - top: 30px; - left: 30px; - width: 40px; - height: auto; - background: black; - color: white; - - padding: 10px; - - z-index: 9999; - - opacity: 0.7; -} - - -/******************************************************* templates ***/ -/* XXX split these into seporate files... */ -.caption { - display: block; - position: absolute; - height: 100px; - width: 100%; - bottom: 0px; - left: 0px; - - padding: 15px; - color: white; - background: black; - opacity: 0.5; - -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; -} -.caption.hidden { - opacity: 0; - height: 0px; -} -.caption.shown { - opacity: 0.8; -} - - - -/*********************************************************************/ -/* keep this at the end... */ -.unanimated { - -webkit-transition: none; - -moz-transition: none; - -o-transition: all 0 ease; - -ms-transition: none; - transition: none; -} - - -/*********************************************************************/ diff --git a/lister.html b/lister.html deleted file mode 100755 index 05c2aa2..0000000 --- a/lister.html +++ /dev/null @@ -1,673 +0,0 @@ - - - - -PortableMag - - - - - - - - - - - - - - - -
- -
- - - - New Magazine - - - - - + - - - - M - - - - -
- - - - New Article - - - - - + - - - - A - - - - - - - - Shift Article Left - - - - - - - - - A - - - - - - - - Shift Article Right - - - - - - A - - - - -
- - - - New Page - - - - - + - - - - P - - - - - - - - Shift Page Left - - - - - - - - - P - - - - - - - - Shift Page Right - - - - - - P - - - - -
- - - - Info - - - i - - - - -
- - -
-
- - -
-
-
- - - - - - PortableMag cover - - - - - - - Mag - Portable - - A suit for publishing portable periodic magazines on mobile platforms. - - - - -
-
- - - -
-
-
-

The Basics...

- -

Main features

-
    -
  • Magazines, Covers, Articles and Pages, fully navigable -
  • Three main views: Magazine (under development) Page and Ribbon -
  • Fully linkable structure -
  • Full intuitive Gesture, Mouse or Keyboard navigation -
  • Special #URLs enable full link-based navigation and control -
  • Bookmarks and bookmark navigation -
  • Intuitive navigator widget -
  • Portable to most mobile platforms including: Apple iOS, Android, Windows Phone 7/8, BlackBery, HP webOS and more. -
  • Standalone on main desktop operating systems, including Apple MacOS X and Microsoft Windows -
  • Based on popular, open and easy to learn and use standards (HTML5 layout, SVG vector graphics) - -
  • Usable from the web (support for engines other than WebKit not here yet) -
  • Integrated Editor (under development) -
  • Integrated publishing framework (under development) - -
- - -
-
-
-
-

PortableMag Navigation and Linking

-
-

Finger controls

-
    -
  • Single finger swipe left/right – prev/next page. -
  • Two finger swipe left/right – prev/next article. -
  • Single finger swipe up/down – toggle thumbnail view. -
  • Pinch in/out – go in/out of thumbnail view. -
-

Navigation via #URLs

-

The basics

- Page #1
- Named page
-

- Anchor on page #3
- currently navigation via existing anchors - will break the layout, so use the name attribute - on any other tags (see example). - -

-
- -
-

Special anchors

-

These show up in the page URL

- Magazine cover
- Last page
- Thumbnail view
- Toggle a hidden layer
- - Toggle bookmark
- -

Relative special anchors

-

These will get replaced by corresponding page numbers in the URL

- Next page
- Previous page
- Next article
- Previous article
-

History support

- NOTE: this is still a bit flaky...
- Go back
- Go forward
-
- - - - -
-
- - - -
-
- - - - - - - - - - - - PortableMag Anatomy - - Layer 1 - PortableMag Anatomy - - - - - - - Magazine cover - - Article Cover - - Page - - Page - - Next Article - Magazine - Article - - - - - - Page - - Page Content - (safe area) - - - - - - - - This area might get clipped - - - - - - - - -
-
-
-
-

The Page content has a fixed size...

-
-
-
-
- - -

Using the content block...

-

- The content block can contain any HTML. -

-

- The contents will allways fit the screen, the aspect ratio - of the content block is fixed regardless of the viewer. -

-

- Contents will not get clipped as long as they are within the block. -

-

- NOTE: by default the overflow is visible (see next page), so be carefull. -

-
-
-
-
- -
-

You can still use the full page area...

-

- Though anything outside the content block can and will get clipped, - depending on viewer aspect ratio... -

-

- You can see this by resizing the page in browser or rotating the device. -

-
-
-
-
-
-
-
-

Page Templates

- home
-
-
- -
-
-

Two column

-
- Column 1 -
-
- Column 2 -
-
-
-
-
- Page -
-
-
-
- Page -
-
-
-
- Page -
-
-
-
- Page -
-
-
-
-
-
-

Article Cover

- home
-
-
- -
-
- Page -
-
-
-
- Page
- home
-
-
-
-
-
-
-

Configuration demo

- -

- NOTE: this is not an actual configuration page, just a live demo - of some of the available configuration option effects. -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Pages in ribbon: - - - - -
- Fit page to view: - - -
- Animate window resize: - - -
- Drag in full page view: - - -
- Toggle viewer animation (affects transition to and from full page view): - - -
- Enable different size pages (still flaky): - - -
- Reset stored data: - - -
- -
- -
- - - - - - - - -
- Fingers supported: - -
- Browser info: - -
- - -
- go back, or return to magazine cover...
-
- - - - - - - - - - - - - - - - -