デザインを変更

3 files changed, 39 insertions, 3 deletions

diff --git a/src/components/BlockQuote.js b/src/components/BlockQuote.js
index 3a198a15..18eac100 100644
--- a/src/components/BlockQuote.js
+++ b/src/components/BlockQuote.js
@@ -6,8 +6,8 @@ import { Icon } from '@iconify/react'; // Import the entire Iconify library.
 export default function BlockQuote({children, refs, href}) {
   return (
     <blockquote className={styles.qt}>
+        <header><cite><ExternalLink href={href}>{refs}</ExternalLink></cite></header>
         {children}
-        <footer><cite><ExternalLink href={href}><Icon inline icon="zondicons:book-reference" height="18"/> {refs}</ExternalLink></cite></footer>
     </blockquote>
   );
 }
\ No newline at end of file
diff --git a/src/components/BlockQuote.module.css b/src/components/BlockQuote.module.css
index 0b8256e7..efa88e2e 100644
--- a/src/components/BlockQuote.module.css
+++ b/src/components/BlockQuote.module.css
@@ -1,3 +1,38 @@
 .qt {
-    background-color: var(--ifm-code-background);
-}
\ No newline at end of file
+    position:relative;
+    border-radius:10px;
+    padding:20px;
+    border: 1px dashed;
+    margin-left: 6%;
+    margin-right: 6%;
+}
+/* mobile */
+@media screen and (max-width: 996px) {
+    .qt {
+        margin-left:0;
+        margin-right:0;
+    }
+}
+
+.qt:before {
+    position:absolute;
+    left:2%;
+    top:-18px;
+    box-sizing:border-box;
+    content: "";
+    mask: url("bxs--quote-left.svg") no-repeat 50% 50%;
+    mask-size: cover;
+    background-color: var(--ifm-font-color-secondary);
+    padding-top:12px;
+    width: 32px;
+    height:32px;
+}
+
+.qt cite {
+    font-weight: bold;
+    display:block;
+    font-style:normal;
+    margin-bottom: var(--ifm-paragraph-margin-bottom);
+    font-size: calc(var(--ifm-font-size-base)*1.05);
+}
+
diff --git a/src/components/bxs--quote-left.svg b/src/components/bxs--quote-left.svg
new file mode 100644
index 00000000..44219ed9
--- /dev/null
+++ b/src/components/bxs--quote-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="#808080" d="M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.902 2.902 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789M20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.902 2.902 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2"/></svg>
\ No newline at end of file