diff --git a/LICENSE b/LICENSE index fb12ce1..0c3813c 100644 --- a/LICENSE +++ b/LICENSE @@ -1 +1 @@ -Copyright (c) 2016 Naoki Rinmous, released under the MIT license. \ No newline at end of file +Copyright (c) 2016-2017 Naoki Rinmous, released under the MIT license. diff --git a/assets/images/amphineko.png b/assets/images/amphineko.png index 6a5ce20..346d5ac 100644 Binary files a/assets/images/amphineko.png and b/assets/images/amphineko.png differ diff --git a/assets/images/darknoise.png b/assets/images/darknoise.png deleted file mode 100644 index 5c33e24..0000000 Binary files a/assets/images/darknoise.png and /dev/null differ diff --git a/assets/images/inaristarlight-cablebroken.png b/assets/images/inaristarlight-cablebroken.png deleted file mode 100644 index eea8d0b..0000000 Binary files a/assets/images/inaristarlight-cablebroken.png and /dev/null differ diff --git a/assets/stylesheets/chem-elements.scss b/assets/stylesheets/chem-elements.scss new file mode 100644 index 0000000..5c46be7 --- /dev/null +++ b/assets/stylesheets/chem-elements.scss @@ -0,0 +1,25 @@ +.chem-element { + background: rgba(255,163,163,.09); + border-radius: .25em; + box-shadow: 0 0 0.1em 0.1em rgba(0,0,0,.05); + color: #fff; + margin-right: .1em; + padding: .35em .1em .35em .35em; + transition-duration: .5s; +} + +.chem-element:hover { + box-shadow: 0 0 0.2em 0.2em rgba(255,255,255,.05); + transform: translate(1em,1em); +} + + +.chem-element[element=sodium]::before { + content: '11'; + font-size: .45em; + vertical-align: -.5em; +} + +.chem-element[element="sodium"]:hover { + background: #faa3a3; +} diff --git a/assets/stylesheets/header.scss b/assets/stylesheets/header.scss new file mode 100644 index 0000000..21d2a1d --- /dev/null +++ b/assets/stylesheets/header.scss @@ -0,0 +1,64 @@ +.header { + background: #385068; + padding-top: 1.6em; +} + +.header .greeting { + color: #f5f5f5; + font-weight: 300; + line-height: 1.6em; + margin: 0; + text-shadow: 2px 2px 4px rgba(0,0,0,.25); +} + +.header .labels { + margin: 0.8em 0; +} + +.header .labels .label { + background: #333; + box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.15); + color: #fff; + display: inline-block; + font-weight: 300; + padding: .5em .75em; + position: relative; + margin: 1.2em 0; + vertical-align: bottom; +} + +.header .labels a.label { + text-decoration: none; +} + +.header .labels .label::before { + color: #ddd; + content: attr(alt); + font-size: .5em; + left: 0; + position: absolute; + text-shadow: 2px 2px 4px rgba(0,0,0,.25); + top: -1.75em; +} + +.header .labels .label>* { + margin-right: .25em; +} + +.header .labels .label .content { + color: #ccc; +} + +.header .picture { + background: white; + border-radius: 50%; + box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.15); + box-sizing: content-box; + display: block; + padding: 3%; + width: 94%; +} + +.header .picture-container { + padding: 2em; +} diff --git a/assets/stylesheets/identities.scss b/assets/stylesheets/identities.scss new file mode 100644 index 0000000..213ee29 --- /dev/null +++ b/assets/stylesheets/identities.scss @@ -0,0 +1,65 @@ +.identity { + border-bottom: 0.15em solid rgba(0, 0, 0, 0.035); + display: block; + line-height: 1.2em; + margin: 0.4em auto; + padding: 0.4em; + position: relative; + width: 90%; +} + +.identity a { + display: block; + text-decoration: none; +} + +.identity>*, .identity a>* { + vertical-align: middle; +} + +.identity .link { + bottom: 0.5em; + color: #216199; + display: inline-block; + position: absolute; + right: 0.45em; + text-align: right; +} + +.identity .fa { + color: rgba(0, 10, 25, 0.65); + font-size: 1.6em; + text-align: center; + width: 1.5em; +} + +.identity .where { + color: #333; +} + +.identities { + margin: 0; + padding: 0; +} + +.identity-category { + background: rgba(255, 255, 255, 0.975); + padding-bottom: 1.6em; + padding-top: 1em; +} + +.identity-category .title { + font-weight: 300; + line-height: 2em; + margin: 0; +} + +.identity-category .title .tag { + font-size: 0.75em; +} + +.identity-category .title .fa { + color: #aaa; + margin: 0 0.2em; + transform: rotateZ(-23deg); +} diff --git a/assets/stylesheets/index.scss b/assets/stylesheets/index.scss index 42fd578..88b3c3c 100644 --- a/assets/stylesheets/index.scss +++ b/assets/stylesheets/index.scss @@ -1,236 +1,57 @@ -// import: normalize -@import "../../bower_components/normalize-css/normalize.css"; +@import "../../bower_components/font-awesome/scss/font-awesome.scss"; +@import "../../bower_components/unsemantic/assets/sass/unsemantic-grid-responsive.scss"; -// import: unsemantic -@import "../../bower_components/unsemantic/assets/sass/unsemantic-grid-responsive-no-ie7"; +@import "header.scss"; +@import "identities.scss"; -// import: font-awesome -@import "../../bower_components/font-awesome/scss/font-awesome"; - -// content: index.scss - -$bio-name-size: 2em; -$shadow: 0 0 4px rgba(0, 0, 0, 0.3); -$shadow-float: 2px 2px 4px rgba(0, 0, 0, 0.3); - -@mixin border-radius($value) { - -webkit-border-radius: $value; - -moz-border-radius: $value; - border-radius: $value; -} - -@mixin box-shadow($value) { - -webkit-box-shadow: $value; - -moz-box-shadow: $value; - box-shadow: $value; -} - -@mixin box-sizing($value) { - -webkit-box-sizing: $value; - -moz-box-sizing: $value; - box-sizing: $value; -} - -@mixin transition($value) { - -webkit-transition: $value; - -moz-transition: $value; - -o-transition: $value; - transition: $value; -} +@import "chem-elements.scss"; body { - background: url('../images/nat-pants.png'); - font-family: "Helvetica Neue", Helvetica, Arial, "PingFangTC-Light", "Microsoft YaHei", 微软雅黑, "STHeiti Light", "STXihei", "华文细黑", Heiti, 黑体, sans-serif; - padding: 1em 0; -} - -.account { - padding: 0.5em; - text-decoration: none; - width: auto; -} - -.account:hover { - @include box-shadow($shadow-float);; -} - -.account, .account:hover { - @include transition(all 0.25s); -} - -.account .fa { - text-align: center; - width: 1.35em; -} - -.account .fake-link, .account .text { - display: inline-block; - margin: 0 0.25em; -} - -.account.alt-bio-basic-identity { - @include box-shadow($shadow); - background: #333; - color: #fafafa; - margin-top: 1em; - @media screen and (max-width: $media-mobile-max) { - display: block; - } - @media screen and (min-width: $media-mobile-max) { - display: table; - } -} - -.account.alt-bio-basic-identity:hover { - background: #423848; -} - -.account.alt-bio-basic-identity .fake-link { - color: #bdf; -} - -.account.alt-accounts { - color: #333; - display: block; font-size: 1em; + margin: 0; +} + +html { + background: url('../images/nat-pants.png'); + font-family: "Helvetica Neue", Helvetica, Arial, PingFangTC-Light, "Microsoft YaHei", 微软雅黑, "STHeiti Light", STXihei, "华文细黑", Heiti, 黑体, sans-serif; +} + +.copyright { + background: #2b5045; + color: #ddd; + font-size: 0.9em; line-height: 2em; + padding: 0.5em 1em; } -.account.alt-accounts .fa { - color: #551a8b; - font-size: 1.25em; +.header .greeting .chem-element { + text-decoration: none; } -.account.alt-accounts .fake-link { - color: #216199; -} - -.bio-basic { - background: #385068; - padding: 0 0 2em 0; - @include box-shadow($shadow); -} - -.bio-basic-identity { - padding-bottom: 1em; -} - -.bio-name { - color: #ebebeb; +.hosting { + background: #38685a; + color: #eee; + font-size: 0.9em; + font-weight: normal; display: block; - font-size: $bio-name-size*0.65; - line-height: 2em; - text-align: center; - white-space: nowrap; + padding: 0.75em 1em; + text-decoration: none; } -.bio-picture { - @include border-radius(50%); - @include box-shadow($shadow); - margin-bottom: 1em; - width: 100%; +.hosting .link { + color: #acd; } -.bio-picture-container { - padding: 2em 3em 0 3em; +.main-container { + margin: 0 auto; + max-width: 64em; } -.bio-story { - background-size: contain; - background-repeat: no-repeat; - background-position: bottom right; - background-image: url('../images/inaristarlight-cablebroken.png'); - padding: 1em; - position: relative; +.no-wrap { + display: inline-block; } -.bio-story p { - font-size: 1.1em; - line-height: 2em; +.section { + box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125); margin: 1em 0; } - -.bio-title { - font-size: $bio-name-size; - font-weight: 300; - line-height: 1em; - padding: 0.5em 0; -} - -.bio-title .name, .bio-title .prefix, .bio-title .trademark { - display: inline-block; - height: 1em; - line-height: 1em; - vertical-align: bottom; -} - -.bio-title .name { - color: #f2f2f2; -} - -.bio-title .prefix { - color: #eae6e5; -} - -.bio-title .trademark { - color: #cac6c5; -} - -.footer { - background: url('../images/darknoise.png'); - color: #ddd; - font-size: 0.8em; - line-height: 3em; - padding: 0 1em; -} - -.footer span { - white-space: nowrap; -} - -.page-container { - clear: both; - margin: 0 auto; - max-width: $media-mobile-max*1.25; -} - -.site-links { - padding: 0; -} - -.site-links .clickable { - @include box-shadow($shadow); - background: #38685a; - display: block; - padding: 0.8em 1em; - text-decoration: none; - vertical-align: middle; -} - -.site-links .clickable .fa { - text-align: center; - width: 1.4em; -} - -.site-links .clickable .fa, .site-links .clickable .text { - color: #eaeaea; -} - -.tile { - padding: 1em; -} - -.tile h2 { - color: #333; - font-weight: 300; - margin-top: 0.25em; -} - -.tile-column { - padding: 0; -} - -.tiles { - @include box-shadow($shadow); - background: #fffffc; -} diff --git a/bower.json b/bower.json index 53cce1d..ba83d30 100644 --- a/bower.json +++ b/bower.json @@ -1,12 +1,15 @@ { - "name": "loopback.moe", + "name": "amphineko", + "description": "", + "main": "index.html", + "keywords": [ + "home" + ], "authors": [ "Naoki Rinmous " ], - "description": "loopback.moe homepage", - "main": "index.html", "license": "MIT", - "homepage": "https://loopback.moe/", + "homepage": "https://futa.moe/amphineko/", "private": true, "ignore": [ "**/.*", @@ -16,8 +19,7 @@ "tests" ], "dependencies": { - "normalize-css": "^4.1.1", "unsemantic": "^1.1.3", - "font-awesome": "^4.6.3" + "font-awesome": "^4.7.0" } } diff --git a/gulpfile.js b/gulpfile.js index a1e048f..5d487a0 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,11 +1,9 @@ -const bower = require('gulp-bower'); -const browserSync = require('browser-sync'); -const cleanCss = require('gulp-clean-css'); -const gulp = require('gulp'); -const rename = require('gulp-rename'); -const sass = require('gulp-sass'); +const cleanCss = require('gulp-clean-css') +const gulp = require('gulp') +const rename = require('gulp-rename') +const sass = require('gulp-sass') -gulp.task('default', ['stylesheet']); +gulp.task('default', ['stylesheet']) gulp.task('stylesheet', function () { return gulp.src('./assets/stylesheets/index.scss') @@ -14,9 +12,9 @@ gulp.task('stylesheet', function () { .pipe(gulp.dest('./assets/stylesheets/')) .pipe(cleanCss()) .pipe(rename('index.bundle.min.css')) - .pipe(gulp.dest('./assets/stylesheets/')); -}); + .pipe(gulp.dest('./assets/stylesheets/')) +}) gulp.task('watch', ['default'], function () { - gulp.watch('./assets/stylesheets/**/*.scss', ['stylesheet']); -}); + gulp.watch('./assets/stylesheets/**/*.scss', ['stylesheet']) +}) diff --git a/index.html b/index.html index e42a455..a63de1d 100644 --- a/index.html +++ b/index.html @@ -1,127 +1,167 @@ - - - - - - - - - - - - + + + about amphineko - -
-
-
- - Naoki Rinmous +
+
+
+
-
-

- 好耶， - 是饼干 (<ゝω·) ~☆ +
+

+ Hey, it's Naoki Rinmous

-
-
+ + 五月研究所 + //futa.moe + +
+ + LANG + 汉语 / 漢語 / English +
+
+ + current + Guangxi University +
+
+
+
+ + beta +
+
+ + vim +
+
+ + spaces +
+
+ + 10 + + debian + gentoo + + sierra +
+
+
+
+
+

+ Naoki Rinmous + + designer + programmer + +

+
-

-
-
-
-
-

where?

-
  • + + telegram + @amphineko -
  • + + twitter + @amphineko -
  • - weibo.com - /uncookie + weibo + 猫耳继电器 -
    • -
    -
    -
    -

    what?

    -

    - 餅乾是一枚資訊科技系的本科生，
    - 不喜歡動，在露天見光大概會死。
    - 不愛同陌生人講話，更鮮有社交，
    - 絕對難以應對人多和嘈雜的環境。
    -

    -

    - 更糟糕的是，
    - 是一個討厭生活在沒有計劃當中的人，
    - 喜歡進行完備的考量。
    -

    -

    - 當然的是，這塊餅乾的未來還在繼續展開， -

    -
    -
    + + +
    -
    - Copyright © 2015-2016 Naoki Rinmous. - Illustrations have their own licenses. -
    -
    - - - futa.moe - - - - view-source - +
    + Hosted by 五月研究所 //futa.moe +
    + Copyright © 2015-2017 Naoki Rinmous. Illustrations have their own licenses. +
    diff --git a/package.json b/package.json index f1fbfbf..d9c2655 100644 --- a/package.json +++ b/package.json @@ -1,23 +1,22 @@ { - "name": "loopback.moe", + "name": "amphineko", "version": "0.0.1", "description": "", - "main": "", - "dependencies": {}, - "devDependencies": { - "gulp": "^3.9.1", - "gulp-clean-css": "^2.0.13", - "gulp-rename": "^1.2.2", - "gulp-sass": "^2.3.2" - }, + "main": "gulpfile.js", "repository": { "type": "git", - "url": "git+https://github.com/amphineko/loopback.moe.git" - }, - "scripts": { - "postinstall": "bower install" + "url": "git+https://github.com/amphineko/amphineko.git" }, "author": "Naoki Rinmous ", "license": "MIT", - "homepage": "https://loopback.moe/" + "bugs": { + "url": "https://github.com/amphineko/amphineko/issues" + }, + "homepage": "https://futa.moe/amphineko/", + "dependencies": { + "gulp": "^3.9.1", + "gulp-clean-css": "^3.4.1", + "gulp-rename": "^1.2.2", + "gulp-sass": "^3.1.0" + } }