_src/_sass/_layout.scss

@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(3 of 12);
  // margin-bottom: 1.953125%;
}

@media(max-width:1000px){
  .profile {
    @include gallery(4 of 12);
  }
}

@media(max-width:500px){
  .profile {
    @include gallery(6 of 12);
  }
}

.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;
}