factor-work/triangle-beer-league/tbl.css

* {
  margin: 0;
  padding: 0; }

*, *::before, *::after {
  box-sizing: border-box; }

@keyframes rotate {
  100% {
    transform: rotate(1turn); } }
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  align-items: center;
  background-color: #0f2240; }

header {
  color: #f4f7f6;
  font-weight: bold;
  width: 100%; }
  header #header-logo {
    display: block;
    min-width: 150px;
    min-height: 150px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("/cropped-TBL-Logo-2.jpg");
    object-fit: cover; }
    header #header-logo.splash {
      display: none; }
  header nav menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    header nav menu li {
      list-style: none;
      padding: 1em;
      font-weight: 500;
      font-size: 1.5em;
      font-family: "Roboto Slab";
      text-transform: uppercase; }
      header nav menu li a {
        text-decoration: none;
        color: #f4f7f6;
        position: relative;
        padding: .25em; }
        header nav menu li a.current::before {
          transform: scaleX(1);
          transform-origin: left; }
        header nav menu li a::before {
          background: #a4151a;
          content: "";
          inset: 0;
          position: absolute;
          transform: scaleX(0);
          transform-origin: right;
          transition: transform 0.5s ease-in-out;
          z-index: -1; }
        header nav menu li a:hover::before {
          transform: scaleX(1);
          transform-origin: left; }

main {
  padding: 1em;
  max-width: 1020px; }
  main .splash {
    height: 100%;
    display: flex;
    align-items: center; }
  main table {
    color: #f4f7f6;
    border-spacing: .5em 1em;
    padding: 1em;
    display: block;
    line-height: 1.5;
    font-size: 1em; }
    main table a {
      color: #f4f7f6;
      text-decoration: none; }
    main table tr.header {
      font-family: "DM Sans"; }
    main table tr td {
      font-family: "Inconsolata";
      font-size: 1.25em; }
      main table tr td.team {
        font-weight: 500;
        font-size: 1.25em;
        font-family: "Roboto Slab";
        text-align: right; }
        main table tr td.team.maroon {
          border-right: .25em solid maroon; }
        main table tr td.team.yellow {
          border-right: .25em solid yellow; }
        main table tr td.team.black {
          border-right: .25em solid black; }
        main table tr td.team.white {
          border-right: .25em solid white; }
        main table tr td.team.red {
          border-right: .25em solid red; }
        main table tr td.team.blue {
          border-right: .25em solid blue; }
        main table tr td.team.light td.team.blue {
          border-right: .25em solid lightblue; }
        main table tr td.team.orange {
          border-right: .25em solid orange; }
        main table tr td.team.teal {
          border-right: .25em solid teal; }
        main table tr td.team.green {
          border-right: .25em solid green; }
    main table.standings td {
      padding: .75rem; }
  main.schedule {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; }
    main.schedule .game {
      padding-bottom: 1em;
      min-width: 40%; }
      main.schedule .game .day-header {
        font-size: 1.5em;
        color: #f4f7f6;
        font-family: "DM Sans";
        border-top: 2px solid red;
        border-bottom: 2px solid red;
        padding: .25em 0; }
        main.schedule .game .day-header .day-name {
          weight: 500; }
      main.schedule .game .team-times {
        padding: .5em 0;
        font-size: 1.25em;
        display: flex;
        align-items: center; }
        main.schedule .game .team-times .at {
          font-family: "Roboto Slab";
          font-size: .75em;
          color: #f4f7f6; }
        main.schedule .game .team-times .time {
          color: #f4f7f6;
          text-align: right;
          flex: 1; }
        main.schedule .game .team-times .teams {
          font-family: "Roboto Slab";
          text-transform: uppercase;
          display: flex;
          flex-direction: column; }
          main.schedule .game .team-times .teams span.maroon {
            color: maroon; }
          main.schedule .game .team-times .teams span.yellow {
            color: yellow; }
          main.schedule .game .team-times .teams span.black {
            color: black; }
          main.schedule .game .team-times .teams span.white {
            color: white; }
          main.schedule .game .team-times .teams span.red {
            color: red; }
          main.schedule .game .team-times .teams span.blue {
            color: blue; }
          main.schedule .game .team-times .teams span.light.blue {
            color: lightblue; }
          main.schedule .game .team-times .teams span.orange {
            color: orange; }
          main.schedule .game .team-times .teams span.teal {
            color: teal; }
          main.schedule .game .team-times .teams span.green {
            color: green; }

#triangle {
  height: 50vw;
  width: 50vw;
  max-width: 540px;
  max-height: 540px;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 2rem; }
  #triangle::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#eb1f26, #eb1f26), linear-gradient(#d31b22, #d31b22), linear-gradient(#bc181e, #bc181e), linear-gradient(#a4151a, #a4151a);
    animation: rotate 4s linear infinite; }
  #triangle::after {
    background-image: url("/cropped-TBL-Logo-2.jpg");
    background-color: #0f2240;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center 10%;
    content: '';
    position: absolute;
    z-index: -1;
    left: 12px;
    top: 8px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    clip-path: inherit; }

/*# sourceMappingURL=tbl.css.map */