add vendor/font

modesty · modesty · commit cc87c289f105 · 2019-09-30T19:00:06.000-07:00
diff --git a/src/images/logo_wide.jpg b/src/images/logo_wide.jpg
diff --git a/src/scripts/components/Header.js b/src/scripts/components/Header.js
@@ -4,18 +4,24 @@ import Menu from './Menu';
 
 import processRelPath from '../model/header';
 
-const Header = ({ title, rel = "" }) => {
+const Header = ({ title, page, rel = "" }) => {
 	const { homeLink, bannerLink, socials } = processRelPath(rel);
-
+	const { author, date } = page;
 	return (
 		<header className='header'>
+			{/* <hgroup>
+				<h1>{title}</h1>
+				<h2>{author} <span>{date.toLocaleDateString()}</span></h2>
+				<div className="logo">
+					<a href={homeLink.href} title={homeLink.name}>
+						<img src={homeLink.img} alt={title} />
+					</a>
+				</div>
+			</hgroup> */}
+
 			<div className="row">
 				<div className="col-md-3 col-xs-12 hidden-xs">
-					<div className="logo">
-						<a href={homeLink.href} title={homeLink.name}>
-							<img src={homeLink.img} alt={title} />
-						</a>
-					</div>
+					
 				</div>
 				<div className="col-md-6 col-xs-12">
 					<div className="banner-area">
diff --git a/src/scripts/components/Main.js b/src/scripts/components/Main.js
@@ -8,13 +8,15 @@ const Main = props => {
 	const { chrome, page, children } = props;
 	const { rel, gaKey, title } = chrome;
 	return (
-		<html className="no-js" lang="en">
+		<html>
 			<Head {...chrome} />
-			<body data-track={gaKey} className='container'>
-				<Header title={title} rel={rel}/>
-				<main className='container'>
-					{React.cloneElement(children, page)}
-				</main>
+			<body data-track={gaKey}>
+				<article className='container'>
+					<Header title={title} page={page} rel={rel}/>
+					<main className='container'>
+						{React.cloneElement(children, page)}
+					</main>
+				</article>
 				<Footer rel={rel}/>
 			</body>
 		</html>
diff --git a/src/scripts/index.js b/src/scripts/index.js
@@ -5,7 +5,7 @@ import Main from './components/Main';
 const Root = ({chrome, page}) => {
 	return (
 		<Main chrome={chrome} page={page} >
-			<div className="row">
+			<div>
 				<aside>
 					<p>Left Side</p>
 				</aside>
diff --git a/src/scripts/model/header.js b/src/scripts/model/header.js
@@ -1,7 +1,7 @@
 import path from 'path';
 
 const HeaderModel = {
-	homeLink: {name: "Home", href: "./", img: "img/logo.png"},
+	homeLink: {name: "Home", href: "./", img: "img/logo_wide.jpg"},
 	bannerLink: {name: "Banner Ad", href: "", img: "http://placehold.it/420x60"},
 	socials:[
 		{id: "icon-facebook", href: "http://facebook.com"},
diff --git a/src/scripts/model/menu.js b/src/scripts/model/menu.js
@@ -1,4 +1,4 @@
-"use strict";
+import path from 'path';
 
 const MenuModel = [
 	{name: 'Home', href: "."},
@@ -32,11 +32,11 @@ export default function processRelPath(rel) {
 		}
 
 		return children.map( m => {
-			return {...m, href: relPath + m.href, children: transformChildren(m.children)};
+			return {...m, href: path.join(relPath, m.href), children: transformChildren(m.children)};
 		});
 	}
 
 	return MenuModel.map( m => {
-		return {...m, href: relPath + m.href, children: transformChildren(m.children)};
+		return {...m, href: path.join(relPath, m.href), children: transformChildren(m.children)};
 	});
 }
diff --git a/src/scripts/props/index.js b/src/scripts/props/index.js
@@ -18,7 +18,8 @@ const chrome = {
 }
 
 const page = {
-
+    author: "Modesty",
+    date: new Date(2019, 8, 1, 0, 0, 0)
 };
 
 export default { chrome, page };
diff --git a/src/scripts/props/pages/about.js b/src/scripts/props/pages/about.js
@@ -19,5 +19,8 @@ export default {
         scripts: scripts.map(s => path.join(rel, s)),
         title: "About", description: "About Modesty Zhang"
     },
-    page
+    page: {
+        ...page,
+        date: new Date(2019, 8, 2, 0, 0, 0)
+    }
 }
diff --git a/src/scripts/props/pages/contact.js b/src/scripts/props/pages/contact.js
@@ -19,5 +19,8 @@ export default {
         scripts: scripts.map(s => path.join(rel, s)),
         title: "Contact", description: "Contact Modesty Zhang"
     },
-    page
+    page: {
+        ...page,
+        date: new Date(2019, 8, 3, 0, 0, 0)
+    }
 }
diff --git a/src/styles/_header.scss b/src/styles/_header.scss
@@ -1,21 +1,13 @@
 @import "_vars";
 @import "_mixins";
 
-$top-bar-margin: 10px;
+$top-bar-margin: 15px;
 
 header {
 	background-color: transparent;
 
 	.logo {
 		margin: $top-bar-margin 0;
-
-		a {
-			font-size: 36px;
-		}
-
-		img {
-			width: 40px;
-		}
 	}
 
 	.banner-area {
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
@@ -1,65 +1,33 @@
 @import "_vars";
 
-html, body{
-	width: 100%;
-	height: 100%;
-	margin: 0;
-	padding: 0;
-	overflow: hidden;
-}
-
 body {
-	font-family: SourceSansPro, "Helvetica Neue", Arial;
-	-webkit-font-smoothing: antialiased;
-	color: $color-really-darkest;
-	font-size: 14px;
+	color: $color-darkest;
+	font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;
 }
 
-.top-container {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	align-items: stretch;
-	align-content: stretch;
-	position: relative;
+article {
+	color: $color-darkest;
 }
 
 header {
-	flex: none; /* 2 */
-
-	h1 {
-		font-size: 16px;
-		color: $now-brand-white;
-		padding: 0 $top-padding;
+	h1, h2, h3, h4, h5 {
 		margin: 0;
-		line-height: $top-nav-height;
+		font-weight: normal;
 	}
-
+	h1 {
+		padding: $top-padding 0 0 0;
+	}
+	h2 {
+		color: $color-sub-title;
+		font-size: 0.95em;
+		span {
+			margin-left: 2em;
+			color: $color-dark-grey;
+		}
+	}	
 }
 
-main {
-	flex: 1 0 auto; /* 2 */
+img {
 	width: 100%;
-	height: calc(100vh - 400px);
-
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	align-items: stretch;
-	align-content: stretch;
-	position: relative;
 }
 
-footer {
-	flex: none; /* 2 */
-	display: flex;
-}
-
-.center-content {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 300px;
-}
diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
@@ -1,11 +1,10 @@
-$top-nav-height: 160px;
-$top-padding: 10px;
+$top-padding: 1em;
 
 $now-brand-black: #373737;
 $now-brand-white: #fff;
 
 $color-really-darkest: #131313;
-$color-darkest : #303a46;
+$color-darkest : #333;
 $color-darker : #455464;
 $color-dark : #828890;
 
@@ -32,3 +31,4 @@ $color-dark-grey: #7d7d7d; //drop down menu (menu-bar) divider color
 $color-title-text: #a2aec1; //studio, application explorer title
 $color-darkest-grey: #2c3643; //nav-bar bk color
 
+$color-sub-title: #576b95;
diff --git a/tool/base.config.js b/tool/base.config.js
@@ -23,13 +23,15 @@ const Config = {
 		sass_path: 	path.join(CUR_DIR, SRC_BASE, "styles"),
 		img_path: 	path.join(CUR_DIR, SRC_BASE, "images"),
 		vendor_css: path.join(CUR_DIR, VEN_BASE, "css"),
-		vendor_js:  path.join(CUR_DIR, VEN_BASE, "js")
+		vendor_js:  path.join(CUR_DIR, VEN_BASE, "js"),
+		vendor_font: path.join(CUR_DIR, VEN_BASE, "font")
 	},
 	target: {
 		path: 	  path.join(CUR_DIR, TAR_BASE),
 		js_path:  path.join(CUR_DIR, TAR_BASE, "js"),
 		css_path: path.join(CUR_DIR, TAR_BASE, "css"),
 		img_path: path.join(CUR_DIR, TAR_BASE, "img"),
+		font_path: path.join(CUR_DIR, TAR_BASE, "font"),
 		js_bundle: JS_BUNDLE_NAME,
 		css_bundle: `..${path.sep}css${path.sep}${CSS_BUNDLE_NAME}`
 	},
diff --git a/tool/build.asset.js b/tool/build.asset.js
@@ -42,6 +42,10 @@ function copyVendorAsset() {
 	helper.copyWildCard('**/*.js', Conf.src.vendor_js, Conf.target.js_path, err => {
 		console.log(err ? `✗ Error: ${job} \n ${err}` : `✓ Success: ${job}`);
 	});
+
+	helper.copyWildCard('**/*.*', Conf.src.vendor_font, Conf.target.font_path, err => {
+		console.log(err ? `✗ Error: ${job} \n ${err}` : `✓ Success: ${job}`);
+	});
 }
 
 function main() {
diff --git a/vendor/font/jinmeimaoxingshu.ttf b/vendor/font/jinmeimaoxingshu.ttf

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-"use strict";`
	`1`	`+import path from 'path';`
`2`	`2`
`3`	`3`	`const MenuModel = [`
`4`	`4`	`{name: 'Home', href: "."},`
`@@ -32,11 +32,11 @@ export default function processRelPath(rel) {`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`return children.map( m => {`
`35`		`- return {...m, href: relPath + m.href, children: transformChildren(m.children)};`
	`35`	`+ return {...m, href: path.join(relPath, m.href), children: transformChildren(m.children)};`
`36`	`36`	`});`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`return MenuModel.map( m => {`
`40`		`- return {...m, href: relPath + m.href, children: transformChildren(m.children)};`
	`40`	`+ return {...m, href: path.join(relPath, m.href), children: transformChildren(m.children)};`
`41`	`41`	`});`
`42`	`42`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,8 @@ const chrome = {`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`const page = {`
`21`		`-`
	`21`	`+ author: "Modesty",`
	`22`	`+ date: new Date(2019, 8, 1, 0, 0, 0)`
`22`	`23`	`};`
`23`	`24`
`24`	`25`	`export default { chrome, page };`