diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2019-03-12 17:34:00 +0100 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2019-03-13 15:53:00 +0100 |
commit | bbb9ff0e84e94a77cec069440195ba98b216d4f0 (patch) | |
tree | 345fae66b049dc5bf298f7e7b65ffcda15b702a0 /app/javascript/flavours/glitch/styles | |
parent | 02062aab55cb6f8da527998a210775c2ad695eed (diff) |
[Glitch] Redesign landing page
Port 65fffeac3f960f9c74d693525a73ac14b201bf2b to glitch-soc
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
-rw-r--r-- | app/javascript/flavours/glitch/styles/about.scss | 816 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/styles/forms.scss | 21 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/styles/widgets.scss | 5 |
3 files changed, 201 insertions, 641 deletions
diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 329482458..7a457600e 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -193,6 +193,7 @@ $small-breakpoint: 960px; } strong { + font-family: $font-display, sans-serif; font-weight: 500; font-size: 32px; line-height: 48px; @@ -282,168 +283,6 @@ $small-breakpoint: 960px; } .landing-page { - .grid { - display: grid; - grid-gap: 10px; - grid-template-columns: 1fr 2fr; - grid-auto-columns: 25%; - grid-auto-rows: max-content; - - .column-0 { - display: none; - } - - .column-1 { - grid-column: 1; - grid-row: 1; - } - - .column-2 { - grid-column: 2; - grid-row: 1; - } - - .column-3 { - grid-column: 3; - grid-row: 1 / 3; - } - - .column-4 { - grid-column: 1 / 3; - grid-row: 2; - } - } - - @media screen and (max-width: $small-breakpoint) { - .grid { - grid-template-columns: 40% 60%; - - .column-0 { - display: none; - } - - .column-1 { - grid-column: 1; - grid-row: 1; - - &.non-preview .landing-page__forms { - height: 100%; - } - } - - .column-2 { - grid-column: 2; - grid-row: 1 / 3; - - &.non-preview { - grid-column: 2; - grid-row: 1; - } - } - - .column-3 { - grid-column: 1; - grid-row: 2 / 4; - } - - .column-4 { - grid-column: 2; - grid-row: 3; - - &.non-preview { - grid-column: 1 / 3; - grid-row: 2; - } - } - } - } - - @media screen and (max-width: $column-breakpoint) { - .grid { - grid-template-columns: 100%; - - .column-0 { - display: block; - grid-column: 1; - grid-row: 1; - } - - .column-1 { - grid-column: 1; - grid-row: 3; - - .brand { - display: none; - } - } - - .column-2 { - grid-column: 1; - grid-row: 2; - - .landing-page__logo, - .landing-page__call-to-action { - display: none; - } - - &.non-preview { - grid-column: 1; - grid-row: 2; - } - } - - .column-3 { - grid-column: 1; - grid-row: 5; - } - - .column-4 { - grid-column: 1; - grid-row: 4; - - &.non-preview { - grid-column: 1; - grid-row: 4; - } - } - } - } - - .column-flex { - display: flex; - flex-direction: column; - } - - .separator-or { - position: relative; - margin: 40px 0; - text-align: center; - - &::before { - content: ""; - display: block; - width: 100%; - height: 0; - border-bottom: 1px solid rgba($ui-base-lighter-color, .6); - position: absolute; - top: 50%; - left: 0; - } - - span { - display: inline-block; - background: $ui-base-color; - font-size: 12px; - font-weight: 500; - color: $darker-text-color; - text-transform: uppercase; - position: relative; - z-index: 1; - padding: 0 8px; - cursor: default; - } - } - p, li { font-family: $font-sans-serif, sans-serif; @@ -460,28 +299,6 @@ $small-breakpoint: 960px; } } - .closed-registrations-message { - margin-top: 20px; - - &, - p { - text-align: center; - font-size: 12px; - line-height: 18px; - color: $darker-text-color; - margin-bottom: 0; - - a { - color: $highlight-text-color; - text-decoration: underline; - } - } - - p:last-child { - margin-bottom: 0; - } - } - em { display: inline; margin: 0; @@ -595,187 +412,6 @@ $small-breakpoint: 960px; } } - .container-alt { - width: 100%; - box-sizing: border-box; - max-width: 800px; - margin: 0 auto; - word-wrap: break-word; - } - - .header-wrapper { - padding-top: 15px; - background: $ui-base-color; - background: linear-gradient(150deg, lighten($ui-base-color, 8%), $ui-base-color); - position: relative; - - &.compact { - background: $ui-base-color; - padding-bottom: 15px; - - .hero .heading { - padding-bottom: 20px; - font-family: $font-sans-serif, sans-serif; - font-size: 16px; - font-weight: 400; - font-size: 16px; - line-height: 30px; - color: $darker-text-color; - - a { - color: $highlight-text-color; - text-decoration: underline; - } - } - } - } - - .brand { - a { - padding-left: 0; - padding-right: 0; - color: $white; - } - - img { - height: 32px; - position: relative; - top: 4px; - left: -10px; - } - } - - .header { - line-height: 30px; - overflow: hidden; - - .container-alt { - display: flex; - justify-content: space-between; - } - - .links { - position: relative; - z-index: 4; - - a { - display: flex; - justify-content: center; - align-items: center; - color: $darker-text-color; - text-decoration: none; - padding: 12px 16px; - line-height: 32px; - font-family: $font-display, sans-serif; - font-weight: 500; - font-size: 14px; - - &:hover { - color: $secondary-text-color; - } - } - - ul { - list-style: none; - margin: 0; - - li { - display: inline-block; - vertical-align: bottom; - margin: 0; - - &:first-child a { - padding-left: 0; - } - - &:last-child a { - padding-right: 0; - } - } - } - } - - .hero { - margin-top: 50px; - align-items: center; - position: relative; - - .heading { - position: relative; - z-index: 4; - padding-bottom: 150px; - } - - .simple_form, - .closed-registrations-message { - background: darken($ui-base-color, 4%); - width: 280px; - padding: 15px 20px; - border-radius: 4px 4px 0 0; - line-height: initial; - position: relative; - z-index: 4; - - .actions { - margin-bottom: 0; - - button, - .button, - .block-button { - margin-bottom: 0; - } - } - } - - .closed-registrations-message { - min-height: 330px; - display: flex; - flex-direction: column; - justify-content: space-between; - } - } - } - - .about-short { - background: darken($ui-base-color, 4%); - padding: 50px 0 30px; - font-family: $font-sans-serif, sans-serif; - font-size: 16px; - font-weight: 400; - font-size: 16px; - line-height: 30px; - color: $darker-text-color; - - a { - color: $highlight-text-color; - text-decoration: underline; - } - } - - &.alternative { - padding: 10px 0; - - .brand { - text-align: center; - padding: 30px 0; - margin-bottom: 10px; - - img { - position: static; - padding: 10px 0; - } - - @media screen and (max-width: $small-breakpoint) { - padding: 15px 0; - } - - @media screen and (max-width: $column-breakpoint) { - padding: 0; - margin-bottom: -10px; - } - } - } - &__information, &__forms { padding: 20px; @@ -970,353 +606,253 @@ $small-breakpoint: 960px; } } - &__forms { - height: 100%; - - @media screen and (max-width: $small-breakpoint) { - height: auto; - } - - @media screen and (max-width: $column-breakpoint) { - background: transparent; - box-shadow: none; - padding: 0 20px; - margin-top: 30px; - margin-bottom: 40px; - - .separator-or { - span { - background: darken($ui-base-color, 8%); - } + @media screen and (max-width: 840px) { + .information-board { + .container-alt { + padding-right: 20px; } - } - - hr { - margin: 40px 0; - } - .button { - display: block; - } - - .subtle-hint a { - text-decoration: none; + .panel { + position: static; + margin-top: 20px; + width: 100%; + border-radius: 4px; - &:hover, - &:focus, - &:active { - text-decoration: underline; + .panel-header { + text-align: center; + } } } } - #mastodon-timeline { - display: flex; - -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; - font-family: $font-sans-serif, sans-serif; - font-size: 13px; - line-height: 18px; - font-weight: 400; - color: $primary-text-color; - width: 100%; - flex: 1 1 auto; - overflow: hidden; - height: 100%; - - .column-header { - color: inherit; - font-family: inherit; - font-size: 16px; - line-height: inherit; - font-weight: inherit; - margin: 0; - padding: 0; - } - - .column { - padding: 0; - border-radius: 4px; - overflow: hidden; - width: 100%; - } - - .scrollable { - height: 400px; - } - - p { - font-size: inherit; - line-height: inherit; - font-weight: inherit; - color: $primary-text-color; - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } + @media screen and (max-width: 675px) { + .header-wrapper { + padding-top: 0; - a { - color: $secondary-text-color; - text-decoration: none; + &.compact { + padding-bottom: 0; } - } - - .attachment-list__list { - margin-left: 0; - list-style: none; - - li { - font-size: inherit; - line-height: inherit; - font-weight: inherit; - margin-bottom: 0; - - a { - color: $dark-text-color; - text-decoration: none; - &:hover { - text-decoration: underline; - } - } + &.compact .hero .heading { + text-align: initial; } } - @media screen and (max-width: $column-breakpoint) { - display: none; + .header .container-alt, + .features .container-alt { + display: block; } } - &__features { - & > p { - padding-right: 60px; - } - - .features-list { - margin: 40px 0; - margin-top: 30px; - } - - &__action { - text-align: center; - } + .cta { + margin: 20px; } +} - .features-list { - .features-list__row { - display: flex; - padding: 10px 0; - justify-content: space-between; - - .visual { - flex: 0 0 auto; - display: flex; - align-items: center; - margin-left: 15px; +.landing { + margin-bottom: 100px; - .fa { - display: block; - color: $darker-text-color; - font-size: 48px; - } - } + @media screen and (max-width: 738px) { + margin-bottom: 0; + } - .text { - font-size: 16px; - line-height: 30px; - color: $darker-text-color; + &__brand { + display: flex; + justify-content: center; + align-items: center; + padding: 100px; - h6 { - font-size: inherit; - line-height: inherit; - margin-bottom: 0; - } - } + img { + height: 52px; } - @media screen and (min-width: $small-breakpoint) { - display: grid; - grid-gap: 30px; - grid-template-columns: 1fr 1fr; - grid-auto-columns: 50%; - grid-auto-rows: max-content; + @media screen and (max-width: $no-gap-breakpoint) { + padding: 0; + margin-bottom: 30px; } } - .footer-links { - padding-bottom: 50px; - text-align: right; - color: $dark-text-color; + .directory { + margin-top: 30px; + background: transparent; + box-shadow: none; + border-radius: 0; + } - p { - font-size: 14px; - } + .hero-widget { + margin-top: 30px; + margin-bottom: 0; - a { - color: inherit; - text-decoration: underline; + h4 { + padding: 10px; + text-transform: uppercase; + font-weight: 700; + font-size: 13px; + color: $darker-text-color; } - } - &__footer { - margin-top: 10px; - text-align: center; - color: $dark-text-color; + &__text { + border-radius: 0; + padding-bottom: 0; + } - p { - font-size: 14px; + &__footer { + background: $ui-base-color; + padding: 10px; + border-radius: 0 0 4px 4px; + display: flex; - a { - color: inherit; - text-decoration: underline; + &__column { + flex: 1 1 50%; } } - } - @media screen and (max-width: 840px) { - .container-alt { - padding: 0 20px; - } + .account { + padding: 10px 0; + border-bottom: 0; - .information-board { - .container-alt { - padding-right: 20px; + .account__display-name { + display: flex; + align-items: center; } - .panel { - position: static; - margin-top: 20px; - width: 100%; - border-radius: 4px; - - .panel-header { - text-align: center; - } + .account__avatar { + width: 44px; + height: 44px; + background-size: 44px 44px; } } - } - @media screen and (max-width: 675px) { - .header-wrapper { - padding-top: 0; + &__counter { + padding: 10px; - &.compact { - padding-bottom: 0; + strong { + font-family: $font-display, sans-serif; + font-size: 15px; + font-weight: 700; + display: block; } - &.compact .hero .heading { - text-align: initial; + span { + font-size: 14px; + color: $darker-text-color; } } + } - .header .container-alt, - .features .container-alt { - display: block; - } - - .header { - .links { - padding-top: 15px; - background: darken($ui-base-color, 4%); + .simple_form .user_agreement .label_input > label { + font-weight: 400; + color: $darker-text-color; + } - a { - padding: 12px 8px; - } + .simple_form p.lead { + color: $darker-text-color; + font-size: 15px; + line-height: 20px; + font-weight: 400; + margin-bottom: 25px; + } - .nav { - display: flex; - flex-flow: row wrap; - justify-content: space-around; - } + &__grid { + max-width: 960px; + margin: 0 auto; + display: grid; + grid-template-columns: minmax(0, 50%) minmax(0, 50%); + grid-gap: 30px; - .brand img { - left: 0; - top: 0; - } - } + @media screen and (max-width: 738px) { + grid-template-columns: minmax(0, 100%); + grid-gap: 10px; - .hero { - margin-top: 30px; - padding: 0; + &__column-login { + grid-row: 1; + display: flex; + flex-direction: column; - .heading { - padding: 30px 20px; - text-align: center; + .box-widget { + order: 2; + flex: 0 0 auto; } - .simple_form, - .closed-registrations-message { - background: darken($ui-base-color, 8%); - width: 100%; - border-radius: 0; - box-sizing: border-box; + .hero-widget { + margin-top: 0; + margin-bottom: 10px; + order: 1; + flex: 0 0 auto; } } - } - } - - .cta { - margin: 20px; - } - &.tag-page { - @media screen and (max-width: $column-breakpoint) { - padding: 0; - - .container { - padding: 0; + &__column-registration { + grid-row: 2; } - #mastodon-timeline { - display: flex; - height: 100vh; - border-radius: 0; + .directory { + margin-top: 10px; } } - .grid { - @media screen and (min-width: $small-breakpoint) { - grid-template-columns: 33% 67%; - } - - .column-2 { - grid-column: 2; - grid-row: 1; - } - } + @media screen and (max-width: $no-gap-breakpoint) { + grid-gap: 0; - .brand { - text-align: unset; - padding: 0; + .hero-widget { + display: block; + margin-bottom: 0; + box-shadow: none; - img { - height: 48px; - width: auto; + &__img, + &__img img, + &__footer { + border-radius: 0; + } } - } - .cta { - margin: 0; - - .button { - margin-right: 4px; + .hero-widget, + .box-widget, + .directory__tag { + border-bottom: 1px solid lighten($ui-base-color, 8%); } - } - @media screen and (max-width: $column-breakpoint) { - .grid { - grid-gap: 0; + .directory { + margin-top: 0; - .column-1 { - grid-column: 1; - grid-row: 1; - } + &__tag { + margin-bottom: 0; - .column-2 { - display: none; + & > 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; + } +} + diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index bab982706..6051c1d00 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -68,6 +68,17 @@ code { top: 2px; left: 0; } + + label a { + color: $highlight-text-color; + text-decoration: underline; + + &:hover, + &:active, + &:focus { + text-decoration: none; + } + } } } @@ -305,7 +316,7 @@ code { box-shadow: none; } - &:focus:invalid { + &:focus:invalid:not(:placeholder-shown) { border-color: lighten($error-red, 12%); } @@ -346,6 +357,10 @@ code { } } + .input.disabled { + opacity: 0.5; + } + .actions { margin-top: 30px; display: flex; @@ -392,6 +407,10 @@ code { background-color: darken($ui-highlight-color, 5%); } + &:disabled:hover { + background-color: $ui-primary-color; + } + &.negative { background: $error-value-color; diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss index 1eaf30c5b..645192ea4 100644 --- a/app/javascript/flavours/glitch/styles/widgets.scss +++ b/app/javascript/flavours/glitch/styles/widgets.scss @@ -295,6 +295,11 @@ cursor: default; } + &.disabled > div { + opacity: 0.5; + cursor: default; + } + h4 { flex: 1 1 auto; font-size: 18px; |