diff options
author | Thibaut Girka <thib@sitedethib.com> | 2018-08-10 15:57:58 +0200 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2018-08-10 16:22:49 +0200 |
commit | 4e66e0ac045a45a14670bb9492e2babe0c9bafb7 (patch) | |
tree | 5ceaf6f2288b458d77b2e5ffe6195e37c675a997 /app/javascript/flavours/glitch/styles/containers.scss | |
parent | 16a4a333a2b4942364abe79e80bcc928bc079bf2 (diff) |
Merge upstream SCSS changes for /about, /about/more and /terms
Port various commits to glitch-soc, mainly commits 0dcc1950d14cc4a7725ea1572d253c538a1f74e8 and 5b8603879f06573d51c5c33edda6f410d1af7a02.
Diffstat (limited to 'app/javascript/flavours/glitch/styles/containers.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/containers.scss | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index 01c8ebbaf..b5d79f4d7 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -117,6 +117,83 @@ } } +.grid-3 { + display: grid; + grid-gap: 10px; + grid-template-columns: 3fr 1fr; + grid-auto-columns: 25%; + grid-auto-rows: max-content; + + .column-0 { + grid-column: 1/3; + grid-row: 1; + } + + .column-1 { + grid-column: 1; + grid-row: 2; + } + + .column-2 { + grid-column: 2; + grid-row: 2; + } + + .column-3 { + grid-column: 1/3; + grid-row: 3; + } + + .landing-page__call-to-action { + min-height: 100%; + } + + @media screen and (max-width: 738px) { + grid-template-columns: minmax(0, 50%) minmax(0, 50%); + + .landing-page__call-to-action { + padding: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .row__information-board { + width: 100%; + justify-content: center; + align-items: center; + } + + .row__mascot { + display: none; + } + } + + @media screen and (max-width: $no-gap-breakpoint) { + grid-gap: 0; + grid-template-columns: minmax(0, 100%); + + .column-0 { + grid-column: 1; + } + + .column-1 { + grid-column: 1; + grid-row: 3; + } + + .column-2 { + grid-column: 1; + grid-row: 2; + } + + .column-3 { + grid-column: 1; + grid-row: 4; + } + } +} + .public-layout { @media screen and (max-width: $no-gap-breakpoint) { padding-top: 48px; @@ -302,6 +379,19 @@ } } + &--no-bar { + margin-bottom: 0; + + .public-account-header__image, + .public-account-header__image img { + border-radius: 4px; + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 0; + } + } + } + @media screen and (max-width: $no-gap-breakpoint) { margin-bottom: 0; box-shadow: none; |