resume.scss

$muted_text: #7e7e7e;

$max_job_title_length: 18em;

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

body {
  background-color: darkgray;

  main {
    background-color: lightgrey;

    article {
      background-color: white;
      background-clip: content-box;
    }
  }
}

main {
  min-width: 8.5in;
  max-width: 8.5in;
  max-height: 11in;
  min-height: 11in;

  article {
    min-width: 8.5in;
    max-width: 8.5in;
    max-height: 10in;
    min-height: 10in;

    padding-top: 1in;
    padding-left: 1in;
    padding-right: 1in;
  }

  & > footer {
    height: 1in;
    width: 100%;
    padding: 0 1in;
  }
}

main > footer {
  text-align: center;
  font-style: italic;
  color: $muted_text;
}

article > address {
  margin-left: 40%;

  display: grid;
  grid-template-areas:
    ". name     ."
    ". location social"
    ". email    social";

  & > p {
    grid-area: name;
    font-weight: bold;
    font-size: 1.25em;
  }

  & > .location {
    grid-area: location;
  }

  & > a[href^="mailto"] {
    grid-area: email;
  }

  ul.social {
    grid-area: social;
  }
}

article > header {
  margin-bottom: 0.5em;
}

article > section {
  margin-top: 0.25em;

  & > :not(header) {
    margin-left: 0.5em;
  }
}

ul.social {
  display: grid;
  grid-template-columns: auto auto;

  column-gap: 0.25em;

  li {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;

    .site {
      justify-self: right;
    }
  }
}

article > section > header {
  font-weight: bold;
  font-size: 1.5rem;
}

#employment > ol.job {
  display: grid;
  grid-template-columns: auto auto fit-content(10em);

  column-gap: 0.5em;
  row-gap: 0.25em;

  & > li {
    grid-column: span 3;

    display: grid;
    grid-template-columns: subgrid;

    ul.highlight {
      grid-column: span 3;
    }

    ul.tech {
      grid-column: span 3;
    }
  }
}

ul.highlight {
  list-style-type: circle;
  list-style-position: inside;

  &:not(:empty) {
    margin-top: 0.25em;
  }
}

ul.tech:not(:empty) {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  padding: 0.25em 0.5em;

  font-style: italic;

  li + li {
    margin-left: 1em;
  }
}

ol.job > li {
  header {
    font-weight: bold;
  }

  .period {
    justify-self: right;
    text-wrap: nowrap;
    min-width: fit-content;
  }
}

// ol.job > li {
//   &:nth-child(3),
//   &:nth-child(5) {
//     border-top: solid black 0.1em;
//     padding-top: 0.5em;
//   }
// }

ol.job .period {
  font-style: italic;
  color: $muted_text;
}

section.project {
  a,
  a:visited {
    font-size: 13px;
    font-weight: normal;
    font-style: italic;
    color: black;
    opacity: 0.5;
  }
}

#projects > ol > li {
  header {
    display: inline-block;
  }
  aside {
    display: inline-block;
  }
}

#projects header {
  font-weight: bold;
}

aside {
  font-style: italic;
  color: $muted_text;

  a,
  a:visited {
    color: $muted_text;
  }
}

a,
a:visited {
  color: blue;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
}

p {
  margin: 0;
}

#education section.degree {
  display: grid;
  grid-template-columns: auto max-content;
}

#certifications li {
  display: grid;
  grid-template-columns: auto max-content;

  header {
    font-weight: bold;
  }
}