small changes on HTML and CSS

AzamAzis · AzamAzis · commit b100339bb642 · 2026-02-25T22:27:58.000+07:00
diff --git a/index.css b/index.css
@@ -28,7 +28,6 @@ body {
 	align-content: center;
 	background-color: var(--background-dark-blue);
 	display: grid;
-
 	min-height: 100vh;
 	min-height: 100dvh;
 }
@@ -41,15 +40,17 @@ button {
 
 button {
 	cursor: pointer;
-}
-
-button:hover {
-	opacity: 0.75;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+	-webkit-touch-callout: none;
 }
 
 button:active {
 	scale: 0.95;
-	opacity: 1;
+	opacity: 0.75;
 }
 
 hr {
@@ -187,3 +188,19 @@ hr {
 		flex-direction: row;
 	}
 }
+
+@media (min-width: 900px) {
+	button:hover {
+		opacity: 0.75;
+	}
+
+	button:active {
+		opacity: 1;
+	}
+}
+
+@media (orientation: landscape) {
+	.container {
+		margin: 1rem 0;
+	}
+}
diff --git a/index.html b/index.html
@@ -12,44 +12,50 @@
 		<link rel="stylesheet" href="index.css" />
 	</head>
 	<body>
-		<h1 class="title white center upperCase">Basketball Scoreboard</h1>
-		<div class="wrapper">
-			<div class="board">
-				<div class="player blue">
-					<h2 class="player__title center upperCase">Home</h2>
-					<div class="box">
-						<p class="score" id="HomeScore">0</p>
-					</div>
+		<div class="container">
+			<h1 class="title white center upperCase">Basketball Scoreboard</h1>
+			<div class="wrapper">
+				<div class="board">
+					<div class="player blue">
+						<h2 class="player__title center upperCase">Home</h2>
+						<div class="box">
+							<output class="score" id="HomeScore">0</output>
+						</div>
 
-					<div class="addition">
-						<button class="addition__minus white" onclick="homeSubtractOne()">-</button>
-						<button class="addition__plusOne white" onclick="homeAddOne()">+1</button>
-						<button class="addition__plusTwo white" onclick="homeAddTwo()">+2</button>
-						<button class="addition__plusThree white" onclick="homeAddThree()">+3</button>
+						<div class="addition">
+							<button class="addition__minus white" onclick="homeSubtractOne()">-</button>
+							<button class="addition__plusOne white" onclick="homeAddOne()">+1</button>
+							<button class="addition__plusTwo white" onclick="homeAddTwo()">+2</button>
+							<button class="addition__plusThree white" onclick="homeAddThree()">+3</button>
+						</div>
 					</div>
-				</div>
 
-				<div class="player">
-					<h2 class="player__title center upperCase red border--red">Guest</h2>
-					<div class="box border--red">
-						<p class="score red" id="GuestScore"></p>
-					</div>
-					<div class="addition">
-						<button class="addition__minus white border--red" onclick="guestSubtractOne()">
-							-
-						</button>
-						<button class="addition__plusOne white border--red" onclick="guestAddOne()">+1</button>
-						<button class="addition__plusTwo white border--red" onclick="guestAddTwo()">+2</button>
-						<button class="addition__plusThree white border--red" onclick="guestAddThree()">
-							+3
-						</button>
+					<div class="player">
+						<h2 class="player__title center upperCase red border--red">Guest</h2>
+						<div class="box border--red">
+							<output class="score red" id="GuestScore">0</output>
+						</div>
+						<div class="addition">
+							<button class="addition__minus white border--red" onclick="guestSubtractOne()">
+								-
+							</button>
+							<button class="addition__plusOne white border--red" onclick="guestAddOne()">
+								+1
+							</button>
+							<button class="addition__plusTwo white border--red" onclick="guestAddTwo()">
+								+2
+							</button>
+							<button class="addition__plusThree white border--red" onclick="guestAddThree()">
+								+3
+							</button>
+						</div>
 					</div>
 				</div>
-			</div>
 
-			<hr />
+				<hr />
 
-			<button class="reset white" onclick="reset()">Reset</button>
+				<button class="reset white" onclick="reset()" tabindex="-1">Reset</button>
+			</div>
 		</div>
 
 		<script defer src="index.js"></script>
