commit ebe17454293ec884a65430bcf101f5043c469379
| author | 斟酌 鵬兄 <tgckpg@gmail.com> |
|---|
| date | 2016-04-27T15:44:49Z |
|---|
| subject | New site for generating "tgckpg.github.io" |
|---|
commit ebe17454293ec884a65430bcf101f5043c469379
Author: 斟酌 鵬兄 <tgckpg@gmail.com>
Date: 2016-04-27T15:44:49Z
New site for generating "tgckpg.github.io"
---
botanjs/src/Astro/Penguin/Element/Footer.css | 12 +++
botanjs/src/Astro/Penguin/Element/Footer.js | 2 +
botanjs/src/Astro/Penguin/Element/Header.css | 60 +++++++++++
botanjs/src/Astro/Penguin/Element/Header.js | 1 +
botanjs/src/Astro/Penguin/Element/Layer.css | 2 +
botanjs/src/Astro/Penguin/Element/Layer.js | 1 +
botanjs/src/Astro/Penguin/Layout/MainFrame.css | 105 +++++++++++++++++++
botanjs/src/Astro/Penguin/Layout/MainFrame.js | 140 +++++++++++++++++++++++++
botanjs/src/Astro/Penguin/Page/_this.css | 8 ++
botanjs/src/Astro/Penguin/Page/_this.js | 2 +
10 files changed, 333 insertions(+)
diff --git a/botanjs/src/Astro/Penguin/Element/Footer.css b/botanjs/src/Astro/Penguin/Element/Footer.css
new file mode 100644
index 0000000..5405ed1
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Element/Footer.css
@@ -0,0 +1,12 @@
+footer {
+ background-color: #001;
+ background-image: url(/assets/layout-images/lines.png);
+ background-repeat: no-repeat;
+ background-position: right bottom;
+}
+
+#fhorizon {
+ position: absolute;
+ top: -7px;
+}
+
diff --git a/botanjs/src/Astro/Penguin/Element/Footer.js b/botanjs/src/Astro/Penguin/Element/Footer.js
new file mode 100644
index 0000000..089470d
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Element/Footer.js
@@ -0,0 +1,2 @@
+// __namespace( "Astro.Penguin.Element.Footer" );
+// __import( "Astro.Common.Element.Footer" );
diff --git a/botanjs/src/Astro/Penguin/Element/Header.css b/botanjs/src/Astro/Penguin/Element/Header.css
new file mode 100644
index 0000000..b606dd7
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Element/Header.css
@@ -0,0 +1,60 @@
+.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: navy;
+}
+
+#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;
+}
+
+.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;
+}
diff --git a/botanjs/src/Astro/Penguin/Element/Header.js b/botanjs/src/Astro/Penguin/Element/Header.js
new file mode 100644
index 0000000..75baf5c
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Element/Header.js
@@ -0,0 +1 @@
+// __namespace( "Astro.Penguin.Element.Header" );
diff --git a/botanjs/src/Astro/Penguin/Element/Layer.css b/botanjs/src/Astro/Penguin/Element/Layer.css
new file mode 100644
index 0000000..65669fa
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Element/Layer.css
@@ -0,0 +1,2 @@
+.mbody { z-index: 1; }
+header, footer { z-index: 2; }
diff --git a/botanjs/src/Astro/Penguin/Element/Layer.js b/botanjs/src/Astro/Penguin/Element/Layer.js
new file mode 100644
index 0000000..47522ec
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Element/Layer.js
@@ -0,0 +1 @@
+// __namespace( "Astro.Penguin.Element.Layer" );
diff --git a/botanjs/src/Astro/Penguin/Layout/MainFrame.css b/botanjs/src/Astro/Penguin/Layout/MainFrame.css
new file mode 100644
index 0000000..76be4c0
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Layout/MainFrame.css
@@ -0,0 +1,105 @@
+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: navy;
+}
+::-moz-selection {
+ color: white;
+ background: navy;
+}
+
+p { padding: 0.25em 0.5em; }
+
+a {
+ color: #333;
+ text-decoration: none;
+}
+
+textarea {
+ font-family: monospace;
+}
+
+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);
+ -moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
+ -ms-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
+ -o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
+ transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
+
+ -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+ -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+ -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+ -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+ transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
+}
+
+@keyframes spin {
+ 0% { transform: rotate( 0deg ); }
+ 25% { transform: rotate( 90deg ); }
+ 50% { transform: rotate( 180deg ); }
+ 75% { transform: rotate( 270deg ); }
+ 100% { transform: rotate( 360deg ); }
+}
+
+@keyframes aspin {
+ 0% { transform: rotate( 0deg ); }
+ 25% { transform: rotate( -90deg ); }
+ 50% { transform: rotate( -180deg ); }
+ 75% { transform: rotate( -270deg ); }
+ 100% { transform: rotate( -360deg ); }
+}
+
+.spin {
+ animation-duration: 60s;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+ animation-name: aspin;
+}
+
+.cw { animation-name: spin; }
+
+/* end transition properties */
diff --git a/botanjs/src/Astro/Penguin/Layout/MainFrame.js b/botanjs/src/Astro/Penguin/Layout/MainFrame.js
new file mode 100644
index 0000000..df35207
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Layout/MainFrame.js
@@ -0,0 +1,140 @@
+(function(){
+ var ns = __namespace( "Astro.Penguin.Layout.MainFrame" );
+
+ /** @type {System.Cycle} */
+ 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} */
+ var wsupp = __import( "Dandelion.Window" );
+ /** @type {System.Debug} */
+ var debug = __import( "System.Debug" );
+ /** @type {Astro.Bootstrap} */
+ var Bootstrap = __import( "Astro.Bootstrap" );
+
+ // __import( "Dandelion.CSSReset" ); CSS_RESERVATION
+ // __import( "Dandelion.CSSAnimations" ); CSS_RESERVATION
+ // __import( "Astro.Blog.SharedStyle" ); CSS_RESERVATION
+ // __import( "Astro.Blog.Element.Layer" ); CSS_RESERVATION
+
+ var main;
+ var header;
+ var main_h;
+
+ // menu and horizon
+ var horizon;
+ var contaht_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 );
+ };
+
+ var topButtons = [];
+ var initTopButton = function()
+ {
+ // init params
+ header = Dand.id( "header" );
+ horizon = Dand.id( "horizon" );
+ main = Dand.id( "mbody" );
+
+ collapse_panel = Dand.id( "collapse_panel" );
+
+ horizon.style.backgroundColor
+ = fhorizon.style.backgroundColor
+ = "navy";
+
+ Dand.id( "menu", true ).foreach(
+ 1, function( e )
+ {
+ e = IDOMElement( e );
+ topButtons.push( e );
+ if( e.getDAttribute( "active" ) !== null )
+ {
+ e.setAttribute( new DataKey( "master", true ) );
+ }
+ }
+ );
+ };
+
+ var navControl = function ()
+ {
+ // Page control
+ /** @type {Dandelion.IDOMElement} */
+ var page_control = Dand.id( "top_control", true );
+ var bottom_control = Dand.id( "bottom_control" );
+
+ if ( page_control && bottom_control )
+ {
+ var appendp = function( elem, self )
+ {
+ var clone = elem.cloneNode( true );
+ if( clone.className == "p_navigation" )
+ {
+ IDOMElement( clone ).reverseChild();
+ }
+ bottom_control.appendChild( clone );
+ return true;
+ };
+
+ page_control.last( document.ELEMENT_NODE, appendp );
+ page_control.first( document.ELEMENT_NODE, appendp );
+ }
+ };
+
+ /** @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 } ) );
+ }
+ };
+
+
+ Bootstrap.regInit( init );
+})();
diff --git a/botanjs/src/Astro/Penguin/Page/_this.css b/botanjs/src/Astro/Penguin/Page/_this.css
new file mode 100644
index 0000000..911669c
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Page/_this.css
@@ -0,0 +1,8 @@
+.panel {
+ padding: 0.5em 2em;
+ display: block;
+}
+
+ol {
+ padding: 0 2em;
+}
diff --git a/botanjs/src/Astro/Penguin/Page/_this.js b/botanjs/src/Astro/Penguin/Page/_this.js
new file mode 100644
index 0000000..af37177
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Page/_this.js
@@ -0,0 +1,2 @@
+// __namespace( "Astro.Penguin.Page" );
+// __import( "Astro.Penguin.Layout.MainFrame" );