X-Git-Url: http://git.jkinsey.net/?p=jkinsey.net.git;a=blobdiff_plain;f=res%2Fstyle.css;fp=res%2Fstyle.css;h=82280192b66728f89333763c4450258dc766952e;hp=2f3e444868c346eabd6bc0c7ff3486d154a4cf84;hb=d7edfd5512523bef75e659c2706ed0c443144c13;hpb=4bbfb028ef8bbe2177080b06c39574079635c39d diff --git a/res/style.css b/res/style.css index 2f3e444..8228019 100644 --- a/res/style.css +++ b/res/style.css @@ -1,7 +1,7 @@ @import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300'); body { - background-color:grey; + background-color:#7F7977; width:100%; height:100%; overflow-x:hidden; @@ -13,11 +13,25 @@ menu { position:absolute; width:400px; height:400px; - left:calc(50% - 200px); - top:calc(50% - 200px); font-smooth:never; -webkit-font-smoothing:none; - background-color:black; + /*background-color:black;*/ + transition:all .125s cubic-bezier(0.075, 0.82, 0.165, 1); +} + +menu.middle { + left:calc(50% - 200px); + top:calc(50% - 400px); +} + +menu.top { + left:calc(50% - 200px); + top:0px; +} + +menu.left { + left:0px; + top:0px; } menu nav { @@ -25,19 +39,34 @@ menu nav { flex-direction:column; } -menu div { +menu #avatar { display:block; width:300px; height:300px; margin-left:50px; margin-right:50px; - background-color:lightgrey; + /*background-color:lightgrey;*/ } -menu div img { +menu #avatar img { width:256px; height:256px; margin:22px; + border-radius:50%; +} + +menu #name { + width:100%; + height:50px; + font-size:3em; +} + +menu #name h1 { + display:block; + width:100%; + height:50px; + line-height:50px; + text-align:center; } menu nav ul { @@ -46,14 +75,23 @@ menu nav ul { width:350px; margin-left:25px; margin-right:25px; - height:100px; + height:50px; } menu nav ul li { display:inline-block; text-align:center; width:25%; - height:100px; + height:50px; font-size:1.25em; - line-height:100px; + line-height:50px; +} + +menu nav ul li a:link, menu nav ul li a:visited { + text-decoration:none; + color:inherit; +} + +menu nav ul li a:hover { + text-decoration:underline; }