From d205b2adc89985bd1b45992c84653b3b449b9f6b Mon Sep 17 00:00:00 2001 From: Mashiro Date: Sat, 2 Nov 2019 23:55:18 +0800 Subject: [PATCH] auto commit 11/02/2019 Sat --- index.html | 46 +++++++++++++-- package-lock.json | 89 +++++++++++++++++++++++++++-- package.json | 2 + src/scss/components/mdc.scss | 3 +- src/scss/index.scss | 8 ++- src/scss/layouts/coverImage.scss | 22 +++++++ src/scss/layouts/header.scss | 15 +++++ src/scss/layouts/homepage.scss | 33 ----------- src/scss/layouts/pageContent.scss | 28 +++++++++ src/scss/layouts/postThumbList.scss | 28 +++++++++ src/scss/variables.scss | 16 +++--- src/ts/components/MDCHandler.ts | 22 +++++++ src/ts/components/index.ts | 2 +- src/ts/components/mdc.ts | 15 ----- src/ts/index.ts | 6 +- 15 files changed, 259 insertions(+), 76 deletions(-) create mode 100644 src/scss/layouts/coverImage.scss create mode 100644 src/scss/layouts/header.scss delete mode 100644 src/scss/layouts/homepage.scss create mode 100644 src/scss/layouts/pageContent.scss create mode 100644 src/scss/layouts/postThumbList.scss create mode 100644 src/ts/components/MDCHandler.ts delete mode 100644 src/ts/components/mdc.ts diff --git a/index.html b/index.html index 5ddf4d8..d8d30fc 100644 --- a/index.html +++ b/index.html @@ -42,14 +42,48 @@
-
-

















-

















-

















-

















- +
+ +
+
+
+
+
+
+
+

Our Changing Planet

+

by Kurt Wagner

