javascript-entity-component-system/src/style.css

A simple JavaScript entity-component-system for games

body {
  font-family: Calibri;
  position: relative;
  width: 100%;
}

nav {
  position : relative;
  left     : 50%;
  width    : max-content;
  transform: translate(-50%);
  margin-top: 40px;
}

.nav-items {
  text-decoration  : none;
  list-style-type  : none;
  display          : grid;
  grid-auto-flow   : column;
  grid-auto-columns: max-content;
  grid-gap         : 20px;
  position         : relative;
  left             : 50%;
  transform        : translateX(-50%);
  padding          : 0;
}

li > a {
  text-decoration: none;
  color: hsla(0, 0%, 40%, 1);
  padding: 15px 20px;
  border-radius: 10px;
  /* transition: 0.05s; */
}

li > a:hover {
  color: hsla(0, 0%, 0%, 1);
  background-color: hsla(0, 0%, 95%, 1);
}

a {
  text-decoration: none;
  color          : hsla(0, 0%, 20%, 1);
  text-decoration: underline;
  font-size      : 18px;
}

.header {
  position  : relative;
  left      : 50%;
  transform : translateX(-50%);
  width     : 100%;
  margin-top: 80px;
}

.header > h1, h2 {
  text-align: center;
  margin    : 10px;
  font-size : 48px;
}

.header > p {
  text-align: center;
  padding   : 0;
  margin    : 0px;
  color     : hsla(0, 0%, 40%, 1);
  font-size : 18px;
}

.code-block {
  background-color: hsla(0, 0%, 97%, 1);
  border: 1px solid hsla(0, 0%, 95%, 1);
  position        : relative;
  left            : 50%;
  transform       : translateX(-50%);
  padding         : 20px;
  border-radius   : 10px;
}

.code-block > h2 {
  font-size : 24px;
  text-align: left;
  margin    : 0;
  padding   : 0;
}

.code-block > p {
  color: hsla(0, 0%, 20%, 1);
  font-size: 20px;
  height: 50px;
}

.code-block > pre {
  font-size: 16px;
  margin: 0;
}

code {
  border-radius   : 10px;
  background-color: hsla(0, 0%, 100%, 1) !important;
}

.example {
  width    : max-content;
  position : relative;
  left     : 50%;
  transform: translateX(-50%);

  display              : grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows   : max-content max-content max-content max-content;
  grid-gap             : 10px;
  margin-top           : 100px;
}

.component-block {
  grid-column: 1/2;
  grid-row   : 1/2;
}

.processor-block {
  grid-column: 2/3;
  grid-row   : 1/2;
}

.entity-block {
  grid-column: 1/3;
  grid-row   : 2/3;
}

.update-block {
  grid-column: 1/3;
  grid-row   : 3/4;
}

.example-header {
  margin: 50px 0;
}


button {
  border: none;
  background-color: hsla(0, 0%, 95%, 1);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 14px;
}

#reset-button {
  background-color: hsla(200, 100%, 70%, 1);
  color: hsla(200, 100%, 10%, 1);
}

.basic-game {
  grid-gap: 20px;

  display: grid;
  grid-template-columns: auto 1fr;
  width: max-content;

  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.game-source {
  display: block;
  margin-top: 30px;
  text-align: center;
}

.controls {
  grid-column: 2/3;
}

.buttons {
  display: grid;
  width: max-content;
  grid-gap: 5px;
}

.checkboxes {
  display: grid;
  grid-gap: 20px;
  width: max-content;
  margin-bottom: 50px;
}

canvas {
  grid-column: 1/2;

  max-width: 500px;
}

.information-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: max-content;
  grid-gap: 20px;

  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 50px 0;
}

.information-card {
  background-color: hsla(0, 0%, 97%, 1);
  border: 1px solid hsla(0, 0%, 95%, 1);
  border-radius: 10px;
  padding: 30px 20px;
}

.information-card > h3 {
  font-size: 16px;
  color: hsla(0, 0%, 40%, 1);
  margin: 0;
  font-weight: 500;
}

.information-card > p {
  font-size: 24px;
  font-weight: 600;
  margin-top: 5px;
  margin-bottom: 0;
}

.copyright {
  color: hsla(0, 0%, 20%, 1);
  font-size: 20px;
  position: relative;
  left: 50%;
  width: max-content;
  margin: 40px 0;
  transform: translateX(-50%);
}

.copyright > a {
  font-weight: 600;
  font-size: 20px;
  text-decoration: none;
}


