diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app/kdrama/[id]/buttons.jsx | 1 | ||||
| -rw-r--r-- | src/app/kdrama/components/popular.jsx | 2 | ||||
| -rw-r--r-- | src/app/kdrama/components/recent.jsx | 2 | ||||
| -rw-r--r-- | src/app/kdrama/page.jsx | 2 | ||||
| -rw-r--r-- | src/app/kdrama/styles/info.module.css | 35 | ||||
| -rw-r--r-- | src/app/kdrama/styles/kdrama.module.css | 1 | ||||
| -rw-r--r-- | src/app/kdrama/styles/popular.module.css | 16 | ||||
| -rw-r--r-- | src/app/kdrama/styles/search.module.css | 6 |
8 files changed, 40 insertions, 25 deletions
diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx index 2018a1c..e31adf1 100644 --- a/src/app/kdrama/[id]/buttons.jsx +++ b/src/app/kdrama/[id]/buttons.jsx @@ -26,6 +26,7 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) { {episodeData &&
episodeData.map((item, index) => (
<button
+ title={item.title}
key={index}
onClick={(event) => {
test(item.id, dramaId, item.title);
diff --git a/src/app/kdrama/components/popular.jsx b/src/app/kdrama/components/popular.jsx index 15c9f92..21d8cc3 100644 --- a/src/app/kdrama/components/popular.jsx +++ b/src/app/kdrama/components/popular.jsx @@ -9,7 +9,7 @@ export default async function PopularDramas() { return (
<div className={styles.Main}>
- <h1 className={styles.popDramasText}>Trending Dramas</h1>
+ <h2 className={styles.popDramasText}>Trending Dramas</h2>
<div className={styles.AnimeContainer}>
{popular &&
diff --git a/src/app/kdrama/components/recent.jsx b/src/app/kdrama/components/recent.jsx index 9c5d452..2b883d6 100644 --- a/src/app/kdrama/components/recent.jsx +++ b/src/app/kdrama/components/recent.jsx @@ -8,7 +8,7 @@ export default async function RecentDramas() { PreFetchAnimeInfo(popular);
return (
<div className={styles.Main}>
- <h1 className={styles.popDramasText}>Recent Releases</h1>
+ <h2 className={styles.popDramasText}>Recent Releases</h2>
<div className={styles.AnimeContainer}>
{popular &&
diff --git a/src/app/kdrama/page.jsx b/src/app/kdrama/page.jsx index f6b417f..b9cdb69 100644 --- a/src/app/kdrama/page.jsx +++ b/src/app/kdrama/page.jsx @@ -7,8 +7,8 @@ export default async function Kdrama() { return (
<div className={styles.Main}>
<DramaSearch />
- <br />
<PopularDramas />
+ <hr style={{ marginTop: 15, borderColor: "gray" }} />
<RecentDramas />
</div>
);
diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css index 9da3034..3b60fd2 100644 --- a/src/app/kdrama/styles/info.module.css +++ b/src/app/kdrama/styles/info.module.css @@ -1,6 +1,6 @@ .Main {
max-width: 98%;
- margin: 80px auto;
+ margin: 60px auto;
}
.TitleContainer {
@@ -14,10 +14,11 @@ font-size: 34px;
font-weight: 500;
color: var(--neon-green);
+ margin: 0;
}
.TitleContainer img {
- border-radius: 0.5rem;
+ border-radius: 0.4rem;
}
.DramaDescription h2 {
@@ -45,11 +46,11 @@ }
.DramaGenre::-webkit-scrollbar {
- height: 5px;
+ height: 2px;
}
.DramaGenre::-webkit-scrollbar-thumb {
- background-color: var(--soft-purple);
+ background-color: var(--light-green);
border-radius: 1rem;
}
@@ -143,4 +144,30 @@ font-size: 14px;
width: 80px;
}
+
+ .TitleContainer {
+ flex-direction: column;
+ }
+
+ .TitleContainer img {
+ width: auto;
+ height: auto;
+ border-radius: 0.2rem;
+ background-color: #121212;
+ padding: 0.2rem;
+ }
+
+ .TitleContainer p {
+ font-size: 30px;
+ font-weight: 400;
+ margin: 0 0 0.25rem 0
+ }
+
+ .EpisodesContainer {
+ text-align: center;
+ }
+
+ .EpisodeButtons button {
+ width: 90px;
+ }
}
diff --git a/src/app/kdrama/styles/kdrama.module.css b/src/app/kdrama/styles/kdrama.module.css index d683479..deb3860 100644 --- a/src/app/kdrama/styles/kdrama.module.css +++ b/src/app/kdrama/styles/kdrama.module.css @@ -1,3 +1,4 @@ .Main {
margin: 80px auto;
+ width: 99%;
}
diff --git a/src/app/kdrama/styles/popular.module.css b/src/app/kdrama/styles/popular.module.css index 92373a2..ec76fb3 100644 --- a/src/app/kdrama/styles/popular.module.css +++ b/src/app/kdrama/styles/popular.module.css @@ -1,17 +1,6 @@ .popDramasText {
- color: var(--soft-purple);
- margin: 10px 0 10px 0;
- text-align: center;
- color: transparent;
- background: linear-gradient(
- 90deg,
- var(--neon-green) 40%,
- var(--light-green) 60%,
- var(--neon-yellow) 80%,
- var(--soft-purple) 100%
- );
- background-size: 60% 50%;
- background-clip: text;
+ color: white;
+ margin: 0 0 0.2rem 0;
}
.AnimeContainer {
@@ -45,6 +34,7 @@ background-color 200ms ease;
cursor: grab;
border-radius: 0.4rem;
+ overflow: hidden;
}
.AnimeEntry img {
diff --git a/src/app/kdrama/styles/search.module.css b/src/app/kdrama/styles/search.module.css index dbca5ad..d7d28b2 100644 --- a/src/app/kdrama/styles/search.module.css +++ b/src/app/kdrama/styles/search.module.css @@ -1,6 +1,3 @@ -.SearchContainer {
- margin: -1rem 0 -2rem 0;
-}
.LoadingText {
color: white;
@@ -14,8 +11,7 @@ display: flex;
align-items: center;
max-width: 30%;
- border-radius: 0.8rem;
- margin: 0 0.2rem 0 0.2rem;
+ border-radius: 0.5rem;
}
.SearchContainer input {
|