xtaodada/Homepage
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

another update

Browse Source
This commit is contained in:
amphineko 2018-11-17 02:21:29 +08:00
parent 1cfdee9a10
commit 032b84a552
9 changed files with 285 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/nat-pants-ng.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

26
assets/stylesheets/footer.scss Normal file
View File

@ -0,0 +1,26 @@
.footer.fab, .footer .fas, .footer .far {
text-align: center;
width: 1.25em;
}
.copyright {
background: #004d1a;
color: #aaa;
font-size: 0.9em;
line-height: 2em;
padding: 0.5em 1em;
}
.hosting {
background: #00802b;
color: #ddd;
font-size: 0.9em;
font-weight: normal;
display: block;
padding: 0.75em 1em;
text-decoration: none;
}
.hosting .link {
color: #acd;
}

12
assets/stylesheets/header.scss
View File

@ -1,5 +1,5 @@
.header {
background: rgba(71, 102, 133, 0.99);
background: #006080;
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
padding-bottom: 1.6em;
padding-top: 1.6em;
@ -8,11 +8,19 @@
.header .greeting {
color: #f5f5f5;
font-weight: 300;
line-height: 1.6em;
line-height: 1.25em;
margin: 0;
text-shadow: 2px 2px 4px rgba(0,0,0,.25);
}
.header .greeting:last-of-type {
margin-bottom: 1em;
}
.header .greeting .chem-element {
text-decoration: none;
}
.header .picture {
background: white;
border-radius: 50%;

2
assets/stylesheets/identities.scss
View File

@ -1,5 +1,5 @@
.identities {
background: #fafafa;
background: transparent;
}
.identities .small-labels {

102
assets/stylesheets/index.bundle.css
View File

@ -5026,8 +5026,31 @@ readers do not read off random characters that represent icons */
clear: both;
width: 100%; } }
.footer.fab, .footer .fas, .footer .far {
text-align: center;
width: 1.25em; }
.copyright {
background: #004d1a;
color: #aaa;
font-size: 0.9em;
line-height: 2em;
padding: 0.5em 1em; }
.hosting {
background: #00802b;
color: #ddd;
font-size: 0.9em;
font-weight: normal;
display: block;
padding: 0.75em 1em;
text-decoration: none; }
.hosting .link {
color: #acd; }
.header {
background: rgba(71, 102, 133, 0.99);
background: #006080;
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
padding-bottom: 1.6em;
padding-top: 1.6em; }
@ -5035,10 +5058,16 @@ readers do not read off random characters that represent icons */
.header .greeting {
color: #f5f5f5;
font-weight: 300;
line-height: 1.6em;
line-height: 1.25em;
margin: 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); }
.header .greeting:last-of-type {
margin-bottom: 1em; }
.header .greeting .chem-element {
text-decoration: none; }
.header .picture {
background: white;
border-radius: 50%;
@ -5052,7 +5081,7 @@ readers do not read off random characters that represent icons */
padding: 2em; }
.identities {
background: #fafafa; }
background: transparent; }
.identities .small-labels {
padding: 1em; }
@ -5064,13 +5093,13 @@ readers do not read off random characters that represent icons */
text-decoration: none; }
.small-labels .label {
color: white;
color: #333;
font-weight: 300;
padding: 0.5em 0;
vertical-align: bottom; }
.small-labels .label .content {
color: #ccc; }
color: #555; }
.small-labels .label .link {
color: #a8d2ff; }
@ -5079,6 +5108,9 @@ readers do not read off random characters that represent icons */
display: inline-block;
position: relative; }
.small-labels .group > *, .small-labels > * {
vertical-align: middle; }
.small-labels .label > * {
margin-right: .25em; }
@ -5086,20 +5118,22 @@ readers do not read off random characters that represent icons */
margin: 0; }
.small-labels > .group, .small-labels > .label {
background: #333;
background: #eee;
border-radius: 0.35em;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.1);
line-height: 1em;
margin-right: 0.5em;
margin-top: 1.75em;
margin: 0.5em;
margin-left: 0;
padding-left: 0.75em;
padding-right: 0.75em; }
.small-labels > .group.alt, .small-labels > .label.alt {
margin-top: 1.75em; }
/* label alt text */
.small-labels .group::before, .small-labels .label::before {
color: #ccc;
.small-labels .group.alt::before, .small-labels .label.alt::before {
content: attr(alt);
font-size: 0.8em;
left: 0;
@ -5130,38 +5164,34 @@ readers do not read off random characters that represent icons */
body {
font-size: 1em;
margin: 0; }
margin: 0;
display: flex;
flex-direction: column;
justify-content: center; }
html {
background: url("../images/nat-pants.png");
background-position: center;
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; }
.header .greeting .chem-element {
text-decoration: none; }
.hosting {
background: #38685a;
color: #eee;
font-size: 0.9em;
font-weight: normal;
display: block;
padding: 0.75em 1em;
text-decoration: none; }
.hosting .link {
color: #acd; }
#container {
background: url("../images/nat-pants-ng.png");
background-position: center;
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
margin: 1.5em auto;
max-width: 64em; }
.no-wrap {
display: inline-block; }
.section {
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
margin: 0.5em auto;
max-width: 64em; }
#container, #container > *:first-child {
border-top-left-radius: 2em; }
#container, #container > *:last-child, #container > *:last-child > *:last-child {
border-bottom-right-radius: 2em; }
.header .small-labels .group::before, .header .small-labels .label::before {
color: #eee; }
.identities .small-labels .group::before, .identities .small-labels .label::before {
color: #333; }

2
assets/stylesheets/index.bundle.min.css vendored
View File

File diff suppressed because one or more lines are too long

56
assets/stylesheets/index.scss
View File

@ -4,6 +4,7 @@
@import "fontawesome/solid.scss";
@import "../../node_modules/unsemantic/assets/sass/unsemantic-grid-responsive.scss";
@import "footer.scss";
@import "header.scss";
@import "identities.scss";
@import "labels.scss";
@ -13,45 +14,44 @@
body {
font-size: 1em;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
html {
background: url('../images/nat-pants.png');
background-position: center;
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;
}
.header .greeting .chem-element {
text-decoration: none;
}
.hosting {
background: #38685a;
color: #eee;
font-size: 0.9em;
font-weight: normal;
display: block;
padding: 0.75em 1em;
text-decoration: none;
}
.hosting .link {
color: #acd;
#container {
background: url('../images/nat-pants-ng.png');
background-position: center;
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
margin: 1.5em auto;
max-width: 64em;
}
.no-wrap {
display: inline-block;
}
.section {
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
margin: 0.5em auto;
max-width: 64em;
$section-border-radius: 2em;
#container, #container>*:first-child {
border-top-left-radius: $section-border-radius;
}
#container, #container>*:last-child, #container>*:last-child>*:last-child {
border-bottom-right-radius: $section-border-radius;
}
.header .small-labels .group::before, .header .small-labels .label::before {
color: #eee;
}
.identities .small-labels .group::before, .identities .small-labels .label::before {
color: #333;
}

21
assets/stylesheets/labels.scss
View File

@ -3,14 +3,14 @@
}
.small-labels .label {
color: white;
color: #333;
font-weight: 300;
padding: 0.5em 0;
vertical-align: bottom;
}
.small-labels .label .content {
color: #ccc;
color: #555;
}
.small-labels .label .link {
@ -22,6 +22,10 @@
position: relative;
}
.small-labels .group>*, .small-labels>* {
vertical-align: middle;
}
.small-labels .label>* {
margin-right: .25em;
}
@ -33,22 +37,25 @@
.small-labels>.group, .small-labels>.label {
$small-label-group-padding-left: 0.75em;
background: #333;
background: #eee;
border-radius: 0.35em;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.1);
line-height: 1em;
margin-right: 0.5em;
margin-top: 1.75em;
margin: 0.5em;
margin-left: 0;
padding-left: $small-label-group-padding-left;
padding-right: $small-label-group-padding-left;
}
.small-labels>.group.alt, .small-labels>.label.alt {
margin-top: 1.75em;
}
/* label alt text */
.small-labels .group::before, .small-labels .label::before {
color: #ccc;
.small-labels .group.alt::before, .small-labels .label.alt::before {
content: attr(alt);
font-size: 0.8em;
left: 0;

263
index.html
View File

@ -8,143 +8,158 @@
</head>
<body>
<div class="section header grid-container grid-parent">
<div class="picture-container grid-30">
<a href="assets/images/amphineko.png">
<img class="picture" src="assets/images/amphineko@1x.jpg">
</a>
</div>
<div class="grid-70">
<h1 class="greeting en">
Hey, it's
<span class="no-wrap">
<a class="chem-element" element="sodium" href="https://en.wikipedia.org/wiki/Sodium">Na</a>oki
Kobayashi</span>
</h1>
<h1 class="greeting cn">
<small class="prefix">好耶，</small>
<span class="name no-wrap">是饼干
<span class="face">(&lt;ゝω·) ~☆</span>
</span>
</h1>
<div class="small-labels">
<a class="label" href="//futa.moe">
<i aria-hidden="true" class="fas fa-map-marker"></i>
<span class="title">Maeeko Laboratory</span>
<span class="link">//futa.moe/maeeko/</span>
<div id="container">
<div class="section header grid-container grid-parent">
<div class="picture-container grid-30">
<a href="assets/images/amphineko.png">
<img class="picture" src="assets/images/amphineko@1x.jpg">
</a>
<div alt="languages" class="label">
<i aria-hidden="true" class="fas fa-language"></i>
<span class="title">汉语 / 漢語 / English</span>
</div>
</div>
<div class="small-labels">
<div alt="education" class="label">
<i aria-hidden="true" class="fas fa-university"></i>
<span class="title">current</span>
<span class="content">undergraduate</span>
</div>
</div>
<div class="small-labels">
<div alt="browser" class="label">
<i aria-hidden="true" class="fab fa-chrome"></i>
<span class="content">chrome</span>
</div>
<div alt="spaces or tabs" class="label">
<i aria-hidden="true" class="fas fa-i-cursor"></i>
<span class="content">spaces</span>
</div>
<div alt="platforms" class="group">
<div class="label">
<i aria-hidden="true" class="fab fa-windows"></i>
<span class="content">10</span>
<div class="grid-70">
<h1 class="greeting en">
Hey, it's
<span class="no-wrap">
<a class="chem-element" element="sodium" href="https://en.wikipedia.org/wiki/Sodium">Na</a>oki</span>
</h1>
<h1 class="greeting cn">
<small class="prefix">好耶，</small>
<span class="name no-wrap">是饼干
<span class="face">(&lt;ゝω·) ~☆</span>
</span>
</h1>
<div class="small-labels">
<div alt="languages" class="label alt">
<i aria-hidden="true" class="fas fa-language"></i>
<span class="title">汉语 & 漢語 & English</span>
</div>
<div class="label">
<i aria-hidden="true" class="fab fa-linux"></i>
<span class="content">debian</span>
<div alt="education" class="label alt">
<i aria-hidden="true" class="fas fa-university"></i>
<span class="title">current</span>
<span class="content">undergraduate</span>
</div>
<div class="label">
<i aria-hidden="true" class="fab fa-apple"></i>
<span class="content">high sierra</span>
</div>
<div class="small-labels">
<a alt="organization" class="label alt" href="//futa.moe/maeeko/">
<i aria-hidden="true" class="fas fa-map-marker"></i>
<span class="title">Maeeko Laboratory</span>
<span class="link">//futa.moe/maeeko/</span>
</a>
<a alt="as-operator" class="label alt" href="#">
<i class="fas fa-network-wired"></i>
<span class="content">AS205058</span>
<span class="content"><del>AS396303</del></span>
</a>
</div>
<div class="small-labels">
<div alt="lang & runtime" class="label alt">
<i aria-hidden="true" class="fas fa-plug"></i>
<span class="content">multiple <del>fullstack</del></span>
</div>
<div alt="spaces or tabs" class="label alt">
<i aria-hidden="true" class="fas fa-i-cursor"></i>
<span class="content">spaces</span>
</div>
</div>
<div class="small-labels">
<div alt="platforms" class="group alt">
<div class="label">
<i aria-hidden="true" class="fab fa-windows"></i>
<span class="content">10</span>
</div>
<div class="label">
<i aria-hidden="true" class="fab fa-apple"></i>
<span class="content">high sierra</span>
</div>
<div class="label">
<i aria-hidden="true" class="fab fa-linux"></i>
<span class="content">debian</span>
</div>
</div>
<div alt="platforms::handsets" class="group alt">
<div class="label">
<i aria-hidden="true" class="fab fa-apple"></i>
<i aria-hidden="true" class="fab fa-android"></i>
<span class="content">latest</span>
</div>
</div>
</div>
<div class="small-labels">
</div>
</div>
</div>
</div>
<div class="section identities shadow">
<div class="small-labels">
<a alt="open source" class="label" href="https://github.com/amphineko">
<i class="fab fa-github"></i>
<span class="title">GitHub</span>
<span class="content">@amphineko</span>
</a>
<a alt="instant messaging" class="label" href="https://telegram.me/amphineko">
<i class="fab fa-telegram"></i>
<span class="title">Telegram</span>
<span class="content">@amphineko</span>
</a>
<a alt="social network" class="label" href="https://twitter.com/amphineko">
<i class="fab fa-twitter"></i>
<span class="title">Twitter</span>
<span class="content">amphineko</span>
</a>
</div>
<div class="small-labels">
<div alt="arcade & music game" class="group">
<div class="label">
<i class="fas fa-compact-disc"></i>
<span class="title">BEMANI</span>
<div class="section identities shadow grid-container grid-parent">
<div class="small-labels grid-30">
<a alt="coding" class="label alt" href="https://github.com/amphineko">
<i class="fab fa-github"></i>
<span class="title">GitHub</span>
<span class="content">@amphineko</span>
</a>
<a alt="instant messaging" class="label alt" href="https://telegram.me/amphineko">
<i class="fab fa-telegram"></i>
<span class="title">Telegram</span>
<span class="content">@amphineko</span>
</a>
<a alt="social network" class="label alt" href="https://twitter.com/amphineko">
<i class="fab fa-twitter"></i>
<span class="title">Twitter</span>
<span class="content">amphineko</span>
</a>
</div>
<div class="small-labels grid-30">
<div alt="arcade music game" class="group alt">
<div class="label">
<i class="fas fa-compact-disc"></i>
<span class="title">DJ-ID</span>
<span class="content">NekoSauc</span>
</div>
</div>
<div class="label">
<i class="fas fa-sync"></i>
<span class="title">SEGA</span>
</div>
<div class="label">
<i class="fas fa-car-crash"></i>
<span class="title">TAiTO</span>
</div>
<div class="label">
<span class="content">NekoSauc</span>
<a alt="another music game" class="label alt" href="https://osu.ppy.sh/u/Rukatan">
<i class="fab fa-accessible-icon"></i>
<span class="title">osu!</span>
<span class="content">Rukatan</span>
</a>
<div alt="ar game" class="label alt">
<i class="fas fa-bicycle"></i>
<i class="fas fa-paper-plane"></i>
<span class="title">Ingress</span>
<span class="content"><del>REDACTED</del></span>
</div>
</div>
<a alt="music game" class="label" href="https://osu.ppy.sh/u/Rukatan">
<i class="fab fa-accessible-icon"></i>
<span class="title">osu!</span>
<span class="content">Rukatan</span>
</a>
<div alt="ar game" class="label">
<i class="fas fa-bicycle"></i>
<i class="fas fa-paper-plane"></i>
<span class="title">Ingress</span>
<span class="content"><del>REDACTED</del></span>
<div class="small-labels grid-40">
<a alt="platform::steam" class="label alt" href="https://steamcommunity.com/id/Amphineko">
<i class="fab fa-steam"></i>
<span class="title">Steam</span>
<span class="content">NekoSauce</span>
</a>
<a class="label" href="#">
<i class="fas fa-heart"></i>
<span class="title">CS:GO</span>
</a>
<a alt="platform::uplay" class="label alt" href="https://club.ubisoft.com/profile/NekoSauce2">
<i class="fas fa-user-check"></i>
<span class="title">Uplay</span>
<span class="content">NekoSauce2</span>
</a>
<a class="label" href="#">
<i class="fas fa-heart"></i>
<span class="title">R6:S</span>
</a>
</div>
<a alt="platform::steam" class="label" href="https://steamcommunity.com/id/Amphineko">
<i class="fab fa-steam"></i>
<span class="title">Steam</span>
<i class="fas fa-heart"></i>
<span class="title">CS:GO</span>
<span class="content">NekoSauce</span>
</a>
<a alt="platform::uplay" class="label" href="https://club.ubisoft.com/profile/NekoSauce2">
<i class="fas fa-user-check"></i>
<span class="title">Uplay</span>
<i class="fas fa-heart"></i>
<span class="title">R6:Siege</span>
<span class="content">NekoSauce2</span>
</a>
</div>
</div>
<div class="section shadow">
<a class="hosting" href="https://github.com/amphineko/amphineko">
<i aria-hidden="true" class="fas fa-code-branch"></i> Fork this template on GitHub</a>
</div>
<div class="section shadow">
<a class="hosting" href="//futa.moe">
<i aria-hidden="true" class="far fa-heart"></i> Hosted by Maeeko Laboratory
<span class="link">//futa.moe/maeeko</span>
</a>
<div class="copyright">
Copyright © 2015-2018 amphineko. Illustrations have their own licenses.
<div class="section footer shadow">
<a class="hosting" href="https://github.com/amphineko/amphineko">
<i aria-hidden="true" class="fas fa-code-branch"></i> Fork this template on GitHub</a>
</div>
<div class="section footer shadow">
<a class="hosting" href="//futa.moe">
<i aria-hidden="true" class="far fa-heart"></i> Hosted by Maeeko Laboratory
<span class="link">//futa.moe/maeeko</span>
</a>
<div class="copyright">
<i class="fas fa-exclamation-triangle"></i>
Copyright © 2015-2018 amphineko. Illustrations have their own licenses.
</div>
</div>
</div>
</body>