added more styles (#310)

MarcoMadera · Apr 2, 2024 · 2ba197b · 2ba197b
1 parent ee4236a
commit 2ba197b
Show file tree

Hide file tree

Showing 21 changed files with 299 additions and 213 deletions.
diff --git a/components/BigPill/BigPill.tsx b/components/BigPill/BigPill.tsx
@@ -65,6 +65,11 @@ export default function BigPill({
           width: 100%;
           height: 100%;
         }
+        @media (max-width: 768px) {
+          :global(.BigPill) {
+            padding: 8px;
+          }
+        }
       `}</style>
     </Link>
   );

diff --git a/components/CardContent/CardContent.tsx b/components/CardContent/CardContent.tsx
@@ -174,15 +174,7 @@ export default function CardContent({
           }
           article {
             min-width: 160px;
-            padding: 0 4px;
-          }
-        }
-        @media screen and (max-width: 420px) {
-          img {
-            min-width: 110px;
-          }
-          article {
-            min-width: 120px;
+            padding: 0 8px;
           }
         }
       `}</style>

diff --git a/components/Carousel/Carousel.tsx b/components/Carousel/Carousel.tsx
@@ -172,13 +172,12 @@ export default function Carousel({
             scroll-snap-type: x mandatory;
             -webkit-overflow-scrolling: touch;
             width: 100%;
+            grid-gap: 0;
+            margin: 20px 0;
           }
           section::-webkit-scrollbar {
             display: none;
           }
-          .header :global(h2) {
-            padding: 0 16px;
-          }
         }
       `}</style>
     </div>

diff --git a/components/FirstTrackContainer/FirstTrackContainer.tsx b/components/FirstTrackContainer/FirstTrackContainer.tsx
@@ -43,81 +43,83 @@ export default function FirstTrackContainer({
   if (!track) return null;
 
   return (
-    <div
-      className="firstTrack-Container"
-      onContextMenu={(e) => {
-        e.preventDefault();
-        const x = e.pageX;
-        const y = e.pageY;
-        addContextMenu({
-          type: "cardTrack",
-          data: track,
-          position: { x, y },
-        });
-      }}
-    >
-      <div className="bg-12"></div>
-      {track.id ? (
-        <Link
-          href={`/track/${track.id}`}
-          className="firstTrack"
-          ref={cardRef}
-          aria-hidden={isVisible ? "false" : "true"}
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          tabIndex={isVisible ? 0 : -1}
-        >
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src={chooseImage(track.album?.images, 100).url}
-            width={100}
-            height={100}
-            alt=""
-            id={`cover-image-${track.id}`}
-          />
-          <Heading
-            number={2}
-            as="h3"
-            fontSize="32px"
-            margin="1rem 0"
-            multiline={1}
+    <div className="firstTrack-Container-wrapper">
+      <div
+        className="firstTrack-Container"
+        onContextMenu={(e) => {
+          e.preventDefault();
+          const x = e.pageX;
+          const y = e.pageY;
+          addContextMenu({
+            type: "cardTrack",
+            data: track,
+            position: { x, y },
+          });
+        }}
+      >
+        <div className="bg-12"></div>
+        {track.id ? (
+          <Link
+            href={`/track/${track.id}`}
+            className="firstTrack"
+            ref={cardRef}
+            aria-hidden={isVisible ? "false" : "true"}
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabIndex={isVisible ? 0 : -1}
           >
-            {track.name}
-          </Heading>
-        </Link>
-      ) : (
-        <>
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src={chooseImage(track.album?.images, 100).url}
-            width={100}
-            height={100}
-            alt=""
-            id={"cover-image-"}
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={chooseImage(track.album?.images, 100).url}
+              width={100}
+              height={100}
+              alt=""
+              id={`cover-image-${track.id}`}
+            />
+            <Heading
+              number={2}
+              as="h3"
+              fontSize="32px"
+              margin="1rem 0"
+              multiline={1}
+            >
+              {track.name}
+            </Heading>
+          </Link>
+        ) : (
+          <>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={chooseImage(track.album?.images, 100).url}
+              width={100}
+              height={100}
+              alt=""
+              id={"cover-image-"}
+            />
+            <Heading
+              number={2}
+              as="h3"
+              fontSize="32px"
+              margin="1rem 0"
+              multiline={1}
+            >
+              {track.name}
+            </Heading>
+          </>
+        )}
+        {isPlayable ? (
+          <PlayButton
+            size={60}
+            centerSize={28}
+            track={track}
+            position={position}
+            allTracks={allTracks}
           />
-          <Heading
-            number={2}
-            as="h3"
-            fontSize="32px"
-            margin="1rem 0"
-            multiline={1}
-          >
-            {track.name}
-          </Heading>
-        </>
-      )}
-      {isPlayable ? (
-        <PlayButton
-          size={60}
-          centerSize={28}
-          track={track}
-          position={position}
-          allTracks={allTracks}
-        />
-      ) : null}
-      <div className="artists">
-        <span>
-          <ArtistList artists={track.artists} />
-        </span>
+        ) : null}
+        <div className="artists">
+          <span>
+            <ArtistList artists={track.artists} />
+          </span>
+        </div>
       </div>
       <style jsx>{`
         img {
@@ -201,6 +203,12 @@ export default function FirstTrackContainer({
           right: 50px;
           z-index: 32323232;
         }
+
+        @media (max-width: 768px) {
+          .firstTrack-Container-wrapper {
+            padding: 0 8px;
+          }
+        }
       `}</style>
     </div>
   );

diff --git a/components/FullScreenLyrics/LyricLine.tsx b/components/FullScreenLyrics/LyricLine.tsx
@@ -62,6 +62,12 @@ export function LyricLine({ line, type }: ILyricLineProps): ReactElement {
           width: 100%;
           text-align: left;
           padding-left: 144px;
+          font-size: 32px;
+          font-weight: 700;
+          letter-spacing: -0.04em;
+          line-height: 54px;
+          cursor: pointer;
+          transition: all 0.1s ease-out 0s;
         }
         .line.current {
           color: ${lineColors.current};
@@ -79,21 +85,15 @@ export function LyricLine({ line, type }: ILyricLineProps): ReactElement {
         @media (max-width: 768px) {
           .line {
             padding-left: 0;
+            font-size: 18px;
+            line-height: 32px;
           }
         }
         @media (max-width: 658px) {
           .line {
             padding-left: 0;
           }
         }
-        .line {
-          font-size: 32px;
-          font-weight: 700;
-          letter-spacing: -0.04em;
-          line-height: 54px;
-          cursor: pointer;
-          transition: all 0.1s ease-out 0s;
-        }
       `}</style>
     </button>
   );

diff --git a/components/Grid/Grid.tsx b/components/Grid/Grid.tsx
@@ -24,7 +24,7 @@ export default function Grid({
             auto-fill,
             minmax(${minWidthItem}, ${maxWidthItem})
           );
-          grid-gap: 24px;
+          gap: 24px;
           justify-content: space-between;
           margin-top: ${marginTop};
           margin-bottom: ${marginBottom};
@@ -36,7 +36,8 @@ export default function Grid({
         }
         @media screen and (max-width: 768px) {
           div {
-            grid-gap: 8px;
+            column-gap: 8px;
+            row-gap: 16px;
           }
         }
         @media (max-width: 420px) {