forked from Botanical/BotanJS
Restructure
This commit is contained in:
@@ -1,63 +1,3 @@
|
||||
html, body { height: 100%; }
|
||||
|
||||
html { background-color: #222; }
|
||||
|
||||
body {
|
||||
background-color: #F0F0F0;
|
||||
font-family: custom-sans,Helvetica,Arial,STHeiti,"Microsoft JhengHei","微軟正黑體";
|
||||
}
|
||||
|
||||
pre { font-family: monospace; }
|
||||
|
||||
::selection {
|
||||
color: white;
|
||||
background: purple;
|
||||
}
|
||||
::-moz-selection {
|
||||
color: white;
|
||||
background: purple;
|
||||
}
|
||||
|
||||
p { padding: 0.5em; }
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
sup { vertical-align: super; }
|
||||
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
.clearfix {
|
||||
clear: both;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.begin-wrapper {
|
||||
position: relative;
|
||||
|
||||
min-height: 100%;
|
||||
background-color: #EBEAEF;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mbody {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-column {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.right { text-align: right; }
|
||||
.panel { padding: 0.5em 1.2em 1.2em 1.2em; }
|
||||
|
||||
/* transition properties */
|
||||
div#header, div#mbody, div#contact, div#horizon {
|
||||
|
||||
-webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
||||
@@ -97,5 +37,3 @@ div#header, div#mbody, div#contact, div#horizon {
|
||||
}
|
||||
|
||||
.cw { animation-name: spin; }
|
||||
|
||||
/* end transition properties */
|
||||
|
@@ -5,14 +5,10 @@
|
||||
var Cycle = __import( "System.Cycle" );
|
||||
/** @type {System.Cycle.Trigger} */
|
||||
var Trigger = __import( "System.Cycle.Trigger" );
|
||||
/** @type {System.utils.IKey} */
|
||||
var IKey = __import( "System.utils.IKey" );
|
||||
/** @type {System.utils.DataKey} */
|
||||
var DataKey = __import( "System.utils.DataKey" );
|
||||
/** @type {Dandelion} */
|
||||
var Dand = __import( "Dandelion" );
|
||||
/** @type {Dandelion.IDOMObject} */
|
||||
var IDOMObject = __import( "Dandelion.IDOMObject" );
|
||||
/** @type {Dandelion.IDOMElement} */
|
||||
var IDOMElement = __import( "Dandelion.IDOMElement" );
|
||||
/** @type {Dandelion.Window} */
|
||||
@@ -29,49 +25,24 @@
|
||||
// __import( "Dandelion.CSSReset" ); CSS_RESERVATION
|
||||
// __import( "Dandelion.CSSAnimations" ); CSS_RESERVATION
|
||||
// __import( "Astro.Blog.SharedStyle" ); CSS_RESERVATION
|
||||
// __import( "Astro.Blog.Element.Layer" ); CSS_RESERVATION
|
||||
// __import( "Astro.Starfall.Element.Layer" ); CSS_RESERVATION
|
||||
|
||||
/** @function {System.Net.getData} */
|
||||
var getData = __import( "System.Net.getData" );
|
||||
|
||||
var main;
|
||||
var header;
|
||||
var main_h;
|
||||
|
||||
// menu and horizon
|
||||
var horizon;
|
||||
var contact;
|
||||
var contaht_page;
|
||||
var contact_page;
|
||||
var collapse_panel;
|
||||
var c_expand = false;
|
||||
var savedPath;
|
||||
|
||||
var init = function ()
|
||||
{
|
||||
// Footer at bottom
|
||||
var padder = Dand.wrap();
|
||||
var begin_wrapper = Dand.id( "begin-wrapper" );
|
||||
var content_wrapper = Dand.id( "mbody" );
|
||||
var footer = Dand.tag( "footer" );
|
||||
var fhorizon = Dand.id( "fhorizon" );
|
||||
|
||||
if( footer.length )
|
||||
{
|
||||
footer = footer[0];
|
||||
var fheight = footer.scrollHeight || footer.offsetHeight;
|
||||
var hheight = fhorizon.scrollHeight || fhorizon.offsetHeight;
|
||||
|
||||
padder.style.height = ( fheight + hheight ) + "px";
|
||||
begin_wrapper.style.marginBottom = "-" + fheight + "px";
|
||||
}
|
||||
|
||||
content_wrapper.appendChild( padder );
|
||||
|
||||
IDOMObject( window ).addEventListener( "Resize", responsify );
|
||||
|
||||
initTopButton();
|
||||
navControl();
|
||||
responsify( null, true );
|
||||
initBackgroundParallax();
|
||||
};
|
||||
|
||||
@@ -81,7 +52,6 @@
|
||||
// init params
|
||||
header = Dand.id( "header" );
|
||||
horizon = Dand.id( "horizon" );
|
||||
main = Dand.id( "mbody" );
|
||||
|
||||
contact_page = Dand.id( "contact" );
|
||||
collapse_panel = Dand.id( "collapse_panel" );
|
||||
@@ -149,24 +119,6 @@
|
||||
}
|
||||
};
|
||||
|
||||
/** @type {Dandelion.IDOMElement} */
|
||||
var rspd_ratio = 0;
|
||||
var responsify = function( e, override )
|
||||
{
|
||||
// Ratio changes would trigger content
|
||||
var ratio = wsupp.clientWidth / wsupp.clientHeight;
|
||||
|
||||
// Swap only on ration changes from 1 < x OR x < 1
|
||||
if( ( ratio < 1.2 && 1.2 < rspd_ratio ) || ( 1.2 < ratio && rspd_ratio < 1.2 ) || override )
|
||||
{
|
||||
rspd_ratio = ratio;
|
||||
debug.Info( "Responsive Event: R = " + ratio );
|
||||
|
||||
BotanJS.dispatchEvent( new BotanEvent( "Responsive", { "ratio": ratio } ) );
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/////// Menu
|
||||
// Contact
|
||||
var expandContact = function ()
|
||||
|
@@ -1,18 +0,0 @@
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.trademark {
|
||||
text-align: right;
|
||||
font-family: custom-sans;
|
||||
}
|
||||
|
||||
.trademark > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.trademark > a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
@@ -1,76 +0,0 @@
|
||||
(function(){
|
||||
var ns = __namespace( "Astro.Blog.Layout.PureColumn" );
|
||||
|
||||
/** @type {Astro.Bootstrap} */
|
||||
var Bootstrap = __import( "Astro.Bootstrap" );
|
||||
/** @type {System.Cycle} */
|
||||
var Cycle = __import( "System.Cycle" );
|
||||
/** @type {Astro.Blog.Config} */
|
||||
var config = __import( "Astro.Blog.Config" );
|
||||
/** @type {System.Debug} */
|
||||
var debug = __import( "System.Debug" );
|
||||
|
||||
/** @type {MessageEvent} */
|
||||
var allowedOrigin;
|
||||
|
||||
var catchMessage = function( e )
|
||||
{
|
||||
debug.Info( "Origin: " + e.origin );
|
||||
var allowedOrigins = config.get( "AllowedOrigins" );
|
||||
var j = e.origin;
|
||||
|
||||
for ( var i in allowedOrigins )
|
||||
{
|
||||
if ( j === allowedOrigins[i] )
|
||||
{
|
||||
// Stop listener
|
||||
debug.Info( " captured" );
|
||||
window.removeEventListener( "message", catchMessage, false );
|
||||
allowedOrigin = e;
|
||||
|
||||
// post the content height
|
||||
postContentHeight();
|
||||
return;
|
||||
}
|
||||
}
|
||||
debug.Info( " refused. Continue listening..." );
|
||||
}
|
||||
|
||||
var postContentHeight = function ()
|
||||
{
|
||||
if ( allowedOrigin.source && allowedOrigin.origin )
|
||||
{
|
||||
// per second trigger for body height
|
||||
var pHeight;
|
||||
allowedOrigin.source.postMessage(
|
||||
pHeight = document.body.clientHeight + ""
|
||||
, allowedOrigin.origin
|
||||
);
|
||||
|
||||
var heightUpdate = function()
|
||||
{
|
||||
if( pHeight != document.body.clientHeight )
|
||||
{
|
||||
allowedOrigin.source.postMessage(
|
||||
pHeight = document.body.clientHeight + ""
|
||||
, allowedOrigin.origin
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Cycle.perma( "bodyHeightMonitor", heightUpdate, 500 );
|
||||
}
|
||||
};
|
||||
|
||||
var init = function ()
|
||||
{
|
||||
if ( window.self !== window.top )
|
||||
{
|
||||
debug.Info( "iframe detected, listening ..." );
|
||||
// Wait for parent frame's message
|
||||
window.addEventListener( "message", catchMessage, false );
|
||||
}
|
||||
};
|
||||
|
||||
Bootstrap.regInit( init );
|
||||
})();
|
@@ -1,102 +0,0 @@
|
||||
.contentWrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#dockleft {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
/* background-color: #FAFAFA; */
|
||||
vertical-align: top;
|
||||
min-width: 70%;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/**
|
||||
* Simply defined as:
|
||||
* Text / Text / Text . Text / Text / Tex
|
||||
**/
|
||||
ul.breadcrumb > li { display: inline-block; }
|
||||
ul.breadcrumb > li:before { content: "/"; }
|
||||
ul.breadcrumb > li:first-child:before,
|
||||
ul.breadcrumb > li.sep + li:before,
|
||||
ul.breadcrumb > li.sep:before { content: " "; }
|
||||
ul.breadcrumb > li.sep:after { content: "\2022"; }
|
||||
|
||||
.nav_panel {
|
||||
padding-left 0.5em;
|
||||
min-width: 30%;
|
||||
}
|
||||
|
||||
#dockright {
|
||||
position: relative;
|
||||
/*border-right: #76400C solid 0.2em;*/
|
||||
}
|
||||
|
||||
#dockright > div {
|
||||
float: right;
|
||||
|
||||
margin: 0 -.3em;
|
||||
padding: 0 0.2em 2em 0.2em;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
#extend_sec {
|
||||
min-height: 7px;
|
||||
}
|
||||
|
||||
#extend_sec, #dockright {
|
||||
/* Same as dockright */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vpole {
|
||||
/* Should be the same as parent */
|
||||
padding: 0 0.5em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#bottom_control {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p_navigation {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.p_navigation > a, .p_controls > a {
|
||||
color: #333;
|
||||
padding: 0.2em 0.5em;
|
||||
}
|
||||
|
||||
.p_navigation > a {
|
||||
font-size: 0.8em;
|
||||
font-family: custom-sans;
|
||||
}
|
||||
|
||||
.p_controls > a {
|
||||
color: #333;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.ptop {
|
||||
margin-left: -1em !important;
|
||||
}
|
||||
/*Backgrounds*/
|
||||
|
||||
/* This style is necessary
|
||||
* to prevent anchor shifting issue
|
||||
*/
|
||||
#main_background {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*End_background*/
|
@@ -1,28 +0,0 @@
|
||||
(function(){
|
||||
var ns = __namespace( "Astro.Blog.Layout.TwoColumn" );
|
||||
|
||||
/** @type {Dandelion} */
|
||||
var Dand = __import( "Dandelion" );
|
||||
/** @type {Astro.Bootstrap} */
|
||||
var Bootstrap = __import( "Astro.Bootstrap" );
|
||||
|
||||
var init = function ()
|
||||
{
|
||||
var rspd = Dand.id( "dockright", true );
|
||||
if( rspd )
|
||||
{
|
||||
BotanJS.addEventListener( "Responsive"
|
||||
/** e @type {Astro.Blog.Events.Responsive} */
|
||||
, function( e ) {
|
||||
rspd.foreach(
|
||||
document.ELEMENT_NODE
|
||||
, e.data.ratio < 1.2
|
||||
? function( elem ) { elem.style.width = "100%"; }
|
||||
: function( elem ) { elem.style.width = ""; }
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Bootstrap.regInit( init );
|
||||
})();
|
Reference in New Issue
Block a user