ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new Newsroom

Browse Source
This commit is contained in:
samaradel
2020-11-26 13:34:35 +02:00
parent d499758ce0
commit 6e565b4c56
6 changed files with 183 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
content/site/navigation.json
View File

@@ -1,5 +1,10 @@
{ {
"headerNavigation": [ "headerNavigation": [
{
"name": "About",
"link": "/about",
"external": false
},
{ {
"name": "Projects", "name": "Projects",
"link": "/projects", "link": "/projects",
@@ -11,19 +16,13 @@
"external": false "external": false
}, },
{ {
"name": "Overview", "name": "Blog",
"link": "/overview", "link": "/blog",
"external": false "external": false
}, },
{ {
"name": "News", "name": "NewsRoom",
"link": "/news", "link": "/newsroom",
"external": false
},
{
"name": "About",
"link": "/about",
"external": false "external": false
} }
], ],

4
gridsome.server.js
View File

@@ -89,8 +89,8 @@ module.exports = function (api) {
api.createPages(({ createPage }) => { api.createPages(({ createPage }) => {
createPage({ createPage({
path: '/overview', path: '/newsroom',
component: './src/templates/Overview.vue', component: './src/templates/NewsRoom.vue',
context: { context: {
private: private private: private
} }

57
src/assets/scss/main.scss
View File

@@ -51,9 +51,8 @@ ul {
} }
} }
.animated-link:after { .animated-link:after {
content: ''; content: "";
width: 0px; width: 0px;
height: 1px; height: 1px;
display: block; display: block;
@@ -96,32 +95,31 @@ ul {
} }
.author-list-item:nth-child(n + 2) { .author-list-item:nth-child(n + 2) {
@apply -ml-3 @apply -ml-3;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.with-large>.flex-post:nth-child(5n), // .with-large>.flex-post:nth-child(5n),
.with-large>.flex-post:nth-child(5n-1) { .with-large>.flex-post:nth-child(6n + 1) {
// @apply flex-100; @apply flex-100;
flex: 1 1 50%; @apply flex-row;
@apply flex-col;
.post-card-image-link { .post-card-image-link {
// @apply flex-auto;
flex: 1 1 100%;
@apply relative; @apply relative;
min-height: 400px; min-height: 380px;
@apply mr-6;
} }
.post-card-image { .post-card-image {
@apply absolute; @apply absolute;
@apply h-full; @apply h-auto;
@apply w-full; @apply w-full;
@apply object-cover; @apply object-cover;
@apply rounded-lg; @apply rounded-lg;
} }
.post-card-content { .post-card-content {
// @apply flex-post-large-content; @apply flex-post-large-content;
flex: 0 1 auto; @apply self-center;
@apply self-center
} }
.post-card-title { .post-card-title {
@apply text-4xl; @apply text-4xl;
@@ -130,6 +128,33 @@ ul {
@apply text-xl; @apply text-xl;
} }
} }
// .with-large>.flex-overview:nth-child(6n + 1) {
// @apply flex-100;
// @apply flex-row;
// .post-card-image-link {
// @apply flex-auto;
// @apply relative;
// min-height: 380px;
// @apply mr-6;
// }
// .post-card-image {
// @apply absolute;
// @apply h-full;
// @apply w-full;
// @apply object-cover;
// @apply rounded-lg;
// }
// .post-card-content {
// @apply flex-post-large-content;
// @apply self-center;
// }
// .post-card-title {
// @apply text-4xl;
// }
// .post-card-excerpt {
// @apply text-xl;
// }
// }
} }
body[data-theme="dark"] { body[data-theme="dark"] {
@@ -165,7 +190,7 @@ body[data-theme="dark"] {
.author-social { .author-social {
a { a {
&:hover { &:hover {
@apply text-white @apply text-white;
} }
} }
} }

13
src/components/PostListItem.vue
View File

@@ -14,7 +14,9 @@
<g-link :to="record.path"> <g-link :to="record.path">
<h2 class="post-card-title mt-3">{{ record.title || record.name }}</h2> <h2 class="post-card-title mt-3">{{ record.title || record.name }}</h2>
<p class="post-card-excerpt">{{ record.excerpt }}</p> <p class="post-card-excerpt">{{ record.excerpt }}</p>
<section class="flex flex-wrap post-tags container mx-auto relative py-1"> <section
class="flex flex-wrap post-tags container mx-auto relative py-1"
>
<g-link <g-link
v-for="membership in record.memberships" v-for="membership in record.memberships"
:key="membership.id" :key="membership.id"
@@ -46,9 +48,7 @@
</ul> </ul>
</div> </div>
<div <div class="flex flex-col text-xs leading-none uppercase">
class="flex flex-col text-xs leading-none uppercase"
>
<p> <p>
<g-link :to="record.path"> <g-link :to="record.path">
<time :datetime="record.datetime">{{ <time :datetime="record.datetime">{{
@@ -64,11 +64,7 @@
</g-link> </g-link>
{{ record.status }} {{ record.status }}
</p> </p>
</div> </div>
</div> </div>
<section class="post-tags container mx-auto relative py-3"> <section class="post-tags container mx-auto relative py-3">
<g-link <g-link
@@ -79,7 +75,6 @@
>{{ tag.title }}</g-link >{{ tag.title }}</g-link
> >
</section> </section>
</div> </div>
</div> </div>
</div> </div>

0
src/pages/News.vue → src/pages/Blog.vue
View File

2
src/templates/Overview.vue → src/templates/NewsRoom.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<Layout> <Layout>
<div class="container sm:pxi-0 mx-auto overflow-x-hidden"> <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
<div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4"> <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
<PostListItem v-for="edge in $page.entries.edges" :key="edge.node.id" :record="edge.node" /> <PostListItem v-for="edge in $page.entries.edges" :key="edge.node.id" :record="edge.node" />
</div> </div>
</div> </div>