diff --git a/src/app/home-details/home-details.page.scss b/src/app/home-details/home-details.page.scss index 8053944..02f803c 100644 --- a/src/app/home-details/home-details.page.scss +++ b/src/app/home-details/home-details.page.scss @@ -44,7 +44,7 @@ overflow: hidden; h4 { - font-size: 1.2rem; + font-size: 1.5rem; margin: 0px; line-height: 1.5; font-weight: 500; @@ -54,16 +54,16 @@ color: white; bottom: 45px; left: 6%; - width: 88%; + width: 70%; animation: fadeInFromBottom 0.5s forwards; } button { - width: 40px; - height: 40px; + width: 60px; + height: 60px; position: absolute; - top: calc(50% - 20px); - left: calc(50% - 20px); + top: calc(50% - 60px); + left: calc(50% - 30px); display: flex; align-items: center; justify-content: center; diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index c36e334..74909d5 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -4,18 +4,18 @@
-

Home

+

# Discover

+ (click)="selectedTab = 'news'"> News
- - + +
@@ -59,54 +59,8 @@ - - -
-
- -
- - - - -
- -
-

{{ news.heading }}

- -
- {{ news.description }} -
-
- -
-
- - - -
- - -
- -
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss index 0112e03..a7a4030 100644 --- a/src/app/home/home.page.scss +++ b/src/app/home/home.page.scss @@ -1,17 +1,16 @@ -ion-content { - --background: var(--brand-black); -} +$dark-blue: #076a93; +$dark-voilet: #8c6ee5; .heading-holder { - margin-bottom: 3rem; + margin-bottom: 2.7rem; } .main-header { - background: -webkit-linear-gradient(180deg, rgba(var(--brand-red-rgb), 0.6) 50%, rgba(var(--brand-red-rgb), 1)); + background: -webkit-linear-gradient(180deg, $dark-blue 50%, $dark-voilet); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; - font-size: 2.5rem; + font-size: 2.3rem; font-weight: 700; letter-spacing: 1px; padding: 0px 7%; @@ -20,23 +19,24 @@ ion-content { .segments { display: flex; - align-items: stretch; + align-items: center; width: 100%; padding: 0px 7%; margin: 5% 0%; button { background-color: transparent; - color: white; - font-size: 1.2rem; + color: $dark-blue; + font-size: 1.1rem; font-weight: 400; margin-right: 5%; position: relative; - opacity: 0.5; + opacity: 0.8; &.active { font-weight: 500; opacity: 1; + color: var(--brand-black); &::before { content: ''; @@ -54,22 +54,22 @@ ion-content { ion-slides { - height: calc(100vh - 40% - 16px); padding: 8px 0; position: relative; left: 0; top: 0; z-index: 1; - overflow: hidden; + overflow: visible; + height: calc(100vh - 40%); ion-slide { display: block; overflow: hidden; border-radius: 7px; text-align: left; - align-self: start; height: 100%; - box-shadow: 2px 2px 5px black; + position: relative; + box-shadow: 0px 10px 25px -7px rgba(var(--light-grey-rgb), 0.5); } .image-holder { @@ -218,14 +218,13 @@ ion-slides { .read-more { background-color: transparent; font-size: 0.9rem; - color: var(--brand-red); + color: $dark-blue; font-weight: 400; ion-icon { - color: var(--brand-black); font-size: 1.2rem; vertical-align: middle; - color: var(--brand-red); + color: $dark-blue; } } } diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts index 2aa4e75..c6dce2d 100644 --- a/src/app/home/home.page.ts +++ b/src/app/home/home.page.ts @@ -32,10 +32,10 @@ export class HomePage implements OnInit { selectedArticle: number = null; slideOpts = { - slidesPerView: 1.3, + slidesPerView: 1.5, spaceBetween: 30, - slidesOffsetBefore: 30, - slidesOffsetAfter: 30, + initialSlide: 1, + centeredSlides: true }; newsData: Array = []; @@ -83,6 +83,16 @@ export class HomePage implements OnInit { isBookmarked: false, likes: 308, comments: [] + }, { + id: 3, + image: 'https://www.ak4tsay1.com/wp-content/uploads/2020/02/Kings-XI-Punjab-KXIP-Strengths-and-Weakness-for-IPL-2020-800x445.jpg', + heading: 'KL Rahul scores fastest 100', + description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.`, + type: 'ARTICLE', + isLiked: false, + isBookmarked: false, + likes: 308, + comments: [] }]; }