diff --git a/.gitignore b/.gitignore index f48eee9..049bf30 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ exampleSite/public/* -*.patch \ No newline at end of file +*.patch +exampleSite/resources/_gen/ diff --git a/README.md b/README.md index b722c61..d2d2efc 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,7 @@ The site specific parameters that this theme recognizes are: - `copyright` string: Custom copyright notice. - `math` boolean: Site wide kill switch for Latex support - `katex` boolean: if "katex" is set to true katex will be used to render LaTex, if not MathJax will be used instead +- `codeBlocksDark` boolean: if true, code blocks will use a dark theme. ### Page Parameters diff --git a/assets/scss/highlight-dark.scss b/assets/scss/highlight-dark.scss new file mode 100644 index 0000000..1016174 --- /dev/null +++ b/assets/scss/highlight-dark.scss @@ -0,0 +1,12 @@ +$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/highlight-light.scss b/assets/scss/highlight-light.scss new file mode 100644 index 0000000..5a1303d --- /dev/null +++ b/assets/scss/highlight-light.scss @@ -0,0 +1,12 @@ +$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/static/css/hugo-tufte.css b/assets/scss/hugo-tufte.scss similarity index 80% rename from static/css/hugo-tufte.css rename to assets/scss/hugo-tufte.scss index 6d61172..c566066 100644 --- a/static/css/hugo-tufte.css +++ b/assets/scss/hugo-tufte.scss @@ -13,11 +13,9 @@ html, button, input, select, textarea, p, nav, section, article, header, footer, font-family: "et-book", -apple-system, "San Francisco", "Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue", "Lucida Grand", sans-serif; } -/* Hugo code blocks are
...
*/
-/*@media screen and (max-width: 760px) {
- pre code {
- }
-}*/
+p {
+ text-align: justify;
+}
code {
font-family: "Fira Code", Consolas, "Liberation Mono", Menlo, Courier, monospace;
@@ -25,31 +23,64 @@ code {
line-height: 1.6;
}
-div.highlight{
- /* width: 52.5%; */
-}
-/* blockquote {
- width: 52.5%;
+$ht-code-border-radius: .4em;
+.highlight {
+ width: 55%;
+ overflow-x: scroll;
+ border-radius: $ht-code-border-radius;
+
+ &>div.chroma>table.lntable{
+ 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 {
-} */
-div.highlight::hover{
- width: 100%;
+ 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;
+ }
}
-pre code {
- width: 52.5%;
+.highlight .lntable {
+ overflow: initial;
+}
+
+.highlight pre {
+ margin: 0;
+}
+
+.highlight pre code {
display: block;
font-size: 1rem;
- padding-left: 2.5%;
- overflow-x: scroll;
}
-/*@media (max-width: 760px) {
- pre code {
- width: 90%;
- padding: 0;
- }
- }*/
+.sidenote, .marginnote {
+ margin-right: -55%;
+ width: 45%;
+}
/* ------------------------------------------------------------------------ */
/* Brand details, such as a sidebar or top display. */
@@ -155,16 +186,19 @@ h1.content-title a:focus {
/* ------------------------------------------------------------------------ */
/* Styling for listing pages. */
/* ------------------------------------------------------------------------ */
-.list-page ul {
- list-style-type: none;
- margin: -0.25em;
- width: 87.5%;
- max-width: 45rem;
-}
-.list-page li {
+.list-page {
+ ul {
+ list-style-type: none;
+ margin: -0.25em;
+ width: 87.5%;
+ max-width: 45rem;
+ }
+ li {
margin: 0;
/*font-size: 95%;*/
}
+}
+.list-page
.list-date {
display: inline;
font-size: 0.75em;
@@ -199,7 +233,7 @@ h1.content-title a:focus {
margin: 1rem;
}
-table {
+table:not(.lntable) {
margin-top: 1em;
font-size: 1.4rem;
width: auto; /* making booktabs style tables the unstyled default in case someone uses Markdown styling */
@@ -209,15 +243,24 @@ table {
border-bottom: 2px solid #111;
}
-th, td{
+table:not(.lntable) th, table:not(.lntable) td{
font-size: 1.25rem;
line-height: 1.71428571;
}
-td {
+table:not(.lntable) td {
padding-right: 0.75em;
}
+table.lntable
+{
+ td.lntd {
+ padding: 0em;
+ }
+ border-spacing: 0;
+ padding: 0;
+}
+
/* Footer, but with a different name to avoid conflicts with tufte.css */
footer.page-footer{
padding-top: 1em;
diff --git a/assets/scss/syntax-dark.scss b/assets/scss/syntax-dark.scss
new file mode 100644
index 0000000..5cd9360
--- /dev/null
+++ b/assets/scss/syntax-dark.scss
@@ -0,0 +1,91 @@
+/* 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 $$ \begin{aligned} @@ -100,7 +101,7 @@ the `newthought` shortcode. ### Code As an example of some inline code: `go test -v -short`. And this is some block-code: -```go +```go {linenos=table,hl_lines=["2-5"],linenostart=199} package main import "log" @@ -115,6 +116,24 @@ func main() { log.Println(y) } ``` + +Here's an example without line numbers. +```go {hl_lines=["2-5"],linenostart=199} +package main + +import "log" + +func add(x int, y int) int { + log.Println("We are going to take the sum of two numbers, and leave a very very very long comment.") + return x + y +} + +func main() { + y := add(1, 2) + log.Println(y) +} +``` + ### Figure Below we have an example of a regular width figure. {{< figure diff --git a/layouts/partials/header.includes.html b/layouts/partials/header.includes.html index 5059dde..69d85ae 100644 --- a/layouts/partials/header.includes.html +++ b/layouts/partials/header.includes.html @@ -16,9 +16,26 @@ - - - - - + + +{{ if .Site.Params.codeBlocksDark }} + {{ $codeoptions := (dict "targetPath" "/css/highlight-dark.min.css" "outputStyle" "compressed" "enableSourceMap" true) }} + {{ $style := resources.Get "scss/highlight-dark.scss" | resources.ToCSS $codeoptions }} + + +{{ else }} + {{ $codeoptions := (dict "targetPath" "/css/highlight-light.min.css" "outputStyle" "compressed" "enableSourceMap" true) }} + {{ $codestyle := resources.Get "scss/highlight-light.scss" | resources.ToCSS $codeoptions }} + + +{{ end }} + + + +{{ $htoptions := (dict "targetPath" "/css/hugo-tufte.min.css" "outputStyle" "compressed" "enableSourceMap" true) }} +{{ $htstyle := resources.Get "scss/hugo-tufte.scss" | resources.ToCSS $htoptions }} + + + + diff --git a/static/css/syntax.css b/static/css/syntax.css deleted file mode 100644 index 20458cb..0000000 --- a/static/css/syntax.css +++ /dev/null @@ -1,82 +0,0 @@ -/* Background */ .chroma { background-color: #ffffff } -/* Other */ .chroma .x { } -/* Error */ .chroma .err { } -/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } -/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } -/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } -/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* Keyword */ .chroma .k { font-weight: bold } -/* KeywordConstant */ .chroma .kc { font-weight: bold } -/* KeywordDeclaration */ .chroma .kd { font-weight: bold; font-style: italic } -/* KeywordNamespace */ .chroma .kn { font-weight: bold } -/* KeywordPseudo */ .chroma .kp { font-weight: bold } -/* KeywordReserved */ .chroma .kr { font-weight: bold } -/* KeywordType */ .chroma .kt { font-weight: bold } -/* Name */ .chroma .n { } -/* NameAttribute */ .chroma .na { } -/* NameBuiltin */ .chroma .nb { font-weight: bold; font-style: italic } -/* NameBuiltinPseudo */ .chroma .bp { font-weight: bold; font-style: italic } -/* NameClass */ .chroma .nc { color: #666666; font-weight: bold; font-style: italic } -/* NameConstant */ .chroma .no { color: #666666; font-weight: bold; font-style: italic } -/* NameDecorator */ .chroma .nd { } -/* NameEntity */ .chroma .ni { } -/* NameException */ .chroma .ne { } -/* NameFunction */ .chroma .nf { color: #666666; font-weight: bold; font-style: italic } -/* NameFunctionMagic */ .chroma .fm { } -/* NameLabel */ .chroma .nl { } -/* NameNamespace */ .chroma .nn { color: #666666; font-weight: bold; font-style: italic } -/* NameOther */ .chroma .nx { } -/* NameProperty */ .chroma .py { } -/* NameTag */ .chroma .nt { } -/* NameVariable */ .chroma .nv { color: #666666; font-weight: bold; font-style: italic } -/* NameVariableClass */ .chroma .vc { } -/* NameVariableGlobal */ .chroma .vg { } -/* NameVariableInstance */ .chroma .vi { } -/* NameVariableMagic */ .chroma .vm { } -/* Literal */ .chroma .l { } -/* LiteralDate */ .chroma .ld { } -/* LiteralString */ .chroma .s { color: #666666; font-style: italic } -/* LiteralStringAffix */ .chroma .sa { color: #666666; font-style: italic } -/* LiteralStringBacktick */ .chroma .sb { color: #666666; font-style: italic } -/* LiteralStringChar */ .chroma .sc { color: #666666; font-style: italic } -/* LiteralStringDelimiter */ .chroma .dl { color: #666666; font-style: italic } -/* LiteralStringDoc */ .chroma .sd { color: #666666; font-style: italic } -/* LiteralStringDouble */ .chroma .s2 { color: #666666; font-style: italic } -/* LiteralStringEscape */ .chroma .se { color: #666666; font-style: italic } -/* LiteralStringHeredoc */ .chroma .sh { color: #666666; font-style: italic } -/* LiteralStringInterpol */ .chroma .si { color: #666666; font-style: italic } -/* LiteralStringOther */ .chroma .sx { color: #666666; font-style: italic } -/* LiteralStringRegex */ .chroma .sr { color: #666666; font-style: italic } -/* LiteralStringSingle */ .chroma .s1 { color: #666666; font-style: italic } -/* LiteralStringSymbol */ .chroma .ss { color: #666666; font-style: italic } -/* LiteralNumber */ .chroma .m { } -/* LiteralNumberBin */ .chroma .mb { } -/* LiteralNumberFloat */ .chroma .mf { } -/* LiteralNumberHex */ .chroma .mh { } -/* LiteralNumberInteger */ .chroma .mi { } -/* LiteralNumberIntegerLong */ .chroma .il { } -/* LiteralNumberOct */ .chroma .mo { } -/* Operator */ .chroma .o { } -/* OperatorWord */ .chroma .ow { font-weight: bold } -/* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c { color: #888888; font-style: italic } -/* CommentHashbang */ .chroma .ch { color: #888888; font-style: italic } -/* CommentMultiline */ .chroma .cm { color: #888888; font-style: italic } -/* CommentSingle */ .chroma .c1 { color: #888888; font-style: italic } -/* CommentSpecial */ .chroma .cs { color: #888888; font-weight: bold } -/* CommentPreproc */ .chroma .cp { color: #888888; font-weight: bold } -/* CommentPreprocFile */ .chroma .cpf { color: #888888; font-weight: bold } -/* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { } -/* GenericEmph */ .chroma .ge { } -/* GenericError */ .chroma .gr { } -/* GenericHeading */ .chroma .gh { } -/* GenericInserted */ .chroma .gi { } -/* GenericOutput */ .chroma .go { } -/* GenericPrompt */ .chroma .gp { } -/* GenericStrong */ .chroma .gs { } -/* GenericSubheading */ .chroma .gu { } -/* GenericTraceback */ .chroma .gt { } -/* GenericUnderline */ .chroma .gl { } -/* TextWhitespace */ .chroma .w { }