more about-us styling

content/pages/food-forests.rst

@@ -1,2 +1,3 @@
 
-:title: Food Forests
+:title: Food Forests
+:template: Food forests

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;
+    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%;*/
+/*}*/

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 %}

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 id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel">
-    <div class="carousel-indicators">
+    <ol 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>
+        <li  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
-        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
+        <li  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
-        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
+        <li  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
-    </div>
+    </ol>
     <div class="carousel-inner">
         <div class="carousel-item active">
-          <div class="row">
+          <div class="row pt-5">
-              <div class="col-lg-6 col-md-12 col-md-12">
+              <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>

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 id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel">
-    <div class="carousel-indicators">
+    <ol 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>
+        <li  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
-        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
+        <li  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
-        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
+        <li  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
-    </div>
+    </ol>
     <div class="carousel-inner">
         <div class="carousel-item active">
-          <div class="row">
+          <div class="row pt-5">
-              <div class="col-lg-6 col-md-12 col-md-12">
+              <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>

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">

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;
+    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%;*/
+/*}*/

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%;*/
+/*}*/