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

    article {
      display: flex;
      flex-flow: column nowrap;

      .title-wrapper {
        display: flex;
        align-items: baseline;

        h3 {
          padding: 0;
          margin: 0;
        }

        > * + * {
          margin-left: 1em;
        }
      }
    }
  }
}

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

2 entries across 2 versions & 1 rubygems

Version	Path
kids-0.1.1	_sass/kids/_layout.scss
kids-0.1.0	_sass/kids/_layout.scss