app/javascript/styles/mastodon/about.scss

   1 $maximum-width: 1235px;
   2 $fluid-breakpoint: $maximum-width + 20px;
   3 $column-breakpoint: 700px;
   4 $small-breakpoint: 960px;
   5
   6 .container {
   7   box-sizing: border-box;
   8   max-width: $maximum-width;
   9   margin: 0 auto;
  10   position: relative;
  11
  12   @media screen and (max-width: $fluid-breakpoint) {
  13     width: 100%;
  14     padding: 0 10px;
  15   }
  16 }
  17
  18 .rich-formatting {
  19   font-family: $font-sans-serif, sans-serif;
  20   font-size: 14px;
  21   font-weight: 400;
  22   line-height: 1.7;
  23   word-wrap: break-word;
  24   color: $darker-text-color;
  25
  26   a {
  27     color: $highlight-text-color;
  28     text-decoration: underline;
  29
  30     &:hover,
  31     &:focus,
  32     &:active {
  33       text-decoration: none;
  34     }
  35   }
  36
  37   p,
  38   li {
  39     color: $darker-text-color;
  40   }
  41
  42   p {
  43     margin-top: 0;
  44     margin-bottom: .85em;
  45
  46     &:last-child {
  47       margin-bottom: 0;
  48     }
  49   }
  50
  51   strong {
  52     font-weight: 700;
  53     color: $secondary-text-color;
  54   }
  55
  56   em {
  57     font-style: italic;
  58     color: $secondary-text-color;
  59   }
  60
  61   code {
  62     font-size: 0.85em;
  63     background: darken($ui-base-color, 8%);
  64     border-radius: 4px;
  65     padding: 0.2em 0.3em;
  66   }
  67
  68   h1,
  69   h2,
  70   h3,
  71   h4,
  72   h5,
  73   h6 {
  74     font-family: $font-display, sans-serif;
  75     margin-top: 1.275em;
  76     margin-bottom: .85em;
  77     font-weight: 500;
  78     color: $secondary-text-color;
  79   }
  80
  81   h1 {
  82     font-size: 2em;
  83   }
  84
  85   h2 {
  86     font-size: 1.75em;
  87   }
  88
  89   h3 {
  90     font-size: 1.5em;
  91   }
  92
  93   h4 {
  94     font-size: 1.25em;
  95   }
  96
  97   h5,
  98   h6 {
  99     font-size: 1em;
 100   }
 101
 102   ul {
 103     list-style: disc;
 104   }
 105
 106   ol {
 107     list-style: decimal;
 108   }
 109
 110   ul,
 111   ol {
 112     margin: 0;
 113     padding: 0;
 114     padding-left: 2em;
 115     margin-bottom: 0.85em;
 116
 117     &[type='a'] {
 118       list-style-type: lower-alpha;
 119     }
 120
 121     &[type='i'] {
 122       list-style-type: lower-roman;
 123     }
 124   }
 125
 126   hr {
 127     width: 100%;
 128     height: 0;
 129     border: 0;
 130     border-bottom: 1px solid lighten($ui-base-color, 4%);
 131     margin: 1.7em 0;
 132
 133     &.spacer {
 134       height: 1px;
 135       border: 0;
 136     }
 137   }
 138
 139   & > :first-child {
 140     margin-top: 0;
 141   }
 142 }
 143
 144 .information-board {
 145   background: darken($ui-base-color, 4%);
 146   padding: 20px 0;
 147
 148   .container-alt {
 149     position: relative;
 150     padding-right: 280px + 15px;
 151   }
 152
 153   &__sections {
 154     display: flex;
 155     justify-content: space-between;
 156     flex-wrap: wrap;
 157   }
 158
 159   &__section {
 160     flex: 1 0 0;
 161     font-family: $font-sans-serif, sans-serif;
 162     font-size: 16px;
 163     line-height: 28px;
 164     color: $primary-text-color;
 165     text-align: right;
 166     padding: 10px 15px;
 167
 168     span,
 169     strong {
 170       display: block;
 171     }
 172
 173     span {
 174       &:last-child {
 175         color: $secondary-text-color;
 176       }
 177     }
 178
 179     strong {
 180       font-family: $font-display, sans-serif;
 181       font-weight: 500;
 182       font-size: 32px;
 183       line-height: 48px;
 184     }
 185
 186     @media screen and (max-width: $column-breakpoint) {
 187       text-align: center;
 188     }
 189   }
 190
 191   .panel {
 192     position: absolute;
 193     width: 280px;
 194     box-sizing: border-box;
 195     background: darken($ui-base-color, 8%);
 196     padding: 20px;
 197     padding-top: 10px;
 198     border-radius: 4px 4px 0 0;
 199     right: 0;
 200     bottom: -40px;
 201
 202     .panel-header {
 203       font-family: $font-display, sans-serif;
 204       font-size: 14px;
 205       line-height: 24px;
 206       font-weight: 500;
 207       color: $darker-text-color;
 208       padding-bottom: 5px;
 209       margin-bottom: 15px;
 210       border-bottom: 1px solid lighten($ui-base-color, 4%);
 211       text-overflow: ellipsis;
 212       white-space: nowrap;
 213       overflow: hidden;
 214
 215       a,
 216       span {
 217         font-weight: 400;
 218         color: darken($darker-text-color, 10%);
 219       }
 220
 221       a {
 222         text-decoration: none;
 223       }
 224     }
 225   }
 226
 227   .owner {
 228     text-align: center;
 229
 230     .avatar {
 231       width: 80px;
 232       height: 80px;
 233       margin: 0 auto;
 234       margin-bottom: 15px;
 235
 236       img {
 237         display: block;
 238         width: 80px;
 239         height: 80px;
 240         border-radius: 48px;
 241       }
 242     }
 243
 244     .name {
 245       font-size: 14px;
 246
 247       a {
 248         display: block;
 249         color: $primary-text-color;
 250         text-decoration: none;
 251
 252         &:hover {
 253           .display_name {
 254             text-decoration: underline;
 255           }
 256         }
 257       }
 258
 259       .username {
 260         display: block;
 261         color: $darker-text-color;
 262       }
 263     }
 264   }
 265 }
 266
 267 .landing-page {
 268   p,
 269   li {
 270     font-family: $font-sans-serif, sans-serif;
 271     font-size: 16px;
 272     font-weight: 400;
 273     font-size: 16px;
 274     line-height: 30px;
 275     margin-bottom: 12px;
 276     color: $darker-text-color;
 277
 278     a {
 279       color: $highlight-text-color;
 280       text-decoration: underline;
 281     }
 282   }
 283
 284   em {
 285     display: inline;
 286     margin: 0;
 287     padding: 0;
 288     font-weight: 700;
 289     background: transparent;
 290     font-family: inherit;
 291     font-size: inherit;
 292     line-height: inherit;
 293     color: lighten($darker-text-color, 10%);
 294   }
 295
 296   h1 {
 297     font-family: $font-display, sans-serif;
 298     font-size: 26px;
 299     line-height: 30px;
 300     font-weight: 500;
 301     margin-bottom: 20px;
 302     color: $secondary-text-color;
 303
 304     small {
 305       font-family: $font-sans-serif, sans-serif;
 306       display: block;
 307       font-size: 18px;
 308       font-weight: 400;
 309       color: lighten($darker-text-color, 10%);
 310     }
 311   }
 312
 313   h2 {
 314     font-family: $font-display, sans-serif;
 315     font-size: 22px;
 316     line-height: 26px;
 317     font-weight: 500;
 318     margin-bottom: 20px;
 319     color: $secondary-text-color;
 320   }
 321
 322   h3 {
 323     font-family: $font-display, sans-serif;
 324     font-size: 18px;
 325     line-height: 24px;
 326     font-weight: 500;
 327     margin-bottom: 20px;
 328     color: $secondary-text-color;
 329   }
 330
 331   h4 {
 332     font-family: $font-display, sans-serif;
 333     font-size: 16px;
 334     line-height: 24px;
 335     font-weight: 500;
 336     margin-bottom: 20px;
 337     color: $secondary-text-color;
 338   }
 339
 340   h5 {
 341     font-family: $font-display, sans-serif;
 342     font-size: 14px;
 343     line-height: 24px;
 344     font-weight: 500;
 345     margin-bottom: 20px;
 346     color: $secondary-text-color;
 347   }
 348
 349   h6 {
 350     font-family: $font-display, sans-serif;
 351     font-size: 12px;
 352     line-height: 24px;
 353     font-weight: 500;
 354     margin-bottom: 20px;
 355     color: $secondary-text-color;
 356   }
 357
 358   ul,
 359   ol {
 360     margin-left: 20px;
 361
 362     &[type='a'] {
 363       list-style-type: lower-alpha;
 364     }
 365
 366     &[type='i'] {
 367       list-style-type: lower-roman;
 368     }
 369   }
 370
 371   ul {
 372     list-style: disc;
 373   }
 374
 375   ol {
 376     list-style: decimal;
 377   }
 378
 379   li > ol,
 380   li > ul {
 381     margin-top: 6px;
 382   }
 383
 384   hr {
 385     width: 100%;
 386     height: 0;
 387     border: 0;
 388     border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
 389     margin: 20px 0;
 390
 391     &.spacer {
 392       height: 1px;
 393       border: 0;
 394     }
 395   }
 396
 397   &__information,
 398   &__forms {
 399     padding: 20px;
 400   }
 401
 402   &__call-to-action {
 403     background: $ui-base-color;
 404     border-radius: 4px;
 405     padding: 25px 40px;
 406     overflow: hidden;
 407     box-sizing: border-box;
 408
 409     .row {
 410       width: 100%;
 411       display: flex;
 412       flex-direction: row-reverse;
 413       flex-wrap: nowrap;
 414       justify-content: space-between;
 415       align-items: center;
 416     }
 417
 418     .row__information-board {
 419       display: flex;
 420       justify-content: flex-end;
 421       align-items: flex-end;
 422
 423       .information-board__section {
 424         flex: 1 0 auto;
 425         padding: 0 10px;
 426       }
 427
 428       @media screen and (max-width: $no-gap-breakpoint) {
 429         width: 100%;
 430         justify-content: space-between;
 431       }
 432     }
 433
 434     .row__mascot {
 435       flex: 1;
 436       margin: 10px -50px 0 0;
 437
 438       @media screen and (max-width: $no-gap-breakpoint) {
 439         display: none;
 440       }
 441     }
 442   }
 443
 444   &__logo {
 445     margin-right: 20px;
 446
 447     img {
 448       height: 50px;
 449       width: auto;
 450       mix-blend-mode: lighten;
 451     }
 452   }
 453
 454   &__information {
 455     padding: 45px 40px;
 456     margin-bottom: 10px;
 457
 458     &:last-child {
 459       margin-bottom: 0;
 460     }
 461
 462     strong {
 463       font-weight: 500;
 464       color: lighten($darker-text-color, 10%);
 465     }
 466
 467     .account {
 468       border-bottom: 0;
 469       padding: 0;
 470
 471       &__display-name {
 472         align-items: center;
 473         display: flex;
 474         margin-right: 5px;
 475       }
 476
 477       div.account__display-name {
 478         &:hover {
 479           .display-name strong {
 480             text-decoration: none;
 481           }
 482         }
 483
 484         .account__avatar {
 485           cursor: default;
 486         }
 487       }
 488
 489       &__avatar-wrapper {
 490         margin-left: 0;
 491         flex: 0 0 auto;
 492       }
 493
 494       &__avatar {
 495         width: 44px;
 496         height: 44px;
 497         background-size: 44px 44px;
 498       }
 499
 500       .display-name {
 501         font-size: 15px;
 502
 503         &__account {
 504           font-size: 14px;
 505         }
 506       }
 507     }
 508
 509     @media screen and (max-width: $small-breakpoint) {
 510       .contact {
 511         margin-top: 30px;
 512       }
 513     }
 514
 515     @media screen and (max-width: $column-breakpoint) {
 516       padding: 25px 20px;
 517     }
 518   }
 519
 520   &__information,
 521   &__forms,
 522   #mastodon-timeline {
 523     box-sizing: border-box;
 524     background: $ui-base-color;
 525     border-radius: 4px;
 526     box-shadow: 0 0 6px rgba($black, 0.1);
 527   }
 528
 529   &__mascot {
 530     height: 104px;
 531     position: relative;
 532     left: -40px;
 533     bottom: 25px;
 534
 535     img {
 536       height: 190px;
 537       width: auto;
 538     }
 539   }
 540
 541   &__short-description {
 542     .row {
 543       display: flex;
 544       flex-wrap: wrap;
 545       align-items: center;
 546       margin-bottom: 40px;
 547     }
 548
 549     @media screen and (max-width: $column-breakpoint) {
 550       .row {
 551         margin-bottom: 20px;
 552       }
 553     }
 554
 555     p a {
 556       color: $secondary-text-color;
 557     }
 558
 559     h1 {
 560       font-weight: 500;
 561       color: $primary-text-color;
 562       margin-bottom: 0;
 563
 564       small {
 565         color: $darker-text-color;
 566
 567         span {
 568           color: $secondary-text-color;
 569         }
 570       }
 571     }
 572
 573     p:last-child {
 574       margin-bottom: 0;
 575     }
 576   }
 577
 578   &__hero {
 579     margin-bottom: 10px;
 580
 581     img {
 582       display: block;
 583       margin: 0;
 584       max-width: 100%;
 585       height: auto;
 586       border-radius: 4px;
 587     }
 588   }
 589
 590   @media screen and (max-width: 840px) {
 591     .information-board {
 592       .container-alt {
 593         padding-right: 20px;
 594       }
 595
 596       .panel {
 597         position: static;
 598         margin-top: 20px;
 599         width: 100%;
 600         border-radius: 4px;
 601
 602         .panel-header {
 603           text-align: center;
 604         }
 605       }
 606     }
 607   }
 608
 609   @media screen and (max-width: 675px) {
 610     .header-wrapper {
 611       padding-top: 0;
 612
 613       &.compact {
 614         padding-bottom: 0;
 615       }
 616
 617       &.compact .hero .heading {
 618         text-align: initial;
 619       }
 620     }
 621
 622     .header .container-alt,
 623     .features .container-alt {
 624       display: block;
 625     }
 626   }
 627
 628   .cta {
 629     margin: 20px;
 630   }
 631 }
 632
 633 .landing {
 634   margin-bottom: 100px;
 635
 636   @media screen and (max-width: 738px) {
 637     margin-bottom: 0;
 638   }
 639
 640   &__brand {
 641     display: flex;
 642     justify-content: center;
 643     align-items: center;
 644     padding: 50px;
 645
 646     svg {
 647       fill: $primary-text-color;
 648       height: 52px;
 649     }
 650
 651     @media screen and (max-width: $no-gap-breakpoint) {
 652       padding: 0;
 653       margin-bottom: 30px;
 654     }
 655   }
 656
 657   .directory {
 658     margin-top: 30px;
 659     background: transparent;
 660     box-shadow: none;
 661     border-radius: 0;
 662   }
 663
 664   .hero-widget {
 665     margin-top: 30px;
 666     margin-bottom: 0;
 667
 668     h4 {
 669       padding: 10px;
 670       text-transform: uppercase;
 671       font-weight: 700;
 672       font-size: 13px;
 673       color: $darker-text-color;
 674     }
 675
 676     &__text {
 677       border-radius: 0;
 678       padding-bottom: 0;
 679     }
 680
 681     &__footer {
 682       background: $ui-base-color;
 683       padding: 10px;
 684       border-radius: 0 0 4px 4px;
 685       display: flex;
 686
 687       &__column {
 688         flex: 1 1 50%;
 689       }
 690     }
 691
 692     .account {
 693       padding: 10px 0;
 694       border-bottom: 0;
 695
 696       .account__display-name {
 697         display: flex;
 698         align-items: center;
 699       }
 700
 701       .account__avatar {
 702         width: 44px;
 703         height: 44px;
 704         background-size: 44px 44px;
 705       }
 706     }
 707
 708     &__counter {
 709       padding: 10px;
 710
 711       strong {
 712         font-family: $font-display, sans-serif;
 713         font-size: 15px;
 714         font-weight: 700;
 715         display: block;
 716       }
 717
 718       span {
 719         font-size: 14px;
 720         color: $darker-text-color;
 721       }
 722     }
 723   }
 724
 725   .simple_form .user_agreement .label_input > label {
 726     font-weight: 400;
 727     color: $darker-text-color;
 728   }
 729
 730   .simple_form p.lead {
 731     color: $darker-text-color;
 732     font-size: 15px;
 733     line-height: 20px;
 734     font-weight: 400;
 735     margin-bottom: 25px;
 736   }
 737
 738   &__grid {
 739     max-width: 960px;
 740     margin: 0 auto;
 741     display: grid;
 742     grid-template-columns: minmax(0, 50%) minmax(0, 50%);
 743     grid-gap: 30px;
 744
 745     @media screen and (max-width: 738px) {
 746       grid-template-columns: minmax(0, 100%);
 747       grid-gap: 10px;
 748
 749       &__column-login {
 750         grid-row: 1;
 751         display: flex;
 752         flex-direction: column;
 753
 754         .box-widget {
 755           order: 2;
 756           flex: 0 0 auto;
 757         }
 758
 759         .hero-widget {
 760           margin-top: 0;
 761           margin-bottom: 10px;
 762           order: 1;
 763           flex: 0 0 auto;
 764         }
 765       }
 766
 767       &__column-registration {
 768         grid-row: 2;
 769       }
 770
 771       .directory {
 772         margin-top: 10px;
 773       }
 774     }
 775
 776     @media screen and (max-width: $no-gap-breakpoint) {
 777       grid-gap: 0;
 778
 779       .hero-widget {
 780         display: block;
 781         margin-bottom: 0;
 782         box-shadow: none;
 783
 784         &__img,
 785         &__img img,
 786         &__footer {
 787           border-radius: 0;
 788         }
 789       }
 790
 791       .hero-widget,
 792       .box-widget,
 793       .directory__tag {
 794         border-bottom: 1px solid lighten($ui-base-color, 8%);
 795       }
 796
 797       .directory {
 798         margin-top: 0;
 799
 800         &__tag {
 801           margin-bottom: 0;
 802
 803           & > a,
 804           & > div {
 805             border-radius: 0;
 806             box-shadow: none;
 807           }
 808
 809           &:last-child {
 810             border-bottom: 0;
 811           }
 812         }
 813       }
 814     }
 815   }
 816 }
 817
 818 .brand {
 819   position: relative;
 820   text-decoration: none;
 821 }
 822
 823 .brand__tagline {
 824   display: block;
 825   position: absolute;
 826   bottom: -10px;
 827   left: 50px;
 828   width: 300px;
 829   color: $ui-primary-color;
 830   text-decoration: none;
 831   font-size: 14px;
 832
 833   @media screen and (max-width: $no-gap-breakpoint) {
 834     position: static;
 835     width: auto;
 836     margin-top: 20px;
 837     color: $dark-text-color;
 838   }
 839 }
 840