Merge pull request #7628 from weseek/imprv/footnote-styles

imprv: GFM footnote styles

apps/app/resource/locales/en_US/sandbox.md

@@ -401,7 +401,7 @@ Content Cell,Content Cell
 
 # :memo: Footnote
 
-You can write a reference [^1] to a footnote. You can also add an inline footnote^[Inline_footnote].
+You can write a reference [^1] to a footnote.
 
 Long footnotes can be written as [^longnote].
 

apps/app/resource/locales/ja_JP/sandbox.md

@@ -400,7 +400,7 @@ Content Cell,Content Cell
 
 # :memo: Footnote
 
-脚注への参照[^1]を書くことができます。また、インラインの脚注^[インラインで記述できる脚注です]を入れる事も出来ます。
+脚注への参照[^1]を書くことができます。
 
 長い脚注は[^longnote]のように書くことができます。
 

apps/app/resource/locales/zh_CN/sandbox.md

@@ -401,7 +401,7 @@ Content Cell,Content Cell
 
 # :memo: Footnote
 
-You can write a reference [^1] to a footnote. You can also add an inline footnote^[Inline_footnote].
+You can write a reference [^1] to a footnote.
 
 Long footnotes can be written as [^longnote].
 

apps/app/src/styles/organisms/_wiki.scss

@@ -157,6 +157,33 @@
     }
   }
 
+  // see: https://github.com/micromark/micromark-extension-gfm-footnote#css
+  /* Style the footnotes section. */
+  .footnotes {
+    font-size: smaller;
+    color: bs.$text-muted;
+    border-top: 1px solid bs.$border-color;
+    /* Hide the section label for visual users. */
+    #footnote-label {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      word-wrap: normal;
+      border: 0;
+    }
+  }
+  /* Place `[` and `]` around footnote references. */
+  [data-footnote-ref]::before {
+    content: '[';
+  }
+
+  [data-footnote-ref]::after {
+    content: ']';
+  }
+
   $ratio: 0.95;
 
   &.comment {