From 38c59018488ad94de6cd764750d1146c3fc4b78e Mon Sep 17 00:00:00 2001
From: Idaapayo <idaapayo@gmail.com>
Date: Thu, 3 Jun 2021 21:48:16 +0300
Subject: [PATCH] more about-us styling

---
 content/pages/food-forests.rst       |  3 +-
 ge-theme/static/css/about-us.css     | 38 ++++++++++++--
 ge-theme/static/css/food-forest.css  |  0
 ge-theme/templates/Food forests.html | 11 +++++
 ge-theme/templates/about-us.html     | 23 +++++----
 output/pages/about-us.html           | 23 +++++----
 output/pages/food-forests.html       |  7 +--
 output/theme/css/about-us.css        | 38 ++++++++++++--
 output/theme/css/about-us.css~       | 74 ++++++++++++++++++++++++++++
 output/theme/css/food-forest.css     |  0
 10 files changed, 185 insertions(+), 32 deletions(-)
 create mode 100644 ge-theme/static/css/food-forest.css
 create mode 100644 ge-theme/templates/Food forests.html
 create mode 100644 output/theme/css/about-us.css~
 create mode 100644 output/theme/css/food-forest.css

diff --git a/content/pages/food-forests.rst b/content/pages/food-forests.rst
index 5b641d7..c2a4709 100644
--- a/content/pages/food-forests.rst
+++ b/content/pages/food-forests.rst
@@ -1,2 +1,3 @@
 
-:title: Food Forests
\ No newline at end of file
+:title: Food Forests
+:template: Food forests
\ No newline at end of file
diff --git a/ge-theme/static/css/about-us.css b/ge-theme/static/css/about-us.css
index 617e4c8..30fe764 100644
--- a/ge-theme/static/css/about-us.css
+++ b/ge-theme/static/css/about-us.css
@@ -50,7 +50,39 @@
 .wrapper-carousel{
     box-sizing: border-box;
     margin: auto;
-    border: solid 2px blue;
+    border: solid 2px #ffffff;
     max-height: 600px;
-    max-width: 400px;
-}
\ No newline at end of file
+    max-width: 500px;
+}
+.carousel-indicators li{
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+
+}
+.carousel-indicators{
+    bottom: -50px;
+    /*padding-top: 50px;*/
+}
+.iframe-container{
+   position: relative;
+   width: 100%;
+   padding-bottom: 56.25%;
+   height: 0;
+}
+.iframe-container iframe{
+    position: absolute;
+    top:0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+/*.col-carousel-left{*/
+/*    padding-left: 100px;*/
+/*}*/
+/*.carousel-indicators-round{*/
+/*     width: 14px;*/
+/*     height: 14px;*/
+/*     border: 2px solid black;*/
+/*     border-radius: 100%;*/
+/*}*/
diff --git a/ge-theme/static/css/food-forest.css b/ge-theme/static/css/food-forest.css
new file mode 100644
index 0000000..e69de29
diff --git a/ge-theme/templates/Food forests.html b/ge-theme/templates/Food forests.html
new file mode 100644
index 0000000..9821356
--- /dev/null
+++ b/ge-theme/templates/Food forests.html	
@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% block head %}
+{{ super() }}
+<link rel="stylesheet" type="text/css" href="{{SITEURL}}/theme/css/food-forest.css">
+{% endblock %}
+
+{% block content %}
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/ge-theme/templates/about-us.html b/ge-theme/templates/about-us.html
index bae94da..ef86448 100644
--- a/ge-theme/templates/about-us.html
+++ b/ge-theme/templates/about-us.html
@@ -35,6 +35,7 @@
         </div>
     </div>
     <div class="row">
+        <p>Photo grid missing!!</p>
         <div class="col-lg-3">
 
         </div>
@@ -49,25 +50,27 @@
         </div>
     </div>
 </div>
-<div id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel" data-interval="false">
-    <div class="carousel-indicators">
-        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
-        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
-    </div>
+<div id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel">
+    <ol class="carousel-indicators">
+        <li  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
+        <li  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
+        <li  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
+    </ol>
     <div class="carousel-inner">
         <div class="carousel-item active">
-          <div class="row">
-              <div class="col-lg-6 col-md-12 col-md-12">
+          <div class="row pt-5">
+              <div class="col-lg-6 col-md-12 col-sm-12 ps-5">
                   <div class="wrapper-carousel">
                       <h3 class="years">2010</h3>
                       <h2>ECO_PESA</h2>
                       <p>This program was launched as a backed currency model with 75 Businesses taking part in three informal settlements near Kongowea, Mombasa. The currency was backed by donor funds and accomplished some amazing community service and environmental goals in partnership with Green World Campaign while increasing local trade for a year period.</p>
                   </div>
               </div>
-              <div class="col-lg-6 col-md-12 col-md-12">
+              <div class="col-lg-6 col-md-12 col-md-12 ps-5">
                 <div class="wrapper-carousel">
-                    <iframe width="480" height="277" src="https://www.youtube.com/embed/UaspBGmsdLE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    <div class="iframe-container">
+                        <iframe width="480" height="277" src="https://www.youtube.com/embed/UaspBGmsdLE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
                 </div>
               </div>
           </div>
diff --git a/output/pages/about-us.html b/output/pages/about-us.html
index b4de12e..0ca26be 100644
--- a/output/pages/about-us.html
+++ b/output/pages/about-us.html
@@ -77,6 +77,7 @@
         </div>
     </div>
     <div class="row">
+        <p>Photo grid missing!!</p>
         <div class="col-lg-3">
 
         </div>
@@ -91,25 +92,27 @@
         </div>
     </div>
 </div>
