res/style.css

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