Demo CSS Position

by Snj

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/freewall/1.0.5/freewall.min.js"></script>

<a href="javascript:void(0)" class="openbtn" onclick="openNav()">⍽</a>
<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div id="inputSlider"><input type="range" id="range" min="50" max="500" value="100"></div>
  <div class="overlay-content">
    <div class="container">
    </div>
  </div>  
</div>

SCSS

:root {
  --size: 100px;
}
#inputSlider{
    text-align: center;
    position: sticky;
    opacity: 0.6;
    display: grid;
    top: 40px;
    margin-left: 40px;
    background: #00000036;
    box-shadow: 3px 0px 10px black;
    width: 90%;
    z-index: 0;
    --size: 100px;
}
#console {
  margin-left: -4px;
  left: 0px;
  position: absolute;
  text-align: left;
}
#mainF { 
  padding: 1px;
  border: #5a5a5a solid 1px;
  color: #060606;
  border-left: none;
  position: absolute;
  width: calc(100% - 20px);
  bottom: 4px;
  border-right: none;
}
.container {
    padding: 0em 1em 1em 1em;
    display: grid;
    grid-gap: 1em;
    font-family: monospace;;
    grid-template-columns: repeat(auto-fitt, minmax(50px, 1fr));
    /* Change "auto-fit" to "auto-fill" above to see the difference */
    .img_div {
      height: var(--size);
    }
    .box {
      padding: 0em 0em 0.5em;
      height: auto;
      border-radius: 0.3em;
      /* background-color: rgba(255, 255, 255, 0.32) !important; */
      box-shadow: 10px 10px 30px rgba(14, 14, 14, 0.71);
        p {
          margin-top: 0;
          /* font-size: var(--size); */
        }

        span {
            font-weight: bold;
            position: relative;
            margin-left: 15px;
            color: #818181;

            :before {
                content: '';
                position: absolute;
                height: 1px;
                width: 10px;
                border-bottom: 1px solid black;
                top: 10px;
                left: -15px;

            }
        }
    }
}

@media (min-width: 550px) {
    /*
    .span-2 {
        grid-column: auto / span 2;
    }
    */
}

/* -----------  */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    background-color: #292929 !important;
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
   ...

JavaScript

function openNav() { $("#myNav").css("width", "100%"); }
function closeNav() { $("#myNav").css("width", "0%"); }
range.addEventListener("input", function() {
  document.body.style.setProperty("--size", this.value + "px");
});

function populate() {
  for (let item of found_results) {
      var temp_box = $("<div class='box'></div>");
      var temp_span = $("<a href='"+item.href+"' target='_blank'>"+item.text+"</a>");
      temp_box.append(temp_span);
      for (let img of item.images) {
        var temp_img = $("<img class='img_div' src="+img+">");
        temp_box.append(temp_img);
      }
      $(".container").append(temp_box);
  }
}
//populate();