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