@@ -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: []
}];
}