diff options
Diffstat (limited to 'app/javascript/styles/about.scss')
| -rw-r--r-- | app/javascript/styles/about.scss | 374 |
1 files changed, 374 insertions, 0 deletions
diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss new file mode 100644 index 000000000..b1139b86f --- /dev/null +++ b/app/javascript/styles/about.scss @@ -0,0 +1,374 @@ +.about-body { + .wrapper { + max-width: 600px; + margin: 0 auto; + color: $color3; + padding-top: 50px; + padding-bottom: 50px; + + &.thicc { + max-width: 700px; + } + } + + h1 { + font: 46px/52px 'Roboto', sans-serif; + font-weight: 600; + margin-bottom: 20px; + color: $color4; + padding: 20px 0; + + img { + margin-bottom: -5px; + margin-right: 5px; + width: 46px; + height: 46px; + } + } + + h2 { + font-family: 'Montserrat', sans-serif; + font-size: 24px; + line-height: 28px; + font-weight: 400; + margin-bottom: 20px; + color: $color5; + } + + h3 { + font-family: 'Montserrat', sans-serif; + font-size: 20px; + line-height: 28px; + font-weight: 400; + margin-bottom: 20px; + color: $color2; + } + + ul, ol { + list-style: inherit; + margin-left: 20px; + + &[type='a'] { + list-style-type: lower-alpha; + } + + &[type='i'] { + list-style-type: lower-roman; + } + } + + li > ol, li > ul { + margin-top: 20px; + } + + p, li { + font: 16px/28px 'Montserrat', sans-serif; + font-weight: 400; + margin-bottom: 12px; + + a { + color: $color4; + text-decoration: underline; + } + } + + em { + display: inline-block; + padding: 7px 7px 5px 7px; + margin: 0 2px; + background: $color3; + color: $color1; + font: 16px/16px 'Montserrat', sans-serif; + font-weight: 300; + } + + .screenshot { + box-shadow: 0 0 15px rgba($color8, 0.4); + margin-bottom: 26px; + + img { + max-width: 100%; + height: auto; + display: block; + } + } + + .actions { + overflow: hidden; + margin-bottom: 20px; + + .info { + float: right; + text-align: right; + line-height: 36px; + + a { + color: $color3; + text-decoration: underline; + } + } + } + + @media screen and (max-width: 625px) { + .wrapper { + padding: 20px; + } + + .features-list { + display: block; + } + } +} + +.information-board { + margin: 20px 0; + display: flex; + justify-content: space-between; + border-top: 1px solid lighten($color1, 10%); + border-bottom: 1px solid lighten($color1, 10%); + padding-right: 14px; + + .section { + flex: 1 0 0; + padding: 14px; + text-align: right; + font: 16px/28px 'Montserrat', sans-serif; + + span, strong { + display: block; + } + + span { + font-size: 16px; + + &:last-child { + color: $color2; + font-size: 14px; + } + } + + strong { + font-weight: 500; + font-size: 32px; + line-height: 48px; + color: $color5; + } + } + + @media screen and (max-width: 500px) { + flex-direction: column; + + .section { + text-align: left; + } + } +} + +.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: $color5; + text-decoration: none; + + &:hover { + .display_name { + text-decoration: underline; + } + } + } + + .username { + display: block; + color: $color3; + } + } +} + +.contact-email { + text-align: center; + margin: 40px 0; + + strong { + display: block; + color: $color5; + word-break: break-word; + } +} + +.sidebar-layout { + display: flex; + + .main { + flex: 1 1 auto; + padding: 14px 0; + + .panel { + padding-right: 14px; + } + } + + .sidebar { + border-left: 1px solid lighten($color1, 10%); + width: 180px; + flex: 0 0 auto; + } + + .panel { + .panel-header { + background: lighten($color1, 10%); + padding: 7px 14px; + text-transform: uppercase; + font-size: 12px; + font-weight: 500; + } + + .panel-body { + padding: 14px; + } + + .panel-list { + ul { + list-style: none; + margin: 0; + + li { + margin: 0; + font-family: inherit; + font-size: 13px; + line-height: 18px; + + a { + display: block; + padding: 7px 14px; + color: rgba($color5, 0.7); + text-decoration: none; + transition: all 200ms linear; + + i.fa { + margin-right: 5px; + } + + &:hover { + color: $color5; + background-color: darken($color1, 5%); + transition: all 100ms linear; + } + + &.selected { + color: $color5; + background-color: $color4; + + &:hover { + background-color: lighten($color4, 5%); + } + } + } + } + } + } + } + + @media screen and (max-width: 625px) { + flex-direction: column; + + .sidebar { + border: 1px solid lighten($color1, 10%); + width: auto; + } + } +} + +.features-list { + display: flex; + margin-bottom: 20px; + + .features-list__column { + flex: 1 1 0; + + ul { + list-style: none; + } + + li { + margin: 0; + } + } +} + +.screenshot-with-signup { + display: flex; + margin-bottom: 20px; + + .mascot { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + img { + display: block; + margin: 0 auto; + max-width: 100%; + height: auto; + } + } + + .simple_form, .closed-registrations-message { + width: 300px; + flex: 0 0 auto; + background: rgba(darken($color1, 7%), 0.5); + padding: 14px; + border-radius: 4px; + box-shadow: 0 0 15px rgba($color8, 0.4); + + .actions { + margin-bottom: 0; + } + + .info { + text-align: center; + + a { + color: $color2; + } + } + } + + @media screen and (max-width: 625px) { + .mascot { + display: none; + } + + .simple_form, .closed-registrations-message { + flex: auto; + } + } +} + +.closed-registrations-message { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} |