fix: 細かなスタイル調整(#29)

h-yoshikawa44 · Dec 16, 2021 · 845691f · 845691f
1 parent 76ec434
commit 845691f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/src/pages/myProducts/index.js b/src/pages/myProducts/index.js
@@ -18,13 +18,13 @@ function Product({ productName, description, imageUrl, url, githubUrl }) {
   return (
     <div className="col col--4 margin-bottom--lg">
       <div className="card shadow--lw-custom">
-        <div className="text--center card__image">
+        <p className="text--center card__image">
           <img
             src={useBaseUrl(imageUrl)}
             alt={productName}
             className={styles.productImg}
           />
-        </div>
+        </p>
         <div className={clsx('card__body', styles.cardBodyCustom)}>
           <h4>{productName}</h4>
           <small>{description}</small>

diff --git a/src/pages/skillAndCareer/index.js b/src/pages/skillAndCareer/index.js
@@ -21,14 +21,14 @@ Skill.propTypes = {
 
 function Skill({ imgUrl, title, description }) {
   return (
-    <div className="col col--3">
+    <div className="col col--3 text--center">
       {imgUrl && (
-        <div className="text--center">
+        <p className={styles.skillImageBlock}>
           <img className={styles.skillImage} src={imgUrl} alt={title} />
-        </div>
+        </p>
       )}
-      <h4 className="text--center">{title}</h4>
-      <p className="text--center">{description}</p>
+      <h4>{title}</h4>
+      <p>{description}</p>
     </div>
   );
 }

diff --git a/src/pages/skillAndCareer/index.module.css b/src/pages/skillAndCareer/index.module.css
@@ -1,4 +1,13 @@
-.skillImage {
+.skillImageBlock {
   height: 100px;
   width: 100px;
+  margin: 1em auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.skillImage {
+  max-width: 100%;
+  max-height: 100%;
 }