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

Realign users

Browse Source
This commit is contained in:
samaradel
2020-11-17 14:24:22 +02:00
parent 91b418f868
commit 87f068ffaf
3 changed files with 115 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,194 +1,171 @@
@tailwind base; @tailwind base;
blockquote { blockquote {
@apply border-l; @apply border-l;
@apply border-l-4; @apply border-l-4;
@apply border-l-blue-500; @apply border-l-blue-500;
@apply pl-4; @apply pl-4;
@apply italic; @apply italic;
@apply my-8; @apply my-8;
p {
p { padding: 0 !important;
padding: 0 !important; }
}
} }
pre { pre {
@apply border-l; @apply border-l;
@apply border-l-2; @apply border-l-2;
@apply border-l-gray-500; @apply border-l-gray-500;
@apply pl-4; @apply pl-4;
@apply mt-4; @apply mt-4;
@apply text-base; @apply text-base;
@apply break-words; @apply break-words;
@apply overflow-x-auto; @apply overflow-x-auto;
} }
ol { ol {
@apply list-decimal; @apply list-decimal;
@apply ml-5; @apply ml-5;
} }
ul { ul {
@apply list-disc; @apply list-disc;
@apply ml-5; @apply ml-5;
} }
:not(pre)>code { :not(pre)>code {
@apply text-red-600; @apply text-red-600;
@apply text-base; @apply text-base;
} }
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@responsive { @responsive {
.pxi-0 { .pxi-0 {
@apply px-0 #{!important}; @apply px-0 #{!important};
} }
.pyi-0 {
.pyi-0 { @apply py-0 #{!important};
@apply py-0 #{!important}; }
} .pi-0 {
@apply p-0 #{!important};
.pi-0 { }
@apply p-0 #{!important};
}
} }
.animated-link:after { .animated-link:after {
content: ''; content: '';
width: 0px; width: 0px;
height: 1px; height: 1px;
display: block; display: block;
transition: 300ms; transition: 300ms;
@apply bg-gray-500; @apply bg-gray-500;
} }
.animated-link:hover:after { .animated-link:hover:after {
width: 100%; width: 100%;
} }
.height-30px { .height-30px {
height:30px; height: 30px;
} }
.no-border { .no-border {
border-width: 0px !important; border-width: 0px !important;
} }
.flex-post { .flex-post {
@apply border-b; @apply border-b;
@apply border-b-gray-300; @apply border-b-gray-300;
@apply flex-col; @apply flex-col;
@apply w-full;
.post-card-image {
@apply h-56;
@apply w-full; @apply w-full;
@apply object-cover; .post-card-image {
@apply rounded; @apply h-56;
@apply relative; @apply w-full;
} @apply object-cover;
@apply rounded;
.post-card-title { @apply relative;
@apply leading-none; }
@apply text-2xl; .post-card-title {
@apply font-medium; @apply leading-none;
} @apply text-2xl;
@apply font-medium;
.post-card-excerpt { }
@apply font-serif; .post-card-excerpt {
} @apply font-serif;
}
} }
.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(6n+1) { .with-large>.flex-post:nth-child(5n),
@apply flex-100; .with-large>.flex-post:nth-child(5n-1) {
@apply flex-row; // @apply flex-100;
flex: 1 1 50%;
.post-card-image-link { @apply flex-col;
@apply flex-auto; .post-card-image-link {
@apply relative; @apply flex-auto;
min-height: 380px; @apply relative;
@apply mr-6; 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;
flex: 0 1 auto;
@apply self-center
}
.post-card-title {
@apply text-4xl;
}
.post-card-excerpt {
@apply text-xl;
}
} }
.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"] {
background-color: #191b1f; background-color: #191b1f;
@apply text-gray-300; @apply text-gray-300;
.post-content-text { .post-content-text {
@apply text-gray-300; @apply text-gray-300;
} }
.post-card-excerpt { .post-card-excerpt {
@apply text-gray-500; @apply text-gray-500;
} }
.pagination li { .pagination li {
@apply bg-gray-700; @apply bg-gray-700;
@apply text-gray-200; @apply text-gray-200;
@apply border-gray-600; @apply border-gray-600;
&:hover {
@apply bg-gray-600;
@apply text-gray-900;
}
}
.pagination li.border-l-black {
@apply border-l-gray-300;
}
pre {
@apply text-gray-500;
}
.flex-post {
@apply border-b-gray-800;
}
.author-list-item img {
border-color: #191b1f;
}
.author-social {
a {
&:hover { &:hover {
@apply text-white @apply bg-gray-600;
@apply text-gray-900;
}
}
.pagination li.border-l-black {
@apply border-l-gray-300;
}
pre {
@apply text-gray-500;
}
.flex-post {
@apply border-b-gray-800;
}
.author-list-item img {
border-color: #191b1f;
}
.author-social {
a {
&:hover {
@apply text-white
}
} }
}
} }
} }

3
src/components/PostListItem.vue
View File

@@ -70,9 +70,6 @@ export default {
default: true, default: true,
}, },
}, },
mounted() {
// console.log(this.record)
},
}; };
</script> </script>

9
src/pages/People.vue
View File

@@ -5,15 +5,6 @@
<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>
<div class="pagination flex justify-center mb-8">
<Pagination
:baseUrl="baseurl"
:currentPage="$page.entries.pageInfo.currentPage"
:totalPages="$page.entries.pageInfo.totalPages"
:maxVisibleButtons="5"
v-if="$page.entries.pageInfo.totalPages > 1"
/>
</div>
</Layout> </Layout>
</template> </template>