Squashed commit of the following:

commit b66d940 Author: Victor Azevedo <34415964+victrme@users.noreply.github.com> Date: Fri Sep 23 11:22:46 2022 +0200 Removed button on mobile commit d5f069b Author: Victor Azevedo <34415964+victrme@users.noreply.github.com> Date: Fri Sep 23 11:20:20 2022 +0200 Visible skip to settings button on focus
victrme · Sep 23, 2022 · d365a11 · d365a11
1 parent ed0bdc7
commit d365a11
Show file tree

Hide file tree

Showing 3 changed files with 19 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/_responsive.scss b/src/styles/_responsive.scss
@@ -38,6 +38,10 @@
 		overflow-y: auto;
 	}
 
+	#skiptosettings {
+		display: none;
+	}
+
 	#interface {
 		#widgets #quotes_container {
 			width: 90vw;

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 {