mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Make skip link look less "bare bones"
Additional markup for the skip link (to ensure it has the same effective width as the main content, and to provide an outline around just the link text) plus some basic styles...make it look a bit more in keeping with the overall look and feel of the docs.
This commit is contained in:
parent
8be858aac4
commit
d5647e1f62
3 changed files with 22 additions and 2 deletions
|
@ -5,7 +5,7 @@
|
|||
{% include header.html %}
|
||||
</head>
|
||||
<body>
|
||||
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
|
||||
<a id="skippy" class="sr-only sr-only-focusable" href="#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>
|
||||
|
||||
<!-- Docs master nav -->
|
||||
{% include nav/main.html %}
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
{% include header.html %}
|
||||
</head>
|
||||
<body class="bs-docs-home">
|
||||
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
|
||||
<a id="skippy" class="sr-only sr-only-focusable" href="#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>
|
||||
|
||||
<!-- Docs master nav -->
|
||||
{% include nav/main.html %}
|
||||
|
|
|
@ -89,6 +89,26 @@ body {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Fancy skip link
|
||||
*
|
||||
* Make it look a bit less "bare bones"
|
||||
*/
|
||||
|
||||
#skippy {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
color: #fff;
|
||||
background-color: #6F5499;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#skippy .skiplink-text {
|
||||
padding: 0.5em;
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Main navigation
|
||||
*
|
||||
|
|
Loading…
Reference in a new issue