fix proportions

jurgengjoncari · May 3, 2024 · 2ef4a78 · 2ef4a78
1 parent 821387d
commit 2ef4a78
Show file tree

Hide file tree

Showing 3 changed files with 318 additions and 197 deletions.
diff --git a/index.html b/index.html
@@ -10,27 +10,35 @@
 	<body class="container min-vh-100 d-flex flex-column justify-content-between align-items-center">
 		<header class=""><h1>Calculator</h1></header>
 		<main>
+<!--			<button class="btn btn-xl btn-secondary">hello world</button>-->
 			<div class="card">
 				<div class="card-body">
-					<output data-output id="output" class="text-end display-4 d-block form-control-lg border my-2">0</output>
+					<form>
+<!--						<div class="form-group">-->
+<!--							<input data-output class="text-end display-4 d-block form-control-xl border my-2"></input>-->
+<!--						</div>-->
+						<div class="form-group">
+							<output data-output id="output" class="text-end d-block form-control-xl border my-2">0</output>
+						</div>
+					</form>
 					<div id="numpad" class="d-grid gap-2">
-						<button class="btn btn-lg btn-secondary" data-delete><abbr title="Delete">Del</abbr></button>
-						<button class="btn btn-lg btn-secondary" data-operator id="division">/</button>
-						<button class="btn btn-lg btn-secondary" data-operator id="multiplication">*</button>
-						<button class="btn btn-lg btn-secondary" data-operator id="subtraction">-</button>
-						<button class="btn btn-lg btn-secondary" data-digit>7</button>
-						<button class="btn btn-lg btn-secondary" data-digit>8</button>
-						<button class="btn btn-lg btn-secondary" data-digit>9</button>
-						<button class="btn btn-lg btn-secondary" data-operator id="plus">+</button>
-						<button class="btn btn-lg btn-secondary" data-digit>4</button>
-						<button class="btn btn-lg btn-secondary" data-digit>5</button>
-						<button class="btn btn-lg btn-secondary" data-digit>6</button>
-						<button class="btn btn-lg btn-secondary" data-digit>1</button>
-						<button class="btn btn-lg btn-secondary" data-digit>2</button>
-						<button class="btn btn-lg btn-secondary" data-digit>3</button>
-						<button class="btn btn-lg btn-primary" data-equals id="equals">=</button>
-						<button class="btn btn-lg btn-secondary" data-digit id="zero">0</button>
-						<button class="btn btn-lg btn-secondary" data-decimal id="decimal">.</button>
+						<button class="btn btn-xl btn-tertiary" data-delete><i class="bi bi-backspace"></i></button>
+						<button class="btn btn-xl btn-tertiary" data-operator id="division">/</button>
+						<button class="btn btn-xl btn-tertiary" data-operator id="multiplication">*</button>
+						<button class="btn btn-xl btn-tertiary" data-operator id="subtraction">-</button>
+						<button class="btn btn-xl btn-secondary" data-digit>7</button>
+						<button class="btn btn-xl btn-secondary" data-digit>8</button>
+						<button class="btn btn-xl btn-secondary" data-digit>9</button>
+						<button class="btn btn-xl btn-tertiary" data-operator id="plus">+</button>
+						<button class="btn btn-xl btn-secondary" data-digit>4</button>
+						<button class="btn btn-xl btn-secondary" data-digit>5</button>
+						<button class="btn btn-xl btn-secondary" data-digit>6</button>
+						<button class="btn btn-xl btn-secondary" data-digit>1</button>
+						<button class="btn btn-xl btn-secondary" data-digit>2</button>
+						<button class="btn btn-xl btn-secondary" data-digit>3</button>
+						<button class="btn btn-xl btn-primary" data-equals id="equals">=</button>
+						<button class="btn btn-xl btn-secondary" data-digit id="zero">0</button>
+						<button class="btn btn-xl btn-tertiary" data-decimal id="decimal">.</button>
 					</div>
 				</div>
 			</div>