diff --git a/supplemental-ui/css/site-extra.css b/supplemental-ui/css/site-extra.css index 19e1c59..7cfe9ac 100644 --- a/supplemental-ui/css/site-extra.css +++ b/supplemental-ui/css/site-extra.css @@ -29,7 +29,6 @@ body { .nav-list{ margin: 0; - } footer.footer { @@ -45,18 +44,18 @@ footer.footer .link-separator color: #c02222; } -.doc h1 { +.doc > h1.page:first-child { color: #ffffff; background-color: #c02222; padding: 1rem 2rem 0.75rem; - margin: 1.5rem auto 1.5rem auto !important; + margin: auto auto 0.5em auto; text-transform: uppercase; } .doc { width: 100%; max-width: 100%; - padding: 0; + padding: 0.5em; } /* ====== Global Styles (Light Theme) ====== */ body { @@ -114,7 +113,7 @@ body { /* ====== Sidebar ====== */ .sidebar { background: #f9fafb; - padding: 1rem 1rem 0rem 1rem ; + padding: 1rem 1rem 0rem 1rem; font-size: 0.9rem; color: #6b7280; flex: 1 1 250px; @@ -152,3 +151,30 @@ body { box-shadow: 0 0 20px rgba(0,0,0,0.5); transition: transform 0.3s ease; } + +/* =============================== + Mobile / Small Screen Styles + =============================== */ +@media screen and (max-width: 768px) { + .toolbar { + padding: 0; + bottom: 0; + width: 100%; + position: fixed; + top: auto; + } + + /* Toolbar will otherwise overlap end of article */ + body { + padding-bottom: 2.5em !important; + } + + /* Nav will otherwise be offset by toolbar */ + .nav { + height: calc(100vh - 2.5em) !important; + } + + .nav-container { + top: unset; + } +}