2 files changed, 46 insertions, 17 deletions

diff --git a/src/theme/Admonition/Layout/index.js b/src/theme/Admonition/Layout/index.js
index 14a987b0..8d95599e 100644
--- a/src/theme/Admonition/Layout/index.js
+++ b/src/theme/Admonition/Layout/index.js
@@ -1,13 +1,7 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 import React from 'react';
 import clsx from 'clsx';
-import { ThemeClassNames } from '@docusaurus/theme-common';
-import admonitionStyles from '@docusaurus/theme-classic/lib/theme/Admonition/Layout/styles.module.css';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
 import headingStyles from '@docusaurus/theme-classic/lib/theme/Heading/styles.module.css';
 
 function AdmonitionContainer({type, className, children}) {
@@ -16,33 +10,33 @@ function AdmonitionContainer({type, className, children}) {
       className={clsx(
         ThemeClassNames.common.admonition,
         ThemeClassNames.common.admonitionType(type),
-        admonitionStyles.admonition,
+        styles.admonition,
         className,
-      )}
-      >
+      )}>
       {children}
     </div>
   );
 }
-function AdmonitionHeading({icon, id, title}) {
+function AdmonitionHeading({icon, title, id}) {
   let depth = 0;
-  let trimmedTitle = "";
+  let trimmedTitle = title;
   // titleにHTML等が含まれている場合は文字列ではなく配列になる
   if(typeof title === "string") {
     // 文字列冒頭の#の数を数える（
     depth = title.match ? (title.toString().match(/^#+/) || [''])[0].length : 0;
     // #を省いたタイトルを得る
-    trimmedTitle = depth > 0 ? title.replace(/^#+/, '').trim() : title;  
+    trimmedTitle = depth > 0 ? title.replace(/^#+/, '').trim() : title;
   } else if (typeof title[0] === "string") {
     depth = title[0].match ? (title[0].match(/^#+/) || [''])[0].length : 0;
     trimmedTitle = depth > 0 ? [title[0].replace(/^#+/, '').trim(), ...title.slice(1)] : title;
   }
+
   // スクロール位置調整のcss
   const classNames = clsx("anchor", "title", headingStyles.anchorWithStickyNavbar);
   // depthに応じて見出しタグをレンダー
   return (
-    <div className={admonitionStyles.admonitionHeading}>
-      <span className={admonitionStyles.admonitionIcon}>{icon}</span>
+    <div className={styles.admonitionHeading}>
+      <span className={styles.admonitionIcon}>{icon}</span>
       {(() => {
         if (depth == 3) {
           return(
@@ -93,7 +87,7 @@ function AdmonitionHeading({icon, id, title}) {
 }
 function AdmonitionContent({children}) {
   return children ? (
-    <div className={admonitionStyles.admonitionContent}>{children}</div>
+    <div className={styles.admonitionContent}>{children}</div>
   ) : null;
 }
 export default function AdmonitionLayout(props) {
diff --git a/src/theme/Admonition/Layout/styles.module.css b/src/theme/Admonition/Layout/styles.module.css
new file mode 100644
index 00000000..88df7e63
--- /dev/null
+++ b/src/theme/Admonition/Layout/styles.module.css
@@ -0,0 +1,35 @@
+.admonition {
+  margin-bottom: 1em;
+}
+
+.admonitionHeading {
+  font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) /
+    var(--ifm-heading-line-height) var(--ifm-heading-font-family);
+  text-transform: uppercase;
+}
+
+/* Heading alone without content (does not handle fragment content) */
+.admonitionHeading:not(:last-child) {
+  margin-bottom: 0.3rem;
+}
+
+.admonitionHeading code {
+  text-transform: none;
+}
+
+.admonitionIcon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 0.4em;
+}
+
+.admonitionIcon svg {
+  display: inline-block;
+  height: 1.6em;
+  width: 1.6em;
+  fill: var(--ifm-alert-foreground-color);
+}
+
+.admonitionContent > :last-child {
+  margin-bottom: 0;
+}