mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-31 12:00:11 +00:00
general repo cleanup and pruning...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
76499b6c8f
commit
4b0f7a88ce
325
editor.html
325
editor.html
@ -1,325 +0,0 @@
|
|||||||
<!-- XXX for some reason a doctype kills the layout, need to investigate -->
|
|
||||||
<!--DOCTYPE html-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>PortableMag</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="magazine.css">
|
|
||||||
<link rel="stylesheet" href="magazine-custom.css">
|
|
||||||
|
|
||||||
<script src="ext-lib/jquery.js"></script>
|
|
||||||
<script src="ext-lib/jquery.touchSwipe.js"></script>
|
|
||||||
<script src="ext-lib/jstorage.js"></script>
|
|
||||||
<!-- EXPERIMENTAL -->
|
|
||||||
<!--
|
|
||||||
XXX scrollTo is a cool and a powerfull tool but it needs a sustantial code reorganization
|
|
||||||
this might be a good idea/exersize sometime in the future...
|
|
||||||
-->
|
|
||||||
<!--script src="ext-lib/jquery.scrollto.js"></script-->
|
|
||||||
|
|
||||||
<script src="lib/jli.js"></script>
|
|
||||||
|
|
||||||
<script src="magazine.js"></script>
|
|
||||||
<script src="navigator.js"></script>
|
|
||||||
<script src="editor.js"></script>
|
|
||||||
|
|
||||||
<!-- configuration, keep this last... -->
|
|
||||||
<script src="platform.js"></script>
|
|
||||||
<script src="keybindings.js"></script>
|
|
||||||
<script src="config.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var DEBUG = true
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
|
||||||
|
|
||||||
if(DEBUG){
|
|
||||||
$('.splash').click(function(){
|
|
||||||
$('.splash').fadeOut()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
$(window)
|
|
||||||
.resize(viewResizeHandler)
|
|
||||||
.bind('hashchange', hashChangeHandler)
|
|
||||||
|
|
||||||
$(document)
|
|
||||||
.keydown(makeKeyboardHandler(keybindings))
|
|
||||||
|
|
||||||
$('.viewer')
|
|
||||||
// setup internal events...
|
|
||||||
.on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState)
|
|
||||||
.on('pageChanged', updatePageNumberIndicator)
|
|
||||||
.on('magazineDataLoaded', loadMagazineChrome)
|
|
||||||
|
|
||||||
// templates...
|
|
||||||
.on('pageCreated articleCreated magazineCreated ' +
|
|
||||||
'pageMoved pageRemoved articleMoved articleRemoved', runMagazineTemplates)
|
|
||||||
|
|
||||||
// user interactions...
|
|
||||||
.swipe({
|
|
||||||
swipeStatus: swipeHandler,
|
|
||||||
|
|
||||||
// XXX these get called instead of pinches...
|
|
||||||
swipeUp: function(event, direction, distance, duration, fingerCount){
|
|
||||||
if(fingerCount == 2){
|
|
||||||
toggleBookmark()
|
|
||||||
} else {
|
|
||||||
togglePageView()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// XXX these get called instead of pinches...
|
|
||||||
swipeDown: function(event, direction, distance, duration, fingerCount){
|
|
||||||
if(fingerCount == 2){
|
|
||||||
toggleBookmark()
|
|
||||||
} else {
|
|
||||||
togglePageView()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
// XXX for some reasons these lose the competition with swipes...
|
|
||||||
pinchIn: function(event, direction, distance, duration, fingerCount, pinchZoom) {
|
|
||||||
if(pinchZoom < distance){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if(fingerCount == 2){
|
|
||||||
togglePageView('on')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// XXX for some reasons these lose the competition with swipes...
|
|
||||||
pinchOut: function(event, direction, distance, duration, fingerCount, pinchZoom) {
|
|
||||||
if(pinchZoom < distance){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if(fingerCount == 2){
|
|
||||||
togglePageView('off')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
// XXX for some reason this deos not bubble up the nested elements...
|
|
||||||
click: function(evt, elem){
|
|
||||||
elem = $(elem)
|
|
||||||
// bubble up to nearest page...
|
|
||||||
if(!elem.hasClass('page')
|
|
||||||
&& elem.parents('.page').length != 0){
|
|
||||||
elem = elem.parents('.page').first()
|
|
||||||
}
|
|
||||||
|
|
||||||
// click current page to toggle full page view...
|
|
||||||
if(elem.hasClass('current', 'page')
|
|
||||||
&& togglePageView('?') == 'off'){
|
|
||||||
togglePageView('on')
|
|
||||||
// click any page to set it to current...
|
|
||||||
} else if(elem.hasClass('page')){
|
|
||||||
setCurrentPage(elem)
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
},
|
|
||||||
|
|
||||||
excludedElements: '.noSwipe, a, [contenteditable=true]',
|
|
||||||
fingers: $.fn.swipe.fingers.ALL
|
|
||||||
//fingers: $.fn.swipe.fingers.THREE
|
|
||||||
})
|
|
||||||
|
|
||||||
// XXX this will need to be repeated to newly created elements...
|
|
||||||
$('[contenteditable=true]')
|
|
||||||
.on('focus', function(){
|
|
||||||
toggleInlineEditorMode('on')
|
|
||||||
})
|
|
||||||
.on('blur', function(){
|
|
||||||
toggleInlineEditorMode('off')
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// load state and setup everything that depends on it...
|
|
||||||
// XXX load the data with loadJSON()
|
|
||||||
loadState()
|
|
||||||
// need to call this once per whole page load....
|
|
||||||
setupNavigator()
|
|
||||||
// XXX STUB, needed untill we load everything frim JSON...
|
|
||||||
$('.viewer').trigger('magazineDataLoaded')
|
|
||||||
|
|
||||||
// set default view...
|
|
||||||
togglePageView('on')
|
|
||||||
|
|
||||||
// hide the splash screen...
|
|
||||||
$(window).one('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend',
|
|
||||||
function(){
|
|
||||||
// NOTE: this will fix a bug on android -- the pages appear
|
|
||||||
// to rendering quite a bit longer than loading, so on
|
|
||||||
// loadState() above the current page is set well before
|
|
||||||
// it is alligned correctly, so this will reset the
|
|
||||||
// current page after everything is aligned...
|
|
||||||
setTimeout(function(){
|
|
||||||
//updateView()
|
|
||||||
setCurrentPage()
|
|
||||||
}, 300)
|
|
||||||
// hide the splash...
|
|
||||||
setTimeout(function(){
|
|
||||||
$('.splash').fadeOut()
|
|
||||||
}, 350)
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="viewer">
|
|
||||||
|
|
||||||
<!-- Splash screen -->
|
|
||||||
<div class="splash noSwipe">
|
|
||||||
<!-- XXX replace this with a background-image logo... -->
|
|
||||||
<table width="100%" height="100%"><tr><td align="center" valign="middle">
|
|
||||||
<h2><i>loading...</i></h2>
|
|
||||||
</td></tr></table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- XXX Magazine title... -->
|
|
||||||
|
|
||||||
<div class="top-toolbar">
|
|
||||||
<div class="left-set">
|
|
||||||
<div class="button cover title">
|
|
||||||
<a href="#home"><span class="magazine-title-text">PortableMag</span> <small>(editor)</small></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-set">
|
|
||||||
<div class="button prev-bookmark">
|
|
||||||
<a href="#prevBookmark">
|
|
||||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g>
|
|
||||||
<title>Previous bookmark (S-Left)</title>
|
|
||||||
<path transform="rotate(-180 18.9697 20.1122)" id="svg_13" stroke="#ffffff" d="m20.467497,20.112247l-8.773763,-14.254913l5.778195,0l8.773788,14.254913l-8.773788,14.25491l-5.778195,0l8.773763,-14.25491z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="button toggle-bookmark">
|
|
||||||
<a href="#bookmark">
|
|
||||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g>
|
|
||||||
<title>Toggle bookmark (B)</title>
|
|
||||||
<rect stroke="#ffffff" id="svg_1" height="28.604868" width="24.052915" y="5.858955" x="8.807377" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
|
|
||||||
<path stroke="#ffffff" id="svg_4" d="m21.762226,3.651895l8.416584,0l0,14.510554l-4.124887,-2.792193l-4.291697,2.792193l0,-14.510554l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#ff0000"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="button next-bookmark">
|
|
||||||
<a href="#nextBookmark">
|
|
||||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g>
|
|
||||||
<title>Next bookmark (S-Right)</title>
|
|
||||||
<path stroke="#ffffff" id="svg_11" d="m23.175751,20.132858l-8.773797,-14.254913l5.77823,0l8.773788,14.254913l-8.773788,14.254913l-5.77823,0l8.773797,-14.254913z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="button info" style="opacity: 0.3">
|
|
||||||
<a href="javascript:alert('not implemented yet...')">
|
|
||||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g>
|
|
||||||
<title>Info</title>
|
|
||||||
<g id="svg_3">
|
|
||||||
<circle fill="#000000" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="20.341617" cy="20.120354" r="14.302816" id="svg_2" stroke="#ffffff"/>
|
|
||||||
<text fill="#ffffff" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="19.914334" y="23.397665" id="svg_5" font-size="24" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" transform="matrix(1.02694 0 0 1.02694 -0.348556 4.34707)" stroke="#000000">i</text>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom-toolbar">
|
|
||||||
<!-- this is just an example-->
|
|
||||||
<div class="controls">
|
|
||||||
<a href="#home" title="(Home)">Cover</a>
|
|
||||||
<a href="#prevBookmark" title="(S-Left)">< Bookmark</a>
|
|
||||||
<a href="#prevArticle" title="(C-Left)">< Article</a>
|
|
||||||
<a href="#prev" title="Previous page (Left)">< Pa</a><a href="#next" title="Next page (Right)">ge ></a>
|
|
||||||
<a href="#nextArticle" title="(C-Right)">Article ></a>
|
|
||||||
<a href="#nextBookmark" title="(S-Right)">Bookmark ></a>
|
|
||||||
<a href="#end" title="(End)">End</a>
|
|
||||||
</div>
|
|
||||||
<!-- position indicator -->
|
|
||||||
<div class="navigator">
|
|
||||||
<div class="bar">
|
|
||||||
<div class="indicator"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page-number">0/0</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="scaler">
|
|
||||||
<div class="aligner">
|
|
||||||
<div class="magazine" title="PortableMag Templates">
|
|
||||||
<div class="cover page current">
|
|
||||||
<div class="content">
|
|
||||||
<!--h1 style="color:gray;font-size:125px;margin-bottom:-35px; margin-top: 160px">PortableMag</h1>
|
|
||||||
<h1 style="color:silver; font-size: 20px; margin-left:10px">A suit for publishing portable periodic magazines on mobile platforms.</h1-->
|
|
||||||
|
|
||||||
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
|
||||||
<g>
|
|
||||||
<title>PortableMag cover</title>
|
|
||||||
<defs>
|
|
||||||
<path id="circle_path" d="m177.720383,238.333344c0,-82.290771 66.655533,-148.946304 148.946304,-148.946304c82.290771,0 148.946289,66.655533 148.946289,148.946304c0,82.290771 -66.655518,148.946289 -148.946289,148.946289c-82.290771,0 -148.946304,-66.655518 -148.946304,-148.946289z"/>
|
|
||||||
</defs>
|
|
||||||
<text fill="#7f7f7f" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="306" y="434.33334" id="svg_2" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve"/>
|
|
||||||
<g id="svg_1">
|
|
||||||
<g id="svg_8">
|
|
||||||
<text stroke="#000000" fill="#7f7f7f" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="224.898504" y="309.870464" id="svg_6" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" font-weight="bold" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Mag</text>
|
|
||||||
<text stroke="#000000" fill="#a8a8a8" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="156.581224" y="309.650884" id="svg_7" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Portable</text>
|
|
||||||
</g>
|
|
||||||
<text stroke="#000000" fill="#afafaf" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="261.526111" y="338.824173" id="svg_4" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(1.53525 0 0 1.53525 -34.4106 -167.936)" font-weight="normal" font-style="normal">A suit for publishing portable periodic magazines on mobile platforms.</text>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- XXX do we need a Magazine Credits page??? -->
|
|
||||||
|
|
||||||
<div class="article">
|
|
||||||
<div class="cover page">
|
|
||||||
<div class="content">
|
|
||||||
<h1 name="basics" style="color:gray;font-size:100px;">Templates...</h1>
|
|
||||||
|
|
||||||
Magazine title: <span class="magazine-title-text">[MAGAZINE NAME]</span><br>
|
|
||||||
|
|
||||||
<div class="article-index">[ARTICLE INDEX]</div>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
<h1 contenteditable="true">Two column</h1>
|
|
||||||
<div contenteditable="true" style="float:left; width: 45%; height: 100%; margin: 10px;">
|
|
||||||
Column 1
|
|
||||||
</div>
|
|
||||||
<div contenteditable="true" style="float:left; width: 45%; height: 100%; padding: 10px;">
|
|
||||||
Column 2
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
<!-- vim:set ts=4 sw=4 nowrap : -->
|
|
||||||
151
index-old.html
151
index-old.html
@ -1,151 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>layout template</title>
|
|
||||||
<link rel="stylesheet" href="layout.css">
|
|
||||||
<script src="jquery.js"></script>
|
|
||||||
<script src="jquery.touchSwipe.js"></script>
|
|
||||||
<script src="jquery.exif.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
|
||||||
$('.article').click(function(){
|
|
||||||
var name = $(this).attr('id')
|
|
||||||
return setPageTo(name)
|
|
||||||
})
|
|
||||||
|
|
||||||
$('.viewer')
|
|
||||||
//.click(toggleIndex)
|
|
||||||
.swipe({
|
|
||||||
swipeLeft: nextPage,
|
|
||||||
swipeRight: prevPage,
|
|
||||||
swipeUp: showIndex,
|
|
||||||
swipeDown: hideIndex
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function getPages(){
|
|
||||||
return $('.article').map(function(e, v){return v.id}).toArray()
|
|
||||||
}
|
|
||||||
|
|
||||||
function curPageIndex(){
|
|
||||||
var cur = $('.article.current').attr('id')
|
|
||||||
return getPages().indexOf(cur)
|
|
||||||
}
|
|
||||||
|
|
||||||
function setPageTo(name){
|
|
||||||
$('.view.current, .article.current').removeClass('current')
|
|
||||||
$('#'+name).addClass('current')
|
|
||||||
$('.view.'+name).addClass('current')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
function nextPage(){
|
|
||||||
var i = curPageIndex()
|
|
||||||
var pages = getPages()
|
|
||||||
|
|
||||||
if(i+1 >= pages.length){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setPageTo(pages[i+1])
|
|
||||||
}
|
|
||||||
|
|
||||||
function prevPage(){
|
|
||||||
var i = curPageIndex()
|
|
||||||
|
|
||||||
if(i <= 0){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setPageTo(getPages()[i-1])
|
|
||||||
}
|
|
||||||
|
|
||||||
function showIndex(){
|
|
||||||
//$('.previews').fadeIn()
|
|
||||||
$('.previews').slideDown(100)
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideIndex(){
|
|
||||||
//$('.previews').fadeOut()
|
|
||||||
$('.previews').slideUp(100)
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleIndex(){
|
|
||||||
if($('.previews').css('display') == 'none'){
|
|
||||||
showIndex()
|
|
||||||
} else {
|
|
||||||
hideIndex()
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="content">
|
|
||||||
<div class="section main current">
|
|
||||||
<div class="viewer">
|
|
||||||
<div class="view A current">
|
|
||||||
<h1>Page A</h1>
|
|
||||||
<p>
|
|
||||||
The basic actions here are:<br>
|
|
||||||
<br><b>swipe right</b> – show next page.
|
|
||||||
<br><b>swipe left</b> – show previous page.
|
|
||||||
<br><b>swipe up</b> – show page index.
|
|
||||||
<br><b>swipe down</b> – hide page index.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="view B">
|
|
||||||
<div style="height: 95%; width: 95%; margin: 2%; border: 5px dotted gray;">
|
|
||||||
<h2>Page B</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="view C">
|
|
||||||
<h2>Page C</h2>
|
|
||||||
<!-- images need caching... -->
|
|
||||||
<!--img src="img.jpg" exif="true" onclick="alert($(this).exifPretty())"/-->
|
|
||||||
<img src="img.jpg"/>
|
|
||||||
</div>
|
|
||||||
<div class="view D">
|
|
||||||
<h2>Page D</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- remove this... -->
|
|
||||||
<div class="previews">
|
|
||||||
<div class="article current" id="A">
|
|
||||||
<div class="preview"></div>
|
|
||||||
<div class="text">
|
|
||||||
Article A Title
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="article" id="B">
|
|
||||||
<div class="preview"></div>
|
|
||||||
<div class="text">
|
|
||||||
Article B Title
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="article" id="C">
|
|
||||||
<div class="preview"></div>
|
|
||||||
<div class="text">
|
|
||||||
Article C Title
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="article" id="D">
|
|
||||||
<div class="preview"></div>
|
|
||||||
<div class="text">
|
|
||||||
Article D Title
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- vim:set ts=4 sw=4 spell : -->
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
158
layout.css
158
layout.css
@ -1,158 +0,0 @@
|
|||||||
.warning {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 24px;
|
|
||||||
color: yellow;
|
|
||||||
padding-top: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated,
|
|
||||||
.splash,
|
|
||||||
.content,
|
|
||||||
.section,
|
|
||||||
.button,
|
|
||||||
.article,
|
|
||||||
.view {
|
|
||||||
-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
|
||||||
text-align: center;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
font-family: Arial;
|
|
||||||
color: #a7a9ac;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current.button, .current.article {
|
|
||||||
color: gray;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header, .content, .footer {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.section-buttons, .previews {
|
|
||||||
width: 100%;
|
|
||||||
font-size: 0px;
|
|
||||||
white-space: nowrap;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-buttons {
|
|
||||||
bottom: 0px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button, .article {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
width: 20%;
|
|
||||||
cursor: hand;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
height: 35px;
|
|
||||||
font-size: 20px;
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewer {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.previews {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
height: auto;
|
|
||||||
bottom: 0px;
|
|
||||||
|
|
||||||
background-color: white;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article {
|
|
||||||
height: auto;
|
|
||||||
font-size: 18px;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
margin: 2.5%;
|
|
||||||
margin-top: 5%;
|
|
||||||
margin-bottom: 7%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article:first-child {
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article:last-child {
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article .preview {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
background-color: #d1d2d4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article .text {
|
|
||||||
padding: 5px;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
display: none;
|
|
||||||
min-height: 400px;
|
|
||||||
padding: 2.5%;
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 15px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section.current {
|
|
||||||
display: block;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section.main {
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left:-100%;
|
|
||||||
/*opacity: 0;*/
|
|
||||||
|
|
||||||
background-color: #d1d2d4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view.current ~ .view {
|
|
||||||
left:100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view.current {
|
|
||||||
left: 0px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
@ -140,7 +140,8 @@ $(document).ready(function(){
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}, function(k){console.log(k)}))
|
},
|
||||||
|
function(k){console.log(k)}))
|
||||||
|
|
||||||
// expand the templates...
|
// expand the templates...
|
||||||
runMagazineTemplates()
|
runMagazineTemplates()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user