Start working on improving color handling in code.

This commit is contained in:
Danila Fedorin 2020-08-11 19:29:55 -07:00
parent 3e9f6a14f2
commit 65215ccdd6
4 changed files with 82 additions and 31 deletions

View File

@ -3,7 +3,7 @@ languageCode = "en-us"
title = "Daniel's Blog" title = "Daniel's Blog"
theme = "vanilla" theme = "vanilla"
pygmentsCodeFences = true pygmentsCodeFences = true
pygmentsStyle = "github" pygmentsUseClasses = true
summaryLength = 20 summaryLength = 20
[markup] [markup]

View File

@ -0,0 +1,78 @@
@import "variables.scss";
$code-color-lineno: grey;
$code-color-keyword: black;
$code-color-type: black;
$code-color-comment: grey;
code {
font-family: $font-code;
background-color: $code-color;
border: $code-border;
padding: 0 0.25rem 0 0.25rem;
}
pre code {
display: block;
box-sizing: border-box;
padding: 0.5rem;
overflow: auto;
}
.chroma {
.lntable {
border-spacing: 0;
padding: 0.5rem 0 0.5rem 0;
background-color: $code-color;
border-radius: 0;
border: $code-border;
display: block;
overflow: auto;
td {
padding: 0;
}
code {
border: none;
padding: 0;
}
pre {
margin: 0;
}
.lntd:last-child {
width: 100%;
}
}
.lntr {
display: table-row;
}
.lnt {
display: block;
padding: 0 1rem 0 1rem;
color: $code-color-lineno;
}
.hl {
display: block;
background-color: lighten($primary-color, 25%);
}
}
.kr, .k {
font-weight: bold;
color: $code-color-keyword;
}
.kt {
font-weight: bold;
color: $code-color-type;
}
.c, .c1 {
color: $code-color-comment;
}

View File

@ -31,35 +31,6 @@ h1, h2, h3, h4, h5, h6 {
} }
} }
code {
font-family: $font-code;
background-color: $code-color;
}
pre code {
display: block;
padding: 0.5rem;
overflow-x: auto;
border: $code-border;
}
div.highlight table {
border: $code-border !important;
border-radius: 0px;
pre {
margin: 0;
}
code {
border: none;
}
span {
margin: 0 !important;
}
}
.container { .container {
position: relative; position: relative;
margin: auto; margin: auto;

View File

@ -6,14 +6,16 @@
<meta name="description" content="{{ .Description }}"> <meta name="description" content="{{ .Description }}">
{{ end }} {{ end }}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata&family=Raleway&family=Lora&display=block" media="screen"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Raleway&family=Lora&display=block" media="screen">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" media="screen"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" media="screen">
{{ $style := resources.Get "scss/style.scss" | resources.ToCSS | resources.Minify }} {{ $style := resources.Get "scss/style.scss" | resources.ToCSS | resources.Minify }}
{{ $sidenotes := resources.Get "scss/sidenotes.scss" | resources.ToCSS | resources.Minify }} {{ $sidenotes := resources.Get "scss/sidenotes.scss" | resources.ToCSS | resources.Minify }}
{{ $code := resources.Get "scss/code.scss" | resources.ToCSS | resources.Minify }}
{{ $icon := resources.Get "img/favicon.png" }} {{ $icon := resources.Get "img/favicon.png" }}
{{- partial "sidenotes.html" . -}} {{- partial "sidenotes.html" . -}}
<link rel="stylesheet" href="{{ $style.Permalink }}" media="screen"> <link rel="stylesheet" href="{{ $style.Permalink }}" media="screen">
<link rel="stylesheet" href="{{ $sidenotes.Permalink }}" media="screen"> <link rel="stylesheet" href="{{ $sidenotes.Permalink }}" media="screen">
<link rel="stylesheet" href="{{ $code.Permalink }}" media="screen">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous" media="screen"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous" media="screen">
<link rel="icon" type="image/png" href="{{ $icon.Permalink }}"> <link rel="icon" type="image/png" href="{{ $icon.Permalink }}">