rower-website/public/css/styles.css

A web server which access the PM5 rowing machine over usb and displays the wattage value.

/* styles.css */

/* Apply styles to the header */
header {
    background-color: #3498db;
    color: #fff;
    padding: 20px;
    text-align: center;
}

h1 {
    font-size: 50px;
}

/* Apply styles to the main content */
main {
    padding: 20px;
}

p {
    font-size: 30px;
    line-height: 1.6;
}

/* Apply styles to the footer */
footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

/* Set the height of the HTML and body elements to 100% */
html, body {
    height: 100%;
}

body {
    background-image: url('/images/background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Three-column layout styles */
.container {
    display: flex;
    height: 100%; /* Set the height of the container to 100% */
}

.column {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%; /* Set the height of each column to 100% */
}

/* Set a maximum height for the left-column */
.center-column {

    text-align: center;
    max-height: 100vh; /* Set a maximum height based on window height */
    overflow: hidden; /* Hide any overflow content */
}

/* Adjust image height and width to fit within the column */
.center-column img {
    max-width: 100%;
    max-height: 10%; /* Adjust this value to leave space for captions */
    height: auto;
    width: auto;
    object-fit: contain; /* Maintain aspect ratio and fit within the available space */
}

.left-column {
    text-align: left;
}

.right-column {

    text-align: center;
}

.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
}

.bar {
    width: 50px; /* Adjust the width as needed */
    position: relative; /* Position the bars absolutely within the container */
    bottom: 0; /* Align bars at the bottom */
    transition: bottom 0.5s;
    border: 2px solid #000; /* Border style, width, and color */
  }

  #current-bar {
    background-color: #e74c3c;
    z-index: 2;
    height: 20px;
  }
  
  #average-bar {
    background-color: #f1c40f;
    z-index: 1;
    height: 20px;

  }
  
  #peak-bar {
    background-color: #2ecc71;
    z-index: 3;
    height: 20px;


  }