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 */
}
}