justin-site/css/style.scss

@import "compass/css3";
@import "compass/css3/border-radius";
@import "compass/typography/vertical_rhythm";

$base-font-size: 16px;
$base-line-height: 24px;

@include establish-baseline;

.container {
  @include display-flex;
  @include flex-direction(column);  
  @include flex-wrap(nowrap);
  @include justify-content(flex-start);
  @include align-items(center);
}

.container > * {
  width: 50%;
  padding: rhythm(0.5);
  margin: rhythm(0.5);
}

.container h1 {
  @include adjust-font-size-to(3em);
}

.container h2 {
  @include adjust-font-size-to(2em);
}

.container p {
  @include adjust-font-size-to(1em);
}

.header {
  background: purple;
  @include border-radius(5px, 5px);
  // @include border-radius(10px 25px, 15px 30px);
  // @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px);
}

.header h1 {
  @include adjust-font-size-to(5em);
}

.topbox {
  @include display-flex;
  @include flex-direction(row);  
  @include flex-wrap(nowrap);
  @include justify-content(space-around);
  @include align-items(stretch);
  background: blue;

  max-height: 30em;
}

.topbox > * {
  padding: rhythm(0.5);
  margin: rhythm(0.5);
}

@media all and (max-width: 700px) {
  .topbox {
    @include flex-direction(column);  
    background: yellow;
  }

  .topbox > * {
    padding: rhythm(0.5);
    margin: rhythm(0.5);
  }
}

.picture {
  @include flex(1 1 10em);
  background: green;
  @include order(2);
}

.contact {
  @include flex(1 1 10em);
  background: red;
  @include order(3);
}

@media all and (max-width: 700px) {
  .picture {
    @include order(3);
  }

  .contact {
    @include order(2);
  }
}

#card {
  background: blue;
}