App.scss 10.7 KB
Newer Older
Eugen Rochko's avatar
Eugen Rochko committed
1 2
@import './variables.scss';

Morgan Nichols's avatar
Morgan Nichols committed
3 4 5
$transition-in: 100ms linear;
$transition-out: 250ms linear;

6 7
$content-width: 800px;
$screenshotScale: 0.9;
8 9 10

$phi: 1.6180339887498948482;

Eugen Rochko's avatar
Eugen Rochko committed
11
.app {
12 13
  font-size: 16px;
  line-height: 30px;
Eugen Rochko's avatar
Eugen Rochko committed
14 15 16
}

.container {
17
  max-width: $content-width;
Eugen Rochko's avatar
Eugen Rochko committed
18 19 20 21
  margin: 0 auto;
}

.navbar {
Eugen Rochko's avatar
Eugen Rochko committed
22
  margin-bottom: 90px;
Eugen Rochko's avatar
Eugen Rochko committed
23 24
  display: flex;
  justify-content: space-between;
25

Eugen Rochko's avatar
Eugen Rochko committed
26 27 28 29 30 31 32 33 34
  ul {
    list-style: none;

    li {
      display: inline-block;
      vertical-align: bottom;
    }

    a {
35
      display: flex;
36
      justify-content: center;
37 38
      align-items: center;

39
      color: $lighter;
Eugen Rochko's avatar
Eugen Rochko committed
40
      text-decoration: none;
Eugen Rochko's avatar
Eugen Rochko committed
41
      padding: 12px 14px;
Eugen Rochko's avatar
Eugen Rochko committed
42
      line-height: 32px;
Eugen Rochko's avatar
Eugen Rochko committed
43 44
      transition: color $transition-out;
      font-family: 'Montserrat', sans-serif;
Eugen Rochko's avatar
Eugen Rochko committed
45
      font-weight: 600;
Eugen Rochko's avatar
Eugen Rochko committed
46 47
      font-size: 14px;

48 49 50 51
      .lang-it & {
        padding: 12px 10px;
      }

52 53 54
      img.link-logo {
        width: 32px;
        height: 32px;
Eugen Rochko's avatar
Eugen Rochko committed
55 56
        opacity: 0.8;
        mix-blend-mode: overlay;
Morgan Nichols's avatar
Morgan Nichols committed
57
        transition: opacity $transition-out;
58 59 60 61 62 63 64 65 66 67 68

        &.before {
          margin-right: 10px;
        }

        &.after {
          margin-left: 10px;
        }
      }

      &.active, &:hover {
69
        color: $lightest;
Eugen Rochko's avatar
Eugen Rochko committed
70
        transition: color $transition-in;
71 72

        img.link-logo {
Eugen Rochko's avatar
Eugen Rochko committed
73
          opacity: 1;
Morgan Nichols's avatar
Morgan Nichols committed
74
          transition: opacity $transition-in;
75
        }
Eugen Rochko's avatar
Eugen Rochko committed
76
      }
Eugen Rochko's avatar
Eugen Rochko committed
77 78

      &.brand {
Eugen Rochko's avatar
Eugen Rochko committed
79
        color: $white;
Eugen Rochko's avatar
Eugen Rochko committed
80 81

        img {
82 83
          width: auto;
          height: 32px;
Eugen Rochko's avatar
Eugen Rochko committed
84
          opacity: 1;
85
          position: relative;
Eugen Rochko's avatar
Eugen Rochko committed
86
          mix-blend-mode: normal;
87 88
          top: 4px;
          left: -10px;
Eugen Rochko's avatar
Eugen Rochko committed
89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
        }

        &:hover {
          border-bottom-color: transparent;

          img {
            opacity: 1;
          }
        }
      }
    }

    li:first-child a {
      padding-left: 0;
    }

    li:last-child a {
      padding-right: 0;
Eugen Rochko's avatar
Eugen Rochko committed
107 108 109 110
    }
  }
}

