fix(style): valine dark style, header title and figure margin (#285)

assets/css/_page/_single.scss

@@ -212,6 +212,7 @@
     }
 
     figure {
+      margin: .5rem;
       text-align: center;
 
       .image-caption:not(:empty) {

assets/css/_partial/_header.scss

@@ -33,7 +33,7 @@ header {
 .header-title {
   font-family: $header-title-font-family;
   font-weight: bold;
-  margin: 0 .5rem;
+  margin-right: .5rem;
   min-width: 10%;
   overflow: hidden;
   white-space: nowrap;

assets/css/_variables.scss

@@ -58,7 +58,7 @@ $header-background-color-dark: #252627 !default;
 
 // Font style of the header title
 $header-title-font-family: $global-font-family !default;
-$header-title-font-size: 1.25rem !default;
+$header-title-font-size: 1.5rem !default;
 
 // Position of the header
 $header-position-desktop: if($header-normal-mode-desktop, static, fixed) !default;

assets/lib/mermaid/mermaid.scss

@@ -12,4 +12,8 @@
   [theme=dark] & {
     @import "themes/dark/index";
   }
+
+  div.mermaidTooltip {
+    z-index: 50;
+  }
 }

assets/lib/valine/valine.scss

@@ -1,14 +1,64 @@
+// ========== Global ========== //
+// Color of the border
 $border-color: #f0f0f0;
 $border-color-dark: #363636;
 
+// ========== Code ========== //
+// Color of the code
+$code-color: #E74C3C !default;
+$code-color-dark: #E5BF78 !default;
+
+// Color of the code background
+$code-background-color: #f5f5f5 !default;
+$code-background-color-dark: #272C34 !default;
+
+@mixin overflow-wrap($value) {
+  word-wrap: $value;
+  overflow-wrap: $value;
+}
+
+@mixin line-break($value) {
+  -webkit-line-break: $value;
+  -ms-line-break: $value;
+  line-break: $value;
+}
+
+@mixin tab-size($value) {
+  -moz-tab-size: $value;
+  -o-tab-size: $value;
+  tab-size: $value;
+}
+
 .v[data-class=v] {
+  .vcards .vcard .vcontent.expand {
+    &::before, &::after {
+      z-index: 50;
+    }
+  }
+
   .vwrap,
   .vwrap .vheader .vinput,
-  .vcards .vcard .vh {
+  .vcards .vcard .vh,
+  .vcards .vcard .vquote,
+  blockquote {
     border-color: $border-color;
 
     [theme=dark] & {
       border-color: $border-color-dark;
     }
   }
+
+  code, pre, pre code {
+    font-size: 90%;
+    @include overflow-wrap(break-word);
+    @include line-break(anywhere);
+    @include tab-size(4);
+    color: $code-color;
+    background: $code-background-color;
+
+    [theme=dark] & {
+      color: $code-color-dark;
+      background: $code-background-color-dark;
+    }
+  }
 }

resources/_gen/assets/scss/lib/valine/valine.scss_782a264805f83ff21e4b24d4d52cfa46.content

@@ -1 +1 @@
-.v[data-class=v] .vwrap,.v[data-class=v] .vwrap .vheader .vinput,.v[data-class=v] .vcards .vcard .vh{border-color:#f0f0f0}[theme=dark] .v[data-class=v] .vwrap,[theme=dark] .v[data-class=v] .vwrap .vheader .vinput,[theme=dark] .v[data-class=v] .vcards .vcard .vh{border-color:#363636}
+.v[data-class=v] .vcards .vcard .vcontent.expand::before,.v[data-class=v] .vcards .vcard .vcontent.expand::after{z-index:50}.v[data-class=v] .vwrap,.v[data-class=v] .vwrap .vheader .vinput,.v[data-class=v] .vcards .vcard .vh,.v[data-class=v] .vcards .vcard .vquote,.v[data-class=v] blockquote{border-color:#f0f0f0}[theme=dark] .v[data-class=v] .vwrap,[theme=dark] .v[data-class=v] .vwrap .vheader .vinput,[theme=dark] .v[data-class=v] .vcards .vcard .vh,[theme=dark] .v[data-class=v] .vcards .vcard .vquote,[theme=dark] .v[data-class=v] blockquote{border-color:#363636}.v[data-class=v] code,.v[data-class=v] pre,.v[data-class=v] pre code{font-size:90%;word-wrap:break-word;overflow-wrap:break-word;-webkit-line-break:anywhere;-ms-line-break:anywhere;line-break:anywhere;-moz-tab-size:4;-o-tab-size:4;tab-size:4;color:#E74C3C;background:#f5f5f5}[theme=dark] .v[data-class=v] code,[theme=dark] .v[data-class=v] pre,[theme=dark] .v[data-class=v] pre code{color:#E5BF78;background:#272C34}