Can't load variables into site.css for Flask app to render home.html

Question

I'm really struggling with trying to get my site.css file to accept two variables being passed in from my app.py using Jinja2 template i.e., {{ variable }}. Within app.py, I am defining two variables called: empty_fill_line and fill_line, which dynamically update with respect to the water level measurment recorded by an ultrasonic sensor.

What it should do, is I've created a table overlaid on an image of a tank in home.html, which has two rows (.empty-line and .fill-line). As the variables are adjusted with the measurement value, should be getting passed into site.css where .empty-line and .fill line are defined. However, it doesn't appear site.css is accepting this format. I've tried adding a script tag within home.html to include these two definitions, but it doesn't like it.

extract from app.py:

@app.route("/")
def home() -> str:
    distance = get_water_level()
    distance_percentage = distance / 0.126 # 0.126 = 12.6 cm internal height of tank
    fill_line = round(distance_percentage * 2.25) # convert distance to pixels in tank graphic
    empty_fill_line = 225 - fill_line # empty line inverse of fill line
    temp = get_water_temp()
    return render_template("home.html", distance=distance, temp=temp, fill_line=fill_line, empty_fill_line=empty_fill_line)

extract from home.html: (NOTE: I have deliberately added both variables into the div classes for testing)

<table>
      <tr>
        <td id="tank">
          <table id="tanktable" name="table" height=20px style="border-spacing: 50px;">
            <tr>
              <td>
                <div class="empty-line">{{ empty_fill_line }}</div>
                <div class="fill-line">{{ fill_line }}</div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

extract from site.css:

/* Water tank */
#tanktable {
  margin-top:29px;
  margin-left:2px;
  /* border: 1px solid rgb(245, 6, 6); */
  /* height: 225px; */
  border-collapse: collapse;
}
.empty-line {
  border-left: 180px solid rgb(255, 255, 255);
  height:{{ empty_fill_line }}px;
}
.fill-line {
  border-left: 180px solid #28a1f7;
  height:{{ fill_line }}px;
}

How this looks when I run the Flask app is as follows: Flask App

I'm completely stuck with how to get this working.

If I try to use inline css within home.html as follows:

  <table>
      <tr>
        <td id="tank">
          <table id="tanktable" name="table" height=20px style="border-spacing: 50px;">
            <tr>
              <td>
                <div class="empty-line" style="border-left: 180px solid rgb(255, 255, 255); height:{{ empty_fill_line }}px;"></div>
                <div class="fill-line" style="border-left: 180px solid #28a1f7; height:{{ fill_line }}px;"></div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

this is what happens: Flask app with inline css

Answer 1

Sample code

home.html

Here we are using inline css this will work for your solution.

You can also internal css which means you define css style code on head tag.

  <table>
      <tr>
        <td id="tank">
          <table id="tanktable" name="table" height=20px style="border-spacing: 50px;">
            <tr>
              <td>
                <div style="border-left: 180px solid rgb(255, 255, 255); height:{{ empty_fill_line }}px;">{{ empty_fill_line }}</div>
                <div style="border-left: 180px solid #28a1f7;height:{{ fill_line }}px;">{{ fill_line }}</div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>