@media only screen and (max-width: 499px) {
  body {
    margin: 0;
  }

  .header {
    margin-top: 50px;
  }

  .information-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);

    width: auto;
    grid-gap: 10px;
    padding: 0 10px;
  }

  .information-card {
    padding: 20px 15px;
  }

  .basic-game {
    grid-template-columns: 100%;
    grid-template-rows: 1fr max-content;

    margin-bottom: 40px;
    
    width: 100%;
  }
  
  canvas {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: center;

    width: 90%;
    height: 90%;
  }
  
  .controls {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: center;
  }

  .checkboxes {
    grid-template-columns: repeat(3, 1fr);
  }

  .buttons {
    width: auto;
  }

  .example {
    grid-template-columns: 100%;
    grid-template-rows: repeat(4, 1fr);

    width: 100%;

    position: static;
    transform: none;
    left: auto;

    margin-top: 20px;
  }

  .component-block {
    grid-column: 1/2;
    grid-row: 1/2;

    position: static;
    transform: none;
    left: 0;

    margin: 0 10px;
  }

  .processor-block {
    grid-column: 1/2;
    grid-row: 2/3;

    position: static;
    transform: none;
    left: 0;
    
    margin: 0 10px;
  }

  .entity-block {
    grid-column: 1/2;
    grid-row: 3/4;

    position: static;
    transform: none;
    left: 0;
    
    margin: 0 10px;
  }

  .update-block {
    grid-column: 1/2;
    grid-row: 4/5;

    position: static;
    transform: none;
    left: 0;
    
    margin: 0 10px;
  }
}

@media only screen and (min-width: 500px) {
  body {
    margin: 0;
  }

  .header {
    margin-top: 50px;
  }

  .information-container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);

    width: auto;
    grid-gap: 10px;
    padding: 0 10px;
  }

  .information-card {
    padding: 20px 15px;
  }

  .basic-game {
    grid-template-columns: 100%;
    grid-template-rows: 1fr max-content;
    
    margin-bottom: 40px;

    width: 100%;
  }

  canvas {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: center;

    width: 90%;
    height: 90%;
  }

  .controls {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: center;
  }

  .checkboxes {
    grid-template-columns: repeat(3, 1fr);
  }

  .buttons {
    width: auto;
  }

  .example {
    grid-template-columns: 100%;
    grid-template-rows: repeat(4, 1fr);

    width: 100%;

    position: static;
    transform: none;
    left: auto;

    margin-top: 20px;
  }

  .component-block {
    grid-column: 1/2;
    grid-row: 1/2;

    position: static;
    transform: none;
    left: 0;

    margin: 0 10px;
  }

  .processor-block {
    grid-column: 1/2;
    grid-row: 2/3;

    position: static;
    transform: none;
    left: 0;

    margin: 0 10px;
  }

  .entity-block {
    grid-column: 1/2;
    grid-row: 3/4;

    position: static;
    transform: none;
    left: 0;

    margin: 0 10px;
  }

  .update-block {
    grid-column: 1/2;
    grid-row: 4/5;

    position: static;
    transform: none;
    left: 0;

    margin: 0 10px;
  }
}

@media only screen and (min-width: 1200px) {
  body {
      margin: 0;
    }
  
    .header {
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      margin-top: 80px;
    }
  
    .information-container {
  
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      width: max-content;
      grid-gap: 20px;
      
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      margin: 50px 0;
    }
  
    .information-card {
      padding: 30px 20px;
    }
  
    .basic-game {
      grid-gap: 20px;
      
      display: grid;
      grid-template-columns: auto 1fr;
      width: max-content;
      
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
  
    canvas {
      grid-column: 1/2;
  
      justify-self: center;
  
      width: auto;
      height: auto;
    }
  
    .controls {
      grid-column: 1/2;
      grid-row: 2/3;
    }
  
    .checkboxes {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .buttons {
      width: auto;
    }
  
    .example {
      width: max-content;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: max-content max-content max-content max-content;
      grid-gap: 10px;
      margin-top: 100px;
    }
  
    .component-block {
      grid-column: 1/2;
      grid-row: 1/2;

      margin: 0;
    }
  
    .processor-block {
      grid-column: 2/3;
      grid-row: 1/2;

      margin: 0;
    }
  
    .entity-block {
      grid-column: 1/3;
      grid-row: 2/3;

      margin: 0;
    }
  
    .update-block {
      grid-column: 1/3;
      grid-row: 3/4;

      margin: 0;
    }
}