| @import 'layout/index'; |
| |
| .flex-container { |
| @media (min-width: 80em) { |
| display: flex; |
| flex-direction: row; |
| flex-wrap: wrap; |
| margin: 0 auto; |
| h4 { |
| text-align: center; |
| } |
| .nb-card { |
| flex-basis: 30%; |
| } |
| } |
| } |
| |
| // content container |
| .ml-container { |
| |
| // mobile first default setting |
| display: -webkit-flex; |
| display: flex; |
| -webkit-flex-flow: row wrap; |
| flex-flow: row wrap; |
| padding: 3em 1em; |
| z-index: 50; |
| |
| // reverse order of elements |
| &--reverse-order { |
| direction: rtl; |
| } |
| |
| // vertical centering using table display |
| &--vertically-centered{ |
| @media (min-width: $bp-medium) { |
| display: table; |
| table-layout: fixed; |
| .col { |
| display: table-cell; |
| float: none; |
| vertical-align: middle; |
| } |
| } |
| } |
| |
| &--stretch { |
| align-items: stretch; |
| } |
| |
| &--halfway{ |
| position: relative; |
| top: 50%; |
| transform: translateY(-50%); |
| } |
| |
| // left align mobile, center align web |
| &--horizontally-center { |
| @media (min-width: 64em) { |
| width: 50em; |
| h1, h2, p, a { |
| text-align: center; |
| } |
| .button-group { |
| display: flex; |
| flex-direction: row; |
| justify-content: center; |
| } |
| } |
| } |
| |
| &--narrow { |
| padding: 2em 1em; |
| p { |
| margin-bottom: 0; |
| } |
| @media (min-width: 64em) { |
| width: 45em; |
| padding: 1em; |
| .vldb2016 { |
| margin-bottom: 0; |
| } |
| h3, p{ |
| text-align: left; |
| } |
| } |
| } |
| |
| // three columns across a frow |
| &--three-column { |
| .col-4 { |
| text-align: center; |
| margin: 1.5em auto; |
| } |
| @media (min-width: $bp-medium) { |
| margin: 0 auto; |
| } |
| } |
| |
| // use for rows with multiple columns |
| &--narrow-list{ |
| padding: 2em 1em; |
| .button-primary, .button-secondary { |
| margin-top: 0; |
| } |
| @media (min-width: $bp-medium) { |
| padding: 1em; |
| .button-primary, .button-secondary { |
| margin-top: 2em; |
| } |
| } |
| } |
| |
| // full screen container |
| &--full-screen { |
| height: 100vh; |
| width: 40em; |
| // temporary fix |
| display: table; |
| table-layout: fixed; |
| .col { |
| display: table-cell; |
| float: none; |
| vertical-align: middle; |
| } |
| @media (min-width: 64em) { |
| height: 80vh; |
| } |
| } |
| |
| // full screen view |
| @media (min-width: 64em){ |
| // constrain content width to 1024px |
| @include container(64em); |
| } |
| |
| // full screen view |
| @media (min-width: 75em){ |
| // constrain content width to 1200px |
| @include container(75em); |
| } |
| |
| } |
| |
| // grid system for content |
| .col { |
| // mobile first all columns full-width |
| width: 100%; |
| |
| // column system applies at 1024px width |
| @media (min-width: $bp-medium){ |
| &-1 { |
| @include span(1 of 12); |
| } |
| &-2 { |
| @include span(2 of 12); |
| } |
| &-3 { |
| @include span(3 of 12); |
| } |
| &-4 { |
| @include span(4 of 12); |
| } |
| &-6 { |
| @include span(6 of 12); |
| } |
| &-8 { |
| @include span(8 of 12); |
| } |
| &-9 { |
| @include span(9 of 12); |
| } |
| &-10 { |
| @include span(10 of 12); |
| } |
| &-12 { |
| @include span(12 of 12); |
| } |
| } |
| } |
| |
| // content styling |
| .content-group { |
| // default styling mobile first |
| text-align: left; |
| justify-content: space-between; |
| flex-direction: column; |
| align-items: left; |
| // display: flex; |
| |
| img { |
| margin: auto; |
| margin-bottom: 2em; |
| @media (min-width: $bp-medium){ |
| margin-bottom: 0; |
| } |
| } |
| |
| h2 { |
| font-size: 1.5em; |
| line-height: 1.3em; |
| margin-bottom: 1em; |
| @media (min-width: $bp-medium){ |
| font-size: 2em; |
| margin-bottom: .5em; |
| } |
| } |
| |
| p { |
| @media (min-width: $bp-medium){ |
| font-size: 1.125em; |
| } |
| } |
| |
| a { |
| text-align: center; |
| } |
| |
| .button-primary, .button-secondary { |
| margin-top: 1em; |
| } |
| |
| // center align text |
| &--center-align { |
| text-align: center; |
| } |
| |
| // left align text |
| &--left-align { |
| text-align: left; |
| } |
| |
| &--right-align { |
| text-align: center; |
| @media (min-width: $bp-medium){ |
| text-align: right; |
| } |
| } |
| |
| // center align content |
| &--center-content { |
| margin: auto; |
| } |
| |
| &--more-padding { |
| @media (min-width: $bp-medium) { |
| padding: 0 4em; |
| } |
| } |
| |
| &--small-bottom-margin { |
| margin-bottom: 1em; |
| } |
| |
| &--medium-bottom-margin { |
| margin-bottom: 1em; |
| @media (min-width: $bp-medium){ |
| margin-bottom: 2em; |
| } |
| } |
| |
| // hero call to action at the bottom |
| &--hero { |
| a{ |
| position: absolute; |
| bottom: 4em; |
| } |
| @media (min-width: 64em) { |
| position: relative; |
| bottom: 4em; |
| } |
| } |
| |
| // tutorial page content styling |
| &--tutorial { |
| h2{ |
| line-height: .5em; |
| } |
| pre { |
| margin: 0 0 2em 0; |
| } |
| h3{ |
| margin-bottom: 1em; |
| } |
| } |
| |
| .wrap { |
| display: block; |
| } |
| |
| } |
| |
| // button styling when there are more than two buttons |
| .button-group { |
| .button-primary, .button-secondary { |
| margin-right: 1em; |
| } |
| } |
| |
| .block-content { |
| &--center{ |
| text-align: center; |
| h3, p{ |
| margin-top: 1em; |
| } |
| } |
| } |
| |
| .block-heading { |
| text-align: center; |
| } |
| |
| .profile { |
| @include gallery(4 of 12); |
| margin-bottom: 1.953125%; |
| } |
| |
| .content-g { |
| @include clearfix; |
| &.contribute { |
| display: flex; |
| } |
| } |
| |
| .content { |
| @include span(4 of 12); |
| display: flex; |
| flex-direction: column; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| // separator |
| .border { |
| border-bottom: 1px solid #e0e0e0; |
| margin-bottom: 2em; |
| } |
| |
| .circle { |
| width: 30px; |
| height: 30px; |
| border-radius: 50%; |
| background-color: $color-systemml-accent2; |
| color: white; |
| text-align: center; |
| line-height: 34px; |
| display: inline-block; |
| margin-right: 1em; |
| } |