extended dt with kbd tags

removed styling of dt tages, which would make them look like keys and
added <kbd> tag inside of dt tag.
Added css style for kbd and removed some stylings for dt
This commit is contained in:
Marcel Hellwig 2018-01-15 18:12:38 +01:00
parent 6e741df1bd
commit 38e5d304fe
3 changed files with 15 additions and 23 deletions

View File

@ -94,20 +94,22 @@ pub fn render<T: fmt::Display, S: fmt::Display>(
<h2>Keyboard Shortcuts</h2>
<dl>
<dt>?</dt>
<dt><kbd>?</kbd></dt>
<dd>Show this help dialog</dd>
<dt>S</dt>
<dt><kbd>S</kbd></dt>
<dd>Focus the search field</dd>
<dt></dt>
<dt><kbd></kbd></dt>
<dd>Move up in search results</dd>
<dt></dt>
<dt><kbd></kbd></dt>
<dd>Move down in search results</dd>
<dt></dt>
<dt><kbd></kbd></dt>
<dd>Switch tab</dd>
<dt>&#9166;</dt>
<dt><kbd>&#9166;</kbd></dt>
<dd>Go to active search result</dd>
<dt style="width:31px;">+ / -</dt>
<dd>Collapse/expand all sections</dd>
<dt><kbd>+</kbd></dt>
<dd>Expand all sections</dd>
<dt><kbd>-</kbd></dt>
<dd>Collapse all sections</dd>
</dl>
</div>

View File

@ -585,18 +585,13 @@ body.blur > :not(#help) {
flex: 0 0 auto;
box-shadow: 0 0 6px rgba(0,0,0,.2);
width: 550px;
height: 354px;
height: auto;
border: 1px solid;
}
#help dt {
float: left;
border-radius: 4px;
border: 1px solid;
width: 23px;
text-align: center;
clear: left;
display: block;
margin-top: -1px;
float: left;
clear: left;
display: block;
}
#help dd { margin: 5px 35px; }
#help .infos { padding-left: 0; }
@ -1111,7 +1106,7 @@ h3.important {
kbd {
display: inline-block;
padding: 3px 5px;
font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font: 15px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
line-height: 10px;
vertical-align: middle;
border: solid 1px;

View File

@ -194,11 +194,6 @@ a.test-arrow {
border-color: #bfbfbf;;
}
#help dt {
border-color: #bfbfbf;
background: #fff;
}
.since {
color: grey;
}