111
.cta {
Morgan Nichols's avatar
Morgan Nichols committed
112
  display: inline-block;
113
  text-align: center;
Eugen Rochko's avatar
Eugen Rochko committed
114
  font-size: 16px;
115 116
  text-decoration: none;
  line-height: 36px;
Eugen Rochko's avatar
Eugen Rochko committed
117
  padding: 4px 16px;
118
  margin-bottom: 10px;
119 120 121
  background: transparent;
  border: 0;
  cursor: pointer;
122 123

  &.button {
Eugen Rochko's avatar
Eugen Rochko committed
124
    font-weight: 500;
125 126 127
    color: $darkest;
    background: $lighter;
    border-radius: 4px;
Eugen Rochko's avatar
Eugen Rochko committed
128
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
Eugen Rochko's avatar
Eugen Rochko committed
129
    margin-right: 4px;
Eugen Rochko's avatar
Eugen Rochko committed
130
    font-family: inherit;
131 132

    &:hover {
Eugen Rochko's avatar
Eugen Rochko committed
133 134 135 136 137 138 139 140 141 142 143 144 145
      background-color: lighten($lighter, 8%);
    }

    &.alt {
      background: transparent;
      border: 1px solid $lighter;
      padding: 3px 15px;
      color: $lighter;

      &:hover {
        color: lighten($lighter, 8%);
        border-color: lighten($lighter, 8%);
      }
146 147 148 149 150
    }
  }

  &.secondary {
    color: $lighter;
Eugen Rochko's avatar
Eugen Rochko committed
151 152
    padding-left: 0;
    padding-right: 0;
Morgan Nichols's avatar
Morgan Nichols committed
153

154 155 156
    &:hover {
      color: $lightest;
    }
Morgan Nichols's avatar
Morgan Nichols committed
157
  }
158 159
}

160 161 162 163 164 165
.cta-secondary {
  font-size: 18px;
  line-height: 36px;
  padding: 6px 16px;
}

Eugen Rochko's avatar
Eugen Rochko committed
166 167
.intro {
  text-align: center;
Eugen Rochko's avatar
Eugen Rochko committed
168 169 170 171
  padding-top: 15px;
  overflow: hidden;
  background: lighten($darkest, 4%);
  background: linear-gradient(150deg, lighten($darkest, 10%), lighten($darkest, 4%));
172
  color: $lighter;
Eugen Rochko's avatar
Eugen Rochko committed
173

174
  .text {
175
    width: $content-width;
176 177 178
    margin: 0 auto;
  }

Eugen Rochko's avatar
Eugen Rochko committed
179
  h1 {
Eugen Rochko's avatar
Eugen Rochko committed
180
    font-family: 'Montserrat', sans-serif;
Eugen Rochko's avatar
Eugen Rochko committed
181
    font-weight: 600;
Eugen Rochko's avatar
Eugen Rochko committed
182
    font-size: 26px;
183
    line-height: 1.5;
Eugen Rochko's avatar
Eugen Rochko committed
184
    margin-bottom: 20px;
Eugen Rochko's avatar
Eugen Rochko committed
185

Eugen Rochko's avatar
Eugen Rochko committed
186
    strong {
187
      color: $lightest;
Eugen Rochko's avatar
Eugen Rochko committed
188
    }
Eugen Rochko's avatar
Eugen Rochko committed
189 190
  }

Eugen Rochko's avatar
Eugen Rochko committed
191
  p {
192
    color: $lighter;
Eugen Rochko's avatar
Eugen Rochko committed
193 194
    font-size: 18px;
    margin-bottom: 26px;
Eugen Rochko's avatar
Eugen Rochko committed
195
  }
196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218

  .cta.button:not(.alt) {
    background: lighten($vibrant, 4%);
    color: #fff;

    &:hover,
    &:focus,
    &:active {
      background: lighten($vibrant, 8%);
    }
  }

  .cta.button.alt {
    border-color: lighten($vibrant, 4%);
    color: lighten($vibrant, 4%);

    &:hover,
    &:focus,
    &:active {
      border-color: lighten($vibrant, 8%);
      color: lighten($vibrant, 8%);
    }
  }
Morgan Nichols's avatar
Morgan Nichols committed
219
}
Eugen Rochko's avatar
Eugen Rochko committed
220

