meBarista_in_Ionic2/src/pages/home/home.scss

page-home {

}

.grid-container {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-columns: 5% 1fr 10% 1fr 5%;
  grid-template-rows: 10% 1fr 1fr 1fr 1fr 10%;
  grid-gap: 1px 1px;
 }

 h2 {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-weight: 700;
 }

.header { grid-area: 1 / 2 / 2 / 5; }

.graph { grid-area: 2 / 2 / 4 / 5; }

.temperature_label { grid-area: 4 / 2 / 5 / 4; }
.temperature_value { grid-area: 4 / 4 / 5 / 5; text-align: right; }

.temperature_label, .temperature_value {
  font-size: 1.2em;
}

.gauge-1 { grid-area: 5 / 2 / 6 / 3; }

.gauge-2 { grid-area: 5 / 4 / 6 / 5; }

.error { grid-area: 3 / 2 / 4 / 5; text-align: center }

.gauge-container {
 /* width: 150px;
  height: 150px; */
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 /* padding: 10px; */
}
.gauge-container > .gauge > .dial {
  stroke: #eee;
  stroke-width: 5;
  fill: rgba(0,0,0,0);
}
.gauge-container > .gauge > .value {
  stroke: #999;
  stroke-width: 5;
  fill: rgba(0,0,0,0);
}

.gauge-container > .gauge > .value-text {
  fill: #ffc107;
  font-size: 1em;
}

.gauge-container > .gauge > .title {
  fill: #ffc107;
  font-size: 1em;
}