Refresh the code block design

This commit is contained in:
BBaoVanC 2023-01-20 16:25:28 -06:00
parent 7cff045cb3
commit a26ea62b60
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
3 changed files with 27 additions and 4 deletions

View File

@ -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 {

View File

@ -0,0 +1,5 @@
<div class="code-block">
<div class="code-type">{{ .Type }}</div>
{{/* a div.highlight is already created by highlight function */}}
{{ highlight .Inner .Type }}
</div>

View File

@ -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"