Morgan Nichols's avatar
Morgan Nichols committed
221 222
.hero {
  position: relative;
223 224
  margin: 30px auto;
  padding-bottom: 15px;
225
  width: $content-width;
Eugen Rochko's avatar
Eugen Rochko committed
226
  height: 330px;
Morgan Nichols's avatar
Morgan Nichols committed
227 228

  img {
229
    position: absolute;
Morgan Nichols's avatar
Morgan Nichols committed
230 231 232 233 234 235
    display: block;
    border-radius: 4px;
    box-shadow: 0 -5px 10px 0px rgba(0, 0, 0, 0.2);
  }

  .desktop {
236
    max-width: $content-width * $screenshotScale;
237
    top: 0;
238
    left: 0;
Eugen Rochko's avatar
Eugen Rochko committed
239
  }
Eugen Rochko's avatar
Eugen Rochko committed
240

Morgan Nichols's avatar
Morgan Nichols committed
241
  .mobile {
242 243 244
    max-width: ($content-width / 4) * $screenshotScale;
    top: 90px;
    right: 0;
245
  }
Eugen Rochko's avatar
Eugen Rochko committed
246

Morgan Nichols's avatar
Morgan Nichols committed
247
  .logo {
248
    width: 150px;
Morgan Nichols's avatar
Morgan Nichols committed
249 250
    left: 0;
    right: 0;
251
    bottom: -75px;
Morgan Nichols's avatar
Morgan Nichols committed
252
    margin: auto;
Eugen Rochko's avatar
Eugen Rochko committed
253 254 255 256
    background: $darkest;
    padding: 10px;
    border-radius: 85px;
    box-shadow: none;
Eugen Rochko's avatar
Eugen Rochko committed
257
  }
258
}
Eugen Rochko's avatar
Eugen Rochko committed
259

260
.as-seen-on, .frontpage-sponsorship {
Eugen Rochko's avatar
Eugen Rochko committed
261 262 263 264
  background: darken($darkest, 4%);
  padding: 30px 0;
  padding-bottom: 50px;

265
  h2 {
Eugen Rochko's avatar
Eugen Rochko committed
266
    font-family: 'Montserrat', sans-serif;
Eugen Rochko's avatar
Eugen Rochko committed
267
    font-weight: 600;
Eugen Rochko's avatar
Eugen Rochko committed
268
    font-size: 16px;
269
    color: lighten($darkest, 40%);
Eugen Rochko's avatar
Eugen Rochko committed
270 271 272 273 274 275 276 277 278 279
    text-align: center;
    margin-bottom: 20px;
  }

  .logo-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;

Eugen Rochko's avatar
Eugen Rochko committed
280 281 282 283 284 285 286
    & > div {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
    }

Eugen Rochko's avatar
Eugen Rochko committed
287 288 289 290 291 292 293 294
    a {
      display: inline-block;
      text-decoration: none;
      padding: 0 10px;

      img {
        display: block;
        margin: 0;
Eugen Rochko's avatar
Eugen Rochko committed
295 296
        height: 28px;
        width: auto;
Eugen Rochko's avatar
Eugen Rochko committed
297
        opacity: 0.5;
298 299
        transition: all $transition-in;
        filter: grayscale(100%);
Eugen Rochko's avatar
Eugen Rochko committed
300 301 302 303 304
      }

      &:hover {
        img {
          opacity: 0.8;
305 306
          transition: all $transition-out;
          filter: grayscale(0%);
Eugen Rochko's avatar
Eugen Rochko committed
307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323
        }
      }
    }
  }

  .logo-product-hunt {
    padding: 0;
  }

  .logo-the-verge {

  }

  .logo-wired {

  }

