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

update headers

Browse Source
This commit is contained in:
Ehab Hassan
2021-02-09 13:33:19 +02:00
parent 383919d734
commit 049cb0cd15
6 changed files with 34 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -113,6 +113,10 @@ button:focus {
}
.text-8xl {
font-size: 5rem;
line-height: 1;
}
@media (min-width: 768px) {
.with-large > .flex-post:nth-child(5n),
.with-large > .flex-post:nth-child(5n-1) {

10
src/components/custom/sections/CallToAction.vue
View File

@@ -1,13 +1,15 @@
<template>
<section class="py-12 px-4 text-center">
<div class="w-full max-w-2xl mx-auto">
<h2 class="text-5xl leading-tight font-semibold font-heading">
<h2 class="text-4xl leading-tight font-semibold font-heading">
{{ cta.title }}
</h2>
<p class="mt-6 mb-8 text-gray-600 leading-relaxed">
{{ cta.excerpt }}
</p>
<div
v-html="cta.content"
class="mt-6 mb-8 text-gray-700 leading-relaxed"
></div>
<g-link
v-if="cta.button"
class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 mr-3 font-semibold rounded shadow"
:to="cta.link"
>{{ cta.button }}</g-link

11
src/components/custom/sections/header/HeaderSection.vue
View File

@@ -2,12 +2,13 @@
<section class="py-12 px-4 text-center">
<div class="w-full max-w-2xl mx-auto">
<span class="text-sm font-semibold">{{ header.title }}</span>
<h2 class="text-5xl mt-2 mb-6 leading-tight font-semibold font-heading">
<h2 class="text-4xl mt-2 mb-6 leading-tight font-heading">
{{ header.subtitle }}
</h2>
<p class="mb-8 text-gray-600 leading-relaxed">
{{ header.excerpt }}
</p>
<div
v-html="header.content"
class="mb-8 text-gray-700 leading-relaxed"
></div>
<div>
<g-link
class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 mr-3 font-semibold rounded shadow"
@@ -29,4 +30,4 @@
export default {
props: ["header"],
};
</script>
</script>

15
src/components/marketing/sections/cta-sections/Header.vue
View File

@@ -2,12 +2,21 @@
<section class="py-12 px-4">
<div class="flex flex-wrap items-center text-center lg:text-left -mx-2">
<div class="lg:w-1/2 px-2 lg:pr-10 mt-10 lg:mt-0 order-1 lg:order-none">
<h2 class="text-4xl mb-6 leading-tight font-semibold font-heading">
<h2 class="text-8xl mb-6 leading-tight font-semibold font-heading">
{{ title }}
</h2>
<p class="mb-8 text-gray-700 leading-relaxed">{{ excerpt }}</p>
<div class="mb-8 text-gray-700 leading-relaxed" v-html="excerpt"></div>
<div v-if="button">
<a
v-if="link.includes('http')"
target="_blank"
class="inline-block py-4 px-8 mr-6 leading-none text-white bg-gray-900 hover:bg-gray-700 font-semibold rounded shadow"
:href="link"
>{{ button }}</a
>
<a
v-else
class="inline-block py-4 px-8 mr-6 leading-none text-white bg-gray-900 hover:bg-gray-700 font-semibold rounded shadow"
:href="link"
>{{ button }}</a
@@ -15,7 +24,7 @@
<!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
</div>
</div>
<div class="lg:w-1/2 px-2"><img :src="img" :alt="altImg" /></div>
<div class="lg:w-1/2 px-2"><g-image :src="img" :alt="altImg" /></div>
</div>
</section>
</template>

4
src/templates/MarkdownPage.vue
View File

@@ -148,7 +148,7 @@
header{
title
subtitle
excerpt
content
btn1
link1
btn2
@@ -205,7 +205,7 @@
cta{
id
title
excerpt
content
button
link
}

8
src/templates/NewsPost.vue
View File

@@ -34,7 +34,7 @@
<div class="pl-3 flex flex-col text-xs leading-none uppercase">
<p>
<span
v-for="(author, index) in $page.news.author"
v-for="(author, index) in $page.news.authors"
:key="author.id"
>
<g-link
@@ -43,7 +43,7 @@
class="hover:underline"
>{{ author.name }}</g-link
>
<span v-if="index < $page.news.author.length - 1">,</span>
<span v-if="index < $page.news.authors.length - 1">,</span>
</span>
</p>
<p class="text-gray-700">
@@ -53,7 +53,7 @@
}}</time>
</g-link>
<!-- &nbsp;&middot;&nbsp; {{ $page.news.timeToRead }} min read -->
&nbsp;&middot;&nbsp;
<!-- &nbsp;&middot;&nbsp; -->
<g-link :to="$page.news.path">
<time :datetime="$page.news.datetime">{{
$page.news.startDate
@@ -68,7 +68,7 @@
<g-image :src="$page.news.image"></g-image>
</section>
<div class="">
<div class="py-12">
<section
class="post-content container mx-auto relative font-serif text-gray-700"
>