Jack Kinsey

From e29d9cc468c3a9b5e586ed723e3c0110a0163e0d Mon Sep 17 00:00:00 2001 From: Jack Kinsey Date: Sat, 22 Apr 2017 20:15:30 -0400 Subject: [PATCH] updates to structure, css, js --- about/index.html | 49 +++++++++++++++---- code/index.html | 49 +++++++++++++++---- index.html | 49 +++++++++++++++---- js/script.js | 31 ++++++++---- res/style.css | 114 +++++++++++++++++++++++++++++++++++++-------- writing/index.html | 49 +++++++++++++++---- 6 files changed, 281 insertions(+), 60 deletions(-) diff --git a/about/index.html b/about/index.html index feed348..bb089b1 100644 --- a/about/index.html +++ b/about/index.html @@ -1,17 +1,17 @@ - - + + - + Jack Kinsey -

-

-

+ + + diff --git a/code/index.html b/code/index.html index feed348..bb089b1 100644 --- a/code/index.html +++ b/code/index.html @@ -1,17 +1,17 @@ - - + + - + Jack Kinsey -

-

-

+ + + diff --git a/index.html b/index.html index feed348..bb089b1 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,17 @@ - - + + - + Jack Kinsey -

-

-

+ + + diff --git a/js/script.js b/js/script.js index 1fabcaf..c5f2c7a 100644 --- a/js/script.js +++ b/js/script.js @@ -1,14 +1,27 @@ 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); diff --git a/res/style.css b/res/style.css index 8228019..fa49b94 100644 --- a/res/style.css +++ b/res/style.css @@ -1,46 +1,51 @@ @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; @@ -48,20 +53,23 @@ menu #avatar { /*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; @@ -69,12 +77,54 @@ menu #name h1 { 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; } @@ -95,3 +145,29 @@ menu nav ul li a:link, menu nav ul li a:visited { 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; +} diff --git a/writing/index.html b/writing/index.html index feed348..bb089b1 100644 --- a/writing/index.html +++ b/writing/index.html @@ -1,17 +1,17 @@ - - + + - + Jack Kinsey -

-

-

+ + + -- 2.38.5