ギャラリーテキストエリアの調整

s-yoshiii · Jul 24, 2022 · 3bd8520 · 3bd8520
1 parent 0f7d596
commit 3bd8520
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/src/component/Gallery.tsx b/src/component/Gallery.tsx
@@ -16,8 +16,12 @@ const Gallery: FC<Props> = (props) => {
           </SGalleryPhoto>
           <SGalleryInner>
             <SGalleryTextBox>
-              <SGalleryNumber>{i + 1}</SGalleryNumber>
-              aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+              <SGalleryNumber>
+                {String(`${i + 1}`).padStart(2, "0")}
+              </SGalleryNumber>
+              <SGalleryText>
+                TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
+              </SGalleryText>
             </SGalleryTextBox>
           </SGalleryInner>
         </SGallerySect>
@@ -59,6 +63,20 @@ const SGalleryTextBox = styled.div`
   background: #fff;
   z-index: 2;
   width: 614px;
+  word-break: break-all;
+  padding: 40px;
+`;
+const SGalleryNumber = styled.div`
+  color: rgba(84, 186, 185, 0.7);
+  font-size: 92px;
+  font-weight: 300;
+  font-style: italic;
+  text-shadow: 0px 5px 10px #fff;
+  margin-top: calc(-40px - 0.5em);
+`;
+const SGalleryText = styled.p`
+  font-size: 16px;
+  margin-top: 10px;
+  line-height: 1.5;
 `;
-const SGalleryNumber = styled.div``;
 export default Gallery;