From 14375c5289e84690cacd0ec9b511cefef088f0a5 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 2 Jan 2021 16:47:15 +0100 Subject: Use Pygments for syntax highlighting, design adjustments, preload fonts --- assets/css/_basics.scss | 4 ++-- assets/css/components/_page-header.scss | 5 +++++ assets/css/components/_page.scss | 7 ++++++- assets/css/scopes/_code.scss | 22 ++++++++++++++++++++++ assets/css/style.scss | 1 + 5 files changed, 36 insertions(+), 3 deletions(-) create mode 100644 assets/css/scopes/_code.scss (limited to 'assets') diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 0b785d5..05d2974 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -44,8 +44,8 @@ code { } pre { - margin: 0; - overflow: hidden; + margin: ($line-height * 1em) 0 0; + overflow-x: auto; color: var(--code-block--fg); font-size: $code-block--font-size; line-height: $code-block--line-height; diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss index 7cf2aa1..e97aaf7 100644 --- a/assets/css/components/_page-header.scss +++ b/assets/css/components/_page-header.scss @@ -18,6 +18,11 @@ line-height: $code-block--line-height; } + &__pre { + margin-top: 0; + overflow: hidden; + } + @media (max-width: map-get($breakpoints, 'sm')) { margin-left: 0; padding-left: 0; diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss index 21969d7..c9a4650 100644 --- a/assets/css/components/_page.scss +++ b/assets/css/components/_page.scss @@ -7,6 +7,11 @@ } } + &__code { + padding-left: calc(#{$subcontent--indent} - 2px); + border-left: 2px solid var(--obj); + } + &__prefixed { position: relative; margin-left: -1 * $page--item-prefix--width; @@ -44,9 +49,9 @@ &--pre { $scale-factor: $font-size / $code-block--font-size; - margin-top: $line-height * 1em; // margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor}); // padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor}); + border-left: 0; &::before { content: str-repeat('``\A', 40); diff --git a/assets/css/scopes/_code.scss b/assets/css/scopes/_code.scss new file mode 100644 index 0000000..cdc9425 --- /dev/null +++ b/assets/css/scopes/_code.scss @@ -0,0 +1,22 @@ +.s-code { + pre { + overflow-x: auto; + color: var(--fg-lo); + font-size: 1em; + line-height: $line-height; + } + + .c { + color: var(--fg-hi); + } + + .nt, + .kt, + .k, + .kr, + .o, + .si, + .p { + color: var(--fg); + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index 7986bd9..e89cbd6 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -10,6 +10,7 @@ @import 'layouts/container'; +@import 'scopes/code'; @import 'scopes/page'; @import 'utils'; -- cgit v1.2.3-54-g00ecf