res/style.css

   1 @import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300');
   2
   3 body {
   4     width:100%;
   5     height:100%;
   6     overflow-x:hidden;
   7     font-family:'Cutive Mono', monospace;
   8     color:#FFF1FF;
   9     #background-image:linear-gradient(to right,#00c4f4 0%,#278fba 20%,#278fba 80%,#00c4f4 100%);
  10     #background-color:#278fba;
  11     background:url(http://static.jkinsey.net/img/pinkishstardust.png) #323;
  12 }
  13
  14 menu {
  15     position:absolute;
  16     width:400px;
  17     height:400px;
  18     font-family:'Source Code Pro', monospace;
  19     font-smooth:never;
  20     -webkit-font-smoothing:none;
  21     /*background-color:black;*/
  22 }
  23
  24 menu > div > a {
  25     color:inherit;
  26     text-decoration:none;
  27 }
  28
  29 menu.middle {
  30     left:calc(50% - 200px);
  31     top:calc(50% - 400px);
  32     height:400px;
  33 }
  34
  35 menu.top {
  36     left:calc(50% - 200px);
  37     top:10px;
  38     height:100px;
  39 }
  40
  41 menu, menu > *, menu img, article {
  42     transition:all .6s cubic-bezier(0.23, 1, 0.32, 1);
  43 }
  44
  45 menu.middle #avatar {
  46     display:block;
  47     position:absolute;
  48     right:0px;
  49     bottom:100px;
  50     width:300px;
  51     height:300px;
  52     margin-left:50px;
  53     margin-right:50px;
  54     /*background-color:lightgrey;*/
  55 }
  56
  57 menu.middle #avatar img {
  58     width:256px;
  59     height:256px;
  60     margin:22px;
  61     border-radius:50%;
  62 }
  63
  64 menu.middle #name {
  65     position:absolute;
  66     right:0px;
  67     bottom:50px;
  68     width:100%;
  69     height:50px;
  70     font-size:3em;
  71 }
  72
  73 menu.middle #name h1 {
  74     display:block;
  75     width:100%;
  76     height:50px;
  77     line-height:50px;
  78     text-align:center;
  79 }
  80
  81 menu.top #avatar {
  82     display:inline-block;
  83     position:absolute;
  84     right:300px;
  85     bottom:50px;
  86     width:100px;
  87     height:50px;
  88     text-align:center;
  89     /*background-color:lightgrey;*/
  90 }
  91
  92 menu.top #avatar img {
  93     display:inline-block;
  94     width:50px;
  95     height:50px;
  96     border-radius:50%;
  97 }
  98
  99 menu.top #name {
 100     display:inline-block;
 101     position:absolute;
 102     right:0px;
 103     bottom:50px;
 104     width:300px;
 105     height:50px;
 106     font-size:2.5em;
 107 }
 108
 109 menu.top #name h1 {
 110     display:inline-block;
 111     width:100%;
 112     height:50px;
 113     line-height:50px;
 114     text-align:center;
 115 }
 116
 117 menu nav {
 118     position:absolute;
 119     right:0px;
 120     bottom:0px;
 121     display:flex;
 122     flex-direction:column;
 123 }
 124
 125 menu nav ul {
 126     display:flex;
 127     flex-direction:row;
 128     width:400px;
 129     height:50px;
 130 }
 131
 132 menu nav ul li {
 133     display:inline-block;
 134     text-align:center;
 135     width:25%;
 136     height:50px;
 137     font-size:1.25em;
 138     line-height:50px;
 139 }
 140
 141 menu nav ul li a:link, menu nav ul li a:visited {
 142     text-decoration:none;
 143     color:inherit;
 144 }
 145
 146 menu nav ul li a:hover, menu nav ul li a.selected {
 147     text-decoration:underline;
 148 }
 149
 150
 151 article {
 152     display:flex;
 153     flex-direction:row;
 154     justify-content:space-between;
 155     position:absolute;
 156     top:150px;
 157     left:calc(50% - 400px);
 158     width:800px;
 159     height:auto;
 160 }
 161
 162 article.selected {
 163     opacity:1;
 164     visibility:visible;
 165     top:150px;
 166 }
 167
 168 article.hidden {
 169     opacity:0;
 170     visibility:hidden;
 171     top:200px;
 172 }
 173
 174 article > div {
 175     width:375px;
 176     text-align:justify;
 177 }