fix: season layout

prayag17 · May 27, 2024 · eeebdef · eeebdef
1 parent 749b9e3
commit eeebdef
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 55 deletions.
diff --git a/src/abstract/_fonts.scss b/src/abstract/_fonts.scss
@@ -2,28 +2,6 @@
 
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
-@font-face {
-  font-family: 'Material Icons Outlined';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v109/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
-}
-
-.material-icons {
-  font-family: 'Material Icons Outlined';
-  font-weight: normal;
-  font-style: normal;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-
 html,
 body,
 h1,

diff --git a/src/components/_menu.scss b/src/components/_menu.scss
@@ -48,8 +48,6 @@
 	}
 	.actionSheetContent {
 		margin: 10px !important;
-		border-radius: 10px;
-		overflow: hidden;
 		padding: 0 !important;
 	}
 	.actionSheetScroller{

diff --git a/src/logo.scss b/src/logo.scss
@@ -25,14 +25,19 @@ body #itemDetailPage {
 		height: 30vh;
 		background-position: left bottom !important;
 	}
+	&:has(.itemName.subtitle) {
+		.detailLogo {
+			top: 9.5vh;
+		}
+	}
 	.nameContainer .parentName {
 		a {
 			position: absolute;
-			top: 10vh;
-			left: 32.435vw;
+			top: 9.5vh;
+			left: 18.8vw;
 			border-radius: 0 !important;
 			width: 25vw;
-			height: 16vh;
+			height: 30vh;
 			font-size: 0;
 		}
 	}
@@ -44,8 +49,8 @@ body #itemDetailPage {
 		background-position: left;
 	}
 	.detailLogo.hide
-	+ .detailPageWrapperContainer
-	> .detailPagePrimaryContainer {
+		+ .detailPageWrapperContainer
+		> .detailPagePrimaryContainer {
 		margin-top: 10vh;
 		& > .infoWrapper > .nameContainer > .itemName {
 			font-size: 2.5em !important;

diff --git a/src/pages/_titlePage.scss b/src/pages/_titlePage.scss
@@ -51,6 +51,11 @@ $card-width: 14vw;
 		.itemName {
 			font-size: 3em;
 			color: white;
+			&.subtitle {
+				font-size: 1.4em;
+				margin: 0 !important;
+				padding: 0 !important;
+			}
 		}
 	}
 	.detailImageContainer {
@@ -132,51 +137,62 @@ $card-width: 14vw;
 		}
 	}
 	.childrenItemsContainer.itemsContainer.vertical-list {
-		display: grid;
-		grid-template-columns: 1fr 1fr 1fr;
-		gap: 1em;
+		padding: 0;
 		.listItem {
 			.paper-icon-button-light {
 				&[data-action="menu"]::after {
 					content: "";
 					margin-left: 100%;
 				}
-				&:not([data-action="menu"]) {
+				&.listItemImageButton {
 					aspect-ratio: 1;
-					border-radius: $rounding-default;
+					border-radius: 100%;
+					background: $gradient-default;
+					color: white;
+					opacity: 0;
+					box-shadow: 0 0 0 10em rgb(255 255 255 / 0.1);
+					transition: opacity $transition-time-default;
 				}
 			}
 			&[data-type="Episode"] {
-				flex-direction: column;
 				padding: 0;
 				margin: 0 !important;
-				background: rgb(0 0 0 / 0.5);
-				border-radius: $rounding-default;
-				transition: background $transition-time-default;
-				&:hover {
-					background: rgb(0 0 0 / 0.7);
+				background: transparent !important;
+				& .listItem-content {
+					display: grid;
+					grid-template-columns: 25% 1fr 15%;
+					align-content: center;
+					align-items: center;
+					&:hover {
+						.listItemImageButton{
+							opacity: 1;
+						}
+					}
 				}
 			}
 
-			&-content {
-				flex-direction: column;
-			}
+			// 	&-content {
+			// 		flex-direction: column;
+			// 	}
 			&Image-large {
-				width: 100%;
-				padding: 0 !important;
-				margin: 0 !important;
-			}
-			&-overview {
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				text-align: start;
-				width: 100%;
+				justify-self: center;
+				margin: 2em !important;
+				// margin: 0 !important;
+				border-radius: $rounding-default;
 				overflow: hidden;
+				height: 12em;
 			}
+			// 	&-overview {
+			// 		text-overflow: ellipsis;
+			// 		white-space: nowrap;
+			// 		text-align: start;
+			// 		width: 100%;
+			// 		overflow: hidden;
+			// 	}
 
-			&Body {
-				width: 95%;
-			}
+			// 	&Body {
+			// 		width: 95%;
+			// 	}
 		}
 	}
 	.listItem {