fixed navbar and toolbar (again)

This commit is contained in:
th3keyboard 2024-11-12 17:34:20 -06:00
parent b85edc2ca1
commit 51d48b69c3
2 changed files with 14 additions and 9 deletions

View file

@ -21,16 +21,18 @@ html, body {
}
.navbarCont {
position: relative;
background-color: var(--utsa-blue);
width: 100%;
text-align: center;
margin-bottom: 10vh;
position: fixed;
top: 0;
}
.navbarCont a {
display: flex;
flex-direction: row;
float: left;
text-align: center;
justify-content: space-around;
padding: 12px;
text-decoration: none;
color: var(--utsa-orange);
@ -77,7 +79,8 @@ html, body {
background-color: var(--utsa-blue);
width: 100%;
height: auto;
margin-top: 11vh;
position: fixed;
bottom: 0;
}
.toolbarItems {
@ -122,11 +125,9 @@ canvas {
}
.navbarCont {
position: relative;
background-color: var(--utsa-blue);
width: 100%;
text-align: center;
margin-bottom: 11vh;
}
.navbarCont a {
@ -141,4 +142,8 @@ canvas {
height: 500px;
width: 500px;
}
.toolbar {
font-size: 80%;
}
}

View file

@ -24,14 +24,14 @@
<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
<div id="toolbar" class="d-flex align-items-center toolbar">
<div class="toolbarItems">
<button id="zoomOut">-</button>
<!--extra space for toolbar-->
</div>
<div class="toolbarItems">
<label for="stroke">Strokes</label>
<input id="stroke" name="stroke" type="color" class="strokePicker">
</div>
<div class="toolbarItems">
<button onclick="zoomIn"id="zoomIn">+</button>
<!--extra space for toolbar-->
</div>
</div>
<!--</div>-->