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