$maximum-width: 1235px; $fluid-breakpoint: $maximum-width + 20px; $column-breakpoint: 700px; $small-breakpoint: 960px; .container { box-sizing: border-box; max-width: $maximum-width; margin: 0 auto; position: relative; @media screen and (max-width: $fluid-breakpoint) { width: 100%; padding: 0 10px; } } .rich-formatting { font-family: $font-sans-serif, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.7; word-wrap: break-word; color: $darker-text-color; a { color: $highlight-text-color; text-decoration: underline; &:hover, &:focus, &:active { text-decoration: none; } } p, li { color: $darker-text-color; } p { margin-top: 0; margin-bottom: .85em; &:last-child { margin-bottom: 0; } } strong { font-weight: 700; color: $secondary-text-color; } em { font-style: italic; color: $secondary-text-color; } code { font-size: 0.85em; background: darken($ui-base-color, 8%); border-radius: 4px; padding: 0.2em 0.3em; } h1, h2, h3, h4, h5, h6 { font-family: $font-display, sans-serif; margin-top: 1.275em; margin-bottom: .85em; font-weight: 500; color: $secondary-text-color; } h1 { font-size: 2em; } h2 { font-size: 1.75em; } h3 { font-size: 1.5em; } h4 { font-size: 1.25em; } h5, h6 { font-size: 1em; } ul { list-style: disc; } ol { list-style: decimal; } ul, ol { margin: 0; padding: 0; padding-left: 2em; margin-bottom: 0.85em; &[type='a'] { list-style-type: lower-alpha; } &[type='i'] { list-style-type: lower-roman; } } hr { width: 100%; height: 0; border: 0; border-bottom: 1px solid lighten($ui-base-color, 4%); margin: 1.7em 0; &.spacer { height: 1px; border: 0; } } table { width: 100%; border-collapse: collapse; break-inside: auto; margin-top: 24px; margin-bottom: 32px; thead tr, tbody tr { border-bottom: 1px solid lighten($ui-base-color, 4%); font-size: 1em; line-height: 1.625; font-weight: 400; text-align: left; color: $darker-text-color; } thead tr { border-bottom-width: 2px; line-height: 1.5; font-weight: 500; color: $dark-text-color; } th, td { padding: 8px; align-self: start; align-items: start; word-break: break-all; &.nowrap { width: 25%; position: relative; &::before { content: ' '; visibility: hidden; } span { position: absolute; left: 8px; right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } & > :first-child { margin-top: 0; } } .information-board { background: darken($ui-base-color, 4%); padding: 20px 0; .container-alt { position: relative; padding-right: 280px + 15px; } &__sections { display: flex; justify-content: space-between; flex-wrap: wrap; } &__section { flex: 1 0 0; font-family: $font-sans-serif, sans-serif; font-size: 16px; line-height: 28px; color: $primary-text-color; text-align: right; padding: 10px 15px; span, strong { display: block; } span { &:last-child { color: $secondary-text-color; } } strong { font-family: $font-display, sans-serif; font-weight: 500; font-size: 32px; line-height: 48px; } @media screen and (max-width: $column-breakpoint) { text-align: center; } } .panel { position: absolute; width: 280px; box-sizing: border-box; background: darken($ui-base-color, 8%); padding: 20px; padding-top: 10px; border-radius: 4px 4px 0 0; right: 0; bottom: -40px; .panel-header { font-family: $font-display, sans-serif; font-size: 14px; line-height: 24px; font-weight: 500; color: $darker-text-color; padding-bottom: 5px; margin-bottom: 15px; border-bottom: 1px solid lighten($ui-base-color, 4%); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; a, span { font-weight: 400; color: darken($darker-text-color, 10%); } a { text-decoration: none; } } } .owner { text-align: center; .avatar { width: 80px; height: 80px; margin: 0 auto; margin-bottom: 15px; img { display: block; width: 80px; height: 80px; border-radius: 48px; } } .name { font-size: 14px; a { display: block; color: $primary-text-color; text-decoration: none; &:hover { .display_name { text-decoration: underline; } } } .username { display: block; color: $darker-text-color; } } } } .landing-page { p, li { font-family: $font-sans-serif, sans-serif; font-size: 16px; font-weight: 400; font-size: 16px; line-height: 30px; margin-bottom: 12px; color: $darker-text-color; a { color: $highlight-text-color; text-decoration: underline; } } em { display: inline; margin: 0; padding: 0; font-weight: 700; background: transparent; font-family: inherit; font-size: inherit; line-height: inherit; color: lighten($darker-text-color, 10%); } h1 { font-family: $font-display, sans-serif; font-size: 26px; line-height: 30px; font-weight: 500; margin-bottom: 20px; color: $secondary-text-color; small { font-family: $font-sans-serif, sans-serif; display: block; font-size: 18px; font-weight: 400; color: lighten($darker-text-color, 10%); } } h2 { font-family: $font-display, sans-serif; font-size: 22px; line-height: 26px; font-weight: 500; margin-bottom: 20px; color: $secondary-text-color; } h3 { font-family: $font-display, sans-serif; font-size: 18px; line-height: 24px; font-weight: 500; margin-bottom: 20px; color: $secondary-text-color; } h4 { font-family: $font-display, sans-serif; font-size: 16px; line-height: 24px; font-weight: 500; margin-bottom: 20px; color: $secondary-text-color; } h5 { font-family: $font-display, sans-serif; font-size: 14px; line-height: 24px; font-weight: 500; margin-bottom: 20px; color: $secondary-text-color; } h6 { font-family: $font-display, sans-serif; font-size: 12px; line-height: 24px; font-weight: 500; margin-bottom: 20px; color: $secondary-text-color; } ul, ol { margin-left: 20px; &[type='a'] { list-style-type: lower-alpha; } &[type='i'] { list-style-type: lower-roman; } } ul { list-style: disc; } ol { list-style: decimal; } li > ol, li > ul { margin-top: 6px; } hr { width: 100%; height: 0; border: 0; border-bottom: 1px solid rgba($ui-base-lighter-color, .6); margin: 20px 0; &.spacer { height: 1px; border: 0; } } &__information, &__forms { padding: 20px; } &__call-to-action { background: $ui-base-color; border-radius: 4px; padding: 25px 40px; overflow: hidden; box-sizing: border-box; .row { width: 100%; display: flex; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .row__information-board { display: flex; justify-content: flex-end; align-items: flex-end; .information-board__section { flex: 1 0 auto; padding: 0 10px; } @media screen and (max-width: $no-gap-breakpoint) { width: 100%; justify-content: space-between; } } .row__mascot { flex: 1; margin: 10px -50px 0 0; @media screen and (max-width: $no-gap-breakpoint) { display: none; } } } &__logo { margin-right: 20px; img { height: 50px; width: auto; mix-blend-mode: lighten; } } &__information { padding: 45px 40px; margin-bottom: 10px; &:last-child { margin-bottom: 0; } strong { font-weight: 500; color: lighten($darker-text-color, 10%); } .account { border-bottom: 0; padding: 0; &__display-name { align-items: center; display: flex; margin-right: 5px; } div.account__display-name { &:hover { .display-name strong { text-decoration: none; } } .account__avatar { cursor: default; } } &__avatar-wrapper { margin-left: 0; flex: 0 0 auto; } &__avatar { width: 44px; height: 44px; background-size: 44px 44px; } .display-name { font-size: 15px; &__account { font-size: 14px; } } } @media screen and (max-width: $small-breakpoint) { .contact { margin-top: 30px; } } @media screen and (max-width: $column-breakpoint) { padding: 25px 20px; } } &__information, &__forms, #mastodon-timeline { box-sizing: border-box; background: $ui-base-color; border-radius: 4px; box-shadow: 0 0 6px rgba($black, 0.1); } &__mascot { height: 104px; position: relative; left: -40px; bottom: 25px; img { height: 190px; width: auto; } } &__short-description { .row { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 40px; } @media screen and (max-width: $column-breakpoint) { .row { margin-bottom: 20px; } } p a { color: $secondary-text-color; } h1 { font-weight: 500; color: $primary-text-color; margin-bottom: 0; small { color: $darker-text-color; span { color: $secondary-text-color; } } } p:last-child { margin-bottom: 0; } } &__hero { margin-bottom: 10px; img { display: block; margin: 0; max-width: 100%; height: auto; border-radius: 4px; } } @media screen and (max-width: 840px) { .information-board { .container-alt { padding-right: 20px; } .panel { position: static; margin-top: 20px; width: 100%; border-radius: 4px; .panel-header { text-align: center; } } } } @media screen and (max-width: 675px) { .header-wrapper { padding-top: 0; &.compact { padding-bottom: 0; } &.compact .hero .heading { text-align: initial; } } .header .container-alt, .features .container-alt { display: block; } } .cta { margin: 20px; } } .landing { margin-bottom: 100px; @media screen and (max-width: 738px) { margin-bottom: 0; } &__brand { display: flex; justify-content: center; align-items: center; padding: 50px; svg { fill: $primary-text-color; height: 52px; } @media screen and (max-width: $no-gap-breakpoint) { padding: 0; margin-bottom: 30px; } } .directory { margin-top: 30px; background: transparent; box-shadow: none; border-radius: 0; } .hero-widget { margin-top: 30px; margin-bottom: 0; h4 { padding: 10px; text-transform: uppercase; font-weight: 700; font-size: 13px; color: $darker-text-color; } &__text { border-radius: 0; padding-bottom: 0; } &__footer { background: $ui-base-color; padding: 10px; border-radius: 0 0 4px 4px; display: flex; &__column { flex: 1 1 50%; } } .account { padding: 10px 0; border-bottom: 0; .account__display-name { display: flex; align-items: center; } .account__avatar { width: 44px; height: 44px; background-size: 44px 44px; } } &__counter { padding: 10px; strong { font-family: $font-display, sans-serif; font-size: 15px; font-weight: 700; display: block; } span { font-size: 14px; color: $darker-text-color; } } } .simple_form .user_agreement .label_input > label { font-weight: 400; color: $darker-text-color; } .simple_form p.lead { color: $darker-text-color; font-size: 15px; line-height: 20px; font-weight: 400; margin-bottom: 25px; } &__grid { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 50%) minmax(0, 50%); grid-gap: 30px; @media screen and (max-width: 738px) { grid-template-columns: minmax(0, 100%); grid-gap: 10px; &__column-login { grid-row: 1; display: flex; flex-direction: column; .box-widget { order: 2; flex: 0 0 auto; } .hero-widget { margin-top: 0; margin-bottom: 10px; order: 1; flex: 0 0 auto; } } &__column-registration { grid-row: 2; } .directory { margin-top: 10px; } } @media screen and (max-width: $no-gap-breakpoint) { grid-gap: 0; .hero-widget { display: block; margin-bottom: 0; box-shadow: none; &__img, &__img img, &__footer { border-radius: 0; } } .hero-widget, .box-widget, .directory__tag { border-bottom: 1px solid lighten($ui-base-color, 8%); } .directory { margin-top: 0; &__tag { margin-bottom: 0; & > a, & > div { border-radius: 0; box-shadow: none; } &:last-child { border-bottom: 0; } } } } } } .brand { position: relative; text-decoration: none; } .brand__tagline { display: block; position: absolute; bottom: -10px; left: 50px; width: 300px; color: $ui-primary-color; text-decoration: none; font-size: 14px; @media screen and (max-width: $no-gap-breakpoint) { position: static; width: auto; margin-top: 20px; color: $dark-text-color; } }