zola update

.github/workflows/action.yml

@@ -0,0 +1,19 @@
+name: Zola on GitHub Pages
+
+on: 
+ push:
+  branches:
+   - development
+
+jobs:
+  build:
+    name: Publish site
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout development
+      uses: actions/checkout@v3.0.0
+    - name: Build and deploy
+      uses: shalzz/zola-deploy-action@v0.16.0
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        

.github/workflows/tf_update.yml

@@ -1,43 +1,24 @@
-<<<<<<< HEAD
 name: Ourworld.tf
-on: 
-  push:
-    branch: [ master ]
-=======
-name: freeflow.life
 on: 
   push:
     branch: [ development ]
->>>>>>> template/master
 
 jobs:
   job_one:
     name: Deploy
     runs-on: ubuntu-latest
     steps:
-<<<<<<< HEAD
     - name: pushing latest change on www.ourworld.tf
       uses: appleboy/ssh-action@master
       with:
         host: www.ourworld.tf
-=======
-    - name: pushing latest change on www2.freeflow.life
-      uses: appleboy/ssh-action@master
-      with:
-        host: www2.freeflow.life
->>>>>>> template/master
-        username: root
+        username: webuser
         key: ${{ secrets.TF_SECRET }}
-        port: 22
+        port: 34022
         script: |
-<<<<<<< HEAD
-          cd /opt/www_ourworld_tf/
-          git log -1
-          git pull
-          npm run build
-=======
-          cd /opt/www_freeflow_life
+          cd websites/www_ourworld_tf/
           git log -1
           git pull
           bash build.sh
->>>>>>> template/master
+
+          

README.md

@@ -1,104 +1,9 @@
-# OurWorld Website
+# OurWorld Powered by ThreeFold
 
-## About
+The official website of OurWorld Powered by ThreeFold
 
