[opt] css

_config.yml

@@ -243,6 +243,9 @@ tag_plugins:
   # {% mark %}
   mark:
     default_color: dark # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
+  # {% tag %}
+  tag:
+    default_color: yellow # red, orange, yellow, green, cyan, blue, purple
 
 
 ######## JS Plugins ########

scripts/tags/note.js

@@ -24,7 +24,7 @@ hexo.extend.tag.register('note', function(args) {
   el += '>';
   // title
   if (title && title.length > 0) {
-    el += '<div class="title"><strong>' + title + '</strong></div>';
+    el += '<div class="title">' + title + '</div>';
   }
   // content
   el += '<div class="body">';

source/css/_layout/tag-plugins/common.styl

@@ -1,13 +1,13 @@
 set_text_white()
   --text-p0: white
   --text-p1: white
-  --text-p2: #eee
+  --text-p2: hsl(0 0 88%)
   --text-p3: #ddd
   --text-code: white
 set_text_black()
   --text-p0: black
   --text-p1: #111
-  --text-p2: #333
+  --text-p2: hsl(0 0 12%)
   --text-p3: #555
   --text-code: white
 
@@ -16,8 +16,8 @@ set_dynamic_color($theme)
   --theme-bg1: hsl(hue($theme), 90, 90)
   --theme-bg2: hsl(hue($theme), 80, 95)
   --theme-border: hsl(hue($theme), 50, 80)
-  --text-p0: hsl(hue($theme), 50, 24)
-  --text-p1: hsl(hue($theme), 40, 24)
+  --text-p0: hsl(hue($theme), 60, 16)
+  --text-p1: hsl(hue($theme), 50, 24)
   --text-p2: hsl(hue($theme), 90, 24)
 
 .tag-plugin
@@ -44,9 +44,12 @@ set_dynamic_color($theme)
   set_dynamic_color($c-purple)
 
 .tag-plugin[color='light']
+  --theme-bg1: hsl(0 0 88%)
   --theme-bg2: white
+  set_text_black()
 
 .tag-plugin[color='dark']
+  --theme-bg1: hsl(0 0 12%)
   --theme-bg2: #333
   set_text_white()
 
@@ -90,10 +93,13 @@ set_darkmode_tags()
     set_dynamic_color($c-purple)
   .tag-plugin[color='light']
     --theme-border: white
+    --theme-bg1: hsl(0 0 88%)
     --theme-bg2: #fff
+    set_text_black()
 
   .tag-plugin[color='dark']
     --theme-border: black
+    --theme-bg1: hsl(0 0 12%)
     --theme-bg2: #111
     set_text_white()
 

source/css/_layout/tag-plugins/folding.styl

@@ -22,13 +22,13 @@ details.folding
         border-bottom: none !important
     &:hover
       color: var(--text-p0)
-      &:after
-        position: absolute
-        content: '+'
-        text-align: center
-        top: 50%
-        transform: translateY(-50%)
-        right: 1rem
+    &:after
+      position: absolute
+      content: '+'
+      text-align: center
+      top: 50%
+      transform: translateY(-50%)
+      right: 1rem
 
 
 details.folding[open]
@@ -38,9 +38,8 @@ details.folding[open]
     border-bottom-right-radius: 0
     color: var(--text-p1)
     margin-bottom: 0
-    &:hover
-      &:after
-        content: '-'
+    &:after
+      content: '-'
   >div.body
     display: flex;
     flex-direction: column;

source/css/_layout/tag-plugins/note.styl

@@ -11,6 +11,8 @@
     font-size: $fs-15
     line-height: 1.2
     margin-top: 1rem
+    font-weight: 500
+    color: var(--text-p0)
   >.body
     &,p
       font-size: $fs-14

source/css/_layout/tag-plugins/quot.styl

@@ -4,7 +4,7 @@
   display: flex
   flex-direction: column
   
-  .content:not(span)
+  .content
     display: flex
     align-items: center
     border-bottom: none
@@ -37,7 +37,7 @@
 
 // type=text
 .md-text .tag-plugin.quot 
-  .content[type=text]:not(span)
+  .content[type=text]
     &:before,&:after
       content: ""
       position: absolute
@@ -60,7 +60,7 @@
       border-width: 8px
 
 // type=icon
-.md-text .tag-plugin.quot .content[type=icon]:not(span)
+.md-text .tag-plugin.quot .content[type=icon]
   .icon
     height: 1.5em
     display: inline-block
@@ -71,18 +71,3 @@
       margin-right: .5rem
     &.suffix
       margin-left: .5rem
-
-// inline quot
-.md-text span.tag-plugin.quot .content
-  font-weight: 500
-  &:before,&:after
-    color: $color-accent
-    font-weight: 900
-  &:before
-    content: "「"
-    margin-left: -0.125em
-    margin-right: 0.125em
-  &:after
-    content: "」"
-    margin-left: 0.125em
-    margin-right: -0.125em

source/css/_layout/tag-plugins/tag.styl

@@ -1,6 +1,6 @@
 .md-text .tag-plugin.tag
   padding: 0px 4px
-  border-radius: 4px
+  border-radius: 2px
   background: var(--theme-bg1)
   color: var(--text-p2)
   margin: 2px 0