add skip to content

CollectionBuilder · Jun 5, 2024 · 8fb084d · 8fb084d
1 parent e62ee20
commit 8fb084d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,6 +6,7 @@
 <html lang="{{ site.lang | default: 'en-US' }}">
 {% include head.html %}
 <body>
+  <div id="skip-to-content"><a href="#main-content">Skip to main content</a></div>
 
   <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
     <symbol id="svg-link" viewBox="0 0 24 24">

diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
@@ -1,4 +1,27 @@
 // add custom sass here to override any styles
+#skip-to-content a {
+	padding:6px;
+	position: absolute;
+	top:-100px;
+	left:0px;
+	color:white;
+	border-right:1px solid white;
+	border-bottom:1px solid white;
+	border-bottom-right-radius:8px;
+	background:#BF1722;
+	-webkit-transition: top 1s ease-out;
+    transition: top 1s ease-out;
+    z-index: 100;
+}
+#skip-to-content a:focus {
+	position:absolute;
+	left:0px;
+	top:0px;
+	outline-color:transparent;	
+	-webkit-transition: top .1s ease-in;
+    transition: top .1s ease-in;
+}
+
 .site-header {
     background: black;
     .cb-logo {