From 6176e278f4fc914ec24d865502107c8e0aad8bcb Mon Sep 17 00:00:00 2001 From: David Yip Date: Sat, 3 Mar 2018 11:01:24 -0600 Subject: [PATCH] Copy in new CSS for about page. --- .../flavours/glitch/styles/about.scss | 367 ++++++++++-------- 1 file changed, 199 insertions(+), 168 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index a25a50739..9ce83aa9b 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -15,117 +15,169 @@ $small-breakpoint: 960px; } } -.show-xs, -.show-sm { - display: none; -} +.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; + } -.show-m { - display: block; -} + .column-1 { + grid-column: 1; + grid-row: 1; + } -@media screen and (max-width: $small-breakpoint) { - .hide-sm { - display: none !important; - } + .column-2 { + grid-column: 2; + grid-row: 1; + } - .show-sm { - display: block !important; - } -} + .column-3 { + grid-column: 3; + grid-row: 1 / 3; + } -@media screen and (max-width: $column-breakpoint) { - .hide-xs { - display: none !important; + .column-4 { + grid-column: 1 / 3; + grid-row: 2; + } } - .show-xs { - display: block !important; - } -} + @media screen and (max-width: $small-breakpoint) { + .grid { + grid-template-columns: 40% 60%; -.row { - display: flex; - flex-wrap: wrap; - margin: 0 -5px; + .column-0 { + display: none; + } - @for $i from 1 through 15 { - .column-#{$i} { - box-sizing: border-box; - min-height: 1px; - flex: 0 0 percentage($i / 15); - max-width: percentage($i / 15); - padding: 0 5px; + .column-1 { + grid-column: 1; + grid-row: 1; - @media screen and (max-width: $small-breakpoint) { - &-sm { - box-sizing: border-box; - min-height: 1px; - flex: 0 0 percentage($i / 15); - max-width: percentage($i / 15); - padding: 0 5px; - - @media screen and (max-width: $column-breakpoint) { - max-width: 100%; - flex: 0 0 100%; - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - } + &.non-preview .landing-page__forms { + height: 100%; } } - @media screen and (max-width: $column-breakpoint) { - max-width: 100%; - flex: 0 0 100%; - margin-bottom: 10px; + .column-2 { + grid-column: 2; + grid-row: 1 / 3; - &:last-child { - margin-bottom: 0; + &.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; } } } } -} -.column-flex { - display: flex; - flex-direction: column; -} + @media screen and (max-width: $column-breakpoint) { + .grid { + grid-template-columns: auto; -.separator-or { - position: relative; - margin: 40px 0; - text-align: center; + .column-0 { + display: block; + grid-column: 1; + grid-row: 1; + } - &::before { - content: ""; - display: block; - width: 100%; - height: 0; - border-bottom: 1px solid rgba($ui-base-lighter-color, .6); - position: absolute; - top: 50%; - left: 0; + .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; + } + } + } } - span { - display: inline-block; - background: $ui-base-color; - font-size: 12px; - font-weight: 500; - color: $ui-primary-color; - text-transform: uppercase; + .column-flex { + display: flex; + flex-direction: column; + } + + .separator-or { position: relative; - z-index: 1; - padding: 0 8px; - cursor: default; + 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: $ui-primary-color; + text-transform: uppercase; + position: relative; + z-index: 1; + padding: 0 8px; + cursor: default; + } } -} -.landing-page { p, li { font-family: 'mastodon-font-sans-serif', sans-serif; @@ -502,7 +554,7 @@ $small-breakpoint: 960px; display: block; width: 80px; height: 80px; - border-radius: $ui-avatar-border-size; + border-radius: 48px; } } @@ -539,6 +591,7 @@ $small-breakpoint: 960px; img { position: static; + padding: 10px 0; } @media screen and (max-width: $small-breakpoint) { @@ -558,18 +611,33 @@ $small-breakpoint: 960px; } &__call-to-action { - margin-bottom: 10px; background: darken($ui-base-color, 4%); border-radius: 4px; padding: 25px 40px; overflow: hidden; .row { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + justify-content: space-between; align-items: center; } - .information-board__section { - padding: 0; + .row__information-board { + display: flex; + justify-content: flex-end; + align-items: flex-end; + + .information-board__section { + flex: 1 0 auto; + padding: 0 10px; + } + } + + .row__mascot { + flex: 1; + margin: 10px -50px 0 0; } } @@ -619,6 +687,8 @@ $small-breakpoint: 960px; &__short-description { .row { + display: flex; + flex-wrap: wrap; align-items: center; margin-bottom: 40px; } @@ -668,7 +738,6 @@ $small-breakpoint: 960px; height: 100%; @media screen and (max-width: $small-breakpoint) { - margin-bottom: 10px; height: auto; } @@ -717,15 +786,16 @@ $small-breakpoint: 960px; width: 100%; flex: 1 1 auto; overflow: hidden; + height: 100%; .column-header { color: inherit; font-family: inherit; font-size: 16px; - padding: 15px; line-height: inherit; font-weight: inherit; margin: 0; + padding: 0; } .column { @@ -942,93 +1012,54 @@ $small-breakpoint: 960px; } &.tag-page { - .features { - padding: 30px 0; - - .container-alt { - max-width: 820px; - - #mastodon-timeline { - margin-right: 0; - border-top-right-radius: 0; - } - - .about-mastodon { - .about-hashtag { - background: darken($ui-base-color, 4%); - padding: 0 20px 20px 30px; - border-radius: 0 5px 5px 0; - - .brand { - padding-top: 20px; - margin-bottom: 20px; - - img { - height: 48px; - width: auto; - } - } - - p { - strong { - color: $ui-secondary-color; - font-weight: 700; - } - } + .grid { + @media screen and (min-width: $small-breakpoint) { + grid-template-columns: 33% 67%; + } - .cta { - margin: 0; + .column-2 { + grid-column: 2; + grid-row: 1; + } + } - .button { - margin-right: 4px; - } - } - } + .brand { + text-align: unset; + padding: 0; - .features-list { - margin-left: 30px; - margin-right: 10px; - } - } + img { + height: 48px; + width: auto; } } - @media screen and (max-width: 675px) { - .features { - padding: 10px 0; + .cta { + margin: 0; - .container-alt { - display: flex; - flex-direction: column; - - #mastodon-timeline { - order: 2; - flex: 0 0 auto; - height: 60vh; - margin-bottom: 20px; - border-top-right-radius: 4px; - } + .button { + margin-right: 4px; + } + } - .about-mastodon { - order: 1; - flex: 0 0 auto; - max-width: 100%; + @media screen and (max-width: $column-breakpoint) { + .grid { + .column-1 { + grid-column: 1; + grid-row: 2; + } - .about-hashtag { - background: unset; - padding: 0; - border-radius: 0; + .column-2 { + grid-column: 1; + grid-row: 1; + } + } - .cta { - margin: 20px 0; - } - } + .brand { + margin: 0; + } - .features-list { - display: none; - } - } - } + .landing-page__features { + display: none; } } }