refactor stylesheet
This commit is contained in:
椎名奈緒
parent
825913b235
commit
fa60aeea36
179
assets/css/index.v2.css
Normal file
179
assets/css/index.v2.css
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
body, html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: url('../images/darknoise.png');
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, Arial, 'Microsoft YaHei', STXihei, 华文细黑, 微软雅黑, SimSun, 宋体, Heiti, 黑体, sans-serif;
|
||||||
|
padding: 2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account a, .account i {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1.5em;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account i {
|
||||||
|
font-size: 1.3em;
|
||||||
|
text-align: center;
|
||||||
|
width: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-dark a {
|
||||||
|
color: #264566;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-dark i {
|
||||||
|
color: #480808;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-dark span {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-white a {
|
||||||
|
color: #FAFAFA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-white i {
|
||||||
|
color: #EAEAEA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-blue {
|
||||||
|
background: #385068;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-grey {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-shadow {
|
||||||
|
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-white {
|
||||||
|
background: #FAFAFA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
color: #EAEAEA;
|
||||||
|
font-size: 0.8em;
|
||||||
|
line-height: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer span a {
|
||||||
|
color: #759BC2;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-showcase {
|
||||||
|
border-bottom: 2px dashed #385068;
|
||||||
|
padding: 0.5em 0.5em 0.6em 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-showcase .entry {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-showcase .entry .link {
|
||||||
|
color: #3E3B49;
|
||||||
|
display: block;
|
||||||
|
font-size: 1.1em;
|
||||||
|
line-height: 3em;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-showcase .entry .link:hover::after, .link-showcase .entry a:hover::before {
|
||||||
|
color: #1E3B59;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 0.5em;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-showcase .entry .link:hover::after {
|
||||||
|
content: ']';
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-showcase .entry .link:hover::before {
|
||||||
|
content: '[';
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-showcase .entry .disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-showcase .entry i {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding-bottom: 1em;
|
||||||
|
padding-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .title {
|
||||||
|
color: #DDD;
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .title .name {
|
||||||
|
color: #EEE;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin-wrap {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 64em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picture-container {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-height: 16em;
|
||||||
|
max-width: 16em;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picture-container::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
padding-top: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picture {
|
||||||
|
background: url('../images/headpic.png');
|
||||||
|
background-size: 100%;
|
||||||
|
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 50%;
|
||||||
|
bottom: 1em;
|
||||||
|
display: block;
|
||||||
|
left: 1em;
|
||||||
|
position: absolute;
|
||||||
|
right: 1em;
|
||||||
|
top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile {
|
||||||
|
color: #333;
|
||||||
|
line-height: 2em;
|
||||||
|
padding-bottom: 2em;
|
||||||
|
padding-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile .title {
|
||||||
|
color: #222;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
56
index.html
56
index.html
@ -4,46 +4,46 @@
|
|||||||
<head>
|
<head>
|
||||||
<link href="bower_components/normalize-css/normalize.css" rel="stylesheet">
|
<link href="bower_components/normalize-css/normalize.css" rel="stylesheet">
|
||||||
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||||
<link href="assets/css/index.css" rel="stylesheet">
|
|
||||||
<link href="bower_components/unsemantic/assets/stylesheets/unsemantic-grid-responsive.css" rel="stylesheet">
|
<link href="bower_components/unsemantic/assets/stylesheets/unsemantic-grid-responsive.css" rel="stylesheet">
|
||||||
|
<link href="assets/css/index.v2.css" rel="stylesheet">
|
||||||
<meta name="author" content="Naoki Rinmous">
|
<meta name="author" content="Naoki Rinmous">
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Naoki Rinmous is here!</title>
|
<title>Naoki Rinmous is here!</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="main-box">
|
<div class="margin-wrap">
|
||||||
<div class="grid-container" id="header">
|
<div class="block block-blue grid-container">
|
||||||
<div class="grid-25 mobile-grid-100">
|
<div class="grid-25 mobile-grid-100">
|
||||||
<div id="profile-picture-container">
|
<div class="picture-container">
|
||||||
<span id="profile-picture"></span>
|
<span class="picture"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-75 mobile-grid-100 content">
|
<div class="grid-75 mobile-grid-100 header">
|
||||||
<h1>Hey, it's <span class="name">Naoki Rinmous!</span></h1>
|
<h1 class="title">Hey, it's <span class="name">Naoki Rinmous!</span></h1>
|
||||||
<div class="account account-white">
|
<div class="account account-white">
|
||||||
<i class="fa fa-key" aria-hidden="true"></i>
|
<i class="fa fa-key" aria-hidden="true"></i>
|
||||||
<a href="https://keybase.io/amphineko">keybase.io/amphineko</a>
|
<a class="link" href="https://keybase.io/amphineko">keybase.io/amphineko</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="account account-white">
|
<div class="account account-white">
|
||||||
<i class="fa fa-github" aria-hidden="true"></i>
|
<i class="fa fa-github" aria-hidden="true"></i>
|
||||||
<a href="https://github.com/amphineko">@amphineko</a>
|
<a class="link" href="https://github.com/amphineko">@amphineko</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-container" id="site-links">
|
<div class="block block-white link-showcase grid-container">
|
||||||
<div class="grid-20 mobile-grid-100 entry">
|
<div class="grid-33 mobile-grid-100 entry">
|
||||||
<a href="https://futa.moe/"><i class="fa fa-server" aria-hidden="true"></i>futa.moe</a>
|
<a class="link" href="https://futa.moe/"><i class="fa fa-server" aria-hidden="true"></i>futa.moe networking</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-40 mobile-grid-100 entry">
|
<div class="grid-33 mobile-grid-100 entry">
|
||||||
<a class="disabled" href="#"><i class="fa fa-th-list" aria-hidden="true"></i>Gallery (under construction)</a>
|
<a class="link disabled" href="#"><i class="fa fa-th-list" aria-hidden="true"></i>Gallery (under construction)</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-40 mobile-grid-100 entry">
|
<div class="grid-33 mobile-grid-100 entry">
|
||||||
<a class="disabled" href="#"><i class="fa fa-code" aria-hidden="true"></i>Blog (under construction)</a>
|
<a class="link disabled" href="#"><i class="fa fa-code" aria-hidden="true"></i>Blog (under construction)</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-container" id="body">
|
<div class="block block-white grid-container">
|
||||||
<div class="grid-50 mobile-grid-100 tile" id="self-introduction">
|
<div class="grid-50 mobile-grid-100 tile">
|
||||||
<h2>who am I...</h2>
|
<h2>who am I...</h2>
|
||||||
<p>
|
<p>
|
||||||
a simple & naïve senior student,<br />
|
a simple & naïve senior student,<br />
|
||||||
@ -51,38 +51,38 @@
|
|||||||
trying to change the way to live for people
|
trying to change the way to live for people
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-50 mobile-grid-100 tile" id="social-accounts">
|
<div class="grid-50 mobile-grid-100 tile">
|
||||||
<h2>how to reach?</h2>
|
<h2 class="title">how to reach?</h2>
|
||||||
<div class="account account-dark">
|
<div class="account account-dark">
|
||||||
<i class="fa fa-plane" aria-hidden="true"></i>
|
<i class="fa fa-plane" aria-hidden="true"></i>
|
||||||
<span>Ingress Agent</span>
|
<span>Ingress Agent</span>
|
||||||
<a href="#">@NekoSauce</a>
|
<a class="link" href="#">@NekoSauce</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="account account-dark">
|
<div class="account account-dark">
|
||||||
<i class="fa fa-steam" aria-hidden="true"></i>
|
<i class="fa fa-steam" aria-hidden="true"></i>
|
||||||
<span>Steam</span>
|
<span>Steam</span>
|
||||||
<a href="https://steamcommunity.com/id/Amphineko/">NekoSauce</a>
|
<a class="link" href="https://steamcommunity.com/id/Amphineko/">NekoSauce</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="account account-dark">
|
<div class="account account-dark">
|
||||||
<i class="fa fa-send" aria-hidden="true"></i>
|
<i class="fa fa-send" aria-hidden="true"></i>
|
||||||
<span>Telegram</span>
|
<span>Telegram</span>
|
||||||
<a href="https://telegram.me/amphineko">@amphineko</a>
|
<a class="link" href="https://telegram.me/amphineko">@amphineko</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="account account-dark">
|
<div class="account account-dark">
|
||||||
<i class="fa fa-twitter" aria-hidden="true"></i>
|
<i class="fa fa-twitter" aria-hidden="true"></i>
|
||||||
<span>Twitter</span>
|
<span>Twitter</span>
|
||||||
<a href="https://twitter.com/amphineko">@amphineko</a>
|
<a class="link" href="https://twitter.com/amphineko">@amphineko</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="account account-dark">
|
<div class="account account-dark">
|
||||||
<i class="fa fa-weibo" aria-hidden="true"></i>
|
<i class="fa fa-weibo" aria-hidden="true"></i>
|
||||||
<span>Weibo</span>
|
<span>Weibo</span>
|
||||||
<a href="http://weibo.com/uncookie">@(uid=uncookie)</a>
|
<a class="link" href="http://weibo.com/uncookie">@(uid=uncookie)</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="footer">
|
<div class="block block-grey footer grid-container" >
|
||||||
<span>Copyright © 2016 Naoki Rinmous.</span>
|
<span class="grid-50 mobile-grid-100">Copyright © 2015-2016 Naoki Rinmous.</span>
|
||||||
<span>Powered by <a href="https://github.com/necolas/normalize.css/">normalize.css</a>, <a href="http://fontawesome.io/">Font Awesome</a> and <a href="http://unsemantic.com/">unsemantic</a>.</span>
|
<span class="grid-50 mobile-grid-100">Powered by <a href="https://github.com/necolas/normalize.css/">normalize.css</a>, <a href="http://fontawesome.io/">Font Awesome</a> and <a href="http://unsemantic.com/">unsemantic</a>.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user