diff --git a/index.html b/index.html
index 4d088cc..fdb5fc3 100644
--- a/index.html
+++ b/index.html
@@ -57,64 +57,109 @@
padding: 12px;
transition: 0.5s;
border-radius: 2px;
- background-color: #222;
+ background: #222;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 1.1rem;
}
- aside {
- position: fixed;
- box-sizing: border-box;
- left: 0;
- width: 100%;
- max-width: 190px;
- height: 100%;
- padding: 15px 0 0;
- transition: transform 700ms;
- transform: translateX(-205px);
- background-color: #fff;
- box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
- overflow: auto;
- z-index: 1;
- }
-
- aside[data-toggled='true'] {
- transform: translateX(0);
- }
-
- h1 {
- margin: 0 25px 15px;
- line-height: 1rem;
- }
-
- ul {
- margin: 0 0 15px;
- padding: 0;
- }
-
+ ul,
li {
+ padding: 0;
list-style: none;
}
- a {
+ .overlay {
+ position: fixed;
+ display: flex;
+ justify-content: center;
+ box-sizing: border-box;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ padding: 10px;
+ transition: 200ms;
+ background: #222;
+ visibility: hidden;
+ opacity: 0;
+ z-index: 1;
+ overflow: auto;
+ }
+
+ .overlay[data-toggled='true'] {
+ visibility: visible;
+ opacity: 1;
+ }
+
+ .lists {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ overflow: auto;
+ }
+
+ .category {
+ width: 160px;
+ margin: 10px;
+ }
+
+ .category-name {
+ margin: 0;
+ padding: 14px;
+ border-radius: 2px 2px 0 0;
+ background: #30a388;
+ color: #19725f;
+ font-size: .7rem;
+ text-transform: uppercase;
+ text-align: center;
+ }
+
+ .command {
+ transition: background 200ms;
+ background: #333;
+ }
+
+ .command:hover {
+ background: #2f2f2f;
+ }
+
+ .command:nth-child(even) {
+ background: #3a3a3a;
+ }
+
+ .command:nth-child(even):hover {
+ background: #393939;
+ }
+
+ .command:last-of-type {
+ border-radius: 0 0 2px 2px;
+ }
+
+ .command a {
display: block;
- padding: 0 25px;
- color: #222;
- line-height: 1.7rem;
+ padding: 14px 12px;
+ color: #eee;
+ font-size: .8rem;
+ line-height: 1.3rem;
text-decoration: none;
}
- a:hover .help-name {
- text-decoration: underline;
- }
-
- .help-key {
+ .command-key {
+ display: block;
+ width: 32px;
+ margin-right: 10px;
+ float: left;
+ border-radius: 2px;
+ background: #292929;
font-family: 'Courier New', monospace;
+ text-align: center;
}
- .help-name {
- font-size: 0.9rem;
+ @media (min-width: 740px) {
+ .overlay {
+ align-items: center;
+ }
}
@@ -125,9 +170,8 @@
-