diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index b8d0fdad2..f0caeb4c5 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -9,11 +9,7 @@ } .logo-container { - margin: 100px auto 50px; - - @media screen and (max-width: 500px) { - margin: 40px auto 0; - } + margin: 50px auto; h1 { display: flex; diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 8ae2b5bd8..6ab1189da 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -6,9 +6,10 @@ code { } .form-container { - max-width: 400px; + max-width: 450px; padding: 20px; - margin: 0 auto; + padding-bottom: 50px; + margin: 50px auto; } .indicator-icon { @@ -123,13 +124,34 @@ code { } .title { - color: #d9e1e8; - font-size: 20px; - line-height: 28px; - font-weight: 400; + font-size: 28px; + line-height: 33px; + font-weight: 700; + margin-bottom: 15px; + } + + .lead { + font-size: 17px; + line-height: 22px; + color: $secondary-text-color; margin-bottom: 30px; } + .rules-list { + list-style: decimal; + font-size: 17px; + line-height: 22px; + font-weight: 500; + background: transparent; + border: 0; + padding: 0.5em 1em !important; + margin-bottom: 30px; + + li { + border-color: lighten($ui-base-color, 8%); + } + } + .hint { color: $darker-text-color; @@ -451,6 +473,11 @@ code { } } + .stacked-actions { + margin-top: 30px; + margin-bottom: 15px; + } + button, .button, .block-button { @@ -502,6 +529,16 @@ code { } } + .button.button-tertiary { + padding: 9px; + + &:hover, + &:focus, + &:active { + padding: 10px; + } + } + select { appearance: none; box-sizing: border-box;