From 951851c95431412802d4585e206fa5ae503fd946 Mon Sep 17 00:00:00 2001 From: Nate Contino Date: Tue, 17 Dec 2024 11:26:38 -0500 Subject: [PATCH] Make mobile top bar and sidebar prettier; fix theme toggle hover color on landing page; stop toc sidebar scrollbar from always showing on linux chromium --- jekyll-assets/_layouts/docs.html | 7 +------ jekyll-assets/css/style.css | 32 +++++++++++++++++++++----------- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/jekyll-assets/_layouts/docs.html b/jekyll-assets/_layouts/docs.html index 2627c2f52..64d3237b0 100644 --- a/jekyll-assets/_layouts/docs.html +++ b/jekyll-assets/_layouts/docs.html @@ -18,12 +18,7 @@

{% include theme.html %} diff --git a/jekyll-assets/css/style.css b/jekyll-assets/css/style.css index d344807a6..72223128f 100644 --- a/jekyll-assets/css/style.css +++ b/jekyll-assets/css/style.css @@ -20,6 +20,7 @@ --textcolor: white; --subtle-text: #CCC; --theme-toggle-label: url("data:image/svg+xml;utf8,"); + --mobile-menu-label: url("data:image/svg+xml,%3Csvg width='30px' height='40px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='%23FFF' d='M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z'/%3E%3C/g%3E%3C/svg%3E"); /* header and footer styling */ --rptl-header-background-color: var(--bg); @@ -59,6 +60,7 @@ --textcolor: black; --subtle-text: #444; --theme-toggle-label: url("data:image/svg+xml;utf8,"); + --mobile-menu-label: url("data:image/svg+xml,%3Csvg width='30px' height='40px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='var(--textcolor)' d='M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z'/%3E%3C/g%3E%3C/svg%3E"); /* header and footer styling */ --rptl-header-background-color: var(--bg); @@ -127,7 +129,7 @@ code { margin-bottom: 0px; top: 0; z-index: 99; - background-color: var(--bg); + background-color: var(--code-bg-colour); } .toptitle h1 { @@ -138,7 +140,7 @@ code { position: relative; margin-top: 0px; text-align: center; - margin-top: 10px; + padding-top: 10px; margin-left: 10px; flex-grow: 1; } @@ -176,7 +178,7 @@ div.subtitle p { } #docs-header a:hover { - color: var(--brand-colour); + color: var(--accent); text-decoration: none; background-color: var(--toc-hover-colour); } @@ -304,6 +306,7 @@ pre { #theme-toggle-container { align-self: center; align-items: start; + display: block; } #docsearch { @@ -1386,6 +1389,11 @@ footer { .mobile-menu-toggle { display: none; + align-self: baseline; +} + +.mobile-menu-toggle-inner { + content: var(--mobile-menu-label); } #mobile-toggle { @@ -1415,7 +1423,7 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 { } .toc { - overflow-y: scroll; + overflow-y: auto; height: 90vh; background-color: var(--code-bg-colour); max-width: 25vw; @@ -1426,6 +1434,7 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 { position: sticky; background-color: var(--code-bg-colour); z-index: 102; + padding-bottom: 10px; box-shadow: var(--code-bg-colour-transparent) 0px 10px 15px -5px, var(--code-bg-colour-transparent) 0px 10px 10px -5px; } @@ -1464,6 +1473,7 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 { /* no need for box shadow in mobile mode */ #toc-inner { box-shadow: var(--code-bg-colour-transparent) 0px; + padding-bottom: 0px; } #mobile-toggle:checked ~ .legal { @@ -1488,23 +1498,23 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 { } .mobile-menu-toggle { - font-size: 3em; display: block; padding-left: 5px; padding-right: 5px; } - .toc { - height: auto; + #theme-toggle-container { + display: block; + padding-left: 5px; + padding-right: 5px; } - .mobile-menu-toggle div { - transform: translateY(-3px); + .toc { + height: auto; } .mobile-menu-toggle:hover { - color: var(--brand-colour); - text-decoration: none; + border-radius: 3px; background-color: var(--toc-hover-colour); }