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

update css for brandpanel and card

Browse Source
This commit is contained in:
Ehab Hassan
2021-08-16 09:14:49 +00:00
parent f87e507ad8
commit 278611928a
5 changed files with 67 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,10 +30,10 @@ h1, h2 {
font-family: "Roboto", sans-serif !important; font-family: "Roboto", sans-serif !important;
} }
// tft page
.tft_section h2{ .tft_section h2{
font-family: 'Oswald', sans-serif !important; font-family: 'Oswald', sans-serif !important;
} }
.tft_subtitle{ .tft_subtitle{
font-family: 'Oswald', sans-serif; font-family: 'Oswald', sans-serif;
font-weight: 400 !important; font-weight: 400 !important;

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

@@ -227,31 +227,31 @@
</div> </div>
<!-- tft --> <!-- tft -->
<div class="w-full max-w-7xl mx-auto lg:mt-20 lg:px-16" v-else-if="id == 'tft'"> <div class="w-full max-w-7xl mx-auto lg:mt-20 lg:px-16 tft_section" v-else-if="id == 'tft'">
<h2 <h2
v-if="cta.title" v-if="cta.title"
class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading" class="lg:w-1/2 text-6xl mb-6 mt-20 leading-none font-heading mx-auto"
> >
{{ cta.title }} {{ cta.title }}
</h2> </h2>
<div v-html="cta.content" class="mt-6 mb-8 text-xl text-gray-800"></div> <div v-html="cta.content" class="mt-6 mb-8 text-xl tracking-wide tft_subtitle text-gray-800"></div>
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button"> <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
<a <a
@click="toggleModal" @click="toggleModal"
class=" class="
inline-block inline-block
cursor-pointer bg-gray-900
bg-blue-900 text-xl
text-sm
learn-button learn-button
hover:bg-blue-800 hover:bg-gray-800
text-gray-100 text-gray-100
px-12 px-16
py-2 py-1
mr-5
mb-4 mb-4
shadow shadow
rounded-full rounded-full
tft_subtitle
tracking-wide
" "
>{{ cta.video_button }}</a >{{ cta.video_button }}</a
> >
@@ -259,16 +259,18 @@
<a <a
class=" class="
inline-block inline-block
bg-blue-900 bg-gray-900
text-sm text-xl
learn-button learn-button
hover:bg-blue-800 hover:bg-gray-800
text-gray-100 text-gray-100
px-12 px-16
py-2 py-1
mb-4 mb-4
shadow shadow
rounded-full rounded-full
tft_subtitle
tracking-wide
" "
target="_blank" target="_blank"
v-if="cta.button" v-if="cta.button"

12
src/components/marketing/sections/cta-sections/BrandPanel.vue
View File

@@ -245,7 +245,7 @@
<!-- tft --> <!-- tft -->
<div <div
v-else-if="id == 'tft'" v-else-if="id == 'tft'"
class="flex flex-wrap text-center lg:text-left " class="flex flex-wrap text-center tft_section lg:text-left "
> >
<div class="lg:w-1/2 px-2 self-center"> <div class="lg:w-1/2 px-2 self-center">
@@ -257,17 +257,13 @@
</div> </div>
<div <div
class=" class="
lg:w-1/2 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none text-center
" "
> >
<div class="lg:self-center"> <div class="lg:self-center">
<h2 <h2
class=" class="
text-4xl text-5xl mb-6 uppercase leading-none font-heading
mb-2
uppercase
leading-tight
font-semibold font-heading
" "
> >
<span class="block">{{ brand.title }}</span> <span class="block">{{ brand.title }}</span>
@@ -275,7 +271,7 @@
brand.subtitle brand.subtitle
}}</span> }}</span>
</h2> </h2>
<div class="py-6 mt-4 text-gray-600" v-html="brand.content"></div> <div class="py-6 mt-4 text-gray-900 text-xl tft_subtitle tracking-wide" v-html="brand.content"></div>
<a <a
v-if="brand.btnTxt" v-if="brand.btnTxt"
target="_blank" target="_blank"

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

@@ -182,11 +182,12 @@
hover:bg-gray-800 hover:bg-gray-800
text-gray-100 text-gray-100
px-16 px-16
py-2 py-1
mb-4 mb-4
shadow shadow
rounded-full rounded-full
tft_subtitle tft_subtitle
tracking-wide
" "
:href="link" :href="link"
>{{ button }}</a >{{ button }}</a
@@ -201,11 +202,12 @@
hover:bg-gray-800 hover:bg-gray-800
text-gray-100 text-gray-100
px-16 px-16
py-2 py-1
mb-4 mb-4
shadow shadow
rounded-full rounded-full
tft_subtitle tft_subtitle
tracking-wide
" "
:href="link" :href="link"
>{{ button }}</a >{{ button }}</a

42
src/components/marketing/sections/cta-sections/NewCard.vue
View File

@@ -2,25 +2,30 @@
<div class="lg:py-12 lg:flex lg:justify-center flex flex-col"> <div class="lg:py-12 lg:flex lg:justify-center flex flex-col">
<div <div
v-if="id == 'tft'" v-if="id == 'tft'"
class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:rounded-lg" class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:rounded-lg tft_section"
> >
<div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2"> <div class="py-2 px-6 max-w-xl lg:max-w-5xl lg:w-1/2 text-center">
<h2 class="text-3xl text-gray-700 font-bold">{{ card.title }}</h2> <h2 class="text-6xl mb-6 leading-none font-heading">{{ card.title }}</h2>
<div class="mt-4 text-gray-700" v-html="card.content"></div> <div class="mt-4 text-gray-900 text-xl tft_subtitle tracking-wide" v-html="card.content"></div>
<div class="mt-8" v-if="card.button"> <div class="mt-8" v-if="card.button">
<a <a
v-if="card.link.includes('http')" v-if="card.link.includes('http')"
target="_blank" target="_blank"
:href="card.link" :href="card.link"
class=" class="
bg-blue-900 inline-block
bg-gray-900
text-xl
learn-button learn-button
hover:bg-blue-700 hover:bg-gray-800
text-gray-100 text-gray-100
px-5 px-16
py-3 py-1
font-semibold mb-4
rounded shadow
rounded-full
tft_subtitle
tracking-wide
" "
>{{ card.button }}</a >{{ card.button }}</a
> >
@@ -28,14 +33,19 @@
v-else v-else
:href="card.link" :href="card.link"
class=" class="
bg-blue-900 inline-block
bg-gray-900
text-xl
learn-button learn-button
hover:bg-blue-700 hover:bg-gray-800
text-gray-100 text-gray-100
px-5 px-16
py-3 py-1
font-semibold mb-4
rounded shadow
rounded-full
tft_subtitle
tracking-wide
" "
>{{ card.button }}</a >{{ card.button }}</a
> >