feat(css): add admonition css variable

exocode · Feb 2, 2020 · b91ca3d · b91ca3d
1 parent 17bbe91
commit b91ca3d
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 153 deletions.
diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss
@@ -34,7 +34,7 @@
 @media only screen and (max-width: 960px) {
   .navbar {
     .navbar-container {
-      margin: 0 2rem;
+      margin: 0 1rem;
     }
   }
 

diff --git a/assets/css/_partial/_navbar.scss b/assets/css/_partial/_navbar.scss
@@ -14,7 +14,7 @@
   .navbar-container {
     width: auto;
     text-align: center;
-    margin: 0 6rem;
+    margin: 0 4rem;
     display: flex;
     justify-content: space-between;
 

diff --git a/assets/css/_partial/_post/_admonition.scss b/assets/css/_partial/_post/_admonition.scss
@@ -1,167 +1,46 @@
 .admonition {
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
-      0 1px 5px 0 rgba(0,0,0,.12),
-      0 3px 1px -2px rgba(0,0,0,.2);
   position: relative;
   margin: .9765em 0;
   padding: 0 .75rem;
-  border-left: .25rem solid #448aff;
-  border-radius: .125rem;
+  background-color: map-get($admonition-background-color-map, 'note');
+  border-left: .25rem solid map-get($admonition-color-map, 'note');
   overflow: auto;
 
   .admonition-title {
     margin: 0 -0.75rem;
     padding: .5rem .75rem .5rem 2.5rem;
-    border-bottom: .1rem solid rgba(68,138,255,.1);
-    background-color: rgba(68,138,255,.1);
+    border-bottom: .1rem solid map-get($admonition-background-color-map, 'note');
+    background-color: map-get($admonition-background-color-map, 'note');
     font-weight: 700;
   }
 
   i.icon {
     font-size: 16px;
+    color: map-get($admonition-color-map, 'note');
     cursor: auto;
     position: absolute;
     left: .75rem;
     top: .75rem;
   }
 
-  &.note {
-    border-left-color: #448aff;
+  @each $type, $color in $admonition-color-map {
+    &.#{$type} {
+      border-left-color: $color;
 
-    i.icon {
-      color: #448aff;
-    }
-  }
-
-  &.abstract {
-    border-left-color: #00b0ff;
-
-    .admonition-title {
-      background-color: rgba(0,176,255,.1);
-    }
-
-    i.icon {
-      color: #00b0ff;
-    }
-  }
-
-  &.info {
-    border-left-color: #00b8d4;
-
-    .admonition-title {
-      background-color: rgba(0,184,212,.1);
-    }
-
-    i.icon {
-      color: #00b8d4;
-    }
-  }
-
-  &.tip {
-    border-left-color: #00bfa5;
-
-    .admonition-title {
-      background-color: rgba(0,191,165,.1);
-    }
-
-    i.icon {
-      color: #00bfa5;
-    }
-  }
-
-  &.success {
-    border-left-color: #00c853;
-
-    .admonition-title {
-      background-color: rgba(0,200,83,.1);
-    }
-
-    i.icon {
-      color: #00c853;
-    }
-  }
-
-  &.question {
-    border-left-color: #64dd17;
-
-    .admonition-title {
-      background-color: rgba(100,221,23,.1);
-    }
-
-    i.icon {
-      color: #64dd17;
-    }
-  }
-
-  &.warning {
-    border-left-color: #ff9100;
-
-    .admonition-title {
-      background-color: rgba(255,145,0,.1);
-    }
-
-    i.icon {
-      color: #ff9100;
-    }
-  }
-
-  &.failure {
-    border-left-color: #ff5252;
-
-    .admonition-title {
-      background-color: rgba(255,82,82,.1);
-    }
-
-    i.icon {
-      color: #ff5252;
-    }
-  }
-
-  &.danger {
-    border-left-color: #ff1744;
-
-    .admonition-title {
-      background-color: rgba(255,23,68,.1);
-    }
-
-    i.icon {
-      color: #ff1744;
-    }
-  }
-
-  &.bug {
-    border-left-color: #f50057;
-
-    .admonition-title {
-      background-color: rgba(245,0,87,.1);
-    }
-
-    i.icon {
-      color: #f50057;
-    }
-  }
-
-  &.example {
-    border-left-color: #651fff;
-
-    .admonition-title {
-      background-color: rgba(101,31,255,.1);
-    }
-
-    i.icon {
-      color: #651fff;
+      i.icon {
+        color: $color;
+      }
     }
   }
 
-  &.quote {
-    border-left-color: #9e9e9e;
-
-    .admonition-title {
-      background-color: hsla(0,0%,62%,.1);
-    }
+  @each $type, $color in $admonition-background-color-map {
+    &.#{$type} {
+      background-color: $color;
 
-    i.icon {
-      color: #9e9e9e;
+      .admonition-title {
+        border-bottom-color: $color;
+        background-color: $color;
+      }
     }
   }
 

diff --git a/assets/css/_partial/_post/_code.scss b/assets/css/_partial/_post/_code.scss
@@ -50,8 +50,8 @@ pre {
     }
   }
 
-  @each $sign, $text in $code-type-list {
-    &.#{$sign}::after {
+  @each $type, $text in $code-type-map {
+    &.#{$type}::after {
       content: $text;
     }
   }

diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
@@ -1,3 +1,5 @@
+@charset 'utf-8';
+
 // ==============================
 // Variables
 // ==============================
@@ -101,8 +103,8 @@ $code-font-size: 13px !default;
 // Font family of the code
 $code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace !default;
 
-// Code type list
-$code-type-list: (
+// Code type map
+$code-type-map: (
   // Custom code type
   language-bash: 'Bash',
   language-c: 'C',
@@ -145,6 +147,38 @@ $code-type-list: (
   language-yml: 'YAML',
   language-yaml: 'YAML',
   language-toml: 'TOML',
-  language-diff: 'Diff'
+  language-diff: 'Diff',
 ) !default;
 // ========== Code ========== //
+
+// ========== Admonition ========== //
+$admonition-color-map: (
+  'note': #448aff,
+  'abstract': #00b0ff,
+  'info': #00b8d4,
+  'tip': #00bfa5,
+  'success': #00c853,
+  'question': #64dd17,
+  'warning': #ff9100,
+  'failure': #ff5252,
+  'danger': #ff1744,
+  'bug': #f50057,
+  'example': #651fff,
+  'quote': #9e9e9e,
+) !default;
+
+$admonition-background-color-map: (
+  'note': rgba(68,138,255,.1),
+  'abstract': rgba(0,176,255,.1),
+  'info': rgba(0,184,212,.1),
+  'tip': rgba(0,191,165,.1),
+  'success': rgba(0,200,83,.1),
+  'question': rgba(100,221,23,.1),
+  'warning': rgba(255,145,0,.1),
+  'failure': rgba(255,82,82,.1),
+  'danger': rgba(255,23,68,.1),
+  'bug': rgba(245,0,87,.1),
+  'example': rgba(101,31,255,.1),
+  'quote': hsla(0,0%,62%,.1),
+) !default;
+// ========== Admonition ========== //
diff --git a/assets/js/blog.js b/assets/js/blog.js
@@ -158,7 +158,7 @@ jQuery(function($) {
             };
             changeTocState();
 
-            const HEADERFIX = 150;
+            const HEADERFIX = 120;
             const $toclink = $('.toc-link');
             const $headerlink = $('.headerlink');
             const $tocLinkLis = $('.post-toc-content li');

diff --git a/exampleSite/zh/content/posts/Basic-Markdown-Preview.md b/exampleSite/zh/content/posts/Basic-Markdown-Preview.md
@@ -887,3 +887,57 @@ __^^_insert 倾斜 加粗_^^__  _^^__insert 倾斜 加粗 2__^^_
 **^^_insert 倾斜 加粗_^^**  _^^**insert 倾斜 加粗 2**^^_
 
 __^^*insert 倾斜 加粗*^^__  *^^__insert 倾斜 加粗 2__^^*
+
+## Admonition
+
+{{% admonition "note" "Admonition note" %}}
+This is the content of the admonition.
+{{% /admonition %}}
+
+{{% admonition "abstract" "Admonition abstract" %}}
+This is the content of the admonition.
+{{% /admonition %}}
+
+{{% admonition "info" "Admonition info" %}}
+This is the content of the admonition.
+{{% /admonition %}}
+
+{{% admonition "tip" "Admonition tip" %}}
+This is the content of the admonition.
+{{% /admonition %}}
+
+{{% admonition "success" "Admonition success" %}}
+This is the content of the admonition.
+{{% /admonition %}}
+
+{{% admonition "question" "Admonition question" %}}
+This is the content of the admonition.
+{{% /admonition %}}
+
+{{% admonition "warning" "Admonition warning" %}}
+This is the content of the admonition.
+{{% /admonition %}}
+
+{{% admonition "failure" "Admonition failure" %}}
+This is the content of the admonition.
+{{% /admonition %}}
+
+{{% admonition "danger" "Admonition danger" %}}
+This is the content of the admonition.
+{{% /admonition %}}
+
+{{% admonition "bug" "Admonition bug" %}}
+This is the content of the admonition.
+{{% /admonition %}}
+
+{{% admonition "example" "Admonition example" %}}
+This is the content of the admonition.
+{{% /admonition %}}
+
+{{% admonition "quote" "Admonition quote" %}}
+This is the content of the admonition.
+{{% /admonition %}}
+
+{{% admonition title="Admonition" details="true" %}}
+This is the content of the admonition.
+{{% /admonition %}}
diff --git a/layouts/shortcodes/admonition.html b/layouts/shortcodes/admonition.html
@@ -11,23 +11,23 @@
 {{- $iconMap  = dict "bug" "fas fa-bug" | merge $iconMap -}}
 {{- $iconMap  = dict "example" "fas fa-list-ol" | merge $iconMap -}}
 {{- $iconMap  = dict "quote" "fas fa-quote-right" | merge $iconMap -}}
-{{- $iconMap  = dict "details" "fas fa-angle-down" | merge $iconMap -}}
+{{- $iconDetails := "fas fa-angle-down" -}}
 
 {{- if .IsNamedParams -}}
-    {{- $type := .Get "type" -}}
+    {{- $type := .Get "type" | default "note" -}}
     {{- if eq (.Get "details") "true" -}}
         <details class="admonition {{ $type }}">
             {{- with .Get "title" -}}
                 <summary class="admonition-title">
-                    <i class="icon {{ index $iconMap $type }}"></i>{{ . }}<i class="details {{ index $iconMap "details" }}"></i>
+                    <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ . }}<i class="details {{ $iconDetails }}"></i>
                 </summary>
             {{- end -}}
             {{- .Inner -}}
         </details>
     {{- else -}}
         <div class="admonition {{ $type }}">
             {{- with .Get "title" -}}
-                <p class="admonition-title"><i class="icon {{ index $iconMap $type }}"></i>{{ . }}</p>
+                <p class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ . }}</p>
             {{- end -}}
             {{- .Inner -}}
         </div>
@@ -38,15 +38,15 @@
         <details class="admonition {{ $type }}">
             {{- with .Get 1 -}}
                 <summary class="admonition-title">
-                    <i class="icon {{ index $iconMap $type }}"></i>{{ . }}<i class="details {{ index $iconMap "details" }}"></i>
+                    <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ . }}<i class="details {{ $iconDetails }}"></i>
                 </summary>
             {{- end -}}
             {{- .Inner -}}
         </details>
     {{- else -}}
         <div class="admonition {{ $type }}">
             {{- with .Get 1 -}}
-                <p class="admonition-title"><i class="icon {{ index $iconMap $type }}"></i>{{ . }}</p>
+                <p class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ . }}</p>
             {{- end -}}
             {{- .Inner -}}
         </div>