diff options
Diffstat (limited to 'assets/sass/layout/_main.scss')
| -rw-r--r-- | assets/sass/layout/_main.scss | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/assets/sass/layout/_main.scss b/assets/sass/layout/_main.scss new file mode 100644 index 0000000..6792872 --- /dev/null +++ b/assets/sass/layout/_main.scss @@ -0,0 +1,204 @@ +/// +/// Big Picture by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Main */ + + .main { + @include vendor('display', 'flex'); + position: relative; + margin: 0; + overflow-x: hidden; + + > .content { + width: 45em; + max-width: calc(100% - 4em); + margin: 0 auto; + + > :last-child { + margin-bottom: 0; + } + } + + &.fullscreen { + min-height: 100%; + } + + &.style1 { + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'center'); + text-align: center; + padding: 3em 0 3em 0; + + h2 { + font-size: 4.25em; + line-height: 1em; + } + + > .content { + @include vendor('transition', 'opacity #{_duration(fade-in)} ease'); + @include vendor('transform', 'translateZ(0)'); + opacity: 1.0; + margin: 0; + } + + &.inactive > .content { + opacity: 0; + } + } + + &.style2 { + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'center'); + padding: 3em 0 3em 0; + overflow: hidden; + + > .content { + @include vendor('transition', 'transform #{_duration(fade-in)} ease'); + @include vendor('transform', 'translateZ(0)'); + position: relative; + width: 35%; + margin: 0; + } + + &.left { + @include vendor('justify-content', 'flex-start'); + } + + &.right { + @include vendor('justify-content', 'flex-end'); + } + + &.inactive { + &.left > .content { + @include vendor('transform', 'translateX(-100%)'); + } + + &.right > .content { + @include vendor('transform', 'translateX(100%)'); + } + } + } + + &.style3 { + text-align: center; + padding: 6em 0 6em 0; + + .content > header { + margin-bottom: 2em; + } + + &.primary { + background: _palette(bg); + } + + &.secondary { + background: _palette(bg-alt); + } + } + + &.dark { + color: _palette(dark, fg); + + a { + color: inherit; + } + + .button.style2 { + border-color: _palette(dark, fg); + + &:hover { + background-color: transparentize(_palette(dark, border), 0.875); + } + + &:active { + background-color: transparentize(_palette(dark, border), 0.75); + } + + &.down { + background-image: url('images/dark-arrow.svg'); + } + } + } + + body.is-touch & { + background-attachment: scroll !important; + } + + @include breakpoint('<=xxlarge') { + &.style2 { + .content { + width: 40%; + } + } + } + + @include breakpoint('<=large') { + &.style2 { + .content { + width: 50%; + } + } + } + + @include breakpoint('<=medium') { + &.style2 { + .content { + width: 60%; + } + } + } + + @include breakpoint('<=small') { + > .content { + br { + display: none; + } + } + + &.fullscreen { + height: auto !important; + } + + &.style1 { + padding: 4em 15px 4em 15px; + + h2 { + font-size: 3em; + } + } + + &.style2 { + padding: 6em 15px 6em 15px; + + &:before, + &:after { + display: none !important; + } + + .button.anchored { + display: none; + } + + .content { + width: 100%; + max-width: 100%; + text-align: center; + @include vendor('transform', 'none'); + } + } + + &.style3 { + text-align: center; + padding: 3em 10px 3em 10px; + } + } + + @include breakpoint('<=xsmall') { + > .content { + max-width: calc(100% - 1.5em); + } + } + }
\ No newline at end of file |