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) { @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(5n-1) {

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

@@ -1,13 +1,15 @@
<template> <template>
<section class="py-12 px-4 text-center"> <section class="py-12 px-4 text-center">
<div class="w-full max-w-2xl mx-auto"> <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 }} {{ cta.title }}
</h2> </h2>
<p class="mt-6 mb-8 text-gray-600 leading-relaxed"> <div
{{ cta.excerpt }} v-html="cta.content"
</p> class="mt-6 mb-8 text-gray-700 leading-relaxed"
></div>
<g-link <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" 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" :to="cta.link"
>{{ cta.button }}</g-link >{{ cta.button }}</g-link

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

@@ -2,12 +2,13 @@
<section class="py-12 px-4 text-center"> <section class="py-12 px-4 text-center">
<div class="w-full max-w-2xl mx-auto"> <div class="w-full max-w-2xl mx-auto">
<span class="text-sm font-semibold">{{ header.title }}</span> <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 }} {{ header.subtitle }}
</h2> </h2>
<p class="mb-8 text-gray-600 leading-relaxed"> <div
{{ header.excerpt }} v-html="header.content"
</p> class="mb-8 text-gray-700 leading-relaxed"
></div>
<div> <div>
<g-link <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" class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 mr-3 font-semibold rounded shadow"

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

@@ -2,12 +2,21 @@
<section class="py-12 px-4"> <section class="py-12 px-4">
<div class="flex flex-wrap items-center text-center lg:text-left -mx-2"> <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"> <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 }} {{ title }}
</h2> </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"> <div v-if="button">
<a <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" 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" :href="link"
>{{ button }}</a >{{ button }}</a
@@ -15,7 +24,7 @@
<!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> --> <!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
</div> </div>
</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> </div>
</section> </section>
</template> </template>

4
src/templates/MarkdownPage.vue
View File

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

8
src/templates/NewsPost.vue
View File

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