Eugen Rochko's avatar
Eugen Rochko committed
324 325 326 327
  .logo-motherboard img {
    height: 27px !important;
    position: relative;
    top: -2px;
Eugen Rochko's avatar
Eugen Rochko committed
328 329 330
  }
}

331 332 333 334 335 336
.frontpage-sponsorship {
  .logo-grid a {
    padding: 0 20px;
  }
}

Eugen Rochko's avatar
Eugen Rochko committed
337 338 339 340 341 342 343 344 345 346 347 348 349 350 351
.brand {
  display: inline-block;
  position: relative;
  z-index: 2;

  &::before {
    content: "";
    display: block;
    background: url('assets/elephant-friend-top.png');
    position: absolute;
    width: 393px;
    height: 176px;
    z-index: -1;
    top: -21px;
    left: -28px;
Eugen Rochko's avatar
Eugen Rochko committed
352
    pointer-events: none;
Eugen Rochko's avatar
Eugen Rochko committed
353 354 355 356 357 358 359 360 361
  }

  &:hover {
    &::before {
      top: -20px;
    }
  }
}

362 363
.feature {
  display: flex;
364
  margin: 100px auto;
365 366
  align-items: center;
  justify-content: space-between;
Eugen Rochko's avatar
Eugen Rochko committed
367

368 369 370
  .left {
    margin-right: 20px;
    order: 1;
371
    text-align: left;
Eugen Rochko's avatar
Eugen Rochko committed
372 373 374 375

    .lang-ar & {
      text-align: right;
    }
376 377 378 379 380
  }

  .right {
    margin-left: 20px;
    order: 2;
381
    text-align: right;
Eugen Rochko's avatar
Eugen Rochko committed
382 383 384 385

    .lang-ar & {
      text-align: right;
    }
Eugen Rochko's avatar
Eugen Rochko committed
386 387
  }

388
  .text {
389
    width: 80%;
Eugen Rochko's avatar
Eugen Rochko committed
390
    font-size: 16px;
Eugen Rochko's avatar
Eugen Rochko committed
391
    //line-height: 24px;
Eugen Rochko's avatar
Eugen Rochko committed
392 393 394

    strong {
      font-weight: 500;
395
      color: $lightest;
Eugen Rochko's avatar
Eugen Rochko committed
396
    }
Eugen Rochko's avatar
Eugen Rochko committed
397 398
  }

399
  .visual {
400
    max-width: 20%;
Eugen Rochko's avatar
Eugen Rochko committed
401 402 403 404 405

    i {
      font-size: 128px;
      color: lighten($darkest, 30%);
    }
Eugen Rochko's avatar
Eugen Rochko committed
406 407
  }

Eugen Rochko's avatar
Eugen Rochko committed
408
  h2, h3 {
Eugen Rochko's avatar
Eugen Rochko committed
409
    font-family: 'Montserrat', sans-serif;
Eugen Rochko's avatar
Eugen Rochko committed
410
    font-weight: 600;
Eugen Rochko's avatar
Eugen Rochko committed
411 412
    font-size: 21px;
    margin-bottom: 20px;
413
    color: $lightest;
Eugen Rochko's avatar
Eugen Rochko committed
414
  }
Eugen Rochko's avatar
Eugen Rochko committed
415 416 417 418 419

  h3 {
    font-size: 18px;
    line-height: 24px;
  }
Eugen Rochko's avatar
Eugen Rochko committed
420
}
Morgan Nichols's avatar
Morgan Nichols committed
421

422 423 424 425 426 427 428 429 430 431
.lang-ja {
  .feature {
    .text {
      strong {
        font-weight: 700;
      }
    }
  }
}

