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 header {
  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 header > div > a {
  50     color:inherit;
  51     text-decoration:none;
  52 }
  53
  54 header.middle {
  55     left:calc(50% - 200px);
  56     top:calc(50% - 400px);
  57     height:400px;
  58 }
  59
  60 header.top {
  61     left:calc(50% - 200px);
  62     top:10px;
  63     height:100px;
  64 }
  65
  66 header, header > *, header img, article {
  67     transition:all .6s cubic-bezier(0.23, 1, 0.32, 1);
  68 }
  69
  70 header.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 header.middle #avatar img {
  83     width:256px;
  84     height:256px;
  85     margin:22px;
  86     border-radius:50%;
  87 }
  88
  89 header.middle #name {
  90     position:absolute;
  91     right:0px;
  92     bottom:50px;
  93     width:100%;
  94     height:50px;
  95     font-size:3em;
  96 }
  97
  98 header.middle #name h1 {
  99     display:block;
 100     width:100%;
 101     height:50px;
 102     line-height:50px;
 103     text-align:center;
 104 }
 105
 106 header.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 header.top #avatar img {
 118     display:inline-block;
 119     width:50px;
 120     height:50px;
 121     border-radius:50%;
 122 }
 123
 124 header.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 header.top #name h1 {
 135     display:inline-block;
 136     width:100%;
 137     height:50px;
 138     line-height:50px;
 139     text-align:center;
 140 }
 141
 142 header nav {
 143     position:absolute;
 144     right:0px;
 145     bottom:0px;
 146     display:flex;
 147     flex-direction:column;
 148 }
 149
 150 header nav ul {
 151     display:flex;
 152     flex-direction:row;
 153     width:400px;
 154     height:50px;
 155 }
 156
 157 header 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 header nav ul li a:link, header nav ul li a:visited {
 167     text-decoration:none;
 168     color:inherit;
 169 }
 170
 171 header nav ul li a:hover, header nav ul li a.selected {
 172     text-decoration:underline;
 173 }
 174
 175
 176 article {
 177     display:flex;
 178     flex-direction:row;
 179     flex-wrap:wrap;
 180     justify-content:space-between;
 181     position:absolute;
 182     top:150px;
 183     left:calc(50% - 400px);
 184     width:800px;
 185     height:auto;
 186 }
 187
 188 article.selected {
 189     opacity:1;
 190     visibility:visible;
 191     top:150px;
 192 }
 193
 194 article.hidden {
 195     opacity:0;
 196     visibility:hidden;
 197     top:200px;
 198 }
 199
 200 article div {
 201     width:350px;
 202     margin:25px;
 203 }
 204
 205 article div h2 {
 206     margin-bottom:5px;
 207     font-size:1.5em;
 208 }
 209
 210 article div h2 a:link, article div h2 a:visited {
 211     color:inherit;
 212 }
 213
 214 article div h2 a:hover {
 215 }
 216
 217 article div p {
 218     margin-top:5px;
 219     font-weight:bold;
 220 }
 221
 222 article div p a:link, article div p a:visited {
 223     color:inherit;
 224 }
 225
 226 article div p a:hover {
 227 }
 228
 229 #about div {
 230     width:600px;
 231     margin:25px 100px 25px 100px;
 232 }
 233
 234 #about div h2 {
 235
 236 }
 237
 238 #about div p {
 239
 240 }