diff --git a/public/css/styles.css b/public/css/styles.css index 93679de..0249d74 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -53,7 +53,7 @@ figure p img { :focus:not([tabindex="-1"]), [data-expands]:focus svg, -.patterns a:focus span { +.patterns a:focus .text { outline: 3px solid #ccc; outline-offset: 2px; } @@ -148,9 +148,13 @@ main ul ul { /* Buttons */ button { - font-size: inherit; + font-size: 1.25rem; font-family: inherit; font-weight: inherit; + background: #111; + color: #fff; + padding: 0.75rem; + border: 0; } /* Tables */ @@ -210,6 +214,9 @@ th:empty { .library-desc { font-style: italic; margin-top: 0.25rem; + margin-left: auto; + margin-right: auto; + max-width: 30rem; } .main-and-footer { @@ -279,6 +286,19 @@ th:empty { text-decoration-skip: ink; } +/* menu button */ + +#menu-button { + display: none; + width: 100%; + text-align: center; +} + +#menu-button:focus { + outline: none; + box-shadow: inset 0 0 0 0.25rem #ccc; +} + /* Pattern lists */ .patterns-list { @@ -629,10 +649,41 @@ a .balloon { .patterns h3 { font-size: 1.125rem; + border-top: 4px solid; + border-bottom: 4px solid; + padding: 0.75rem 0; + } + + .patterns ul ul { + margin: 0; + } + + .patterns li { + margin-top: 0; } .pattern { font-size: 1rem; } + .pattern a { + padding: 0.75rem 0; + } + + .pattern + .pattern { + border-top: 1px solid; + } + + #menu-button { + display: block; + } + + #patterns-list { + display: none; + } + + [aria-expanded="true"] + #patterns-list { + display: block; + } + } diff --git a/public/index.html b/public/index.html index 12d0b64..5af66d5 100644 --- a/public/index.html +++ b/public/index.html @@ -63,33 +63,31 @@

Documentation for the Infusion pattern library builder. This documentation is constructed using the builder itself.