432 433 434 435 436 437 438 439 440 441
.lang-zh {
  .feature {
    .text {
      strong {
        font-weight: 700;
      }
    }
  }
}

Ch.'s avatar
Ch. committed
442 443 444 445
.lang-ko {
  word-break: keep-all;
}

446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484
.hero__floats {
  position: absolute;
  width: 100%;
  height: 100%;

  img {
    position: absolute;
    transition: all 0.1s linear;
    animation-name: floating;
    animation-duration: 1.7s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    box-shadow: none;
  }

  .float-1 {
    left: -200px;
    top: 100px;
    height: 170px;
  }

  .float-2 {
    right: -30px;
    left: auto;
    top: -90px;
    height: 100px;
    animation-delay: 0.2s;
  }

  .float-3 {
    left: auto;
    right: -240px;
    top: 200px;
    height: 140px;
    animation-delay: 0.1s;
  }
}

Morgan Nichols's avatar
Morgan Nichols committed
485
.bottom-cta {
486
  background: darken($darkest, 4%);
487 488 489
  padding: 50px 0;
  padding-top: 70px;

Eugen Rochko's avatar
Eugen Rochko committed
490 491 492 493
  .lang-ar & {
    direction: rtl;
  }

494 495
  h3 {
    font-family: 'Montserrat', sans-serif;
Eugen Rochko's avatar
Eugen Rochko committed
496
    font-weight: 600;
497 498 499
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 20px;
500
    color: $lightest;
501
  }
502 503 504 505

  p {
    margin-bottom: 30px;
  }
Eugen Rochko's avatar
Eugen Rochko committed
506 507 508 509 510 511 512 513 514


  @media only screen and (max-width: 640px) {
    .button {
      box-sizing: border-box;
      margin-right: 0;
      width: 100%;
    }
  }
Morgan Nichols's avatar
Morgan Nichols committed
515
}
516 517

@media only screen and (max-width: $content-width) {
Eugen Rochko's avatar
Eugen Rochko committed
518
  .navbar {
519
    padding: 10px 20px;
Eugen Rochko's avatar
Eugen Rochko committed
520 521
  }

Eugen Rochko's avatar
Eugen Rochko committed
522 523 524 525 526
  .bottom-cta {
    padding-left: 20px;
    padding-right: 20px;
  }

527 528
  .frontpage-sponsorship,
  .as-seen-on {
Eugen Rochko's avatar
Eugen Rochko committed
529 530 531 532
    & > .container {
      overflow: hidden;
    }

533
    .logo-grid {
Eugen Rochko's avatar
Eugen Rochko committed
534 535 536
      overflow-x: auto;
      padding-bottom: 30px;
      margin-bottom: -30px;
537

Eugen Rochko's avatar
Eugen Rochko committed
538
      & > div {
539 540 541
        a {
          padding: 10px;
        }
542

543 544 545
        .logo-product-hunt {
          padding: 0;
        }
Eugen Rochko's avatar
Eugen Rochko committed
546 547 548 549 550
      }
    }
  }

  .intro {
551 552 553 554 555 556
    .text {
      width: 90%;
    }

    .hero {
      width: 90%;
Eugen Rochko's avatar
Eugen Rochko committed
557
      height: 190px;
558 559 560
      padding-bottom: 100px;
    }

561 562 563 564
    .hero__floats {
      display: none;
    }

565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584
    .desktop {
      position: relative;
      width: percentage($screenshotScale);
      top: 0;
      left: 0;
    }

    .mobile {
      width: percentage($screenshotScale/4);
      top: percentage($screenshotScale/8);
      right: 0;
    }

    .logo {
      width: percentage($screenshotScale/4);
    }
  }

  .feature {
    display: block;
Eugen Rochko's avatar
Eugen Rochko committed
585
    margin: 60px 0;
586

Eugen Rochko's avatar
Eugen Rochko committed
587
    &:first-child {
Eugen Rochko's avatar
Eugen Rochko committed
588
      margin-top: 60px;
Eugen Rochko's avatar
Eugen Rochko committed
589 590
    }

591
    .left, .right {
Eugen Rochko's avatar
Eugen Rochko committed
592 593 594 595 596
      box-sizing: border-box;
      width: 100%;
      padding: 0 20px;
      margin: 15px auto;
      text-align: left;
597 598
    }

599 600
    .visual {
      display: none;
601 602 603
    }
  }
}
604