-<div id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel" data-interval="false">
-    <div class="carousel-indicators">
-        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
-        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
-    </div>
+<div id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel">
+    <ol class="carousel-indicators">
+        <li  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
+        <li  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
+        <li  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
+    </ol>
     <div class="carousel-inner">
         <div class="carousel-item active">
-          <div class="row">
-              <div class="col-lg-6 col-md-12 col-md-12">
+          <div class="row pt-5">
+              <div class="col-lg-6 col-md-12 col-sm-12 ps-5">
                   <div class="wrapper-carousel">
                       <h3 class="years">2010</h3>
                       <h2>ECO_PESA</h2>
                       <p>This program was launched as a backed currency model with 75 Businesses taking part in three informal settlements near Kongowea, Mombasa. The currency was backed by donor funds and accomplished some amazing community service and environmental goals in partnership with Green World Campaign while increasing local trade for a year period.</p>
                   </div>
               </div>
-              <div class="col-lg-6 col-md-12 col-md-12">
+              <div class="col-lg-6 col-md-12 col-md-12 ps-5">
                 <div class="wrapper-carousel">
-                    <iframe width="480" height="277" src="https://www.youtube.com/embed/UaspBGmsdLE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    <div class="iframe-container">
+                        <iframe width="480" height="277" src="https://www.youtube.com/embed/UaspBGmsdLE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
                 </div>
               </div>
           </div>
diff --git a/output/pages/food-forests.html b/output/pages/food-forests.html
index 81b6e59..5e63e7c 100644
--- a/output/pages/food-forests.html
+++ b/output/pages/food-forests.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-      <title>grassroots-pelican - Food Forests</title>
+    <title>grassroots-pelican</title>
     <meta charset="utf-8" />
     <meta name="ida" content="Pelican"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -18,7 +18,7 @@
     <script src="https://use.fontawesome.com/5932321f98.js"></script>
 
 
-
+<link rel="stylesheet" type="text/css" href="../theme/css/food-forest.css">
 </head>
 
 <body id="base-index" class="base-home">
@@ -48,10 +48,7 @@
     </nav>
 <!--</div>-->
 
-    <h1>Food Forests</h1>
-    
 
-    
 
     <div class="row">
         <div class="col-lg-12 base-footer">
diff --git a/output/theme/css/about-us.css b/output/theme/css/about-us.css
index 617e4c8..30fe764 100644
--- a/output/theme/css/about-us.css
+++ b/output/theme/css/about-us.css
@@ -50,7 +50,39 @@
 .wrapper-carousel{
     box-sizing: border-box;
     margin: auto;
-    border: solid 2px blue;
+    border: solid 2px #ffffff;
     max-height: 600px;
-    max-width: 400px;
-}
\ No newline at end of file
+    max-width: 500px;
+}
+.carousel-indicators li{
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+
+}
+.carousel-indicators{
+    bottom: -50px;
+    /*padding-top: 50px;*/
+}
+.iframe-container{
+   position: relative;
+   width: 100%;
+   padding-bottom: 56.25%;
+   height: 0;
+}
+.iframe-container iframe{
+    position: absolute;
+    top:0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+/*.col-carousel-left{*/
+/*    padding-left: 100px;*/
+/*}*/
+/*.carousel-indicators-round{*/
+/*     width: 14px;*/
+/*     height: 14px;*/
+/*     border: 2px solid black;*/
+/*     border-radius: 100%;*/
+/*}*/
diff --git a/output/theme/css/about-us.css~ b/output/theme/css/about-us.css~
new file mode 100644
index 0000000..c9bbfc6
--- /dev/null
+++ b/output/theme/css/about-us.css~
@@ -0,0 +1,74 @@
+.box-wrap{
+    box-sizing: border-box;
+    margin: auto;
+    border-style: solid;
+    border-color: #ffffff;
+    max-height: 900px;
+    max-width: 400px;
+}
+.box-title{
+    text-align: center;
+    font-weight: bold;
+    padding-top: 40px;
+    font-size: 40px;
+}
+.box-title1{
+    text-align: center;
+    font-weight: bold;
+    padding-top: 80px;
+    font-size: 40px;
+}
+.box-words{
+    padding-top: 20px;
+    text-align: center;
+}
+.box-words1{
+    padding-top: 40px;
+}
+.inline-buttons{
+    /*display: flex;*/
+    /*justify-content: center;*/
+    /*align-items: center;*/
+    padding-top: 20px;
+    padding-bottom: 20px;
+    /*flex-wrap: wrap;*/
+}
+.a-button{
+    background: #ffffff;
+    border: 1px solid black;
+    color: black;
+    padding: 0.5em;
+    /*padding: 12px 6px;*/
+    text-decoration: none;
+    width: 150px;
+    border-radius: 25px;
+}
+.a-button:hover{
+    background-color: #3E3F45;
+    color: #ffffff;
+}
+.wrapper-carousel{
+    box-sizing: border-box;
+    margin: auto;
+    border: solid 2px #ffffff;
+    max-height: 600px;
+    max-width: 500px;
+}
+.carousel-indicators li{
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+
+}
+.carousel-indicators{
+    bottom: -50px;
+}
+/*.col-carousel-left{*/
+/*    padding-left: 100px;*/
+/*}*/
+/*.carousel-indicators-round{*/
+/*     width: 14px;*/
+/*     height: 14px;*/
+/*     border: 2px solid black;*/
+/*     border-radius: 100%;*/
+/*}*/
diff --git a/output/theme/css/food-forest.css b/output/theme/css/food-forest.css
new file mode 100644
index 0000000..e69de29