Visible skip to settings button on focus

victrme · Sep 23, 2022 · d5f069b · d5f069b
1 parent 3bbe137
commit d5f069b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/index.html b/src/index.html
@@ -26,7 +26,7 @@
 	</head>
 
 	<body class="autodark">
-		<button id="skiptosettings">Skip to Settings</button>
+		<button id="skiptosettings" type="button">Skip to Settings</button>
 
 		<div id="editlink">
 			<div>
@@ -156,7 +156,7 @@ <h2 id="greetings"></h2>
 			<div id="creditContainer">
 				<div id="credit"></div>
 			</div>
-			
+
 			<div id="showSettings" class="init">
 				<button aria-label="Toggle settings menu">
 					<img src="src/assets/interface/gear.svg" alt="" draggable="false" />

diff --git a/src/styles/style.scss b/src/styles/style.scss
@@ -3,9 +3,22 @@
 
 #skiptosettings {
 	position: absolute;
+	top: 1em;
+	left: 1em;
 	opacity: 0;
 	user-select: none;
 	touch-action: none;
+	color: white;
+	border: none;
+	border-radius: 4px;
+	padding: 0.5em 1em;
+	transition: opacity 0.15s $easeOutThree;
+
+	@include frostedGlass($alpha: 0.2, $fbAlpha: 0.2, $fbColor: #fff);
+
+	&:focus-visible {
+		opacity: 1;
+	}
 }
 
 #background_overlay {