doc: add "Skip to content" button

aduh95 · aduh95 · commit 09fb3adf80ba · 2025-01-30T10:44:37.000+01:00
PR-URL: #56750 Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Ulises Gascón <ulisesgascongonzalez@gmail.com> Reviewed-By: Claudio Wunder <cwunder@gnome.org>
diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
@@ -122,6 +122,19 @@ a.type {
 font-size: .9em;
 }
 
+.skip-to-content {
+ position: fixed;
+ top: -300%;
+}
+.skip-to-content:focus {
+ display: block;
+ top: 0;
+ left: 0;
+ background-color: var(--green1);
+ padding: 1rem;
+ z-index: 999999;
+}
+
 #content {
 position: relative;
 }
diff --git a/doc/template.html b/doc/template.html
@@ -26,6 +26,7 @@
 __JS_FLAVORED_DYNAMIC_CSS__
 </head>
 <body class="alt apidoc" id="api-section-__FILENAME__">
+ <a href="#apicontent" class="skip-to-content">Skip to content</a>
 <div id="content" class="clearfix">
 <div role="navigation" id="column2" class="interior">
 <div id="intro" class="interior">

-Original file line number
+Diff line change
 font-size:.9em;
+}
 +.skip-to-content {
 +position: fixed;
 +top:-300%;
 +}
 +.skip-to-content:focus {
 +display: block;
 +top:0;
 +left:0;
 +background-color:var(--green1);
 +padding:1rem;
 +z-index:999999;
 +}
++
 #content {
 position: relative;
+}
-Original file line number
+Diff line change
  __JS_FLAVORED_DYNAMIC_CSS__
 </head>
 <bodyclass="alt apidoc" id="api-section-__FILENAME__">
 +<ahref="#apicontent" class="skip-to-content">Skip to content</a>
 <divid="content" class="clearfix">
 <divrole="navigation" id="column2" class="interior">
 <divid="intro" class="interior">