-A website created using Zola, a static site generator.
+[www.ourworld.tf](https://ourworld.tf/)
 
-- The contents of the pages reside in the markdown files in /content (written in CommmonMark)
-- The pages are rendered using HTML templates with Tailwind CSS framework in /templates
+## Contribution
 
-## Getting Started
-
-This repository is meant to use as a template for separate projects as well.
-
-To use this repository as a template, simply:
-
-- clone repository
-- add your own content to templates directory (see more below)
-- [install Zola](https://www.getzola.org/documentation/getting-started/installation/),
-- run `npm install` to install dependencies
-- run `npm run start`
-
-## How to create pages using this template
-
-### Structure of the content directory
-
-Every index.md file in a content directory corresponds to a page, and the landing page is content/\_index.md.
-The path of each page is simply its path relavant to the root of the content directory.
-
-Ex:
-content/\_index.md -> yoururl.com/
-content/blog/\_index.md -> yoururl.com/blog
-content/careers/index.md or content/careers.md -> yoururl.com/careers
-
-### Section Templates
-
-#### Blog.html
-
-The blog page is created by default if there is a blog folder in the content directory. The blog page consists of a featured post row, a paginated grid of posts sorted by recency, and a side nav of post categories and featured posts.
-
-Blog posts can have categories, and can be filtered by said categries. To add a new category simply define the posts category in the yaml header of the blog's index.md file. See /content/blog/2019/01/post-3/index.md for example. The side navigation and category based listing will be automatically updated.
-
-To make a blog post featured, simply add an isFeatured attribute to the yaml header of the blog post. The most recent featured blog post wiil be displayed on the heading row of the blog page, and the rest will be displayed under featured posts in the side nav. See /content/blog/2019/03/post-5/index.md for implementation.
-
-#### Section.html
-
-The default section template, displays section body without styling (except for margins), and displays subpages of the section below. The subpages of the page are displayed as small summaries of pages with title, description, and categories, as rendered by partials/pageBox.html. The subpages are grouped by the taxonomy name passed in as the "group_pages_by" extra attribute, defined in the section's yaml header.
-
-### Creating custom pages
-
-To create your own page, simply create a markdwn file following the examples provided above.
-By default, the markdown file will be displayed plainly as it is.
-
-#### Page templates
-
-If you wish to display your markdown files in a specific page template, simply define the template you would like to use in the yaml header of your markdown file. For instance, the blogPage.html template displays blog posts with author info, date, side margins, and a hero image on top of the post. See any blog page in /content for implementation.
-
-### Shortcodes
-
-To give website creators freedom in styling without necessitating getting outside of the /content directory and in to the html files, the template has a few features.
-
-- #### row.html shortcode
-
-Markdown only goes vertical, but this shortcode allows one to add horizontal elements to their web pages. Simply use the {% row() %} {% end %} syntax and place your content in between. The row shortcode can also take a bgPath parameter if you want your row to have a background. (see /content/careers/index.html)
-
-You can create columns in your row by using three vertical bars. ( ||| )
-You can fill in your columns with regular markdown, but they can also be empty.
-
-- #### menu.html
-
-Just like row, menu renders a row with columns split by ( ||| ). However, menu is specifically used to create menu objects for expandible header items. The menu shortcode supports button shortcodes in itself, and provides styling for the menu.
-
-- #### button.html
-
-A simple button shortcode that takes a body and displays it inside a button that is animated on hover. The button also is entirely clickable, and navigates to the first of if any children link elements.
-
-- #### mermaid.html
-
-Simple mermaid shorcode that can be used to create mermaid diagrams in markdown. Also supported in row shortcode.
-
-[Mermaid]("https://mermaid-js.github.io/mermaid/#/")
-
-- #### annotation.html
-
-Simple annotation shorcode that can be used to create annotation objects in markdown.
-
-(note: inline and inline end qualifiers do not work.)
-
-[Annotations]("https://squidfunk.github.io/mkdocs-material/reference/annotations/#usage")
-
-### Image sizing with source paths
-
-You can size your markdown images by adding #small, #medium or #large at the end of the images source url.
-See /content/\_index.md for implementation.
-
-### Header & Footer
-
-The header and footer are also created from markdown files in the content directory. In /content/header/\_index.md, each header item is bulleted. If a header item has a row beneath it, the row will be displayed as a sub-menu on click. Otherwise, if header item is a link, it will simply navigate to the linked page.
-
-The footer, likewise, is structured using the row shortcode. However the left section with page summary is built in. To edit the site destcription, one should edit the description (in the yaml header) of the footer md file. To edit the social links, simply add the social outlets name and your link into the socialLinks dictionary attribute on the yaml header of the footer/\_index.md. If a social icon exists for the social outlet, the link wiill be automatically rendered within the icon, displayed in the footer.
-
-## Resources & References
-
-This project was started using a [Zola Tailwind starter set](https://github.com/brycewray/zola_twcss)
-Some templates were created using [Tailwind UI](https://tailwindui.com)
+Feel free to [create a new issue](https://github.com/threefoldfoundation/www_ourworld_tf/issues) to report an error on the website, or if you have any suggestions on website improvements. 

config.toml

@@ -1,5 +1,5 @@
 # The URL the site will be built for
-base_url = "https://ourworld.tf"
+base_url = "https://www.ourworld.tf"
 # Change this to your own URL! Please note this variable **must** be uncommented.
 
 title = "ThreeFold"
@@ -37,6 +37,9 @@ highlight_theme = "visual-studio-dark"
 # Unicode emoji equivalent in the rendered Markdown files. (e.g.: :smile: => 😄)
 render_emoji = false
 
+[slugify]
+paths = "on"
+
 # Whether external links are to be opened in a new tab
 # If this is true, a `rel="noopener"` will always automatically be added for security reasons
 external_links_target_blank = true
@@ -62,3 +65,7 @@ name = "categories"
 feed = true
 paginate_by = 2
 paginate_path = "blog-posts"
+
+[extra]
+header_class = "freeflow"
+footer_class = "freeflow"

content/_index.md

@@ -24,7 +24,7 @@ A better world is one where we all have access to endless information and opport
 
 |||
 
-![Image](/images/OWAsset-15.png#large)
+![Image](/images/ow_lp15.jpg)
 
 {% end %}
 
@@ -32,7 +32,7 @@ A better world is one where we all have access to endless information and opport
 
 {% row(style="center lean-left" bgColor="#c4ffeb") %}
 
-![Image](/images/OW_Asset34.png)
+![Image](/images/OW_lp34.png)
 
 |||
 
@@ -56,7 +56,7 @@ A better world is one where we all have access to endless information and opport
 
 <br>
 
-![Image](/images/OWAsset-16.png)
+![Image](/images/OWlp-16.png)
 
 ### THE END OF
 
@@ -84,7 +84,7 @@ OurWorld consists of a decentralized internet network as the foundation. This ba
 
 |||
 
-![Image](/images/OW_Asset25.png#large)
+![Image](/images/OW_lp25.png#large)
 
 {% end %}
 
@@ -92,7 +92,7 @@ OurWorld consists of a decentralized internet network as the foundation. This ba
 
 {% row(style="center lean-left" bgColor="#fdfeea") %}
 
-![Image](/images/OW_Asset36.png)
+![Image](/images/OW_lp36.png)
 
 |||
 
@@ -124,7 +124,7 @@ Soon, access all your OurWorld experiences through your Digital Twin. Communicat
 
 |||
 
-![Image](/images/OW_Asset26.jpg)
+![Image](/images/OW_lp26.jpg)
 
 {% end %}
 

content/creator-zones/index.md

@@ -10,6 +10,8 @@ extra:
 
 <!-- section 1 (header) -->
 
+{{ space() }}
+
 {% row(style="center lean-right") %}
 
 ### GROWTH BEGINS
@@ -24,7 +26,7 @@ Creator Zones are set up to allow aspiring entrepreneurs, business people and di
 
 |||
 
-![Image](/images/OW_Asset40.jpg)
+![Image](images/creator.png)
 
 {% end %}
 
@@ -32,7 +34,7 @@ Creator Zones are set up to allow aspiring entrepreneurs, business people and di
 
 {% row(style="center lean-left" bgColor="#c4ffeb") %}
 
-![Image](/images/OW_Asset11.png)
+![Image](images/nature.png)
 
 |||
 
@@ -50,33 +52,9 @@ to become the standard of every Creator Zone.
 
 {{ space() }}
 
-{% row(style="center narrow") %}
-
-<br>
-
-![Image](/images/OW_Asset12.jpg)
-
-<br>
-
-### A DEDICATION
-
-## TO LEARNING
-
-<br>
-
-Creator Zones are always integrated with nature.
-This creates a more sustainable environment that
-allows community members to be more
-sustainable. This also promotes greener habits
-to become the standard of every Creator Zone.
-
-{% end %}
-
-{{ space() }}
-
 {% row(style="center lean-left" bgColor="#e9fcff") %}
 
-![Image](/images/OW_Asset14.png)
+![Image](images/ow_lp1.png)
 
 |||
 
@@ -99,7 +77,7 @@ We have created an environment where collaboration and team work lead to the dev
 
 <br>
 
-![Image](/images/OW_Asset8.jpg)
+![Image](images/regenerative.png)
 
 <br>
 
@@ -129,7 +107,7 @@ All Creator Zone experiences and technologies are built on top of the world’s
 
 |||
 
-![Image](/images/OW_Asset9.jpg)
+![Image](images/p2p.png)
 
 {% end %}
 

content/footer/_index.md

@@ -7,16 +7,4 @@ extra:
   socialLinks: { Github: "https://" }
 ---
 
-{% row(style="center narrow invert-color" bgColor="#2d103e") %}
 
-## WANNA GET INVOLVED?
-
-<br/>
-
-Interested in partnering up? Or just wanna say hi?
-
-Drop us a message!
-
-<button>[Email](/)</button>
-
-{% end %}

content/header/_index.md

@@ -4,12 +4,12 @@ description: "NEAR is on a mission to empower everyone to take back control of t
 insert_anchor_links: "left"
 template: "partials/header.html"
 extra:
-  logoPath: "/images/OW_logo.png"
+  logoPath: "/images/OW_Logo.png"
   imgPath: ""
 ---
 
 - [CREATOR ZONES]("/creator-zones")
-- [PLATFORM]("platform")
+- [PLATFORM]("/platform")
 - [EXPERIENCES]("/experiences")
 - [BLOGS]("/blog")
 - [CONTACT]("mailto:info@ourworld.tf")

content/home/index.md

@@ -10,7 +10,9 @@ extra:
 
 <!-- section 1 (header) -->
 
-{% row(style="center lean-right") %}
+{{ space() }}
+
+{% row(style="center" margin="narrow") %}
 
 ### EXPERIENCE
 
@@ -24,15 +26,15 @@ A better world is one where we all have access to endless information and opport
 
 |||
 
-![Image](/images/OWAsset-15.png#large)
+![Image](./images/ow_lp15.jpg)
 
 {% end %}
 
 {{ space() }}
 
-{% row(style="center lean-left" bgColor="#c4ffeb") %}
+{% row(style="center" margin="narrow" bgColor="#c4ffeb") %}
 
-![Image](/images/OW_Asset34.png)
+![Image](./images/ow_lp0.png)
 
 |||
 
@@ -52,11 +54,14 @@ A better world is one where we all have access to endless information and opport
 
 {{ space() }}
 
-{% row(style="center narrow") %}
+{% row(style="center narrow" margin="narrow") %}
 
 <br>
 
-![Image](/images/OWAsset-16.png)
+![Image](./images/ow_lp44.png#lg)
+
+<br>
+<br>
 
 ### THE END OF
 
@@ -64,13 +69,14 @@ A better world is one where we all have access to endless information and opport
 
 <br>
 
-OurWorld allows you and your community to prosper together! Learn whatever your heart desires. Access any opportunity to earn.
+OurWorld allows you and your community to prosper together!
+<br>Learn whatever your heart desires. Access any opportunity to earn.
 
 {% end %}
 
 {{ space() }}
 
-{% row(style="center lean-right" bgColor="#c4ffeb") %}
+{% row(style="center" margin="narrow" bgColor="#c4ffeb") %}
 
 #### THE 4 LAYERS OF
 
@@ -84,15 +90,15 @@ OurWorld consists of a decentralized internet network as the foundation. This ba
 
 |||
 
-![Image](/images/OW_Asset25.png#large)
+![Image](./images/ow_lp25.png)
 
 {% end %}
 
 {{ space() }}
 
-{% row(style="center lean-left" bgColor="#fdfeea") %}
+{% row(style="center" margin="narrow" bgColor="#fdfeea") %}
 
-![Image](/images/OW_Asset36.png)
+![Image](./images/ow_lp1.jpg)
 
 |||
 
@@ -108,7 +114,7 @@ OurWorld exists to speed up the transition towards inclusivity. We create thrivi
 
 {% end %}
 
-{% row(style="center moderate") %}
+{% row(style="center moderate" margin="narrow") %}
 
 COMING SOON.
 
@@ -124,11 +130,11 @@ Soon, access all your OurWorld experiences through your Digital Twin. Communicat
 
 |||
 
-![Image](/images/OW_Asset26.jpg)
+![Image](./images/ff.png)
 
 {% end %}
 
-{% row(style="center narrow invert-color" bgColor="#4ec48f") %}
+{% row(style="center narrow invert-color" margin="narrow" bgColor="#4ec48f") %}
 
 ## WANNA GET **INVOLVED?**
 

content/index.md

@@ -0,0 +1,147 @@
+---
+title: "OurWorld"
+description: "A better world is where we all have access to endless information and opportunities."
+date: 2018-09-14T21:00:00-05:00
+updated: 2021-02-20T14:40:00-06:00
+draft: false
+extra:
+  author:
+---
+
+<!-- section 1 (header) -->
+
+{% row(style="center lean-right") %}
+
+### EXPERIENCE
+
+## ABUNDANCE
+
+<br>
+
+A better world is one where we all have access to endless information and opportunities. OurWorld exists to achieve that dream.
+
+<button>[EXPLORE]("/platform")</button>
+
+|||
+
+![Image](/images/ow_lp15.jpg)
+
+{% end %}
+
+{{ space() }}
+
+{% row(style="center lean-left" bgColor="#c4ffeb") %}
+
+![Image](/images/OW_lp34.png)
+
+|||
+
+## THE
+
+## CREATOR
+
+## ZONE
+
+<br/>
+
+**This is where it all begins.** Creator Zones are dedicated to building super-sustainable coworking and co-living communities where entrepreneurs, digital nomads and residents collaborate to build beautiful experiences that positively impact the lives of millions.
+
+<button>[EXPLORE](/creator-zones)</button>
+
+{% end %}
+
+{{ space() }}
+
+{% row(style="center narrow") %}
+
+<br>
+
+![Image](/images/OWlp-16.png)
+
+### THE END OF
+
+## SCARCITY.
+
+<br>
+
+OurWorld allows you and your community to prosper together! Learn whatever your heart desires. Access any opportunity to earn.
+
+{% end %}
+
+{{ space() }}
+
+{% row(style="center lean-right" bgColor="#c4ffeb") %}
+
+#### THE 4 LAYERS OF
+
+### TRANSFORMATION.
+
+<br>
+
+OurWorld consists of a decentralized internet network as the foundation. This base enables life-changing experiences and capabilties to be openly and freely available to everyone.
+
+<button>[LEARN MORE]("/platform")</button>
+
+|||
+
+![Image](/images/OW_lp25.png#large)
+
+{% end %}
+
+{{ space() }}
+
+{% row(style="center lean-left" bgColor="#fdfeea") %}
+
+![Image](/images/OW_lp36.png)
+
+|||
+
+### A MISSION TO
+
+# THRIVE
+
+<br/>
+
+OurWorld exists to speed up the transition towards inclusivity. We create thriving experiences and ecosystems which enable every human being to learn, partake and succeed.
+
+<button>[EXPERIENCES](/experiences)</button>
+
+{% end %}
+
+{% row(style="center moderate") %}
+
+COMING SOON.
+
+<br/>
+
+### THE DIGITAL
+
+# TWIN
+
+<br>
+
+Soon, access all your OurWorld experiences through your Digital Twin. Communicate, collaborate and network without every working about online security or identity theft.
+
+|||
+
+![Image](/images/OW_lp26.jpg)
+
+{% end %}
+
+{% row(style="center narrow invert-color" bgColor="#4ec48f") %}
+
+## WANNA GET **INVOLVED?**
+
+<br/>
+
+Interested in partnering up? Or just wanna say hi?
+
+Drop us a message!
+
+<button>[Email](mailto:info@ourverse.tf)</button>
+
+<br>
+
+OUR**WORLD**
+
+{% end %}

content/platform/index.md

@@ -10,7 +10,7 @@ extra:
 
 <!-- section 1 (header) -->
 
-![Image](/images/OW_Asset3.jpg)
+![Image](img/OW_Asset3.jpg)
 
 {% row(style="center narrow") %}
 
@@ -38,7 +38,7 @@ Creator Zones are dedicated to building super-sustainable coworking and co-livin
 
 |||
 
-![Image](/images/OW_Asset4.jpg)
+![Image](img/p2p.png)
 
 {% end %}
 
@@ -46,7 +46,7 @@ Creator Zones are dedicated to building super-sustainable coworking and co-livin
 
 {% row(style="center lean-left") %}
 
-![Image](/images/OW_Asset34.png)
+![Image](img/ow_lp1.png)
 
 |||
 
@@ -78,7 +78,7 @@ OurWorld consists of a decentralized internet network as the foundation. This ba
 
 |||
 
-![Image](/images/OW_Asset25.png#large)
+![Image](img/OW_Defi.jpg#large)
 
 {% end %}
 
@@ -86,7 +86,7 @@ OurWorld consists of a decentralized internet network as the foundation. This ba
 
 {% row(style="center lean-left") %}
 
-![Image](/images/OW_Asset5.jpg)
+![Image](img/ff.png)
 
 |||
 

css/ffoxobliq.css

@@ -1,9 +0,0 @@
-/* === handling obliquing issues in Firefox */
-
-@supports (-moz-appearance: none) {
-  .italic, i, cite, em, var, address, dfn, h3, .h3, h5, .h5 {
-    font-style: oblique 8deg;
-  }
-}
-
-/* === end, handling obliquing issues in Firefox */

css/index.css

@@ -7,19 +7,38 @@
 @import "tailwindcss/components";
 @import "admonition.css";
 @import "tailwindcss/utilities";
-@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 /* Custom CSS for header partial */
 .backdrop-blur {
   -webkit-backdrop-filter: blur(40px);
 }
 
+@font-face {
+    font-family: "CercoDEMO";
+    font-weight: 500;
+    src: url("https://www2.freeflow.life/fonts/CercoDEMO-Medium.otf") format("opentype");
+    src: url("../fonts/CercoDEMO-Medium.otf") format("opentype");
+}
+
+@font-face {
+    font-family: "CercoDEMO";
+    font-weight: 600;
+    src: url("https://www2.freeflow.life/fonts/CercoDEMO-Bold.otf") format("opentype");
+    src: url("../fonts/CercoDEMO-Bold.otf") format("opentype");
+}
+
+@font-face {
+    font-family: "CercoDEMO";
+    font-weight: 400;
+    src: url("https://www2.freeflow.life/fonts/CercoDEMO-Light.otf") format("opentype");
+    src: url("../fonts/CercoDEMO-Light.otf") format("opentype");
+}
+
 * {
-  font-family: "Exo", sans-serif;
+  font-family: "CercoDEMO", sans-serif;
 }
 
 a {
-  font-family: "Lato", sans-serif;
+  font-family: "CercoDEMO", sans-serif;
 }
 
 .bg-semi-white {
@@ -35,9 +54,12 @@ img[src*="#small"] {
   width: 68px;
 }
 
+img[src*="#md"] {
+    width: 300px;
+}
+
 img[src*="#medium"] {
-  width: 400px;
-  margin: auto;
+    width: 400px;
 }
 
 img[src*="#logo"] {
@@ -61,47 +83,48 @@ img[src*="#tft_img"] {
 
 @layer components {
   h1 {
-    @apply text-5xl lg:text-8xl font-normal leading-none;
+    @apply text-4xl md:text-5xl lg:text-6xl leading-none font-normal;
   }
   h1 strong {
-    @apply font-semibold;
+    @apply font-medium;
   }
   h2 {
-    @apply text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-normal leading-none;
+    @apply text-3xl md:text-4xl lg:text-5xl xl:text-5xl font-normal leading-none;
   }
   h2 strong {
     @apply font-medium;
   }
   h3 {
-    @apply text-3xl lg:text-6xl font-normal leading-none;
+    @apply text-xl md:text-2xl lg:text-3xl font-light;
   }
   h3 strong {
-    @apply font-semibold;
+    @apply font-medium;
   }
   h4 {
-    @apply text-xl lg:text-5xl font-normal;
+    @apply text-xl lg:text-2xl font-normal;
   }
   h5 {
-    @apply text-xl lg:text-3xl font-normal;
+    @apply text-xl lg:text-xl font-normal;
   }
   h6 {
-    @apply text-base not-italic font-normal my-1;
+    @apply text-lg not-italic font-normal my-1;
   }
   p {
-    @apply text-lg lg:text-2xl leading-tight;
-    font-family: "Lato", sans-serif;
+    @apply text-lg lg:text-xl leading-tight tracking-normal font-normal;
+    font-family: "CercoDEMO", sans-serif;
   }
   blockquote {
     @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
   }
   li {
-    @apply text-base lg:text-base font-normal;
+    @apply text-lg lg:text-xl font-normal;
   }
   li li {
     @apply text-sm lg:text-sm font-light;
   }
   button {
     @apply inline-block
+    text-base
     lg:text-lg
     px-12
     py-1
@@ -122,6 +145,32 @@ button :is(:where(p)) {
   font-weight: 400;
 }
 
+header .freeflow {
+    background-color: transparent;
+    position: absolute;
+}
+
+footer .freeflow {
+    width: 100vw;
+    background-color: #eae8e3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 40px;
+}
+
+footer .freeflow img {
+    width: 200px;
+    margin-bottom: 20px;
+}
+
+
+header .freeflow div {
+    box-shadow: none;
+    text-transform: uppercase;
+    font-weight: 700 !important;
+}
+
 button {
   background-color: #1a1a1a;
   border-radius: 20px;
@@ -130,6 +179,14 @@ button {
   font-size: 20px;
 }
 
+button {
+    background-color: #1a1a1a;
+    border-radius: 10px;
+    border: none;
+    box-shadow: none;
+    font-size: 20px;
+  }
+
 button a {
   color: white;
 }

css/layout.css

@@ -2,6 +2,15 @@ main {
   @apply pt-0;
 }
 
+#text-1xl { @apply text-xl }
+#text-2xl { @apply text-2xl }
+#text-3xl { @apply text-3xl }
+#text-4xl { @apply text-4xl }
+#text-5xl { @apply text-5xl }
+#text-6xl { @apply text-6xl }
+#text-7xl { @apply text-7xl }
+#text-8xl { @apply text-8xl }
+
 /*
 html, body {
   @apply dark:bg-black;
@@ -120,26 +129,6 @@ h5,
 .h5,
 h6,
 .h6 {
-  @apply font-sans leading-none tracking-tight;
-}
-
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3 {
-  font-family: "Exo", sans-serif;
-}
-
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-  @apply font-sans leading-none tracking-tight;
-  font-family: "Lato", sans-serif;
 }
 
 h1,

tailwind.config.js

@@ -1,8 +1,8 @@
-const colors = require('tailwindcss/colors')
-
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  important: '#content',
-  content: [
-      './templates/**/*.html'
-  ]
+  content: ['./templates/**/*.html'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
 }

templates/_default/base.html

@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html lang="en" charset="utf-8">
 
+    
     {% include "partials/head.html" %}
     
     <body>
         {% include "partials/header.html" %}
-        <div id="content" class="mx-8 md:mx-12 lg:mx-16 xl:mx-20 pt-24">
+        <div id="content" class="mx-auto overflow-hidden">
             {% block content %}{% endblock %}    
         </div>
         {% include "partials/footer.html" %}

templates/blogPage.html

@@ -4,7 +4,7 @@
 <!-- Default page template for blog posts and basic informative markdown files -->
 <main>
 
-<div class="sm:w-5/6 md:w-4/5 mr-auto ml-auto px-6 lg:px-16 xl:w-11/12">
+<div class="sm:w-5/6 md:w-4/5 mr-auto ml-auto px-6 lg:px-16 xl:w-11/12 py-12">
 <img class="max-h-60 sm:max-h-60 md:max-h-80 lg:max-h-96 mx-auto" src={{"/" ~ page.extra.imgPath}} alt="">
 <div>
     <article class="article lg:w-5/6 mx-auto">

templates/layouts/blog.html

@@ -8,7 +8,7 @@ and a side nav for category and featured post navigation
 
 {% block content %}
 
-<main>
+<main class="pt-12">
 
     <!--sets global featured variable as the most recent post with the isFeatured tag-->
     {%- set section = get_section(path="blog/_index.md") %}
@@ -17,11 +17,14 @@ and a side nav for category and featured post navigation
         {%- set_global featured = page %}
         {% break %}
     {% endif %}
+    {% if not featured %} 
+        {%- set_global featured = section.pages[0] %}
+    {% endif %}
     {% endfor %}
     
     {% include "partials/featuredBlog.html" %}
 
-    <div class="flex flex-col md:flex-row">
+    <div class="flex flex-col md:flex-row container mx-auto">
         {% include "partials/blogPosts.html" %}
         {% include "partials/blogSidebar.html" %}
     </div>

templates/partials/blogSidebar.html

@@ -1,6 +1,6 @@
 
 <div class="mx-8 md:mx-4 flex flex-col">
-    <div class="flex flex-col mb-12 mr-8 lg:mr-24">
+    <div class="flex flex-col mb-12">
         <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER POSTS BY</h4>
         <a id="all" class="mb-3 text-black font-normal" href="/blog">All</a>
         {% set taxonomy = get_taxonomy(kind="categories") %}

templates/partials/featuredBlog.html

@@ -1,29 +1,36 @@
-<body>
-        
-    <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 lg:mt-16 items-center">
-      <div class="relative lg:ml-8 my-8 w-full md:w-auto">
-        <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED POST</h3>
-        <a href={{featured.permalink}} class="">
-            <h2 class="mt-8 text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-2 md:mb-4">
-                {{ featured.title }}
-            </h2>
-        </a>
-        <p class="mb-4 md:mb-10 text-lg lg:pr-4">
-            {{featured.description}}
-        </p>
-        
-        <h4 class="text-sm not-italic font-light leading-6 text-gray-600"> 
-            {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} - 
-            {{ featured.extra.author }}
-        </h4>
-            
-      </div>
+{% if featured.taxonomies.people %}
+    {% set people = get_section(path="people/_index.md") %}           
+    {% set pages_str = people.pages | json_encode() | as_str %}
+    {% if pages_str is containing(featured.taxonomies.people[0]) %}
+        {% set author_path = 'people/' ~ featured.taxonomies.people[0] ~ '/index.md' %}
+        {% set author = get_page(path=author_path) %}
+    {% endif %}
+{% endif %}
+
+<body>
+
+  <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 lg:mt-16 items-center container mx-auto">
+    <div class="relative lg:ml-8 my-8 w-full md:w-auto">
+      <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED POST</h3>
+      <a href={{featured.permalink}} class="">
+        <h2
+          class="mt-8 text-2xl main-title sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 ">
+          {{ featured.title }}
+        </h2>
+      </a>
+      <h4 class="text-sm not-italic font-light leading-6 text-gray-600">
+        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
+      </h4>
 
-      <div class="-mx-4 relative lg:mt-0 max-w-full">
-        <img class="relative mx-auto w-7/12 md:w-auto md:max-w-full max-h-80" src=/{{featured.extra.imgPath}} alt="" />
-      </div>
     </div>
 
+    <div class="-mx-4 relative lg:mt-0 max-w-full">
+      <img class="relative mx-auto w-7/12 md:w-auto rounded md:max-w-full max-h-80" src=/{{featured.extra.imgPath}} alt="" />
+    </div>
   </div>
-</div>
-</body> 
+
+  <hr class="mt-6">
+
+  </div>
+  </div>
+</body>

templates/partials/footer.html

@@ -13,9 +13,8 @@
         {{ section.content | safe }}
     {% else %}
         {% set footer_class = config.extra.footer_class | default(value='') %}
-        <div class="{{ footer_class ~ ' -mx-20 pt-20'}}">
-            <img src="{{get_url(path='images/footer_logo.png')}}" alt="">
-            ALL RIGHTS RESERVED 2022
-        </div>
+        <div class="{{ footer_class ~ ' -mx-20'}}">
+            <img src="{{get_url(path='images/footer.png')}}" class="w-60" alt="">
+            
     {% endif %}
 </footer>

templates/partials/header.html

@@ -102,7 +102,7 @@
             <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5  md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
                 <div>
                     <a href="/" class="flex">
-                        <img class="w-48 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo" />
+                        <img class="w-56 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo" />
                     </a>
                 </div>
                 <div class="-mr-2 -my-2 lg:hidden">
@@ -122,7 +122,7 @@
                 <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
                     <nav class="flex space-x-10">    
                     {% for page in section.pages %}
-                    {% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
+                    {% if page.extra.menu %} {% continue %} {% endif %}
                         <a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
                             {{page.title}}
                         </a>
@@ -178,6 +178,7 @@
                         <nav class="flex flex-col justify-around pb-12">
                         {% for page in section.pages %}
                             {% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
+                            {% if page.extra.menu %} {% continue %} {% endif %}
                             <a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                 {{page.title}}
                             </a>

templates/shortcodes/earn_sec.html

@@ -0,0 +1,56 @@
+<style>
+    .bg_earn {
+        background-color: #F2EDE8;
+    }
+
+    .bg-boxs {
+        background-color: #f7f4f0;
+    }
+</style>
+<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg_earn">
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/1_plug_in.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">All you need to get started is
+                            electricity, a network connection, and a FreeFlow Node</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/2_offer_capacity.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Provide decentralized storage and
+                            compute capacity to host your communities digital life while maintaining privacy.</div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/3_earn.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Earn in the most valuable and
+                            rapidly growing economy: the Internet and cloud</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <br>
+        <button class="flex mx-auto uppercase"
+            onclick="window.open('https://threefoldfoundation.github.io/books/freeflow/network/farming/farming_reward.html', '_blank')">see
+            rewards</button>
+    </div>
+</div>

templates/shortcodes/featured_stories.html

@@ -0,0 +1,73 @@
+<style>
+    .bg_earning {
+        background-color: #F2F2F2;
+    }
+
+    .bg_fflow_twin {
+        background-color: #EAF3F7;
+    }
+
+    .bg_CHi_green {
+        background-color: #EBFFED;
+    }
+</style>
+
+<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg-white">
+    <div class="absolute inset-0">
+        <div class="bg-white h-1/3 sm:h-2/3"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+
+            <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_earning">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/get_earn.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900">
+                            get a node and <br /><b class="font-bold">start earning</b>
+                        </h3>
+                        <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">Get a FreeFlow Node and add capacity to
+                            the FreeFlow Network.</div>
+                        <button class="uppercase font-bold" onclick="window.location='/node'">know more</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_fflow_twin">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/ff_twin.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900">
+                            GET THE <br /><b class="font-bold">FREEFLOW TWIN</b>
+                        </h3>
+                        <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">Reserve your sovereign digital twin. <br>Take control over your digital life.</div>
+                        <button class="uppercase font-bold" onclick="window.location='/twin'">know more</button>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_CHi_green">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/chi.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900">
+                            ACQUIRE <br /><b class="font-bold">CHI</b>
+                        </h3>
+                        <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">The digital energy currency
+                            of <br>the FreeFlow network `CHI token`</div>
+                        <button class="uppercase font-bold"
+                            onclick="window.open('https://threefoldfoundation.github.io/books/freeflow/network/buy/buy_my_chi.html', '_blank')">know
+                            more</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>