diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/HomepageFeatures/index.js | 71 | ||||
| -rw-r--r-- | src/components/HomepageFeatures/styles.module.css | 11 | ||||
| -rw-r--r-- | src/components/MessageBubble.js | 11 | ||||
| -rw-r--r-- | src/components/MessageBubble.module.css | 130 |
4 files changed, 223 insertions, 0 deletions
diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js new file mode 100644 index 00000000..6d4f5799 --- /dev/null +++ b/src/components/HomepageFeatures/index.js @@ -0,0 +1,71 @@ +import clsx from 'clsx'; +import Heading from '@theme/Heading'; +import styles from './styles.module.css'; + +const FeatureList = [ + { + title: '一般質問', + docs: '/docs/ippan-situmon', + Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, + description: ( + <> + 安竹のこれまでの一般質問をまとめています。 + </> + ), + }, + { + title: '議案等', + docs: '/docs/gian-tou', + Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, + description: ( + <> + 主な議案・請願等についてまとめています。 + </> + ), + }, + { + title: '発達', + docs: '/docs/hattatu', + Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, + description: ( + <> + 発達に関してまとめています。 + </> + ), + }, +]; + +function Feature({Svg, title, docs, description}) { + return ( + <div className={clsx('col col--4')}> + <a + className={styles.feartureLink} + href={docs} + target='_blank' + rel='noopener noreferrer' + > + <div className="text--center"> + <Svg className={styles.featureSvg} role="img" /> + </div> + <div className="text--center padding-horiz--md"> + <Heading as="h3">{title}</Heading> + <p>{description}</p> + </div> + </a> + </div> + ); +} + +export default function HomepageFeatures() { + return ( + <section className={styles.features}> + <div className="container"> + <div className="row"> + {FeatureList.map((props, idx) => ( + <Feature key={idx} {...props} /> + ))} + </div> + </div> + </section> + ); +} diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css new file mode 100644 index 00000000..b248eb2e --- /dev/null +++ b/src/components/HomepageFeatures/styles.module.css @@ -0,0 +1,11 @@ +.features { + display: flex; + align-items: center; + padding: 2rem 0; + width: 100%; +} + +.featureSvg { + height: 200px; + width: 200px; +} diff --git a/src/components/MessageBubble.js b/src/components/MessageBubble.js new file mode 100644 index 00000000..d64cf6ed --- /dev/null +++ b/src/components/MessageBubble.js @@ -0,0 +1,11 @@ +import React from 'react'; +import styles from './MessageBubble.module.css'; + +export default function MessageBubble({children, speaker, align, id}) { + let className = ("left" === align) ? [styles.bln, styles.bleft].join(' ') : [styles.bln, styles.bright].join(' '); + return ( + <div className={className} data-speaker={speaker} id={id}> + {children} + </div> + ); +}
\ No newline at end of file diff --git a/src/components/MessageBubble.module.css b/src/components/MessageBubble.module.css new file mode 100644 index 00000000..57d842b9 --- /dev/null +++ b/src/components/MessageBubble.module.css @@ -0,0 +1,130 @@ +:root { + --left-bg: var(--ifm-color-success-contrast-background); + --left-fg: var(--ifm-color-success-contrast-foreground); + --right-bg: var(--ifm-color-warning-contrast-background); + --right-fg: var(--ifm-color-warning-contrast-foreground); +} + +.bln { + border-radius: 10px; + position: relative; + padding: 1rem; + max-width: 90%; + } + .bln.bleft { + background-color: var(--left-bg); + color: var(--left-fg); + margin: 1rem auto 1rem 4%; + } + .bln.bleft.gityo { + background-color: #ecedff; + } + .bln.bright { + background-color: var(--right-bg); + color: var(--right-fg); + margin: 1rem 4% 1rem auto; + } + + /* 吹き出し三角部分 */ + .bln::before{ + border-style: solid; + content: ''; + display: block; + position: absolute; + width: 0; + height: 0; + bottom: 3px; + } + .bln.bleft::before { + border-color: transparent var(--left-bg) transparent transparent; + border-width: 8px 22px 6px 0; + left: -15px; + rotate: -40deg; + } + .bln.bleft.gityo::before { + border-color: transparent #ecedff transparent transparent; + } + .bln.bright::before { + border-color: transparent transparent transparent var(--right-bg); + border-width: 8px 0 6px 22px; + right: -15px; + rotate: 40deg; + } + + /* 吹き出し話者部分 */ + .bln::after { + color: var(--ifm-color-content-secondary); + content: attr(data-speaker); + position: absolute; + font-size: 0.8rem; + top: -1.2rem; + white-space:nowrap; + } + + .bln.bleft::after { + left: 0.5rem; + } + .bln.bright::after { + right: 0.5rem; + text-align:right; + } + + /* 吹き出し内部 */ + .bln>p:not(:last-child) { + margin-top: 0; + } + .bln>p:last-child { + margin: 0; + } + + /* 吹き出しthougt, smile */ + .bln.bleft.thought, + .bln.bleft.smile, + .bln.bleft.weary, + .bln.bleft.anger, + .bln.bleft.sorry, + .bln.bleft.search { + border: 6px dotted var(--left-bg-dark); + background-color:unset; + } + .bln.bleft.thought::before, + .bln.bleft.smile::before, + .bln.bleft.weary::before, + .bln.bleft.anger::before, + .bln.bleft.sorry::before, + .bln.bleft.search::before { + border-width: 0; + content: "🤔"; + left: -2.5rem; + top:0; + } + .bln.bleft.smile::before { + content: "🙂"; + } + .bln.bleft.weary::before { + content: "😩"; + } + .bln.bleft.anger::before { + content: "💢"; + } + .bln.bleft.sorry::before { + content: "🙏"; + } + .bln.bleft.search::before { + content: "🔍"; + } + + @media only screen and (min-width: 800px) { + .bln { + max-width: 66%; + } + .bln.bleft.thought::before, + .bln.bleft.smile::before, + .bln.bleft.weary::before, + .bln.bleft.anger::before, + .bln.bleft.sorry::before, + .bln.bleft.search::before { + left: -3rem; + } + } +
\ No newline at end of file |