Restructure

botanjs/src/Astro/Starfall/Element/Footer.css

@@ -0,0 +1,12 @@
+footer {
+    background-color: #222;
+    background-image: url(/assets/layout-images/lines.png);
+    background-repeat: no-repeat;
+    background-position: right bottom;
+}
+
+#fhorizon {
+	position: absolute;
+	top: -7px;
+}
+

botanjs/src/Astro/Starfall/Element/Footer.js

@@ -0,0 +1,2 @@
+// __namespace( "Astro.Starfall.Element.Footer" );
+// __import( "Astro.Common.Element.Footer" );

botanjs/src/Astro/Starfall/Element/Header.css

@@ -0,0 +1,183 @@
+.home {
+    position: relative;
+	width: 100%;
+	overflow: hidden;
+}
+
+header {
+	position: relative;
+}
+
+#menu {
+	font-size: 1.75em;
+	text-align: right;
+}
+
+#menu > * {
+	font-family: custom-sans;
+	cursor: pointer;
+	line-height: 1em !important;
+
+	position: relative;
+
+	color: rgba( 0, 0, 0, 0.5 );
+	-webkit-filter: blur( 2px );
+	filter: blur( 2px );
+}
+
+#menu > *[data-active] {
+	-webkit-filter: blur( 0px );
+	filter: blur( 0px );
+	color: rgba( 128, 0, 128, 1 );
+}
+
+#menu > *:hover {
+    color: rgba( 0, 0, 0, 0.75 );
+	-webkit-filter: blur( 0px );
+	filter: blur( 0px );
+    text-decoration: none;
+}
+
+.horizon {
+	position: relative;
+	width: 100%;
+	height: 7px;
+	background: #76400C;
+	z-index: 4;
+}
+
+.contact {
+	width: 100%;
+	height: 0;
+
+	-moz-box-shadow: inset 0 0 10px 0 black;
+	-webkit-box-shadow: inset 0 0 10px 0 black;
+	box-shadow: inset 0 0 10px 0 black;
+
+    background-image: url(/assets/layout-images/home.png);
+    background-position: 50% 90%;
+	position: absolute;
+	overflow: hidden;
+
+    text-align: center;
+}
+
+.contact:before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba( 255, 255, 255, 0.6 );
+}
+/*
+.begin-wrapper:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+
+    background-image: url(/assets/layout-images/home-blur.png);
+    background-position: 50% 0;
+    background-repeat: no-repeat;
+
+    opacity: 0.6;
+}
+*/
+.contact-wrapper {
+    text-align: center;
+    position: relative;
+}
+
+.contact-wrapper > * {
+    display: inline-block;
+    vertical-align: middle;
+    text-align: left;
+}
+
+.contact-block {
+    width: 40%;
+}
+
+.contact-form input, .contact-form textarea {
+    width: 100%;
+    text-align: left;
+}
+.contact-form > * {
+    margin-bottom: 0.5em;
+}
+
+.contact-form textarea, .contact-form input {
+    background-color: rgba( 0, 0, 0, 0.1 );
+    padding: 0.5em;
+    font-size: 0.8em;
+}
+
+.contact-form ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+    color: #AAA;;
+}
+.contact-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color: #AAA;;
+    opacity: 1;
+}
+.contact-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color: #AAA;;
+    opacity: 1;
+}
+.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color: #AAA;;
+}
+
+.contact-form textarea:hover, .contact-form input:hover
+, .contact-form textarea:focus, .contact-form input:focus {
+    color: white;
+	background-color: rgba( 0, 0, 0, 0.5 );
+}
+
+.contact-form > input[type="submit"] {
+    width: auto;
+}
+
+.c-sep {
+    display: inline-block;
+    width: 1px;
+    margin: 0 2em;
+}
+.c-sep:after {
+    content: "";
+    position: absolute;
+    height: 100%;
+    border-left: 1px solid black;
+    top: 0;
+}
+
+.collapse_panel {
+	position: absolute;
+	width: 100%;
+	height: 50px;
+	bottom: -33px;
+	font-size: 3em;
+	text-align: center;
+	color: white;
+
+	-moz-box-shadow: 0 0 10px 0 black;
+	-webkit-box-shadow: 0 0 10px 0 black;
+	box-shadow: 0 0 10px 0 black;
+}
+
+.collapse_panel:after {
+    content: '';
+    position: absolute;
+    left: 0;
+	width: 100%;
+	height: 100%;
+	background:url(/assets/layout-images/collapse.png) center 2.5px no-repeat;
+}
+
+#collapse_panel:hover {
+	bottom: 0;
+	cursor: pointer;
+}

botanjs/src/Astro/Starfall/Element/Header.js

@@ -0,0 +1 @@
+// __namespace( "Astro.Starfall.Element.Header" );

botanjs/src/Astro/Starfall/Element/Layer.css

@@ -0,0 +1,2 @@
+.mbody { z-index: 1; }
+header, footer { z-index: 2; }

botanjs/src/Astro/Starfall/Element/Layer.js

@@ -0,0 +1 @@
+// __namespace( "Astro.Starfall.Element.Layer" );

botanjs/src/Astro/Starfall/Layout/MainFrame.css

@@ -0,0 +1,58 @@
+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; }

botanjs/src/Astro/Starfall/Layout/MainFrame.js

@@ -0,0 +1,61 @@
+(function(){
+	var ns = __namespace( "Astro.Starfall.Layout.MainFrame" );
+
+	/** @type {Dandelion} */
+	var Dand                                          = __import( "Dandelion" );
+	/** @type {Dandelion.IDOMObject} */
+	var IDOMObject                                   = __import( "Dandelion.IDOMObject" );
+	/** @type {Dandelion.Window} */
+	var wsupp                                         = __import( "Dandelion.Window" );
+	/** @type {System.Debug} */
+	var debug                                         = __import( "System.Debug" );
+	/** @type {Astro.Bootstrap} */
+	var Bootstrap                                     = __import( "Astro.Bootstrap" );
+
+	// __import( "Astro.Starfall.Element.Layer" ); CSS_RESERVATION
+
+	var init = function ()
+	{
+		console.log( "HERE" );
+		// 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 );
+
+		responsify( null, true );
+	};
+
+	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 } ) );
+		}
+	};
+
+	Bootstrap.regInit( init );
+})();

botanjs/src/Astro/Starfall/Layout/PureColumn.css

@@ -0,0 +1,18 @@
+.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;
+}

botanjs/src/Astro/Starfall/Layout/PureColumn.js

@@ -0,0 +1,76 @@
+(function(){
+	var ns = __namespace( "Astro.Starfall.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 );
+})();

botanjs/src/Astro/Starfall/Layout/TwoColumn.css

@@ -0,0 +1,102 @@
+.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*/

botanjs/src/Astro/Starfall/Layout/TwoColumn.js

@@ -0,0 +1,28 @@
+(function(){
+	var ns = __namespace( "Astro.Starfall.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.Starfall.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 );
+})();

botanjs/src/Astro/Starfall/_this.js

@@ -0,0 +1,3 @@
+(function(){
+	var ns = __namespace( "Astro.Starfall.Layout" );
+})();