css/main.css

   1 @font-face {
   2     font-family: 'Fira Sans';
   3     font-style: normal;
   4     font-weight: 300;
   5     src: local('Fira Sans OT Light'), local('Fira Sans Light'), url(FiraSans-Light.woff) format('woff');
   6 }
   7
   8 @font-face {
   9     font-family: 'Fira Sans';
  10     font-style: italic;
  11     font-weight: 300;
  12     src: local('Fira Sans OT Light Italic'), local('Fira Sans Light Italic'), url(FiraSans-LightItalic.woff) format('woff');
  13 }
  14
  15 @font-face {
  16     font-family: 'Fira Sans';
  17     font-style: normal;
  18     font-weight: 400;
  19     src: local('Fira Sans OT'), local('Fira Sans'), url(FiraSans-Regular.woff) format('woff');
  20 }
  21
  22 @font-face {
  23     font-family: 'Fira Sans';
  24     font-style: normal;
  25     font-weight: 700;
  26     src: local('Fira Sans OT Bold'), local('Fira Sans Bold'), url(FiraSans-Bold.woff) format('woff');
  27 }
  28
  29 @font-face {
  30     font-family: 'Fira Sans';
  31     font-style: italic;
  32     font-weight: 400;
  33     src: local('Fira Sans OT Italic'), local('Fira Sans Italic'), url(FiraSans-Italic.woff) format('woff');
  34 }
  35
  36 @font-face {
  37     font-family: 'Fira Sans';
  38     font-style: italic;
  39     font-weight: 700;
  40     src: local('Fira Sans OT Bold Italic'), local('Fira Sans Bold Italic'), url(FiraSans-BoldItalic.woff) format('woff');
  41 }
  42
  43 @font-face {
  44     font-family: 'Fira Mono';
  45     font-style: normal;
  46     font-weight: 400;
  47     src: local('Fira Mono OT'), local('Fira Mono'), url(FiraMono-Regular.woff) format('woff');
  48 }
  49
  50 @font-face {
  51     font-family: 'Fira Mono';
  52     font-style: normal;
  53     font-weight: 700;
  54     src: local('Fira Mono OT Bold'), local('Fira Mono Bold'), url(FiraMono-Bold.woff) format('woff');
  55 }
  56
  57 * {
  58     padding: 0;
  59     margin: 0;
  60     font-weight: normal;
  61     text-decoration: none;
  62 }
  63
  64 strong { font-weight: bold; }
  65 em { font-style: italic; }
  66
  67 a:link, [onclick] {
  68     text-decoration: underline;
  69     cursor: pointer;
  70 }
  71
  72 html {
  73     font-family: "Fira Sans", sans-serif;
  74     font-size: 16px;
  75     background-color: rgb(226, 192, 242);
  76     background-image: linear-gradient(rgb(226, 192, 242), rgb(244, 199, 199) 100%);
  77     background-attachment: fixed;
  78     padding: 0 1em;
  79     height: 100%;
  80     background-repeat: no-repeat;
  81 }
  82
  83 body {
  84     border-top: solid rgb(206, 132, 242) 0.75em;
  85     border-bottom: solid rgb(244, 126, 126) 0.75em;
  86     border-radius: 2em;
  87     margin: 0.25em auto;
  88     color: black;
  89     background-color: white;
  90     max-width: 56em;
  91     padding: 0 1em;
  92 }
  93
  94 header {
  95     border-top: solid rgb(206, 132, 242) 0.5em;
  96     border-bottom: solid rgb(244, 126, 126) 0.5em;
  97     border-radius: 2em;
  98     height: 6em;
  99     transition: border-color 0.5s;
 100     white-space: nowrap;
 101     text-align: right;
 102     margin: 0 -1em;
 103     margin-top: -0.75em;
 104     background-color: white;
 105 }
 106
 107 header img {
 108     float: left;
 109     height: 100%;
 110     width: auto;
 111 }
 112
 113 header h1 {
 114     font-size: 3em;
 115     font-weight: normal;
 116     margin-right: 0.25em;
 117     display: inline-block;
 118     height: 100%;
 119     line-height: 2em;
 120 }
 121
 122 header:hover {
 123     border-top-color: rgb(244, 126, 126);
 124     border-bottom-color: rgb(206, 132, 242);
 125 }
 126
 127 img.logo {
 128     -webkit-transition: -webkit-transform 1.5s;
 129     transition: transform 1.5s;
 130     -webkit-transition-delay: 0.5s;
 131     transition-delay: 0.5s;
 132     -webkit-transition-timing-function: cubic-bezier(0.4, 0.2, 0.5, 1.3);
 133     transition-timing-function: cubic-bezier(0.4, 0.2, 0.5, 1.3);
 134 }
 135
 136 img.logo:hover {
 137     -webkit-transform: rotate(360deg);
 138     transform: rotate(360deg);
 139 }
 140
 141 h2 {
 142     border-top: solid rgb(206, 132, 242) 1px;
 143     border-left: solid rgb(206, 132, 242) 1px;
 144     border-radius: 1em 0 0 1em;
 145     font-size: 1.25em;
 146     font-weight: 300;
 147     margin-left: -0.67em;
 148     margin-right: -0.67em;
 149     margin-top: 1.5em;
 150     margin-bottom: 0.5em;
 151     padding-left: 0.5em;
 152     padding-top: 0.125em;
 153 }
 154
 155 h3 {
 156     border-top: solid rgb(206, 132, 242) 1px;
 157     border-left: solid rgb(206, 132, 242) 1px;
 158     border-radius: 1.5em;
 159     display: inline-block;
 160     font-size: 1.125em;
 161     font-weight: 300;
 162     margin-bottom: 0;
 163     margin-left: -0.445em;
 164     padding-left: 0.67em;
 165     padding-right: 0.67em;
 166 }
 167
 168 a:link, [onclick] {
 169     color: rgb(206, 132, 242);
 170     transition: color 0.3s;
 171 }
 172
 173 a:visited {
 174     color: rgb(206, 132, 242);
 175 }
 176
 177 a:hover, [onclick]:hover {
 178     color: rgb(244, 126, 126);
 179 }
 180
 181 main {
 182     display: block;
 183     padding: 1em;
 184     max-width: 50em;
 185     margin: auto;
 186 }
 187
 188 main > *:first-child {
 189     margin-top: 0;
 190 }
 191
 192 p, li {
 193     line-height: 125%;
 194 }
 195
 196 main > p {
 197     max-width: 45em;
 198     margin: 1em auto;
 199 }
 200
 201 main > ul {
 202     max-width: 40em;
 203     margin: 1em auto;
 204 }
 205
 206 main > ul > li {
 207     margin: 0.5em auto;
 208 }
 209
 210 hr {
 211     margin-top: 0;
 212     margin-bottom: 1em;
 213     border-bottom: solid rgb(206, 132, 242) 1px;
 214     height: 2em;
 215 }
 216
 217 .highlight {
 218     border-bottom: solid rgb(206, 132, 242) 0.125em;
 219     border-top: solid rgb(206, 132, 242) 0.125em;
 220     border-radius: 1em;
 221     font-weight: 300;
 222     padding: 1em 3em;
 223     transition: border-radius 0.3s;
 224     box-sizing: border-box;
 225 }
 226
 227 .highlight:hover {
 228     border-radius: 3em;
 229 }
 230
 231 .game-preview {
 232     padding: 0;
 233     text-align: center;
 234     width: 100%;
 235     max-width: 37em;
 236     margin: auto;
 237     list-style-type: none;
 238 }
 239
 240 .game-preview > li {
 241     position: relative;
 242     border: solid rgb(206, 132, 242) 1px;
 243     margin-bottom: 1.5em;
 244     margin-top: 1em;
 245     margin-left: 2.5em;
 246     border-left-width: 0;
 247     height: 8em;
 248     transition: border-radius 0.3s, border-color 0.3s;
 249     padding-left: 4em;
 250     box-sizing: border-box;
 251     border-radius: 0 3em 3em 0;
 252 }
 253
 254 .game-preview > li:nth-child(even) {
 255     padding-left: 0;
 256     padding-right: 4em;
 257     margin-right: 2.5em;
 258     margin-left: 0;
 259     border-left-width: 1px;
 260     border-right-width: 0;
 261     border-radius: 3em 0 0 3em;
 262 }
 263
 264 .game-preview > li:hover {
 265     border-radius: 0 0.25em 0.25em 0;
 266     border-color: rgb(244, 126, 126);
 267 }
 268
 269 .game-preview > li img {
 270     border: solid rgb(206, 132, 242) 1px;
 271     position: absolute;
 272     border-radius: 50%;
 273     top: -1px;
 274     left: -4em;
 275     height: 8em;
 276     width: 8em;
 277     opacity: 0.75;
 278     transition: border-radius 0.3s, border-color 0.3s, opacity 0.3s;
 279     box-sizing: border-box;
 280 }
 281
 282 .game-preview > li:nth-child(even) img {
 283     left: auto;
 284     right: -4em;
 285 }
 286
 287 .game-preview > li:hover img {
 288     border-radius: 0;
 289     border-color: rgb(244, 126, 126);
 290     opacity: 1.0;
 291 }
 292
 293 .game-preview .info {
 294     position: relative;
 295     height: 100%;
 296 }
 297
 298 .game-preview .info h4 {
 299     color: inherit;
 300     font-style: italic;
 301     padding-left: 0.125em;
 302     padding-right: 0.125em;
 303     text-decoration: none;
 304     text-align: center;
 305     box-sizing: border-box;
 306     padding-top: 0.25em;
 307     font-size: 1.125em;
 308 }
 309
 310 .game-preview li:nth-child(odd) .info h4,
 311 .game-preview li:nth-child(odd) .info ul {
 312     margin-right: 6.5rem;
 313 }
 314
 315 .game-preview li:nth-child(even) .info h4,
 316 .game-preview li:nth-child(even) .info ul {
 317     margin-right: 0em;
 318     margin-left: 6.5rem;
 319 }
 320
 321 h4 a:link {
 322     text-decoration: none;
 323 }
 324
 325 .game-preview .info p {
 326     padding: 0.25em;
 327     text-align: center;
 328     position: absolute;
 329     left: 0;
 330     right: 0;
 331     top: 50%;
 332     transform: translateY(-50%);
 333     -webkit-transform: translateY(-50%);
 334     margin-top: 0.125em;
 335 }
 336
 337 .game-preview .info ul {
 338     bottom: 0.25em;
 339     font-size: 0.75em;
 340     position: absolute;
 341     right: 0.125em;
 342     left: 0.125em;
 343     text-align: center;
 344     list-style-type: none;
 345 }
 346
 347 .game-preview .info li {
 348     white-space: nowrap;
 349 }
 350
 351 .game-preview .info li a:link {
 352     text-decoration: none;
 353     font-weight: inherit;
 354 }
 355
 356 .game-preview .info li:before {
 357     content: ' ~ ';
 358 }
 359
 360 .game-preview .info li:first-child:before {
 361     content: '';
 362 }
 363
 364 .game-preview .info li {
 365     display: inline;
 366     font-weight: 300;
 367 }
 368
 369 ul.download {
 370     border-radius: 1em;
 371     border: solid rgb(206, 132, 242) 0.125em;
 372     font-weight: 300;
 373     padding: 0.5em;
 374     margin: 1em auto;
 375     transition: border-radius 0.3s, border-color 0.3s;
 376     white-space: nowrap;
 377     display: table;
 378 }
 379
 380 ul.download:hover {
 381     border-radius: 4px;
 382     border-color: rgb(244, 126, 126);
 383 }
 384
 385 ul.download li {
 386     list-style-type: none;
 387     font-size: 1.25em;
 388     margin-bottom: 0.8em;
 389     text-align: center;
 390 }
 391
 392 ul.download li a {
 393     text-decoration: none;
 394 }
 395
 396 ul.download li.sh {
 397     margin-bottom: 0;
 398     font-size: 0.75em;
 399     font-family: "Fira Mono", monospace;
 400     text-align: left;
 401 }
 402
 403 ul.download li:last-child {
 404     margin-bottom: 0;
 405 }
 406
 407 .sh:before {
 408     content: "$ ";
 409 }
 410
 411 input {
 412     font-family: inherit;
 413     font-size: 1em;
 414 }
 415
 416 .copyright {
 417     margin: auto;
 418     text-align: justify;
 419     width: 75%;
 420     font-size: 0.875em;
 421     font-weight: 400;
 422 }
 423
 424 .copyright > p {
 425     font-size: 0.875em;
 426     font-weight: 300;
 427 }
 428
 429 .copyright:before {
 430     content: "Copyright ©";
 431 }
 432
 433 pre {
 434     border-left: solid rgba(206, 132, 242, 0.5) 8px;
 435     border-radius: 8px;
 436     font-family: "Fira Mono", monospace;
 437     overflow: auto;
 438     padding-left: 2em;
 439     padding: 0.5em;
 440     max-width: 40em;
 441     margin: auto;
 442     transition: background-color 0.3s, border-color 0.3s, border-radius 0.3s;
 443 }
 444
 445 pre:hover {
 446     background-color: rgba(206, 132, 242, 0.125);
 447     border-color: rgb(206, 132, 242);
 448     border-radius: 16px;
 449 }
 450
 451 code {
 452     font-family: "Fira Mono", monospace;
 453     transition: background-color 0.3s;
 454 }
 455
 456 code:hover {
 457     background-color: rgba(206, 132, 242, 0.125);
 458 }
 459
 460 pre code:hover {
 461     background-color: transparent;
 462 }
 463
 464 footer {
 465     font-weight: 300;
 466     text-align: center;
 467     font-size: 0.75em;
 468 }
 469
 470 footer a:link {
 471     display: inline-block;
 472     margin: 0 1em;
 473     text-decoration: none;
 474 }
 475
 476 @media (max-width: 767px) {
 477     html { font-size: 13px; }
 478
 479     .optional {
 480         display: none;
 481     }
 482
 483     ul.download li.sh:before {
 484         content: "";
 485     }
 486
 487     pre {
 488         font-size: 0.875em;
 489     }
 490 }
 491
 492 @media (max-width: 479px) {
 493     html { font-size: 10px; padding: 0 0.5em; }
 494     h4 { font-size: 1em; }
 495 }
 496