diff --git a/layouts/partials/header.html b/layouts/partials/header.html index d460784..d6ab2b1 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -36,7 +36,7 @@ } .site-title {text-align: center; font-size: 1em;} h1 {font-size: 1.7em;} - hr {height: 1px; background-color: #aaa; border: none; max-width: calc(100% - 10px);} + hr {height: 1px; background-color: #aaa; border: none; width: 100%;} .posts-list .post-item {margin: 0;} .posts-list .date {margin-right: 0.5em;} a {color: royalblue;} diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html index 1efe169..cef3853 100644 --- a/layouts/shortcodes/details.html +++ b/layouts/shortcodes/details.html @@ -1,21 +1,4 @@ -
- {{ .Get 0 }} +
+ {{ .Get 0 }} {{ .Inner | .Page.RenderString }} -
- - \ No newline at end of file +
\ No newline at end of file diff --git a/layouts/shortcodes/toc.html b/layouts/shortcodes/toc.html index 61edc80..b1b356c 100644 --- a/layouts/shortcodes/toc.html +++ b/layouts/shortcodes/toc.html @@ -1,6 +1,5 @@ -
- +
+ Table of Contents {{ .Page.TableOfContents }} diff --git a/static/css/style.css b/static/css/style.css index c56ec22..7d41844 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -37,8 +37,8 @@ h1, h2, h3, h4, h5, h6 { text-wrap: balance; } .menu li { display: inline-block; } .menu a { text-decoration: none; } -/* Boxed elements */ -.article-meta, .menu a, blockquote, table, button.menu, pre { +/* Boxed elements for navigation */ +.menu a, button.menu { background: var(--block-bg); border: 1px solid var(--border-color); box-shadow: 2px 2px var(--shadow-color); @@ -46,6 +46,31 @@ h1, h2, h3, h4, h5, h6 { text-wrap: balance; } margin: 4px; } +/* Full-width boxed elements */ +.article-meta, blockquote, pre, details { + background: var(--block-bg); + border: 1px solid var(--border-color); + box-shadow: 2px 2px var(--shadow-color); + padding: 5px; + margin: 0; + width: 100%; + box-sizing: border-box; +} + +/* Details element specific styling */ +details { + margin-bottom: 1em; + border-left: 4px solid var(--accent-color); +} +details summary { + cursor: pointer; + font-weight: bold; + padding: 0.5em; +} +details > *:not(summary) { + padding: 0.5em; +} + pre { padding: 1em; overflow-x: auto; @@ -57,7 +82,7 @@ hr { height: 1px; background-color: var(--border-color); border: none; - max-width: calc(100% - 10px); + width: 100%; } /* Links */ @@ -93,9 +118,10 @@ img, figure, iframe, video, .responsive-image { main { hyphens: auto; } blockquote { border-left: 4px solid var(--accent-color); - padding: 3px 1em; + padding: 5px 1em; font-size: var(--font-size-small); line-height: var(--line-height-small); + box-sizing: border-box; } /* Buttons */ @@ -164,12 +190,13 @@ figure figcaption, .imgCaption { /* Tables */ table { - margin: auto; + margin: 0; border-left: 4px solid var(--accent-color); background: var(--bg-color); - max-width: calc(100% - 10px); + width: 100%; border-collapse: collapse; font-size: var(--font-size-small); + box-sizing: border-box; } table thead th { border-bottom: 1px solid var(--accent-color); @@ -187,7 +214,9 @@ thead, tfoot, tr:nth-child(even) { background: #eee; } background-color: #fff8f8; color: #822; padding: 10px; - margin: 10px 0; + margin: 0; + width: 100%; + box-sizing: border-box; border-radius: 3px; font-size: var(--font-size-small); } @@ -198,8 +227,6 @@ thead, tfoot, tr:nth-child(even) { background: #eee; } white-space: nowrap; overflow-x: auto; font-size: var(--font-size-small); - content-visibility: auto; - contain-intrinsic-size: 0 500px; /* Estimate of list size */ } }