diff --git a/theme/static/css/main.css b/theme/static/css/main.css index 1e8820de949b6cba10f040d23b4f781e4df04aae..c64e13a04ae1b3a840308ba6bbf79485bf32daf5 100644 --- a/theme/static/css/main.css +++ b/theme/static/css/main.css @@ -19,6 +19,7 @@ --category-contrast-color: #FFFFFF; --header-menu-bg-color: rgb(240, 240, 240, 0.8); --header-menu-hover-bg-color: #E6E6E6; + --header-menu-button-size: 3rem; } * { @@ -135,6 +136,9 @@ body > header img { #sitemenu-container .show-header-menu { display: none; + font-size: 1rem; + font-style: normal; + /*padding: 1rem;*/ background-color: var(--header-menu-bg-color); -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ @@ -145,6 +149,10 @@ body > header img { top: 0; left: 0; z-index: 11; + width: var(--header-menu-button-size); + height: var(--header-menu-button-size); + padding-top: calc(var(--header-menu-button-size) / 2 - 0.75rem); + text-align: center; } #sitemenu-container .show-header-menu:hover { background-color: var(--header-menu-hover-bg-color); @@ -170,62 +178,6 @@ body > header img { display: none; } -@media only screen and (max-width: 94ch) { - body > header a { - justify-content: center; - flex-wrap: wrap; - } - #sitemenu-container { - margin-bottom: 0.2rem; - font-size: 1.2rem; - } - #sitemenu-container nav { - display: none; - border-top: 0; - position: fixed; - top: 3.2rem; - left: 0; - z-index: 10; - width: 100%; - } - #sitemenu-container nav > ul { - flex-direction: column; - max-height: calc(100vh - 3.2rem); - overflow: scroll; - } - #sitemenu-container nav > ul > li { - width: 100%; - background-color: var(--category-contrast-color); - } - #sitemenu-container .show-header-menu { - display: inline-block; - font-style: normal; - padding: 1rem; - } - #sitemenu-container a { - width: 100%; - /*! margin-top: 0.2rem; */ - /* padding-bottom: 0.2rem;*/ - box-sizing: border-box; - display: block; - line-height: 2rem; - /* border-top: 0.1rem solid #333; */ - } - /*#sitemenu-container a:hover { - border-bottom: 0.1rem solid #536; - }*/ - #sitemenu-container input[type=checkbox]:checked ~ .show-header-menu-bg { - display: block; - } - #sitemenu-container input[type=checkbox]:checked ~ nav { - display: block; - } - :root { - --site-header-height: 3rem; - /* --sitemenu-nav-height: 3rem; */ - } -} - @@ -402,6 +354,7 @@ sup { .content iframe { width: 100%; min-height: var(--site-width); + overflow: scroll; } .content p, @@ -457,10 +410,12 @@ sup { .content .codeinline, .content .codeblock { - white-space: pre-wrap; + /*white-space: pre-wrap; overflow-wrap: break-word; - word-break: keep-all; + word-break: keep-all;*/ + overflow: scroll; } + .content .codeinline { background-color: rgba(0, 0, 0, 0.04); color: inherit; @@ -482,13 +437,16 @@ sup { .content img { width: 100%; max-width: 100%; + overflow: scroll; } + .content table { width: 100%; display: block; border-collapse: collapse; border-spacing: 0; + overflow: scroll; } .content table tr { @@ -697,3 +655,71 @@ ul.cards li a:hover { color:#843534; } + +@media only screen and (max-width: 94ch) { + body > header { + margin-left: var(--header-menu-button-size); + } + body > header a { + justify-content: center; + flex-wrap: wrap; + } + #sitemenu-container { + margin-bottom: 0.2rem; + font-size: 1.2rem; + } + #sitemenu-container nav { + display: none; + border-top: 0; + position: fixed; + top: var(--header-menu-button-size); + left: 0; + z-index: 10; + width: 100%; + } + #sitemenu-container nav > ul { + flex-direction: column; + max-height: calc(100vh - var(--header-menu-button-size)); + overflow: scroll; + } + #sitemenu-container nav > ul > li { + width: 100%; + background-color: var(--category-contrast-color); + } + #sitemenu-container .show-header-menu { + display: inline-block; + } + #sitemenu-container a { + width: 100%; + /*! margin-top: 0.2rem; */ + /* padding-bottom: 0.2rem;*/ + box-sizing: border-box; + display: block; + line-height: 2rem; + /* border-top: 0.1rem solid #333; */ + } + /*#sitemenu-container a:hover { + border-bottom: 0.1rem solid #536; + }*/ + #sitemenu-container input[type=checkbox]:checked ~ .show-header-menu-bg { + display: block; + } + #sitemenu-container input[type=checkbox]:checked ~ nav { + display: block; + } + :root { + --site-header-height: 3rem; + /* --sitemenu-nav-height: 3rem; */ + } + + + .content h1, + .content h2, + .content h3, + .content h4, + .content h5, + .content h6 { + margin-top: 0.2em; + margin-bottom: 0.2em; + } +}