res/style.css

   1 @import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300');
   2
   3 body {
   4     background-color:#7F7977;
   5     width:100%;
   6     height:100%;
   7     overflow-x:hidden;
   8     font-family:'Cutive Mono';
   9     color:#FFF1FF;
  10 }
  11
  12 menu {
  13     position:absolute;
  14     width:400px;
  15     height:400px;
  16     font-smooth:never;
  17     -webkit-font-smoothing:none;
  18     /*background-color:black;*/
  19     transition:all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
  20 }
  21
  22 menu.middle {
  23     left:calc(50% - 200px);
  24     top:calc(50% - 400px);
  25 }
  26
  27 menu.top {
  28     left:calc(50% - 200px);
  29     top:0px;
  30 }
  31
  32 menu.left {
  33     left:0px;
  34     top:0px;
  35 }
  36
  37 menu nav {
  38     display:flex;
  39     flex-direction:column;
  40 }
  41
  42 menu #avatar {
  43     display:block;
  44     width:300px;
  45     height:300px;
  46     margin-left:50px;
  47     margin-right:50px;
  48     /*background-color:lightgrey;*/
  49 }
  50
  51 menu #avatar img {
  52     width:256px;
  53     height:256px;
  54     margin:22px;
  55     border-radius:50%;
  56 }
  57
  58 menu #name {
  59     width:100%;
  60     height:50px;
  61     font-size:3em;
  62 }
  63
  64 menu #name h1 {
  65     display:block;
  66     width:100%;
  67     height:50px;
  68     line-height:50px;
  69     text-align:center;
  70 }
  71
  72 menu nav ul {
  73     display:flex;
  74     flex-direction:row;
  75     width:350px;
  76     margin-left:25px;
  77     margin-right:25px;
  78     height:50px;
  79 }
  80
  81 menu nav ul li {
  82     display:inline-block;
  83     text-align:center;
  84     width:25%;
  85     height:50px;
  86     font-size:1.25em;
  87     line-height:50px;
  88 }
  89
  90 menu nav ul li a:link, menu nav ul li a:visited {
  91     text-decoration:none;
  92     color:inherit;
  93 }
  94
  95 menu nav ul li a:hover {
  96     text-decoration:underline;
  97 }