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