projects
/
jkinsey.net.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
updates to structure, css, js
[jkinsey.net.git]
/
res
/
style.css
diff --git
a/res/style.css
b/res/style.css
index 82280192b66728f89333763c4450258dc766952e..fa49b94ae8d6c8eb2c82df5487e4aaccfb386703 100644
(file)
--- 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 {
@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;
width:100%;
height:100%;
overflow-x:hidden;
- font-family:'Cutive Mono';
+ font-family:'Cutive Mono'
, monospace
;
color:#FFF1FF;
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;
}
menu {
position:absolute;
width:400px;
height:400px;
+ font-family:'Source Code Pro', monospace;
font-smooth:never;
-webkit-font-smoothing:none;
/*background-color:black;*/
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);
}
menu.middle {
left:calc(50% - 200px);
top:calc(50% - 400px);
+ height:400px;
}
menu.top {
left:calc(50% - 200px);
}
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;
display:block;
+ position:absolute;
+ right:0px;
+ bottom:100px;
width:300px;
height:300px;
margin-left:50px;
width:300px;
height:300px;
margin-left:50px;
@@
-48,20
+53,23
@@
menu #avatar {
/*background-color:lightgrey;*/
}
/*background-color:lightgrey;*/
}
-menu #avatar img {
+menu
.middle
#avatar img {
width:256px;
height:256px;
margin:22px;
border-radius:50%;
}
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;
}
width:100%;
height:50px;
font-size:3em;
}
-menu #name h1 {
+menu
.middle
#name h1 {
display:block;
width:100%;
height:50px;
display:block;
width:100%;
height:50px;
@@
-69,12
+77,54
@@
menu #name h1 {
text-align:center;
}
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;
menu nav ul {
display:flex;
flex-direction:row;
- width:350px;
- margin-left:25px;
- margin-right:25px;
+ width:400px;
height:50px;
}
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;
}
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;
+}