Contents

body {
  // Make sure body takes all the available vertical space
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
}

header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: baseline;

  @media screen and (max-width: 767px) {
    flex-flow: column nowrap;
    align-items: flex-start;
    overflow-x: hidden;
  }

  nav {
    ul {
      list-style-type: none;
      padding: 0;

      // Show the list items horizontally
      // with some spacing inbetween
      list-style: none;
      li {
        display: inline-block;
        margin: 0 0.8rem;

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  padding: 1em 1em 2em 1em;
}

main {
  display: block;
  // Take all the extra vertical space if any.
  flex: 1;
  // Use as much horizontal space as possible and centered.
  width: 100%;
  margin: 0 auto;

  // Don't let the 100% width overflow on narrower devices.
  box-sizing: border-box;
  padding: 0 1em;

  .post-list {
    list-style-type: none;
    padding: 0;

    li {
      margin-bottom: 2em;
    }
  }
}

footer {
  padding: 2em 1em 1em 1em;

  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;

  ul {
    list-style-type: none;
    padding: 0;
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
kids-0.2.0	_sass/kids/_layout.scss