logan/ThePlaceHolders
1
0
Fork 0
mirror of https://github.com/adanrsantos/ThePlaceHolders.git synced 2024-12-16 05:50:39 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tweaked canvas css and html.

Browse source
This commit is contained in:
reddishquill371 2024-11-06 18:15:24 -06:00
parent cb296a5fe4
commit 5966c70b1a
2 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
static/canvas.css
View file

@ -1,3 +1,8 @@
:root {
--utsa-orange: #f15a22;
--utsa-blue: #0c2340;
}
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -12,10 +17,11 @@ html, body {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--utsa-orange);
} }
.navbarCont { .navbarCont {
background-color: grey; background-color: var(--utsa-blue);
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
@ -36,9 +42,9 @@ html, body {
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
border-top: solid black 1px; border-top: solid black 1px;
background-color: var(--utsa-blue);
width: 100%; width: 100%;
height: 60px; height:auto;
z-index: 10;
} }
.toolbarItems { .toolbarItems {
@ -46,7 +52,7 @@ html, body {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-weight: 900; font-weight: 900;
color: blue; color: white;
text-align: center; text-align: center;
height: 100%; height: 100%;
width: 100px; width: 100px;
@ -64,7 +70,7 @@ html, body {
canvas { canvas {
background-color: lightblue; background-color: white;
margin: 20px; margin: 20px;
image-rendering: pixelated; image-rendering: pixelated;
} }

10
static/canvas.html
View file

@ -13,12 +13,12 @@
<body> <body>
<div class="wrapper"> <div class="wrapper">
<div class="navbarCont"> <div class="navbarCont">
<h1>ThePlaceHolders</h1> <h1 style="color: white;">ThePlaceHolders</h1>
</div> </div>
<!--note to self: below IS the canvas--> <!--note to self: below IS the canvas-->
<div class="canvasCont"> <!--<div class="canvasCont">-->
<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas> <canvas id="canvas" width="1000" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
<div id="toolbar" class="toolbar"> <div id="toolbar" class="d-flex align-items-center toolbar">
<div class="toolbarItems"> <div class="toolbarItems">
<button id="zoomOut">-</button> <button id="zoomOut">-</button>
</div> </div>
@ -30,7 +30,7 @@
<button onclick="zoomIn"id="zoomIn">+</button> <button onclick="zoomIn"id="zoomIn">+</button>
</div> </div>
</div> </div>
</div> <!--</div>-->
<!--note to self: above IS the canvas--> <!--note to self: above IS the canvas-->
</div> </div>
<script src="./canvas.js"></script> <script src="./canvas.js"></script>