From 6a57aac1e45b9d40f842cf2ca1a91f42b5bd514d Mon Sep 17 00:00:00 2001 From: loikein Date: Sat, 15 Apr 2023 18:51:02 +0100 Subject: [PATCH] address https://github.com/loikein/hugo-tufte/issues/4 --- assets/scss/components/code-highlight.scss | 80 +++++---- assets/scss/syntax/highlight-dark.scss | 9 -- assets/scss/syntax/highlight-light.scss | 9 -- assets/scss/syntax/syntax-dark.scss | 179 +++++++++++---------- assets/scss/syntax/syntax-light.scss | 7 +- assets/scss/vendor/tufte.scss | 1 + 6 files changed, 141 insertions(+), 144 deletions(-) diff --git a/assets/scss/components/code-highlight.scss b/assets/scss/components/code-highlight.scss index c0f2a27..f223756 100644 --- a/assets/scss/components/code-highlight.scss +++ b/assets/scss/components/code-highlight.scss @@ -1,64 +1,76 @@ $ht-code-border-radius: .4em; .highlight { - width: 55%; + width: 50%; overflow-x: scroll; - border-radius: $ht-code-border-radius; + // border-radius: $ht-code-border-radius; + margin-top: 1em; + margin-bottom: 1em; + margin-right: 2.5%; + margin-left: 2.5%; + -ms-overflow-style: none; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + + code { + font-size: 1rem; + display: block; + } + + &>.chroma { + margin: 0; + } + + &>.chroma .hl { + // border-radius: $ht-code-border-radius / 2; + display: block; + + &::before{ + content: "> "; + position: absolute; + left: 0; + color: #111; + } + } &>div.chroma>table.lntable{ - margin: $ht-code-border-radius 0 $ht-code-border-radius 0; + overflow: initial; + // margin: $ht-code-border-radius 0 $ht-code-border-radius 0; & td:first-of-type { & span:not(& span>span) { padding: 0 .75em 0 .5em; } } - } - &>.chroma>code { + pre { + margin-block-start: 0.5em; + margin-block-end: 0.5em; + } + } + + &>.chroma>code { width: max-content; margin-top: .5em; margin-bottom: .5em; margin-left: .5em; + &>span.hl{ margin-left: -.5em; padding-left: .5em; } } - - .chroma .hl { - // border-radius: $ht-code-border-radius / 2; - display: block; - } - - &::-webkit-scrollbar { - border-radius: $ht-code-border-radius; - width: 10px; - height: 1rem; - } - &::-webkit-scrollbar-thumb { - border-radius: $ht-code-border-radius; - } } + @media screen and (max-width: 760px) { - .highlight { + .highlight .chroma { width: 90%; } } -.highlight .lntable { - overflow: initial; -} - -.highlight pre { - margin: 0; -} - -.highlight pre code { - display: block; - font-size: 1rem; -} - // fix #48 => https://github.com/slashformotion/hugo-tufte/issues/48 ul>li>div.highlight { width: 100%; -} \ No newline at end of file +} diff --git a/assets/scss/syntax/highlight-dark.scss b/assets/scss/syntax/highlight-dark.scss index 1016174..ac10397 100644 --- a/assets/scss/syntax/highlight-dark.scss +++ b/assets/scss/syntax/highlight-dark.scss @@ -1,12 +1,3 @@ $ht-code-bgcolor: #282a36; @import "syntax-dark.scss"; - -.highlight { - &::-webkit-scrollbar { - background: $ht-code-bgcolor; - } - &::-webkit-scrollbar-thumb { - background: scale-color($ht-code-bgcolor, $lightness: 23%, $saturation: -40%); - } -} \ No newline at end of file diff --git a/assets/scss/syntax/highlight-light.scss b/assets/scss/syntax/highlight-light.scss index 5a1303d..472f4b7 100644 --- a/assets/scss/syntax/highlight-light.scss +++ b/assets/scss/syntax/highlight-light.scss @@ -1,12 +1,3 @@ $ht-code-bgcolor: #dde2ff; @import "syntax-light.scss"; - -.highlight { - &::-webkit-scrollbar { - background: $ht-code-bgcolor; - } - &::-webkit-scrollbar-thumb { - background: scale-color($ht-code-bgcolor, $lightness: -13%, $saturation: -80%); - } -} \ No newline at end of file diff --git a/assets/scss/syntax/syntax-dark.scss b/assets/scss/syntax/syntax-dark.scss index 6ac2598..3a4640a 100644 --- a/assets/scss/syntax/syntax-dark.scss +++ b/assets/scss/syntax/syntax-dark.scss @@ -1,91 +1,92 @@ /* Dracula Theme v1.2.5 - * - * https://github.com/zenorocha/dracula-theme - * - * Copyright 2016, All rights reserved - * - * Code licensed under the MIT license - * http://zenorocha.mit-license.org - * - * @author Rob G - * @author Chris Bracco - * @author Zeno Rocha - */ +* +* https://github.com/zenorocha/dracula-theme +* +* Copyright 2016, All rights reserved +* +* Code licensed under the MIT license +* http://zenorocha.mit-license.org +* +* @author Rob G +* @author Chris Bracco +* @author Zeno Rocha +*/ - .highlight .hl { background-color: scale-color($ht-code-bgcolor, $lightness: 32%, $saturation: -40%) } - .highlight { background: $ht-code-bgcolor; color: #f8f8f2 } - .highlight .c { color: #6272a4 } /* Comment */ - .highlight .err { color: #f8f8f2 } /* Error */ - .highlight .g { color: #f8f8f2 } /* Generic */ - .highlight .k { color: #ff79c6 } /* Keyword */ - .highlight .l { color: #f8f8f2 } /* Literal */ - .highlight .n { color: #f8f8f2 } /* Name */ - .highlight .o { color: #ff79c6 } /* Operator */ - .highlight .x { color: #f8f8f2 } /* Other */ - .highlight .p { color: #f8f8f2 } /* Punctuation */ - .highlight .ch { color: #6272a4 } /* Comment.Hashbang */ - .highlight .cm { color: #6272a4 } /* Comment.Multiline */ - .highlight .cp { color: #ff79c6 } /* Comment.Preproc */ - .highlight .cpf { color: #6272a4 } /* Comment.PreprocFile */ - .highlight .c1 { color: #6272a4 } /* Comment.Single */ - .highlight .cs { color: #6272a4 } /* Comment.Special */ - .highlight .gd { color: #8b080b } /* Generic.Deleted */ - .highlight .ge { color: #f8f8f2; text-decoration: underline } /* Generic.Emph */ - .highlight .gr { color: #f8f8f2 } /* Generic.Error */ - .highlight .gh { color: #f8f8f2; font-weight: bold } /* Generic.Heading */ - .highlight .gi { color: #f8f8f2; font-weight: bold } /* Generic.Inserted */ - .highlight .go { color: #44475a } /* Generic.Output */ - .highlight .gp { color: #f8f8f2 } /* Generic.Prompt */ - .highlight .gs { color: #f8f8f2 } /* Generic.Strong */ - .highlight .gu { color: #f8f8f2; font-weight: bold } /* Generic.Subheading */ - .highlight .gt { color: #f8f8f2 } /* Generic.Traceback */ - .highlight .kc { color: #ff79c6 } /* Keyword.Constant */ - .highlight .kd { color: #8be9fd; font-style: italic } /* Keyword.Declaration */ - .highlight .kn { color: #ff79c6 } /* Keyword.Namespace */ - .highlight .kp { color: #ff79c6 } /* Keyword.Pseudo */ - .highlight .kr { color: #ff79c6 } /* Keyword.Reserved */ - .highlight .kt { color: #8be9fd } /* Keyword.Type */ - .highlight .ld { color: #f8f8f2 } /* Literal.Date */ - .highlight .m { color: #bd93f9 } /* Literal.Number */ - .highlight .s { color: #f1fa8c } /* Literal.String */ - .highlight .na { color: #50fa7b } /* Name.Attribute */ - .highlight .nb { color: #8be9fd; font-style: italic } /* Name.Builtin */ - .highlight .nc { color: #50fa7b } /* Name.Class */ - .highlight .no { color: #f8f8f2 } /* Name.Constant */ - .highlight .nd { color: #f8f8f2 } /* Name.Decorator */ - .highlight .ni { color: #f8f8f2 } /* Name.Entity */ - .highlight .ne { color: #f8f8f2 } /* Name.Exception */ - .highlight .nf { color: #50fa7b } /* Name.Function */ - .highlight .nl { color: #8be9fd; font-style: italic } /* Name.Label */ - .highlight .nn { color: #f8f8f2 } /* Name.Namespace */ - .highlight .nx { color: #f8f8f2 } /* Name.Other */ - .highlight .py { color: #f8f8f2 } /* Name.Property */ - .highlight .nt { color: #ff79c6 } /* Name.Tag */ - .highlight .nv { color: #8be9fd; font-style: italic } /* Name.Variable */ - .highlight .ow { color: #ff79c6 } /* Operator.Word */ - .highlight .w { color: #f8f8f2 } /* Text.Whitespace */ - .highlight .mb { color: #bd93f9 } /* Literal.Number.Bin */ - .highlight .mf { color: #bd93f9 } /* Literal.Number.Float */ - .highlight .mh { color: #bd93f9 } /* Literal.Number.Hex */ - .highlight .mi { color: #bd93f9 } /* Literal.Number.Integer */ - .highlight .mo { color: #bd93f9 } /* Literal.Number.Oct */ - .highlight .sa { color: #f1fa8c } /* Literal.String.Affix */ - .highlight .sb { color: #f1fa8c } /* Literal.String.Backtick */ - .highlight .sc { color: #f1fa8c } /* Literal.String.Char */ - .highlight .dl { color: #f1fa8c } /* Literal.String.Delimiter */ - .highlight .sd { color: #f1fa8c } /* Literal.String.Doc */ - .highlight .s2 { color: #f1fa8c } /* Literal.String.Double */ - .highlight .se { color: #f1fa8c } /* Literal.String.Escape */ - .highlight .sh { color: #f1fa8c } /* Literal.String.Heredoc */ - .highlight .si { color: #f1fa8c } /* Literal.String.Interpol */ - .highlight .sx { color: #f1fa8c } /* Literal.String.Other */ - .highlight .sr { color: #f1fa8c } /* Literal.String.Regex */ - .highlight .s1 { color: #f1fa8c } /* Literal.String.Single */ - .highlight .ss { color: #f1fa8c } /* Literal.String.Symbol */ - .highlight .bp { color: #f8f8f2; font-style: italic } /* Name.Builtin.Pseudo */ - .highlight .fm { color: #50fa7b } /* Name.Function.Magic */ - .highlight .vc { color: #8be9fd; font-style: italic } /* Name.Variable.Class */ - .highlight .vg { color: #8be9fd; font-style: italic } /* Name.Variable.Global */ - .highlight .vi { color: #8be9fd; font-style: italic } /* Name.Variable.Instance */ - .highlight .vm { color: #8be9fd; font-style: italic } /* Name.Variable.Magic */ - .highlight .il { color: #bd93f9 } /* Literal.Number.Integer.Long */ \ No newline at end of file +.highlight .lnt { color: #6272a4 } /* line number */ +.highlight .hl { background-color: scale-color($ht-code-bgcolor, $lightness: 32%, $saturation: -40%) } +.highlight { background: $ht-code-bgcolor; color: #f8f8f2 } +.highlight .c { color: #6272a4 } /* Comment */ +.highlight .err { color: #f8f8f2 } /* Error */ +.highlight .g { color: #f8f8f2 } /* Generic */ +.highlight .k { color: #ff79c6 } /* Keyword */ +.highlight .l { color: #f8f8f2 } /* Literal */ +.highlight .n { color: #f8f8f2 } /* Name */ +.highlight .o { color: #ff79c6 } /* Operator */ +.highlight .x { color: #f8f8f2 } /* Other */ +.highlight .p { color: #f8f8f2 } /* Punctuation */ +.highlight .ch { color: #6272a4 } /* Comment.Hashbang */ +.highlight .cm { color: #6272a4 } /* Comment.Multiline */ +.highlight .cp { color: #ff79c6 } /* Comment.Preproc */ +.highlight .cpf { color: #6272a4 } /* Comment.PreprocFile */ +.highlight .c1 { color: #6272a4 } /* Comment.Single */ +.highlight .cs { color: #6272a4 } /* Comment.Special */ +.highlight .gd { color: #8b080b } /* Generic.Deleted */ +.highlight .ge { color: #f8f8f2; text-decoration: underline } /* Generic.Emph */ +.highlight .gr { color: #f8f8f2 } /* Generic.Error */ +.highlight .gh { color: #f8f8f2; font-weight: bold } /* Generic.Heading */ +.highlight .gi { color: #f8f8f2; font-weight: bold } /* Generic.Inserted */ +.highlight .go { color: #44475a } /* Generic.Output */ +.highlight .gp { color: #f8f8f2 } /* Generic.Prompt */ +.highlight .gs { color: #f8f8f2 } /* Generic.Strong */ +.highlight .gu { color: #f8f8f2; font-weight: bold } /* Generic.Subheading */ +.highlight .gt { color: #f8f8f2 } /* Generic.Traceback */ +.highlight .kc { color: #ff79c6 } /* Keyword.Constant */ +.highlight .kd { color: #8be9fd; font-style: italic } /* Keyword.Declaration */ +.highlight .kn { color: #ff79c6 } /* Keyword.Namespace */ +.highlight .kp { color: #ff79c6 } /* Keyword.Pseudo */ +.highlight .kr { color: #ff79c6 } /* Keyword.Reserved */ +.highlight .kt { color: #8be9fd } /* Keyword.Type */ +.highlight .ld { color: #f8f8f2 } /* Literal.Date */ +.highlight .m { color: #bd93f9 } /* Literal.Number */ +.highlight .s { color: #f1fa8c } /* Literal.String */ +.highlight .na { color: #50fa7b } /* Name.Attribute */ +.highlight .nb { color: #8be9fd; font-style: italic } /* Name.Builtin */ +.highlight .nc { color: #50fa7b } /* Name.Class */ +.highlight .no { color: #f8f8f2 } /* Name.Constant */ +.highlight .nd { color: #f8f8f2 } /* Name.Decorator */ +.highlight .ni { color: #f8f8f2 } /* Name.Entity */ +.highlight .ne { color: #f8f8f2 } /* Name.Exception */ +.highlight .nf { color: #50fa7b } /* Name.Function */ +.highlight .nl { color: #8be9fd; font-style: italic } /* Name.Label */ +.highlight .nn { color: #f8f8f2 } /* Name.Namespace */ +.highlight .nx { color: #f8f8f2 } /* Name.Other */ +.highlight .py { color: #f8f8f2 } /* Name.Property */ +.highlight .nt { color: #ff79c6 } /* Name.Tag */ +.highlight .nv { color: #8be9fd; font-style: italic } /* Name.Variable */ +.highlight .ow { color: #ff79c6 } /* Operator.Word */ +.highlight .w { color: #f8f8f2 } /* Text.Whitespace */ +.highlight .mb { color: #bd93f9 } /* Literal.Number.Bin */ +.highlight .mf { color: #bd93f9 } /* Literal.Number.Float */ +.highlight .mh { color: #bd93f9 } /* Literal.Number.Hex */ +.highlight .mi { color: #bd93f9 } /* Literal.Number.Integer */ +.highlight .mo { color: #bd93f9 } /* Literal.Number.Oct */ +.highlight .sa { color: #f1fa8c } /* Literal.String.Affix */ +.highlight .sb { color: #f1fa8c } /* Literal.String.Backtick */ +.highlight .sc { color: #f1fa8c } /* Literal.String.Char */ +.highlight .dl { color: #f1fa8c } /* Literal.String.Delimiter */ +.highlight .sd { color: #f1fa8c } /* Literal.String.Doc */ +.highlight .s2 { color: #f1fa8c } /* Literal.String.Double */ +.highlight .se { color: #f1fa8c } /* Literal.String.Escape */ +.highlight .sh { color: #f1fa8c } /* Literal.String.Heredoc */ +.highlight .si { color: #f1fa8c } /* Literal.String.Interpol */ +.highlight .sx { color: #f1fa8c } /* Literal.String.Other */ +.highlight .sr { color: #f1fa8c } /* Literal.String.Regex */ +.highlight .s1 { color: #f1fa8c } /* Literal.String.Single */ +.highlight .ss { color: #f1fa8c } /* Literal.String.Symbol */ +.highlight .bp { color: #f8f8f2; font-style: italic } /* Name.Builtin.Pseudo */ +.highlight .fm { color: #50fa7b } /* Name.Function.Magic */ +.highlight .vc { color: #8be9fd; font-style: italic } /* Name.Variable.Class */ +.highlight .vg { color: #8be9fd; font-style: italic } /* Name.Variable.Global */ +.highlight .vi { color: #8be9fd; font-style: italic } /* Name.Variable.Instance */ +.highlight .vm { color: #8be9fd; font-style: italic } /* Name.Variable.Magic */ +.highlight .il { color: #bd93f9 } /* Literal.Number.Integer.Long */ diff --git a/assets/scss/syntax/syntax-light.scss b/assets/scss/syntax/syntax-light.scss index b27f7ff..0a199a0 100644 --- a/assets/scss/syntax/syntax-light.scss +++ b/assets/scss/syntax/syntax-light.scss @@ -1,5 +1,6 @@ -.highlight .hl { background-color: #ffffd4 } -.highlight { background: $ht-code-bgcolor;} +// .highlight .hl { background-color: #ffffd4 } +// .highlight { background: $ht-code-bgcolor;} +.highlight .lnt { color: #6a737d } /* line number */ .highlight .c { color: #6a737d } /* Comment */ .highlight .err { } /* Error */ .highlight .k { color: #d73a49 } /* Keyword */ @@ -66,4 +67,4 @@ .highlight .vg { color: #24292e } /* Name.Variable.Global */ .highlight .vi { color: #24292e } /* Name.Variable.Instance */ .highlight .vm { color: #005cc5 } /* Name.Variable.Magic */ -.highlight .il { color: #005cc5 } /* Literal.Number.Integer.Long */ \ No newline at end of file +.highlight .il { color: #005cc5 } /* Literal.Number.Integer.Long */ diff --git a/assets/scss/vendor/tufte.scss b/assets/scss/vendor/tufte.scss index 5ce8afb..a40eadf 100644 --- a/assets/scss/vendor/tufte.scss +++ b/assets/scss/vendor/tufte.scss @@ -347,6 +347,7 @@ h3 .code { } pre.code { + font-size: 0.9rem; width: 52.5%; padding-left: 2.5%; overflow-x: scroll;