+
+
+
+
Visit ten places on our planet that + are undergoing the biggest changes today.
+
+
+
+ + +
+
+ + + +
+
+
+
+
+
+
diff --git a/package-lock.json b/package-lock.json index 8014401..a5f6a85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -921,8 +921,8 @@ }, "@material/card": { "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@material/card/-/card-3.2.0.tgz", - "integrity": "sha512-pC9HHhdAXarRJZgKx+xa6G/WPjGp+HN6sOgWPC6Od+0yFuMilCEScGkaXKPOFRt5UwNjzSIBPXJVyP6lmfg1NQ==", + "resolved": "https://registry.npm.taobao.org/@material/card/download/@material/card-3.2.0.tgz", + "integrity": "sha1-sFEpjsbUmGF7GScCLc65ozHKPDk=", "requires": { "@material/elevation": "^3.1.0", "@material/feature-targeting": "^3.1.0", @@ -1124,8 +1124,8 @@ }, "@material/layout-grid": { "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@material/layout-grid/-/layout-grid-3.1.0.tgz", - "integrity": "sha512-//9LggCNibXNtUkqijvDBK85fL1GSB+uIPYVx6ATToqDej1/35eedUxDSsw/ugm7zZ0OSyPLimbBuNMMnQtlqQ==" + "resolved": "https://registry.npm.taobao.org/@material/layout-grid/download/@material/layout-grid-3.1.0.tgz", + "integrity": "sha1-fzMF8/I2/Wo0f/muFEBkD/ZOhNg=" }, "@material/line-ripple": { "version": "3.1.0", @@ -2415,6 +2415,42 @@ } } }, + "cli-source-preview": { + "version": "1.1.0", + "resolved": "https://registry.npm.taobao.org/cli-source-preview/download/cli-source-preview-1.1.0.tgz", + "integrity": "sha1-BTA6sSeakJPq0aODez7iMfMAZUQ=", + "dev": true, + "requires": { + "chalk": "^1.1.3" + }, + "dependencies": { + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz?cache=0&sync_timestamp=1566430562325&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true + }, + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, + "requires": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + } + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true + } + } + }, "cliui": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", @@ -2435,6 +2471,12 @@ "shallow-clone": "^3.0.0" } }, + "co": { + "version": "4.6.0", + "resolved": "https://registry.npm.taobao.org/co/download/co-4.6.0.tgz", + "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=", + "dev": true + }, "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", @@ -3340,6 +3382,19 @@ "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=" }, + "fast-sass-loader": { + "version": "1.5.0", + "resolved": "https://registry.npm.taobao.org/fast-sass-loader/download/fast-sass-loader-1.5.0.tgz", + "integrity": "sha1-s7z5Gqpf0ELgHFNrszjbdLA/7ww=", + "dev": true, + "requires": { + "async": "^2.0.1", + "cli-source-preview": "^1.0.0", + "co": "^4.6.0", + "fs-extra": "3.x", + "loader-utils": "^1.1.0" + } + }, "faye-websocket": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz", @@ -3515,6 +3570,17 @@ "readable-stream": "^2.0.0" } }, + "fs-extra": { + "version": "3.0.1", + "resolved": "https://registry.npm.taobao.org/fs-extra/download/fs-extra-3.0.1.tgz", + "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "jsonfile": "^3.0.0", + "universalify": "^0.1.0" + } + }, "fs-write-stream-atomic": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz", @@ -4831,6 +4897,15 @@ "minimist": "^1.2.0" } }, + "jsonfile": { + "version": "3.0.1", + "resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-3.0.1.tgz", + "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.6" + } + }, "jsprim": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", @@ -7478,6 +7553,12 @@ "imurmurhash": "^0.1.4" } }, + "universalify": { + "version": "0.1.2", + "resolved": "https://registry.npm.taobao.org/universalify/download/universalify-0.1.2.tgz", + "integrity": "sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY=", + "dev": true + }, "unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", diff --git a/package.json b/package.json index 3ad5ee0..3b0036e 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,8 @@ "dependencies": { "@material/animation": "^3.1.0", "@material/button": "^3.2.0", + "@material/card": "^3.2.0", + "@material/layout-grid": "^3.1.0", "@material/line-ripple": "^3.1.0", "@material/ripple": "^3.2.0", "@material/theme": "^3.1.0", diff --git a/src/scss/components/mdc.scss b/src/scss/components/mdc.scss index ee9925f..65c726b 100644 --- a/src/scss/components/mdc.scss +++ b/src/scss/components/mdc.scss @@ -1,4 +1,3 @@ +@import "@material/layout-grid/mdc-layout-grid"; @import "@material/button/mdc-button"; @import "@material/textfield/mdc-text-field"; -@import "@material/top-app-bar/mdc-top-app-bar"; -@import "@material/icon-button/mdc-icon-button"; diff --git a/src/scss/index.scss b/src/scss/index.scss index f91e064..86dc837 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,7 +1,9 @@ @import "./variables.scss"; @import "./components/normalize.scss"; -@import "./components/mdc.scss"; - -@import "./layouts/homepage.scss"; +//@import "./components/mdc.scss"; +@import "./layouts/header.scss"; +@import "./layouts/coverImage.scss"; +@import "./layouts/pageContent.scss"; +@import "./layouts/postThumbList.scss"; \ No newline at end of file diff --git a/src/scss/layouts/coverImage.scss b/src/scss/layouts/coverImage.scss new file mode 100644 index 0000000..13833fa --- /dev/null +++ b/src/scss/layouts/coverImage.scss @@ -0,0 +1,22 @@ +/** + * @description homepage cover image + * @author Mashiro + * @since 19/11/1 + */ + +.header-top { + position: fixed; + width: 100%; + height: 100%; + + figure { + width: 100%; + margin: 0; + overflow: hidden; + } + +} + +#header-top-after { + width: 100% +} \ No newline at end of file diff --git a/src/scss/layouts/header.scss b/src/scss/layouts/header.scss new file mode 100644 index 0000000..036f510 --- /dev/null +++ b/src/scss/layouts/header.scss @@ -0,0 +1,15 @@ +/** + * @description header + * @author Mashiro + * @since 19/11/1 + */ + +@import "@material/top-app-bar/mdc-top-app-bar"; +@import "@material/icon-button/mdc-icon-button"; + +.header-container { + // display: -webkit-flex; + // display: flex; + // flex-flow: column nowrap; + // justify-content: space-between +} \ No newline at end of file diff --git a/src/scss/layouts/homepage.scss b/src/scss/layouts/homepage.scss deleted file mode 100644 index 448195a..0000000 --- a/src/scss/layouts/homepage.scss +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @description index page framework - * @author Mashiro - * @since 19/11/1 - */ - -.header-container { - // display: -webkit-flex; - // display: flex; - // flex-flow: column nowrap; - // justify-content: space-between -} - -.header-top { - position: fixed; - width: 100%; - height: 100%; - figure { - width: 100%; - margin: 0; - overflow: hidden; - } - -} - -#header-top-after { - width: 100% -} - -.site-content { - position: relative; - background:coral -} \ No newline at end of file diff --git a/src/scss/layouts/pageContent.scss b/src/scss/layouts/pageContent.scss new file mode 100644 index 0000000..1e08d50 --- /dev/null +++ b/src/scss/layouts/pageContent.scss @@ -0,0 +1,28 @@ +/** + * @description site content + * @author Mashiro + * @since 19/11/1 + */ + +.page-content { + position: relative; // important for parallax scrolling + background: white; + display: -webkit-flex; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + + .main-center { + height: 100%; + width: 800px; + background: yellowgreen; + } + + .side-bar-left { + width: 100px; + } + + .side-bar-right { + width: 100px; + } +} \ No newline at end of file diff --git a/src/scss/layouts/postThumbList.scss b/src/scss/layouts/postThumbList.scss new file mode 100644 index 0000000..2191185 --- /dev/null +++ b/src/scss/layouts/postThumbList.scss @@ -0,0 +1,28 @@ +@import "@material/card/mdc-card"; +@import "@material/button/mdc-button"; +@import "@material/typography/mdc-typography"; + +.demo-card { + width: 350px; + margin: 48px 0; +} + +.demo-basic-with-text-over-media .demo-card__media-content { + display: -ms-flexbox; + display: flex; + -ms-flex-align: end; + align-items: flex-end; +} + +.demo-card__primary { + padding: 1rem; +} + +.demo-basic-with-text-over-media .demo-card__media-content .demo-card__subtitle, +.demo-basic-with-text-over-media .demo-card__media-content .demo-card__title { + color: #fff; +} + +.demo-basic-with-text-over-media .demo-card__secondary { + padding-top: 1rem; +} \ No newline at end of file diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 1daf2c6..6d217fb 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -2,11 +2,11 @@ * MDC varibles * must using before import */ - $mdc-theme-primary: #fcb8ab; - $mdc-theme-secondary: #feeae6; - $mdc-theme-on-primary: #442b2d; - $mdc-theme-on-secondary: #442b2d; - $mdc-theme-surface: #fedbd0; - $mdc-theme-background: #feeae6; - $mdc-theme-on-surface: #442c2e; - $mdc-theme-on-background: #442c2e; \ No newline at end of file +// $mdc-theme-primary: #fcb8ab; +// $mdc-theme-secondary: #feeae6; +// $mdc-theme-on-primary: #442b2d; +// $mdc-theme-on-secondary: #442b2d; +// $mdc-theme-surface: #fedbd0; +// $mdc-theme-background: #feeae6; +// $mdc-theme-on-surface: #442c2e; +// $mdc-theme-on-background: #442c2e; \ No newline at end of file diff --git a/src/ts/components/MDCHandler.ts b/src/ts/components/MDCHandler.ts new file mode 100644 index 0000000..10404c5 --- /dev/null +++ b/src/ts/components/MDCHandler.ts @@ -0,0 +1,22 @@ +/** + * @description material-components initial + * @author Mashiro + * @since 19/11/1 + */ +import { MDCRipple } from '@material/ripple/index' +import { MDCTextField } from '@material/textfield' +import { MDCTopAppBar } from '@material/top-app-bar' + +export default function () { + interface LooseObject { + [key: string]: any + } + + let MDC: LooseObject = {} + + const topAppBarElement = document.querySelector('.mdc-top-app-bar') + const topAppBar = new MDCTopAppBar(topAppBarElement) + + // const textField = new MDCRipple(document.querySelector('.mdc-button')) + // if(textField) const textField = new MDCTextField(document.querySelector('.mdc-text-field')) +} \ No newline at end of file diff --git a/src/ts/components/index.ts b/src/ts/components/index.ts index 7318466..2cdc52e 100644 --- a/src/ts/components/index.ts +++ b/src/ts/components/index.ts @@ -1 +1 @@ -export * from './mdc'; \ No newline at end of file +export * from './MDCHandler'; \ No newline at end of file diff --git a/src/ts/components/mdc.ts b/src/ts/components/mdc.ts deleted file mode 100644 index c8278b8..0000000 --- a/src/ts/components/mdc.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * @description material-components initial - * @author Mashiro - * @since 19/11/1 - */ -import {MDCRipple} from '@material/ripple/index' -import {MDCTextField} from '@material/textfield' -import {MDCTopAppBar} from '@material/top-app-bar' - -// Instantiation -const topAppBarElement = document.querySelector('.mdc-top-app-bar'); -const topAppBar = new MDCTopAppBar(topAppBarElement); - -//const ripple = new MDCRipple(document.querySelector('.mdc-button')) -//const textField = new MDCTextField(document.querySelector('.mdc-text-field')) diff --git a/src/ts/index.ts b/src/ts/index.ts index 28eb9a5..fe24afe 100644 --- a/src/ts/index.ts +++ b/src/ts/index.ts @@ -4,12 +4,9 @@ * @since 19/10/31 */ -import * as components from "./components/index" import coverImgIni from "./modules/coverImgIni" import headerBarScrollHandler from "./modules/headerBarScrollHandler" - -//TODO: rewrite call method -let componentsIni = components +import MDCHandler from "./components/MDCHandler" window.onscroll = function () { headerBarScrollHandler() @@ -17,4 +14,5 @@ window.onscroll = function () { window.onload = function () { coverImgIni() + MDCHandler() } \ No newline at end of file