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 header * {
  65     outline: none;
  66 }
  67
  68 strong { font-weight: bold; }
  69 em { font-style: italic; }
  70
  71 a:link, [onclick] {
  72     text-decoration: underline;
  73     cursor: pointer;
  74 }
  75
  76 html {
  77     font-family: "Fira Sans", sans-serif;
  78     font-size: 16px;
  79     background-color: rgb(226, 192, 242);
  80     background-image: linear-gradient(rgb(226, 192, 242), rgb(244, 199, 199) 100%);
  81     background-attachment: fixed;
  82     padding: 0 1em;
  83     height: 100%;
  84     background-repeat: no-repeat;
  85 }
  86
  87 body {
  88     border-top: solid rgb(206, 132, 242) 0.75em;
  89     border-bottom: solid rgb(244, 126, 126) 0.75em;
  90     border-radius: 2em;
  91     margin: 0.25em auto;
  92     color: black;
  93     background-color: white;
  94     max-width: 56em;
  95     padding: 0 1em;
  96 }
  97
  98 header {
  99     border-top: solid rgb(206, 132, 242) 0.5em;
 100     border-bottom: solid rgb(244, 126, 126) 0.5em;
 101     border-radius: 2em;
 102     height: 6em;
 103     transition: border-color 0.5s;
 104     white-space: nowrap;
 105     text-align: right;
 106     margin: 0 -1em;
 107     margin-top: -0.75em;
 108     background-color: white;
 109 }
 110
 111 header img {
 112     float: left;
 113     height: 100%;
 114     width: auto;
 115 }
 116
 117 header h1 {
 118     font-size: 3em;
 119     font-weight: normal;
 120     margin-right: 0.25em;
 121     display: inline-block;
 122     height: 100%;
 123     line-height: 2em;
 124 }
 125
 126 header:hover {
 127     border-top-color: rgb(244, 126, 126);
 128     border-bottom-color: rgb(206, 132, 242);
 129 }
 130
 131 img.logo {
 132     -webkit-transition: -webkit-transform 1.5s;
 133     transition: transform 1.5s;
 134     -webkit-transition-delay: 0.5s;
 135     transition-delay: 0.5s;
 136     -webkit-transition-timing-function: cubic-bezier(0.4, 0.2, 0.5, 1.3);
 137     transition-timing-function: cubic-bezier(0.4, 0.2, 0.5, 1.3);
 138 }
 139
 140 img.logo:hover {
 141     -webkit-transform: rotate(360deg);
 142     transform: rotate(360deg);
 143 }
 144
 145 h2 {
 146     border-top: solid rgb(206, 132, 242) 1px;
 147     border-left: solid rgb(206, 132, 242) 1px;
 148     border-radius: 1em 0 0 1em;
 149     font-size: 1.25em;
 150     font-weight: 300;
 151     margin-left: -0.67em;
 152     margin-right: -0.67em;
 153     margin-top: 1.5em;
 154     margin-bottom: 0.5em;
 155     padding-left: 0.5em;
 156     padding-top: 0.125em;
 157 }
 158
 159 h3 {
 160     border-top: solid rgb(206, 132, 242) 1px;
 161     border-left: solid rgb(206, 132, 242) 1px;
 162     border-radius: 1.5em;
 163     display: inline-block;
 164     font-size: 1.125em;
 165     font-weight: 300;
 166     margin-bottom: 0;
 167     margin-left: -0.445em;
 168     padding-left: 0.67em;
 169     padding-right: 0.67em;
 170 }
 171
 172 a:link, [onclick] {
 173     color: rgb(206, 132, 242);
 174     transition: color 0.3s;
 175 }
 176
 177 a:visited {
 178     color: rgb(206, 132, 242);
 179 }
 180
 181 a:hover, [onclick]:hover {
 182     color: rgb(244, 126, 126);
 183 }
 184
 185 main {
 186     display: block;
 187     padding: 1em;
 188     max-width: 50em;
 189     margin: auto;
 190 }
 191
 192 main > *:first-child {
 193     margin-top: 0;
 194 }
 195
 196 p, li {
 197     line-height: 125%;
 198 }
 199
 200 main > p {
 201     max-width: 45em;
 202     margin: 1em auto;
 203 }
 204
 205 dd p {
 206     margin-bottom: 1em;
 207 }
 208
 209 main > ul {
 210     max-width: 40em;
 211     margin: 1em auto;
 212 }
 213
 214 main > ul > li {
 215     margin: 0.5em auto;
 216 }
 217
 218 hr {
 219     margin-top: 0;
 220     margin-bottom: 1em;
 221     border: 0;
 222     border-bottom: solid rgb(206, 132, 242) 1px;
 223     height: 2em;
 224 }
 225
 226 .highlight {
 227     border-bottom: solid rgb(206, 132, 242) 0.125em;
 228     border-top: solid rgb(206, 132, 242) 0.125em;
 229     border-radius: 1em;
 230     font-weight: 300;
 231     padding: 1em 3em;
 232     transition: border-radius 0.3s;
 233     box-sizing: border-box;
 234 }
 235
 236 .highlight:hover {
 237     border-radius: 3em;
 238 }
 239
 240 .game-preview {
 241     padding: 0;
 242     text-align: center;
 243     width: 100%;
 244     max-width: 37em;
 245     margin: auto;
 246     list-style-type: none;
 247 }
 248
 249 .game-preview > li {
 250     position: relative;
 251     border: solid rgb(206, 132, 242) 1px;
 252     margin-bottom: 1.5em;
 253     margin-top: 1em;
 254     margin-left: 2.5em;
 255     border-left-width: 0;
 256     height: 8em;
 257     transition: border-radius 0.3s, border-color 0.3s;
 258     padding-left: 4em;
 259     box-sizing: border-box;
 260     border-radius: 0 3em 3em 0;
 261 }
 262
 263 .game-preview > li:nth-child(even) {
 264     padding-left: 0;
 265     padding-right: 4em;
 266     margin-right: 2.5em;
 267     margin-left: 0;
 268     border-left-width: 1px;
 269     border-right-width: 0;
 270     border-radius: 3em 0 0 3em;
 271 }
 272
 273 .game-preview > li:hover {
 274     border-radius: 0 0.25em 0.25em 0;
 275     border-color: rgb(244, 126, 126);
 276 }
 277
 278 .game-preview > li img {
 279     border: solid rgb(206, 132, 242) 1px;
 280     position: absolute;
 281     border-radius: 50%;
 282     top: -1px;
 283     left: -4em;
 284     height: 8em;
 285     width: 8em;
 286     opacity: 0.75;
 287     transition: border-radius 0.3s, border-color 0.3s, opacity 0.3s;
 288     box-sizing: border-box;
 289 }
 290
 291 .game-preview > li:nth-child(even) img {
 292     left: auto;
 293     right: -4em;
 294 }
 295
 296 .game-preview > li:hover img {
 297     border-radius: 0;
 298     border-color: rgb(244, 126, 126);
 299     opacity: 1.0;
 300 }
 301
 302 .game-preview .info {
 303     position: relative;
 304     height: 100%;
 305 }
 306
 307 .game-preview .info h4 {
 308     color: inherit;
 309     font-style: italic;
 310     padding-left: 0.125em;
 311     padding-right: 0.125em;
 312     text-decoration: none;
 313     text-align: center;
 314     box-sizing: border-box;
 315     padding-top: 0.25em;
 316     font-size: 1.125em;
 317 }
 318
 319 .game-preview li:nth-child(odd) .info h4,
 320 .game-preview li:nth-child(odd) .info ul {
 321     margin-right: 6.5rem;
 322 }
 323
 324 .game-preview li:nth-child(even) .info h4,
 325 .game-preview li:nth-child(even) .info ul {
 326     margin-right: 0em;
 327     margin-left: 6.5rem;
 328 }
 329
 330 h4 a:link {
 331     text-decoration: none;
 332 }
 333
 334 .game-preview .info p {
 335     padding: 0.25em;
 336     text-align: center;
 337     position: absolute;
 338     left: 0;
 339     right: 0;
 340     top: 50%;
 341     transform: translateY(-50%);
 342     -webkit-transform: translateY(-50%);
 343     margin-top: 0.125em;
 344 }
 345
 346 .game-preview .info ul {
 347     bottom: 0.25em;
 348     font-size: 0.75em;
 349     position: absolute;
 350     right: 0.125em;
 351     left: 0.125em;
 352     text-align: center;
 353     list-style-type: none;
 354 }
 355
 356 .game-preview .info li {
 357     white-space: nowrap;
 358 }
 359
 360 .game-preview .info li a:link {
 361     text-decoration: none;
 362     font-weight: inherit;
 363 }
 364
 365 .game-preview .info li:before {
 366     content: ' ~ ';
 367 }
 368
 369 .game-preview .info li:first-child:before {
 370     content: '';
 371 }
 372
 373 .game-preview .info li {
 374     display: inline;
 375     font-weight: 300;
 376 }
 377
 378 ul.download {
 379     border-radius: 1em;
 380     border: solid rgb(206, 132, 242) 0.125em;
 381     font-weight: 300;
 382     padding: 0.5em;
 383     margin: 1em auto;
 384     transition: border-radius 0.3s, border-color 0.3s;
 385     white-space: nowrap;
 386     display: table;
 387 }
 388
 389 ul.download:hover {
 390     border-radius: 4px;
 391     border-color: rgb(244, 126, 126);
 392 }
 393
 394 ul.download li {
 395     list-style-type: none;
 396     font-size: 1.25em;
 397     margin-bottom: 0.8em;
 398     text-align: center;
 399 }
 400
 401 ul.download li a {
 402     text-decoration: none;
 403 }
 404
 405 ul.download li.sh {
 406     margin-bottom: 0;
 407     font-size: 0.75em;
 408     font-family: "Fira Mono", monospace;
 409     text-align: left;
 410 }
 411
 412 ul.download li:last-child {
 413     margin-bottom: 0;
 414 }
 415
 416 .actionable {
 417     text-align: center;
 418     font-size: 0.8rem;
 419     margin: 0.75em auto;
 420     color: rgba(0, 0, 0, 0.5);
 421     display: block;
 422 }
 423
 424 .actionable a {
 425     display: inline-block;
 426     font-size: 1.5em;
 427     background-color: rgb(240, 110, 110);
 428     color: white;
 429     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
 430     padding: 0.5em;
 431     text-decoration: none;
 432     line-height: 0.8em;
 433     border-radius: 8px;
 434     width: 25%;
 435     margin: 0 1em;
 436 }
 437
 438 .actionable a:hover {
 439     background-color: rgb(244, 126, 126);
 440 }
 441
 442 .screenshots {
 443     text-align: center;
 444 }
 445
 446 .screenshots img {
 447     height: 8rem;
 448     width: auto;
 449     margin: 1rem 0.5rem;
 450 }
 451
 452 .sh:before {
 453     content: "$ ";
 454 }
 455
 456 input {
 457     font-family: inherit;
 458     font-size: 1em;
 459 }
 460
 461 .copyright {
 462     margin: auto;
 463     text-align: justify;
 464     width: 75%;
 465     font-size: 0.875em;
 466     font-weight: 400;
 467 }
 468
 469 .copyright > p {
 470     font-size: 0.875em;
 471     font-weight: 300;
 472 }
 473
 474 p + pre {
 475     margin-bottom: 1em;
 476 }
 477
 478 .copyright:before {
 479     content: "Copyright ©";
 480 }
 481
 482 pre {
 483     border-left: solid rgba(206, 132, 242, 0.5) 8px;
 484     border-radius: 8px;
 485     font-family: "Fira Mono", monospace;
 486     overflow: auto;
 487     padding-left: 2em;
 488     padding: 0.5em;
 489     max-width: 40em;
 490     margin: auto;
 491     transition: background-color 0.3s, border-color 0.3s, border-radius 0.3s;
 492 }
 493
 494 dd dl dd pre {
 495     margin-left: 0;
 496 }
 497
 498 pre:hover {
 499     background-color: rgba(206, 132, 242, 0.125);
 500     border-color: rgb(206, 132, 242);
 501     border-radius: 16px;
 502 }
 503
 504 code {
 505     font-family: "Fira Mono", monospace;
 506     transition: background-color 0.3s;
 507 }
 508
 509 p code, dt code, dd code {
 510     font-size: 90%;
 511     line-height: 1.111em;
 512     vertical-align: middle;
 513 }
 514
 515 code:hover {
 516     background-color: rgba(206, 132, 242, 0.125);
 517 }
 518
 519 pre code:hover {
 520     background-color: transparent;
 521 }
 522
 523 footer {
 524     font-weight: 300;
 525     text-align: center;
 526     font-size: 0.75em;
 527 }
 528
 529 footer a:link {
 530     display: inline-block;
 531     margin: 0 1em;
 532     text-decoration: none;
 533 }
 534
 535 iframe[src*="itch.io"] {
 536     width: 552px;
 537     height: 167px;
 538     margin: auto;
 539     left: 50%;
 540     -webkit-transform: translateX(-50%);
 541     transform: translateX(-50%);
 542     position: relative;
 543     border: 0;
 544 }
 545
 546 .important:before {
 547     color: rgb(244, 126, 126);
 548     content: 'Hey!';
 549 }
 550
 551 .important {
 552     margin-left: 5em;
 553     margin-right: 5em;
 554     text-align: justify;
 555     font-size: 80%;
 556     text-align-last: center;
 557 }
 558
 559 main > dl > dt {
 560     background-color: rgba(206, 132, 242, 0.25);
 561     padding: 0.125em 1em;
 562     border-radius: 1em;
 563 }
 564
 565 main > dl > dd {
 566     margin-left: 2em;
 567     margin-right: 2em;
 568     margin-bottom: 0.75em;
 569 }
 570
 571 main > dl > dt {
 572     margin-top: 0.75em;
 573     margin-bottom: 0.25em;
 574 }
 575
 576 dl dl dt {
 577     font-weight: bold;
 578     float: left;
 579     padding-right: 0.25em;
 580 }
 581
 582 dl dl dd {
 583     margin-left: 5.5em;
 584 }
 585
 586 dl dl + p {
 587     margin-top: 0.5em;
 588 }
 589
 590 @media (max-width: 767px) {
 591     html { font-size: 13px; }
 592
 593     .optional {
 594         display: none;
 595     }
 596
 597     ul.download li.sh:before {
 598         content: "";
 599     }
 600
 601     pre {
 602         font-size: 0.875em;
 603     }
 604
 605     iframe[src*="itch.io"] {
 606         -webkit-transform: translateX(-50%) scale(0.8);
 607         transform: translateX(-50%) scale(0.8);
 608     }
 609 }
 610
 611 @media (max-width: 479px) {
 612     html { font-size: 10px; padding: 0 0.5em; }
 613     h4 { font-size: 1em; }
 614
 615     iframe[src*="itch.io"] {
 616         -webkit-transform: translateX(-50%) scale(0.6);
 617         transform: translateX(-50%) scale(0.6);
 618     }
 619 }
 620