update layout

This commit is contained in:
amphineko 2018-05-02 02:17:07 +08:00
parent 994d98925d
commit d898f83ceb
3 changed files with 168 additions and 166 deletions

View File

@ -44,6 +44,8 @@
.identity-category { .identity-category {
background: rgba(255, 255, 255, 0.975); background: rgba(255, 255, 255, 0.975);
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
margin-bottom: 1em;
padding-bottom: 1.6em; padding-bottom: 1.6em;
padding-top: 1em; padding-top: 1em;
} }

View File

@ -45,10 +45,9 @@ html {
color: #acd; color: #acd;
} }
.main-container { .inset-container {
background: #476685; background: rgba(71, 102, 133, 0.99);
box-shadow: inset 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125); box-shadow: inset 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
padding-bottom: 1em;
} }
.no-wrap { .no-wrap {

View File

@ -1,25 +1,33 @@
<html> <html>
<head>
<head>
<link href="assets/stylesheets/index.bundle.min.css" rel="stylesheet"> <link href="assets/stylesheets/index.bundle.min.css" rel="stylesheet">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>about amphineko</title> <title>about amphineko</title>
</head> </head>
<body>
<body>
<div class="section shadow"> <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> <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>
<div class="main-container"> <div class="inset-container">
<div class="section header grid-container"> <div class="section header grid-container">
<div class="picture-container grid-30"> <div class="picture-container grid-30">
<img class="picture" src="assets/images/amphineko.png"> <img class="picture" src="assets/images/amphineko.png">
</div> </div>
<div class="grid-70"> <div class="grid-70">
<h1 class="greeting en"> <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 Rinmous</span> 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>
</h1> </h1>
<h1 class="greeting cn"> <h1 class="greeting cn">
<small class="prefix">好耶,</small><span class="name no-wrap">是饼干 <span class="face">(&lt;ゝω·) ~☆</span></span> <small class="prefix">好耶,</small>
<span class="name no-wrap">是饼干
<span class="face">(&lt;ゝω·) ~☆</span>
</span>
</h1> </h1>
<div class="labels"> <div class="labels">
<a alt="home" class="label" href="//futa.moe"> <a alt="home" class="label" href="//futa.moe">
@ -63,15 +71,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section identity-category grid-container shadow"> </div>
<div class="section grid-container">
<div class="identity-category grid-50">
<h2 class="title"> <h2 class="title">
<i aria-hidden="true" class="fas fa-chevron-right"></i> Naoki Rinmous <i aria-hidden="true" class="fas fa-chevron-right"></i> Naoki Rinmous
<span class="no-wrap">
<small class="tag"><i aria-hidden="true" class="fas fa-tag"></i><del>designer</del></small>
<small class="tag"><i aria-hidden="true" class="fas fa-tag"></i>programmer</small>
</span>
</h2> </h2>
<ul class="identities grid-50"> <ul class="identities">
<li class="identity"> <li class="identity">
<a href="https://github.com/amphineko"> <a href="https://github.com/amphineko">
<i aria-hidden="true" class="fab fa-github"></i> <i aria-hidden="true" class="fab fa-github"></i>
@ -86,8 +92,6 @@
<span class="link">@amphineko</span> <span class="link">@amphineko</span>
</a> </a>
</li> </li>
</ul>
<ul class="identities grid-50">
<li class="identity"> <li class="identity">
<a href="https://plus.google.com/104160980463474768448"> <a href="https://plus.google.com/104160980463474768448">
<i aria-hidden="true" class="fab fa-google-plus"></i> <i aria-hidden="true" class="fab fa-google-plus"></i>
@ -118,16 +122,11 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="section identity-category grid-container shadow"> <div class="identity-category grid-45 prefix-5">
<h2 class="title"> <h2 class="title">
<i aria-hidden="true" class="fas fa-chevron-right"></i> NekoSauce <i aria-hidden="true" class="fas fa-chevron-right"></i> NekoSauce
<span class="no-wrap">
<small class="tag no-wrap"><i aria-hidden="true" class="fas fa-tag"></i>gamer</small>
<small class="tag no-wrap"><i aria-hidden="true" class="fas fa-tag"></i>simulation</small>
<small class="tag no-wrap"><i aria-hidden="true" class="fas fa-tag"></i>music-game</small>
</span>
</h2> </h2>
<ul class="identities grid-50"> <ul class="identities">
<li class="identity"> <li class="identity">
<a href="#"> <a href="#">
<i aria-hidden="true" class="fas fa-bicycle"></i> <i aria-hidden="true" class="fas fa-bicycle"></i>
@ -142,8 +141,6 @@
<span class="link">NekoSauce</span> <span class="link">NekoSauce</span>
</a> </a>
</li> </li>
</ul>
<ul class="identities grid-50">
<li class="identity"> <li class="identity">
<a href="#"> <a href="#">
<i aria-hidden="true" class="fas fa-registered"></i> <i aria-hidden="true" class="fas fa-registered"></i>
@ -162,10 +159,14 @@
</div> </div>
</div> </div>
<div class="section shadow"> <div class="section shadow">
<a class="hosting" href="//futa.moe"><i aria-hidden="true" class="far fa-heart"></i> Hosted by 五月研究所 <span class="link">//futa.moe</span></a> <a class="hosting" href="//futa.moe">
<i aria-hidden="true" class="far fa-heart"></i> Hosted by 五月研究所
<span class="link">//futa.moe</span>
</a>
<div class="copyright"> <div class="copyright">
Copyright © 2015-2017 Naoki Rinmous. Illustrations have their own licenses. Copyright © 2015-2017 Naoki Rinmous. Illustrations have their own licenses.
</div> </div>
</div> </div>
</body> </body>
</html> </html>