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

update dark mode

Browse Source
This commit is contained in:
Ehab Hassan
2020-11-29 14:59:12 +02:00
parent d98eb99411
commit 906860382b
7 changed files with 66 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
content/person/samar_adel/samar_adel.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 101 KiB

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

@@ -167,6 +167,12 @@ body[data-theme="dark"] {
.post-content-text { .post-content-text {
@apply text-gray-300; @apply text-gray-300;
} }
.inset-0 , input[type="text"]{
background-color: #191b1f;
}
.bg-white{
background-color: #191b1f;
}
.post-card-excerpt { .post-card-excerpt {
@apply text-gray-500; @apply text-gray-500;
} }

2
src/layouts/partials/Footer.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<nav class="relative bg-black py-4 text-sm text-gray-500"> <nav class="relative py-4 text-sm">
<div <div
class="container mx-auto flex flex-wrap justify-between h-12 items-center" class="container mx-auto flex flex-wrap justify-between h-12 items-center"
> >

30
src/layouts/partials/Navbar.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="fixed inset-0 h-16 bg-black"> <div class="fixed inset-0 h-16 bg-white">
<header <header
class="flex items-center justify-between flex-wrap container mx-auto px-4 sm:px-0 py-4 transition-all transition-500" class="flex items-center justify-between flex-wrap container mx-auto px-4 sm:px-0 py-4 transition-all transition-500"
v-bind:class="{ v-bind:class="{
@@ -8,11 +8,11 @@
}" }"
> >
<div class="flex items-center justify-between px-4 py-3 sm:p-0"> <div class="flex items-center justify-between px-4 py-3 sm:p-0">
<div class="inline-flex items-center flex-shrink-0 text-white mr-6"> <div class="inline-flex items-center flex-shrink-0 mr-6">
<a href="/" class="flex"> <a href="/" class="flex">
<img <img
src="../../../static/img/TFN_white.svg" src="../../../static/img/TFN_black.svg"
class="mr-3" class="mr-3 fill-current"
width="180" width="180"
alt="" alt=""
/> />
@@ -73,15 +73,15 @@
<nav <nav
:class="isOpen ? 'block' : 'hidden'" :class="isOpen ? 'block' : 'hidden'"
class="md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-black" class="md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-white"
> >
<ul <ul
class="list-none sm:flex justify-left text-gray-300 uppercase transition-all transition-500" class="list-none sm:flex justify-left uppercase transition-all transition-500"
> >
<li <li
:key="element.name" :key="element.name"
v-for="(element, index) in $static.metadata.navigation" v-for="(element, index) in $static.metadata.navigation"
class="hover:text-white py-1" class="py-1"
v-bind:class="{ v-bind:class="{
'mr-4': 'mr-4':
index != Object.keys($static.metadata.navigation).length - 1, index != Object.keys($static.metadata.navigation).length - 1,
@@ -116,13 +116,13 @@
</li> --> </li> -->
</ul> </ul>
<div <div
class="md:hidden inline-flex rounded-full border-grey-light border w-1/2" class="md:hidden inline-flex rounded-full border w-1/2"
> >
<span class="w-auto flex justify-end items-center text-grey p-2"> <span class="w-auto flex justify-end items-center p-2">
<font-awesome :icon="['fas', 'search']" /> <font-awesome :icon="['fas', 'search']" />
</span> </span>
<input <input
class="w-full rounded mr-4 bg-black" class="w-full rounded mr-4 bg-white"
type="text" type="text"
placeholder="Search..." placeholder="Search..."
v-model="search" v-model="search"
@@ -131,14 +131,14 @@
</div> </div>
</nav> </nav>
<div <div
class="hidden text-gray-400 md:ml-auto md:inline-block md:order-last" class="hidden md:ml-auto md:inline-block md:order-last"
> >
<div class="inline-flex rounded-full border-grey-light border w-1/2"> <div class="inline-flex rounded-full border w-1/2">
<span class="w-auto flex justify-end items-center text-grey p-2"> <span class="w-auto flex justify-end items-center p-2">
<font-awesome :icon="['fas', 'search']" /> <font-awesome :icon="['fas', 'search']" />
</span> </span>
<input <input
class="w-full rounded mr-4 bg-black" class="w-full rounded mr-4 bg-white"
type="text" type="text"
placeholder="Search..." placeholder="Search..."
v-model="search" v-model="search"
@@ -152,7 +152,7 @@
<li <li
:key="element.name" :key="element.name"
v-for="(element, index) in $static.metadata.social" v-for="(element, index) in $static.metadata.social"
class="hover:text-white sm:block" class="sm:block"
v-bind:class="{ v-bind:class="{
'mr-6': index != Object.keys($static.metadata.social).length - 1, 'mr-6': index != Object.keys($static.metadata.social).length - 1,
}" }"

4
src/pages/About.vue
View File

@@ -10,9 +10,9 @@
v-for="(header, index) in headers" v-for="(header, index) in headers"
:key="index" :key="index"
:href="`#${index}`" :href="`#${index}`"
class="mt-1 capitalize group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150" class="mt-1 capitalize group flex items-center px-3 py-2 text-sm leading-5 font-medium hover:text-gray-900 hover:bg-gray-400 focus:outline-none transition ease-in-out duration-150"
:class="{ :class="{
'text-gray-900 border-r-3 border-blue-500 hover:bg-gray-100': 'border-r-3 border-blue-500 hover:bg-gray-100':
activeIndex === index, activeIndex === index,
}" }"
@click="setActive(index)" @click="setActive(index)"

6
src/pages/Index.vue
View File

@@ -39,7 +39,7 @@
</div> </div>
<div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left"> <div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
<h2 class="text-4xl font-semibold font-tf-secondary uppercase">Projects</h2> <h2 class="text-4xl font-semibold font-tf-secondary uppercase">Projects</h2>
<p class="mt-6 mb-8 text-gray-600 leading-relaxed">Organisations that take action now to shape a conscious digital world.</p> <p class="mt-6 mb-8 leading-relaxed">Organisations that take action now to shape a conscious digital world.</p>
<div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105"> <div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
<a href="/projects"> <a href="/projects">
<svg class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg> <svg class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg>
@@ -57,7 +57,7 @@
</div> </div>
<div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left"> <div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
<h2 class="text-4xl font-semibold font-tf-secondary uppercase">People</h2> <h2 class="text-4xl font-semibold font-tf-secondary uppercase">People</h2>
<p class="mt-6 mb-8 text-gray-600 leading-relaxed">Independent of location, race, gender, religion we leave no one behind.</p> <p class="mt-6 mb-8 leading-relaxed">Independent of location, race, gender, religion we leave no one behind.</p>
<div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105"> <div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
<a href="/people"> <a href="/people">
<svg class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg> <svg class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg>
@@ -75,7 +75,7 @@
</div> </div>
<div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left"> <div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
<h2 class="text-4xl font-semibold font-tf-secondary uppercase">Blog</h2> <h2 class="text-4xl font-semibold font-tf-secondary uppercase">Blog</h2>
<p class="mt-6 mb-8 text-gray-600 leading-relaxed">We collaborate to improve our solutions, efficiency, reach, visibility and service.</p> <p class="mt-6 mb-8 leading-relaxed">We collaborate to improve our solutions, efficiency, reach, visibility and service.</p>
<div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105"> <div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
<a href="/blog"> <a href="/blog">
<svg class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg> <svg class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg>

39
static/img/TFN_black.svg Normal file
View File

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1089.1 104.1" style="enable-background:new 0 0 1089.1 104.1;" xml:space="preserve">
<g>
<g>
<path d="M308.1,20h-27.7v79h-19.7V20H233V4.2h75V20H308.1z"/>
<path d="M401.1,4.1v94.8h-19.7V58.1h-41.7v40.8H320V4.1h19.7v40.2h41.7V4.1C381.4,4.1,401.1,4.1,401.1,4.1z"/>
<path d="M496.5,98.9h-17.7c-3.3,0-5.7-1.3-7.2-3.8l-18-29.1c-0.7-1.1-1.6-2-2.5-2.5s-2.2-0.8-4-0.8h-6.7v36.1h-19.6V4h29.8
c6.6,0,12.3,0.7,17,2.1s8.6,3.3,11.6,5.7s5.2,5.4,6.6,8.7c1.4,3.4,2.1,7.1,2.1,11.1c0,3.1-0.5,6.1-1.3,8.9s-2.2,5.4-3.9,7.7
c-1.7,2.3-3.8,4.4-6.3,6.1c-2.5,1.8-5.3,3.2-8.5,4.3c1.3,0.7,2.4,1.5,3.5,2.5s2.1,2.1,2.9,3.5L496.5,98.9z M450.6,49
c3.2,0,5.9-0.4,8.2-1.2s4.2-1.9,5.7-3.3c1.5-1.4,2.6-3.1,3.3-5c0.7-1.9,1-4,1-6.3c0-4.5-1.5-8-4.5-10.4s-7.5-3.7-13.6-3.7h-10.2
v30L450.6,49L450.6,49z"/>
<path d="M525.5,19.5v24.4h31.6v14.8h-31.6v24.9h40.6V99h-60.3V4.2h60.3v15.4L525.5,19.5L525.5,19.5z"/>
<path d="M600.5,19.5v24.4h31.6v14.8h-31.6v24.9h40.6V99h-60.3V4.2h60.3v15.4L600.5,19.5L600.5,19.5z"/>
<path d="M675.5,19.5v26.2h34.1v15.4h-34.1v37.8h-19.7V4.1h60.3v15.4H675.5L675.5,19.5z"/>
<path d="M820.4,51.5c0,6.9-1.2,13.4-3.5,19.3s-5.6,11-9.9,15.4c-4.3,4.3-9.3,7.7-15.3,10.2s-12.6,3.7-19.8,3.7
c-7.3,0-13.9-1.2-19.8-3.7c-6-2.5-11.1-5.8-15.3-10.2c-4.3-4.3-7.6-9.4-9.9-15.4c-2.3-5.9-3.5-12.3-3.5-19.3
c0-6.9,1.2-13.3,3.5-19.2s5.6-11,9.9-15.3c4.3-4.3,9.4-7.7,15.3-10.2c6-2.5,12.6-3.7,19.8-3.7c7.3,0,13.9,1.2,19.8,3.7
c6,2.5,11.1,5.9,15.3,10.2c4.3,4.3,7.5,9.4,9.9,15.3C819.2,38.2,820.4,44.6,820.4,51.5z M800.3,51.5c0-5-0.7-9.4-2-13.4
c-1.3-3.9-3.2-7.3-5.7-10.1s-5.4-4.9-9-6.3c-3.5-1.5-7.5-2.2-11.9-2.2s-8.4,0.7-12,2.2c-3.5,1.5-6.5,3.6-9,6.3
c-2.5,2.8-4.3,6.1-5.7,10.1c-1.3,3.9-2,8.4-2,13.4s0.7,9.5,2,13.4s3.2,7.3,5.7,10s5.5,4.8,9,6.3s7.5,2.2,12,2.2s8.4-0.7,11.9-2.2
s6.5-3.6,9-6.3s4.3-6.1,5.7-10S800.3,56.5,800.3,51.5z"/>
<path d="M891,83v15.9h-56.2V4.1h19.6V83H891z"/>
<path d="M987.9,51.5c0,6.9-1.2,13.3-3.5,19.1s-5.6,10.8-9.9,15c-4.3,4.2-9.3,7.5-15.3,9.8c-6,2.4-12.6,3.5-19.8,3.5H903V4.1h36.4
c7.3,0,13.9,1.2,19.8,3.5c6,2.4,11.1,5.6,15.3,9.8s7.5,9.2,9.9,15C986.7,38.3,987.9,44.6,987.9,51.5z M967.8,51.5
c0-5-0.7-9.4-2-13.4s-3.2-7.3-5.6-10.1c-2.4-2.7-5.4-4.8-8.9-6.3s-7.5-2.2-11.9-2.2h-16.7v64.1h16.7c4.4,0,8.4-0.7,11.9-2.2
s6.5-3.6,8.9-6.3c2.4-2.8,4.3-6.1,5.6-10.1S967.8,56.5,967.8,51.5z"/>
</g>
</g>
<g>
<g>
<path d="M204,28.3H93.5V3.1h97.6c7.1,0,12.9,5.8,12.9,12.9V28.3L204,28.3z"/>
<path d="M191.1,3.1H93.5v25.2H204V15.9C204,8.8,198.2,3.1,191.1,3.1L191.1,3.1z"/>
</g>
<polygon points="204,65 125.9,65 125.9,39.8 204,39.8 "/>
<path d="M191.1,101.8H93.5V76.6H204v12.3C204,96,198.2,101.8,191.1,101.8L191.1,101.8z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB