<html>
<head>
- <link rel="stylesheet" href="res/reset.css" />
- <link rel="stylesheet" href="res/style.css" />
+ <link rel="stylesheet" href="/res/reset.css" />
+ <link rel="stylesheet" href="/res/style.css" />
- <script src="js/script.js"></script>
+ <script src="/js/script.js"></script>
<title>Jack Kinsey</title>
</head>
<body>
<menu id="menu" class="middle">
- <div id="avatar"><img src="res/face.png"></img></div>
- <div id="name"><h1>Jack Kinsey</h1></div>
+ <div id="avatar"><a href="/" class="home"><img src="/res/face.png"></img></a></div></a>
+ <div id="name"><a href="/" class="home"><h1>Jack Kinsey</h1></a></div>
<nav id="links">
<ul>
<li><a href="/writing" data-name="writing">Writing</a></li>
</nav>
</menu>
- <article></article>
- <article></article>
- <article></article>
+ <article id="writing" class="hidden clear">
+ <div class="left">
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <br>
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ </div>
+ <div class="right">
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <br>
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ </div>
+ </article>
+ <article id="code" class="hidden clear">
+ <div class="left">
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <br>
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ </div>
+ <div class="right">
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <br>
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ </div>
+ </article>
+ <article id="about" class="hidden clear">
+ <div class="left">
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <br>
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ </div>
+ <div class="right">
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <br>
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ </div>
+ </article>
</body>
</html>
<html>
<head>
- <link rel="stylesheet" href="res/reset.css" />
- <link rel="stylesheet" href="res/style.css" />
+ <link rel="stylesheet" href="/res/reset.css" />
+ <link rel="stylesheet" href="/res/style.css" />
- <script src="js/script.js"></script>
+ <script src="/js/script.js"></script>
<title>Jack Kinsey</title>
</head>
<body>
<menu id="menu" class="middle">
- <div id="avatar"><img src="res/face.png"></img></div>
- <div id="name"><h1>Jack Kinsey</h1></div>
+ <div id="avatar"><a href="/" class="home"><img src="/res/face.png"></img></a></div></a>
+ <div id="name"><a href="/" class="home"><h1>Jack Kinsey</h1></a></div>
<nav id="links">
<ul>
<li><a href="/writing" data-name="writing">Writing</a></li>
</nav>
</menu>
- <article></article>
- <article></article>
- <article></article>
+ <article id="writing" class="hidden clear">
+ <div class="left">
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <br>
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ </div>
+ <div class="right">
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <br>
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ </div>
+ </article>
+ <article id="code" class="hidden clear">
+ <div class="left">
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <br>
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ </div>
+ <div class="right">
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <br>
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ </div>
+ </article>
+ <article id="about" class="hidden clear">
+ <div class="left">
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <br>
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ </div>
+ <div class="right">
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <br>
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ </div>
+ </article>
</body>
</html>
<html>
<head>
- <link rel="stylesheet" href="res/reset.css" />
- <link rel="stylesheet" href="res/style.css" />
+ <link rel="stylesheet" href="/res/reset.css" />
+ <link rel="stylesheet" href="/res/style.css" />
- <script src="js/script.js"></script>
+ <script src="/js/script.js"></script>
<title>Jack Kinsey</title>
</head>
<body>
<menu id="menu" class="middle">
- <div id="avatar"><img src="res/face.png"></img></div>
- <div id="name"><h1>Jack Kinsey</h1></div>
+ <div id="avatar"><a href="/" class="home"><img src="/res/face.png"></img></a></div></a>
+ <div id="name"><a href="/" class="home"><h1>Jack Kinsey</h1></a></div>
<nav id="links">
<ul>
<li><a href="/writing" data-name="writing">Writing</a></li>
</nav>
</menu>
- <article></article>
- <article></article>
- <article></article>
+ <article id="writing" class="hidden clear">
+ <div class="left">
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <br>
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ </div>
+ <div class="right">
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <br>
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ </div>
+ </article>
+ <article id="code" class="hidden clear">
+ <div class="left">
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <br>
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ </div>
+ <div class="right">
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <br>
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ </div>
+ </article>
+ <article id="about" class="hidden clear">
+ <div class="left">
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <br>
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ </div>
+ <div class="right">
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <br>
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ </div>
+ </article>
</body>
</html>
window.addEventListener('load', function() {
- var menuLoc = 0;
var links = document.getElementById("links").children[0].children;
- var menu = document.getElementById("menu");
- function menuMove(node) {
- if(menuLoc) return;
- menu.setAttribute("class", "top");
- setTimeout(function() { menu.setAttribute("class", "left") }, 600);
- menuLoc = 1;
+ var home = document.getElementsByClassName("home");
+ var directions = [];
+ for(var i = 0; i < links.length - 1; i++) {
+ directions.push(links[i]);
+ }
+ for(var i = 0; i < home.length; i++) {
+ directions.push(home[i]);
}
- for(var i = 0; i < links.length; i++) {
- links[i].onclick = function(node) { menuMove(node); };
+ var menu = document.getElementById("menu");
+ var menuLoc = parseInt(getComputedStyle(menu).getPropertyValue("top"));
+
+ for(var i = 0; i < directions.length; i++) {
+ directions[i].children[0].onclick = function(event) {
+ event.preventDefault();
+ var node = event.currentTarget;
+ if(menuLoc != 10) {
+ menuLoc = 0;
+ menu.setAttribute("class", "top");
+ window.history.pushState("object or string", "Title", node.href);
+ } else {
+ window.history.pushState("object or string", "Title", node.href);
+ }
+ };
}
}, false);
@import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300');
body {
- background-color:#7F7977;
width:100%;
height:100%;
overflow-x:hidden;
- font-family:'Cutive Mono';
+ font-family:'Cutive Mono', monospace;
color:#FFF1FF;
+ #background-image:linear-gradient(to right,#00c4f4 0%,#278fba 20%,#278fba 80%,#00c4f4 100%);
+ background-color:#278fba;
}
menu {
position:absolute;
width:400px;
height:400px;
+ font-family:'Source Code Pro', monospace;
font-smooth:never;
-webkit-font-smoothing:none;
/*background-color:black;*/
- transition:all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+menu > div > a {
+ color:inherit;
+ text-decoration:none;
}
menu.middle {
left:calc(50% - 200px);
top:calc(50% - 400px);
+ height:400px;
}
menu.top {
left:calc(50% - 200px);
- top:0px;
-}
-
-menu.left {
- left:0px;
- top:0px;
+ top:10px;
+ height:100px;
}
-menu nav {
- display:flex;
- flex-direction:column;
+menu, menu > *, menu img {
+ transition:all .6s cubic-bezier(0.23, 1, 0.32, 1);
}
-menu #avatar {
+menu.middle #avatar {
display:block;
+ position:absolute;
+ right:0px;
+ bottom:100px;
width:300px;
height:300px;
margin-left:50px;
/*background-color:lightgrey;*/
}
-menu #avatar img {
+menu.middle #avatar img {
width:256px;
height:256px;
margin:22px;
border-radius:50%;
}
-menu #name {
+menu.middle #name {
+ position:absolute;
+ right:0px;
+ bottom:50px;
width:100%;
height:50px;
font-size:3em;
}
-menu #name h1 {
+menu.middle #name h1 {
display:block;
width:100%;
height:50px;
text-align:center;
}
+menu.top #avatar {
+ display:inline-block;
+ position:absolute;
+ right:300px;
+ bottom:50px;
+ width:100px;
+ height:50px;
+ text-align:center;
+ /*background-color:lightgrey;*/
+}
+
+menu.top #avatar img {
+ display:inline-block;
+ width:50px;
+ height:50px;
+ border-radius:50%;
+}
+
+menu.top #name {
+ display:inline-block;
+ position:absolute;
+ right:0px;
+ bottom:50px;
+ width:300px;
+ height:50px;
+ font-size:2.5em;
+}
+
+menu.top #name h1 {
+ display:inline-block;
+ width:100%;
+ height:50px;
+ line-height:50px;
+ text-align:center;
+}
+
+menu nav {
+ position:absolute;
+ right:0px;
+ bottom:0px;
+ display:flex;
+ flex-direction:column;
+}
+
menu nav ul {
display:flex;
flex-direction:row;
- width:350px;
- margin-left:25px;
- margin-right:25px;
+ width:400px;
height:50px;
}
menu nav ul li a:hover {
text-decoration:underline;
}
+
+
+article {
+ display:flex;
+ flex-direction:row;
+ justify-content:space-between;
+ position:absolute;
+ top:150px;
+ left:calc(50% - 400px);
+ width:800px;
+ height:auto;
+ opacity:1;
+}
+
+article.hidden {
+ display:none;
+}
+
+article.clear {
+ opacity:0;
+}
+
+article > div {
+ width:375px;
+ text-align:justify;
+}
<html>
<head>
- <link rel="stylesheet" href="res/reset.css" />
- <link rel="stylesheet" href="res/style.css" />
+ <link rel="stylesheet" href="/res/reset.css" />
+ <link rel="stylesheet" href="/res/style.css" />
- <script src="js/script.js"></script>
+ <script src="/js/script.js"></script>
<title>Jack Kinsey</title>
</head>
<body>
<menu id="menu" class="middle">
- <div id="avatar"><img src="res/face.png"></img></div>
- <div id="name"><h1>Jack Kinsey</h1></div>
+ <div id="avatar"><a href="/" class="home"><img src="/res/face.png"></img></a></div></a>
+ <div id="name"><a href="/" class="home"><h1>Jack Kinsey</h1></a></div>
<nav id="links">
<ul>
<li><a href="/writing" data-name="writing">Writing</a></li>
</nav>
</menu>
- <article></article>
- <article></article>
- <article></article>
+ <article id="writing" class="hidden clear">
+ <div class="left">
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <br>
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ </div>
+ <div class="right">
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <br>
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ </div>
+ </article>
+ <article id="code" class="hidden clear">
+ <div class="left">
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <br>
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ </div>
+ <div class="right">
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <br>
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ </div>
+ </article>
+ <article id="about" class="hidden clear">
+ <div class="left">
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <br>
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ </div>
+ <div class="right">
+Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <br>
+ Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ </div>
+ </article>
</body>
</html>
projects / jkinsey.net.git / commitdiff