+
+
+ {{ pod.release_date | date }}
+
+
+
{{ pod.title }}
+
-
-
-
@@ -48,7 +54,6 @@
@@ -268,39 +273,56 @@ export default {
& > .items {
display: flex;
flex-direction: column;
- gap: 20px;
+ gap: 160px;
+
+ @include breakpoint('m') {
+ gap: 80px;
+ }
+
+ @include breakpoint('sm') {
+ margin-top: 60px;
+ gap: 80px;
+ }
& > .item {
display: flex;
- border: 1px solid var(--color-grey-medium);
- padding: 20px;
- gap: 20px;
+ gap: 128px;
+
+ @include breakpoint('m') {
+ gap: 64px;
+ }
@include breakpoint('sm') {
+ gap: 40px;
+ }
+
+ @include breakpoint('s') {
flex-direction: column;
+ gap: 10px;
}
& > a.image {
position: relative;
display: block;
- width: 150px;
- height: 150px;
- min-width: 150px;
- max-width: 150px;
+ flex: 0;
+ width: 300px;
+ height: 300px;
+ padding-top: 10px;
@include breakpoint('sm') {
+ width: 250px;
+ height: 250px;
+ }
+
+ @include breakpoint('s') {
width: 100%;
- height: 100%;
- aspect-ratio: 1;
- min-width: 100%;
- max-width: none;
+ height: auto;
}
& > img {
- width: 100%;
- height: 100%;
+ width: inherit;
+ height: inherit;
object-fit: cover;
- aspect-ratio: 1;
}
& > svg {
@@ -315,13 +337,28 @@ export default {
}
}
- & > a.content {
+ & > .content {
display: block;
text-decoration: none !important;
line-height: normal;
color: inherit;
- h4 {
+ & > div.release-date {
+ width: 100%;
+ text-align: left;
+ white-space: nowrap;
+ margin-bottom: 20px;
+ svg {
+ position: relative;
+ top: 8px;
+ margin-right: 8px;
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ }
+ }
+
+ h3 {
margin-bottom: 10px;
line-height: 1.1;
}
@@ -331,6 +368,7 @@ export default {
-webkit-box-orient: vertical;
overflow: hidden;
height: 85px;
+ margin-bottom: 20px;
&.open {
overflow: visible;
@@ -363,33 +401,35 @@ export default {
}
}
- button.more {
- background: transparent;
- border: none;
- padding: 0;
- margin: 15px 0 0 0;
- font-size: inherit;
- font-family: inherit;
- font-weight: 500;
- letter-spacing: 2px;
+ .btn-more {
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
cursor: pointer;
- color: var(--color-blue);
- }
- }
+ margin: 0;
+ text-align: center;
+ vertical-align: middle;
+ white-space: nowrap;
+ width: auto;
+ background-color: var(--color-atomic-lime);
+ border: 2px solid var(--color-atomic-lime);
+ color: var(--color-black);
+ transition: all 0.15s ease;
+ display: inline-flex;
+ padding: 10px 30px 14px;
+ font-weight: 500;
+ font-size: 18px !important;
+ text-decoration: none !important;
+ line-height: 24px;
- & > div.release-date {
- white-space: nowrap;
- svg {
- position: relative;
- top: 8px;
- margin-right: 8px;
- display: inline-block;
- width: 25px;
- height: 25px;
- }
+ &:hover {
+ background-color: var(--color-black);
+ color: var(--color-atomic-lime);
+ }
- @include breakpoint('sm') {
- text-align: right;
+ @include breakpoint('s') {
+ float: right;
+ }
}
}
}
diff --git a/src/components/blocks/subcontent/ArticleLead.vue b/src/components/blocks/subcontent/ArticleLead.vue
index 3c1a554..370d443 100644
--- a/src/components/blocks/subcontent/ArticleLead.vue
+++ b/src/components/blocks/subcontent/ArticleLead.vue
@@ -117,7 +117,7 @@ div.article-lead {
a {
text-decoration: none;
- color: var(--color-blue);
+ color: var(--color-black);
}
&:hover {
diff --git a/src/views/PodcastDetail.vue b/src/views/PodcastDetail.vue
index ce31007..ef3ee45 100644
--- a/src/views/PodcastDetail.vue
+++ b/src/views/PodcastDetail.vue
@@ -26,6 +26,11 @@