diff options
Diffstat (limited to 'app/javascript')
-rw-r--r-- | app/javascript/styles/about.scss | 130 |
1 files changed, 70 insertions, 60 deletions
diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index a15afc32c..358d86eec 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -704,7 +704,6 @@ .features #mastodon-timeline { height: 70vh; width: 100%; - min-width: 330px; margin-bottom: 50px; .column { @@ -718,85 +717,96 @@ } &.tag-page { - .brand { - padding-top: 20px; - margin-bottom: 20px; + .features { + padding: 30px 0; - img { - height: 48px; - width: auto; - } - } + .container { + max-width: 820px; - .container { - max-width: 690px; - } + #mastodon-timeline { + margin-right: 0; + border-top-right-radius: 0; + } - .cta { - margin: 40px 0; - margin-bottom: 80px; + .about-mastodon { + .about-hashtag { + background: darken($ui-base-color, 4%); + padding: 0 20px 20px 30px; + border-radius: 0 5px 5px 0; - .button { - margin-right: 4px; - } - } + .brand { + padding-top: 20px; + margin-bottom: 20px; - .about-mastodon { - max-width: 330px; + img { + height: 48px; + width: auto; + } + } - p { - strong { - color: $ui-secondary-color; - font-weight: 700; + p { + strong { + color: $ui-secondary-color; + font-weight: 700; + } + } + + .cta { + margin: 0; + + .button { + margin-right: 4px; + } + } + } + + .features-list { + margin-left: 30px; + margin-right: 10px; + } } } } @media screen and (max-width: 675px) { - .container { - display: flex; - flex-direction: column; - } - .features { - padding: 20px 0; - } + padding: 10px 0; - .about-mastodon { - order: 1; - flex: 0 0 auto; - max-width: 100%; - } + .container { + display: flex; + flex-direction: column; - #mastodon-timeline { - order: 2; - flex: 0 0 auto; - height: 60vh; - } + #mastodon-timeline { + order: 2; + flex: 0 0 auto; + height: 60vh; + margin-bottom: 20px; + border-top-right-radius: 4px; + } - .cta { - margin: 20px 0; - margin-bottom: 30px; - } + .about-mastodon { + order: 1; + flex: 0 0 auto; + max-width: 100%; - .features-list { - display: none; - } + .about-hashtag { + background: unset; + padding: 0; + border-radius: 0; + + .cta { + margin: 20px 0; + } + } - .stripe { - display: none; + .features-list { + display: none; + } + } + } } } } - - .stripe { - width: 100%; - height: 360px; - overflow: hidden; - background: darken($ui-base-color, 4%); - position: absolute; - z-index: -1; - } } @keyframes floating { |