Eugen Rochko's avatar
Eugen Rochko committed
605 606 607 608 609 610
@media only screen and (max-width: $content-width - 50px) {
  .brand::before {
    display: none;
  }
}

Eugen Rochko's avatar
Eugen Rochko committed
611 612 613 614
.xs-show {
  display: none;
}

Eugen Rochko's avatar
Eugen Rochko committed
615
@media only screen and (max-width: 640px) {
Eugen Rochko's avatar
Eugen Rochko committed
616 617 618 619
  .xs-show {
    display: initial;
  }

Eugen Rochko's avatar
Eugen Rochko committed
620 621 622 623
  .navbar {
    display: block;
    background: $darkest;
    margin-top: -15px;
Eugen Rochko's avatar
Eugen Rochko committed
624 625 626 627 628 629 630

    ul a,
    ul .dropdown__control {
      color: lighten($darkest, 30%) !important;
      padding-left: 7px !important;
      padding-right: 7px !important;
    }
631 632 633 634

    ul a.brand img {
      left: 0;
    }
Eugen Rochko's avatar
Eugen Rochko committed
635 636
  }

Eugen Rochko's avatar
Eugen Rochko committed
637 638 639 640
  .link-logo.after {
    display: none;
  }

Eugen Rochko's avatar
Eugen Rochko committed
641 642
  .intro {
    .hero {
Eugen Rochko's avatar
Eugen Rochko committed
643 644
      margin-top: 60px;
      height: 45px;
Eugen Rochko's avatar
Eugen Rochko committed
645 646
    }
  }
647

648 649 650
  .frontpage-sponsorship,
  .as-seen-on {
    .logo-grid {
Eugen Rochko's avatar
Eugen Rochko committed
651
      //
652
    }
Eugen Rochko's avatar
Eugen Rochko committed
653 654 655
  }
}

Eugen Rochko's avatar
Eugen Rochko committed
656 657 658 659 660 661 662 663 664
.legal {
  padding-top: 100px;

  &,
  a {
    color: lighten($darkest, 30%);
  }
}

Eugen Rochko's avatar
Eugen Rochko committed
665 666 667 668 669 670 671
@media only screen and (max-width: 460px) {
  .navbar ul li.optional-link {
    display: none;
  }
}

@media only screen and (max-width: 400px) {
672 673 674
  .as-seen-on .logo-grid {
    flex-direction: column;
  }
Eugen Rochko's avatar
Eugen Rochko committed
675 676
}

Eugen Rochko's avatar
Eugen Rochko committed
677 678 679 680 681 682 683 684
@media only screen and (max-width: 380px) {
  .hero {
    display: none;
  }

  .intro {
    padding-bottom: 60px;
  }
Eugen Rochko's avatar
Eugen Rochko committed
685

Eugen Rochko's avatar
Eugen Rochko committed
686 687 688 689 690
  .navbar ul li.optional-link-2 {
    display: none;
  }
}

691 692 693 694 695 696 697 698 699 700 701 702 703
@keyframes floating {
  from {
    transform: translate(0, 0px);
  }

  65% {
    transform: translate(0, 4px);
  }

  to {
    transform: translate(0, -0px);
  }
}
704 705 706 707 708 709 710 711 712

.icon-circled {
  display: inline-block;
  margin-right: 10px;
}

iframe {
  box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}