From 125063e9ae61e8b884d1c559867c7b05cbdd3c88 Mon Sep 17 00:00:00 2001 From: surtur Date: Fri, 20 Mar 2020 03:44:56 +0100 Subject: [PATCH] updated predefined style * prefer Fira Code Retina font for monospaced text * increased hyperlink legibility - still the same colour is used for highlight box background, the text colour now changes to the site's background colour * improved hyperlink highlighting logic - use pre-rendered opacity --- assets/scss/_predefined.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/assets/scss/_predefined.scss b/assets/scss/_predefined.scss index b833149..d74512c 100644 --- a/assets/scss/_predefined.scss +++ b/assets/scss/_predefined.scss @@ -10,7 +10,7 @@ $midnightblue: #151718; // Code Background // Fonts // $fonts: "Trebuchet MS", Verdana, "Verdana Ref", "Segoe UI", Candara, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; -$code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei"; +$code-fonts: "Fira Code Retina", Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei"; // Mixins // @@ -23,11 +23,13 @@ $code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida C word-wrap: break-word; border: none; box-shadow: inset 0 -1px 0 $theme; - transition-property: box-shadow; - transition-duration: .1s; + transition: opacity .3s cubic-bezier(0.165, 0.84, 0.44, 1); + -webkit-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1); &:hover { - box-shadow: inset 0 -1em 0 $theme; + color: $dark-grey; + box-shadow: inset 0 -2em 0 $theme; + opacity: 1; } } }