From a26ea62b608761b0c90cf9bb448137b6659bcd7e Mon Sep 17 00:00:00 2001 From: BBaoVanC Date: Fri, 20 Jan 2023 16:25:28 -0600 Subject: [PATCH] Refresh the code block design --- assets/css/bobastyle.css | 24 ++++++++++++++++--- .../_default/_markup/render-codeblock.html | 5 ++++ theme.toml | 2 +- 3 files changed, 27 insertions(+), 4 deletions(-) create mode 100644 layouts/_default/_markup/render-codeblock.html diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css index 1924e59..327b8ee 100644 --- a/assets/css/bobastyle.css +++ b/assets/css/bobastyle.css @@ -682,13 +682,31 @@ table.markdown { /* Code blocks */ -.highlight > .chroma { +.code-block { + display: flex; + flex-direction: column; margin: 16px 0; - overflow: auto; + background-color: var(--background-1); + border-radius: 8px; +} +.code-block > .code-type { + background-color: var(--background-2); + padding: 4px 8px; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + font-family: monospace; +} +.code-block > .highlight { + margin: 8px 4px; } +.highlight > .chroma { + overflow: auto; +} .chroma { - background-color: var(--background-1) !important; + /* the syntax highlight CSS adds a border */ + background-color: transparent !important; + margin: 0; } .chroma .gp { diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html new file mode 100644 index 0000000..51ae5fd --- /dev/null +++ b/layouts/_default/_markup/render-codeblock.html @@ -0,0 +1,5 @@ +
+
{{ .Type }}
+ {{/* a div.highlight is already created by highlight function */}} + {{ highlight .Inner .Type }} +
diff --git a/theme.toml b/theme.toml index 44355e4..b0da64e 100644 --- a/theme.toml +++ b/theme.toml @@ -8,7 +8,7 @@ description = "Simple Hugo theme for boba.best and bbaovanc.com" homepage = "https://bbaovanc.com" tags = [] features = [] -min_version = "0.80.0" +min_version = "0.93.0" [author] name = "bbaovanc"