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

add site links & fixed layout

Browse Source
This commit is contained in:
椎名奈緒 2016-05-23 19:52:34 +08:00
parent 812bbac7bf
commit 1c251c5e4e
2 changed files with 54 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
assets/css/index.css
View File

@ -71,7 +71,7 @@ body {
} }
#header .content h1 { #header .content h1 {
color: #E9E9E9; color: #C9C9C9;
font-size: 1.7em; font-size: 1.7em;
font-weight: 300; font-weight: 300;
line-height: 3em; line-height: 3em;
@ -79,9 +79,46 @@ body {
} }
#header .content h1 .name { #header .content h1 .name {
color: #F9F9F9;
font-size: 1.2em; font-size: 1.2em;
} }
#site-links {
margin: 0;
margin-bottom: 0.2em;
padding: 0;
}
#site-links .entry {
display: inline-block;
list-style: none;
}
#site-links .entry a {
border-bottom: 0.2em solid #DDD;
color: #4E4B59;
display: block;
margin: 0 0.4em;
padding: 1em 2em;
text-decoration: none;
transition-duration: 0.25s;
}
#site-links .entry a:hover {
border-bottom: 0.4em solid #1E3B59;
margin-bottom: 0;
transition-duration: 0.25s;
}
#site-links .entry a.disabled {
cursor: not-allowed;
}
#site-links .entry i {
margin-right: 0.4em;
vertical-align: middle;
}
#main-box { #main-box {
background: white; background: white;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15);

21
index.html
View File

@ -6,19 +6,19 @@
<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="bower_components/unsemantic/assets/stylesheets/unsemantic-grid-responsive-tablet.css" rel="stylesheet"> <link href="bower_components/unsemantic/assets/stylesheets/unsemantic-grid-responsive-tablet.css" rel="stylesheet">
<link href="assets/css/index.css" rel="stylesheet"> <link href="assets/css/index.css" rel="stylesheet">
<meta author="Naoki Rinmous"> <meta name="author" content="Naoki Rinmous">
<meta charset="utf-8"> <meta charset="utf-8">
<title>Naoki Rinmous is here!</title> <title>Naoki Rinmous is here!</title>
</head> </head>
<body> <body>
<div id="main-box"> <div id="main-box">
<div class="grid-container" id="header"> <div class="grid-container" id="header">
<div class="grid-25"> <div class="grid-25 mobile-grid-100">
<div id="profile-picture-container"> <div id="profile-picture-container">
<span id="profile-picture"></span> <span id="profile-picture"></span>
</div> </div>
</div> </div>
<div class="grid-75 content"> <div class="grid-75 mobile-grid-100 content">
<h1>Hey, it's <span class="name">Naoki Rinmous!</span></h1> <h1>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>
@ -38,8 +38,19 @@
</div> </div>
</div> </div>
</div> </div>
<div class="grid-container" id="site-links">
<div class="grid-20 mobile-grid-100 entry">
<a href="https://futa.moe/"><i class="fa fa-server" aria-hidden="true"></i>futa.moe</a>
</div>
<div class="grid-40 mobile-grid-100 entry">
<a class="disabled" href="#"><i class="fa fa-th-list" aria-hidden="true"></i>Gallery (under construction)</a>
</div>
<div class="grid-40 mobile-grid-100 entry">
<a class="disabled" href="#"><i class="fa fa-code" aria-hidden="true"></i>Blog (under construction)</a>
</div>
</div>
<div class="grid-container" id="body"> <div class="grid-container" id="body">
<div class="grid-50 tile" id="self-introduction"> <div class="grid-50 mobile-grid-100 tile" id="self-introduction">
<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 />
@ -47,7 +58,7 @@
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 tile" id="social-accounts"> <div class="grid-50 mobile-grid-100 tile" id="social-accounts">
<h2>how to reach?</h2> <h2>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>