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