This commit is contained in:
Naoki Rinmous 2017-06-21 19:15:14 +08:00
parent 9ea057cab2
commit a23a8de3d6
12 changed files with 367 additions and 353 deletions

View File

@ -1 +1 @@
Copyright (c) 2016 Naoki Rinmous, released under the MIT license. Copyright (c) 2016-2017 Naoki Rinmous, released under the MIT license.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 455 KiB

After

Width:  |  Height:  |  Size: 470 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 82 KiB

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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);
}

View File

@ -1,236 +1,57 @@
// import: normalize @import "../../bower_components/font-awesome/scss/font-awesome.scss";
@import "../../bower_components/normalize-css/normalize.css"; @import "../../bower_components/unsemantic/assets/sass/unsemantic-grid-responsive.scss";
// import: unsemantic @import "header.scss";
@import "../../bower_components/unsemantic/assets/sass/unsemantic-grid-responsive-no-ie7"; @import "identities.scss";
// import: font-awesome @import "chem-elements.scss";
@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;
}
body { 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; 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; line-height: 2em;
padding: 0.5em 1em;
} }
.account.alt-accounts .fa { .header .greeting .chem-element {
color: #551a8b; text-decoration: none;
font-size: 1.25em;
} }
.account.alt-accounts .fake-link { .hosting {
color: #216199; background: #38685a;
} color: #eee;
font-size: 0.9em;
.bio-basic { font-weight: normal;
background: #385068;
padding: 0 0 2em 0;
@include box-shadow($shadow);
}
.bio-basic-identity {
padding-bottom: 1em;
}
.bio-name {
color: #ebebeb;
display: block; display: block;
font-size: $bio-name-size*0.65; padding: 0.75em 1em;
line-height: 2em; text-decoration: none;
text-align: center;
white-space: nowrap;
} }
.bio-picture { .hosting .link {
@include border-radius(50%); color: #acd;
@include box-shadow($shadow);
margin-bottom: 1em;
width: 100%;
} }
.bio-picture-container { .main-container {
padding: 2em 3em 0 3em; margin: 0 auto;
max-width: 64em;
} }
.bio-story { .no-wrap {
background-size: contain; display: inline-block;
background-repeat: no-repeat;
background-position: bottom right;
background-image: url('../images/inaristarlight-cablebroken.png');
padding: 1em;
position: relative;
} }
.bio-story p { .section {
font-size: 1.1em; box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
line-height: 2em;
margin: 1em 0; 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;
}

View File

@ -1,12 +1,15 @@
{ {
"name": "loopback.moe", "name": "amphineko",
"description": "",
"main": "index.html",
"keywords": [
"home"
],
"authors": [ "authors": [
"Naoki Rinmous <sukareki@gmail.com>" "Naoki Rinmous <sukareki@gmail.com>"
], ],
"description": "loopback.moe homepage",
"main": "index.html",
"license": "MIT", "license": "MIT",
"homepage": "https://loopback.moe/", "homepage": "https://futa.moe/amphineko/",
"private": true, "private": true,
"ignore": [ "ignore": [
"**/.*", "**/.*",
@ -16,8 +19,7 @@
"tests" "tests"
], ],
"dependencies": { "dependencies": {
"normalize-css": "^4.1.1",
"unsemantic": "^1.1.3", "unsemantic": "^1.1.3",
"font-awesome": "^4.6.3" "font-awesome": "^4.7.0"
} }
} }

View File

@ -1,11 +1,9 @@
const bower = require('gulp-bower'); const cleanCss = require('gulp-clean-css')
const browserSync = require('browser-sync'); const gulp = require('gulp')
const cleanCss = require('gulp-clean-css'); const rename = require('gulp-rename')
const gulp = require('gulp'); const sass = require('gulp-sass')
const rename = require('gulp-rename');
const sass = require('gulp-sass');
gulp.task('default', ['stylesheet']); gulp.task('default', ['stylesheet'])
gulp.task('stylesheet', function () { gulp.task('stylesheet', function () {
return gulp.src('./assets/stylesheets/index.scss') return gulp.src('./assets/stylesheets/index.scss')
@ -14,9 +12,9 @@ gulp.task('stylesheet', function () {
.pipe(gulp.dest('./assets/stylesheets/')) .pipe(gulp.dest('./assets/stylesheets/'))
.pipe(cleanCss()) .pipe(cleanCss())
.pipe(rename('index.bundle.min.css')) .pipe(rename('index.bundle.min.css'))
.pipe(gulp.dest('./assets/stylesheets/')); .pipe(gulp.dest('./assets/stylesheets/'))
}); })
gulp.task('watch', ['default'], function () { gulp.task('watch', ['default'], function () {
gulp.watch('./assets/stylesheets/**/*.scss', ['stylesheet']); gulp.watch('./assets/stylesheets/**/*.scss', ['stylesheet'])
}); })

View File

@ -1,127 +1,167 @@
<!doctype html>
<html> <html>
<head> <head>
<!-- page information -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- stylesheets -->
<link href="assets/stylesheets/index.bundle.min.css" rel="stylesheet"> <link href="assets/stylesheets/index.bundle.min.css" rel="stylesheet">
<meta charset="utf-8">
<!-- view-source link --> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<script> <title>about amphineko</title>
function openViewSource() {
window.location = 'view-source:'.concat(window.location)
}
</script>
<!-- adblock workaround -->
<style>
.fa-twitter-adb:before {
content: "\f099";
}
.fa-google-plus-adb:before {
content: "\f0d5";
}
</style>
</head> </head>
<body> <body>
<div class="page-container"> <div class="main-container">
<div class="bio-basic grid-container"> <div class="section header grid-container">
<div class="bio-picture-container grid-30 mobile-grid-100"> <div class="picture-container grid-30">
<img class="bio-picture" src="assets/images/amphineko.png"> <img class="picture" src="assets/images/amphineko.png">
<span class="bio-name">Naoki Rinmous</span>
</div> </div>
<div class="bio-identity grid-70 mobile-grid-100"> <div class="grid-70">
<h1 class="bio-title hide-on-mobile"> <h1 class="greeting en">
<small class="prefix">好耶,</small> Hey, it's <span class="no-wrap"><a class="chem-element" element="sodium" href="https://en.wikipedia.org/wiki/Sodium">Na</a>oki Rinmous</span>
<span class="name">是饼干 (&lt;ゝω·) ~☆</span>
</h1> </h1>
<div class="bio-basic-identity"> <h1 class="greeting cn">
<a class="account alt-bio-basic-identity" href="//keybase.io/amphineko"> <small class="prefix">好耶,</small><span class="name no-wrap">是饼干 <span class="face">(&lt;ゝω·) ~☆</span></span>
</h1>
<div class="labels">
<a alt="home" class="label" href="//futa.moe">
<i aria-hidden="true" class="fa fa-map-marker"></i>
<span class="title">五月研究所</span>
<span class="link">//futa.moe</span>
</a>
<div alt="languages" class="label">
<i aria-hidden="true" class="fa fa-language"></i>
<span class="title">LANG</span>
<span class="content">汉语 / 漢語 / English</span>
</div>
<div alt="education" class="label">
<i aria-hidden="true" class="fa fa-university"></i>
<span class="title">current</span>
<span class="content">Guangxi University</span>
</div>
</div>
<div class="labels">
<div alt="browser" class="label">
<i aria-hidden="true" class="fa fa-chrome"></i>
<span class="content">beta</span>
</div>
<div alt="editor" class="label">
<i aria-hidden="true" class="fa fa-keyboard-o"></i>
<span class="content">vim</span>
</div>
<div alt="spaces or tabs" class="label">
<i aria-hidden="true" class="fa fa-i-cursor"></i>
<span class="content">spaces</span>
</div>
<div alt="platforms" class="label">
<i aria-hidden="true" class="fa fa-windows"></i>
<span class="content">10</span>
<i aria-hidden="true" class="fa fa-linux"></i>
<span class="content">debian</span>
<span class="content">gentoo</span>
<i aria-hidden="true" class="fa fa-apple"></i>
<span class="content">sierra</span>
</div>
</div>
</div>
</div>
<div class="section identity-category grid-container">
<h2 class="title">
<i aria-hidden="true" class="fa fa-chevron-right"></i> Naoki Rinmous
<span class="no-wrap">
<small class="tag"><i aria-hidden="true" class="fa fa-tag"></i><del>designer</del></small>
<small class="tag"><i aria-hidden="true" class="fa fa-tag"></i>programmer</small>
</span>
</h2>
<ul class="identities grid-50">
<li class="identity">
<a href="https://github.com/amphineko">
<i aria-hidden="true" class="fa fa-github"></i>
<span class="where">github</span>
<span class="link">@amphineko</span>
</a>
</li>
<li class="identity">
<a href="https://keybase.io/amphineko">
<i aria-hidden="true" class="fa fa-key"></i> <i aria-hidden="true" class="fa fa-key"></i>
<span class="text">keybase.io</span> <span class="where">keybase</span>
<span class="fake-link">/amphineko</span> <span class="link">@amphineko</span>
</a> </a>
<a class="account alt-bio-basic-identity" href="//futa.moe"> </li>
<i aria-hidden="true" class="fa fa-wrench"></i> </ul>
<span class="text">五月研究所</span> <ul class="identities grid-50">
<span class="fake-link">//futa.moe</span> <li class="identity">
<a href="https://plus.google.com/104160980463474768448">
<i aria-hidden="true" class="fa fa-google-plus"></i>
<span class="where">google plus</span>
<span class="link">+椎名奈緒</span>
</a> </a>
</div> </li>
</div> <li class="identity">
</div> <a href="https://telegram.me/amphineko">
<div class="tiles grid-container"> <i aria-hidden="true" class="fa fa-telegram"></i>
<div class="tile-column grid-50 mobile-grid-100"> <span class="where">telegram</span>
<div class="bio-accounts tile"> <span class="link">@amphineko</span>
<h2>where?</h2>
<a class="account alt-accounts" href="//plus.google.com/104160980463474768448">
<i aria-hidden="true" class="fa fa-google-plus-adb"></i>
<span class="text">google+</span>
<span class="fake-link">+椎名奈緒</span>
</a> </a>
<a class="account alt-accounts" href="#"> </li>
<i aria-hidden="true" class="fa fa-paper-plane"></i> <li class="identity">
<span class="text">ingress</span> <a href="https://twitter.com/amphineko">
<span class="fake-link">NekoSauce</span> <i aria-hidden="true" class="fa fa-twitter"></i>
<span class="where">twitter</span>
<span class="link">@amphineko</span>
</a> </a>
<a class="account alt-accounts" href="//weibo.com/uncookie"> </li>
<li class="identity">
<a href="http://weibo.com/uncookie">
<i aria-hidden="true" class="fa fa-weibo"></i> <i aria-hidden="true" class="fa fa-weibo"></i>
<span class="text">weibo.com</span> <span class="where">weibo</span>
<span class="fake-link">/uncookie</span> <span class="link">猫耳继电器</span>
</a> </a>
<a class="account alt-accounts" href="//telegram.me/amphineko"> </li>
<i aria-hidden="true" class="fa fa-paper-plane-o"></i> </ul>
<span class="text">telegram</span> </div>
<span class="fake-link">@amphineko</span> <div class="section identity-category grid-container">
<h2 class="title">
<i aria-hidden="true" class="fa fa-chevron-right"></i> NekoSauce
<span class="no-wrap">
<small class="tag no-wrap"><i aria-hidden="true" class="fa fa-tag"></i>sandbox</small>
<small class="tag no-wrap"><i aria-hidden="true" class="fa fa-tag"></i>simulation</small>
<small class="tag no-wrap"><i aria-hidden="true" class="fa fa-tag"></i>music</small>
</span>
</h2>
<ul class="identities grid-50">
<li class="identity">
<a href="#">
<i aria-hidden="true" class="fa fa-plane"></i>
<span class="where">portalgun-gress</span>
<span class="link">NekoSauce</span>
</a> </a>
<a class="account alt-accounts" href="//twitter.com/amphineko"> </li>
<i aria-hidden="true" class="fa fa-twitter-adb"></i> <li class="identity">
<span class="text">twitter</span> <a href="http://steamcommunity.com/id/amphineko">
<span class="fake-link">@amphineko</span>
</a>
<a class="account alt-accounts" href="//steamcommunity.com/id/Amphineko/">
<i aria-hidden="true" class="fa fa-steam"></i> <i aria-hidden="true" class="fa fa-steam"></i>
<span class="text">steam</span> <span class="where">steam</span>
<span class="fake-link">NekoSauce</span> <span class="link">NekoSauce</span>
</a> </a>
</div> </li>
</div> </ul>
<div class="tile-column grid-50 mobile-grid-100"> <ul class="identities grid-50">
<div class="bio-story tile"> <li class="identity">
<h2>what?</h2> <a href="#">
<p> <i aria-hidden="true" class="fa fa-registered"></i>
餅乾是一枚資訊科技系的本科生,<br/> <span class="where">bemani</span>
不喜歡動,在露天見光大概會死。<br/> <span class="link">NEKOSAUC</span>
不愛同陌生人講話,更鮮有社交,<br/> </a>
絕對難以應對人多和嘈雜的環境。<br/> </li>
</p> <li class="identity">
<p> <a href="https://osu.ppy.sh/u/Rukatan">
更糟糕的是,<br/> <i aria-hidden="true" class="fa fa-wheelchair-alt"></i>
是一個討厭生活在沒有計劃當中的人,<br/> <span class="where">osu!</span>
喜歡進行完備的考量。<br/> <span class="link">Rukatan</span>
</p> </a>
<p> </li>
當然的是,這塊餅乾的未來還在繼續展開, </ul>
</p>
</div>
</div>
</div> </div>
<div class="footer grid-container"> <div class="section">
<span>Copyright &copy; 2015-2016 Naoki Rinmous.</span> <a class="hosting" href="//futa.moe"><i aria-hidden="true" class="fa fa-heart-o"></i> Hosted by 五月研究所 <span class="link">//futa.moe</span></a>
<span>Illustrations have their own licenses.</span> <div class="copyright">
</div> Copyright © 2015-2017 Naoki Rinmous. Illustrations have their own licenses.
<div class="site-links grid-container"> </div>
<a class="clickable grid-65 mobile-grid-100" href="//futa.moe">
<i aria-hidden="true" class="fa fa-server"></i>
<span class="text">futa.moe</span>
</a>
<a class="clickable grid-30 prefix-5 hide-on-mobile" href="javascript:openViewSource()">
<i aria-hidden="true" class="fa fa-square-o"></i>
<span class="text">view-source</span>
</a>
</div> </div>
</div> </div>
</body> </body>

View File

@ -1,23 +1,22 @@
{ {
"name": "loopback.moe", "name": "amphineko",
"version": "0.0.1", "version": "0.0.1",
"description": "", "description": "",
"main": "", "main": "gulpfile.js",
"dependencies": {},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-clean-css": "^2.0.13",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2"
},
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/amphineko/loopback.moe.git" "url": "git+https://github.com/amphineko/amphineko.git"
},
"scripts": {
"postinstall": "bower install"
}, },
"author": "Naoki Rinmous <sukareki@gmail.com>", "author": "Naoki Rinmous <sukareki@gmail.com>",
"license": "MIT", "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"
}
} }