[STYLE] Remove some overflow (small screens) and break words in code

layouts/shortcodes/details.html

@@ -1,3 +1,3 @@
-<details><summary>{{ .Get "title" }}</summary>
+<details {{ with .Get "class" }} class="{{ . }}"{{ end }}><summary>{{ .Get "title" }}</summary>
 {{ .Inner }}
 </details>

static/css/style.css

@@ -488,7 +488,10 @@ a:focus {
 /******************* Article Figure *******************/
 .article-body figure {
 	margin: 1em 0;
-	display: table;
+	/*display: table;*/
+	width: max-content;
+	max-width: 100%;
+	overflow: auto;
 }
 .article-body figure picture,
 .article-body figure figcaption {
@@ -525,6 +528,8 @@ a:focus {
 }
 .article-body figure.border figcaption {
 	background-color: var(--background-color-light);
+	min-width: 100%;
+	display: inline-block;
 }
 .article-body figure>a {
 	display: block;
@@ -557,7 +562,8 @@ a:focus {
 	border: 3px solid var(--background-color-light);
 	min-width: 100%;
 }
-.article-body .tabular td {
+.article-body .tabular td,
+.article-body .tabular th {
 	padding: 0 0.4rem;
 }
 .article-body .tabular th {
@@ -594,15 +600,20 @@ pre {
 	padding: 0.3rem;
 	margin-top: 0.5rem;
 	background: repeating-linear-gradient(28deg, #1C1C1C, #1C1C1C 20px, #121212 20px, #121212 40px);
+	overflow: auto;
 }
 :not(pre)>code, :not(details)>code {
 	font-size: 1rem;
 	color: var(--font-color-em);
+	word-break: break-word;
+}
+.allowbreak code {
+	word-break: break-word;
 }
 
 /******************* Article Details *******************/
 details{
-	overflow: scroll;
+	overflow: auto;
 }
 details[open] {
 	outline: 1px solid white;