update

README.md

@@ -9,7 +9,7 @@ A website created using Zola, a static site generator.
 
 ## Getting Started
 
-This repository is meant to use as a template for static sites.
+This repository is template to build a new Zola website.
 
 To use this repository as a template, simply:
 

content/home/index.md

@@ -7,9 +7,12 @@ draft: false
 weight: 1
 ---
 
+
+
+
 <!-- section 1 (header) -->
 
-{% row(margin="header") %}
+{% row(margin="header" padding="both") %}
 
 # TITLE {#text-8xl}
 

content/page2/index.md

@@ -7,9 +7,11 @@ draft: false
 weight: 2
 ---
 
+<br>
+
 <!-- section 1 (co-found) -->
 
-{% row(style="center" margin="narrow" padding="both") %}
+{% row(style="center" margin="header" padding="both") %}
 
 # TITLE {#text-8xl}
 

content/page3/index.md

@@ -7,9 +7,11 @@ draft: false
 weight: 2
 ---
 
+<br>
+
 <!-- section 1 (co-found) -->
 
-{% row(style="center" margin="narrow" padding="both") %}
+{% row(style="center" margin="header" padding="both") %}
 
 # TITLE {#text-8xl}
 

css/index.css

@@ -179,12 +179,13 @@ header .customize {
 }
 
 footer .customize {
-    width: 100vw;
+    /* width: 100vw; */
     background-color: #d7d7d7;
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 40px;
+    padding-top: 40px;
+    padding-bottom: 40px;
 }
 
 footer .customize img {

public/home/index.html

@@ -36,7 +36,7 @@
   <!-- **** CONCLUSION, favicons **** -->
 
   <!-- CSS/SCSS -->
-  <link rel="stylesheet" href="https://examplezola.tf/css/index.css?h=241c4886080bf8daf3ce48d39d27a62e1dd2217a3943e80ffa0e9ea80bd73d8b" />  <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style>
+  <link rel="stylesheet" href="https://examplezola.tf/css/index.css?h=8ea8a615d5a5a9339423096c45329cf61cd2193f52db4447f8ae0248efacaed8" />  <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style>
   
 </head>
 
@@ -364,9 +364,9 @@ Parameters:
                     <!-- handles mermaid markdown content display -->
 
                     
-                        <h1 id="title">TITLE</h1>
+                        <h1 id="text-8xl">TITLE</h1>
 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.<br> Quas, aliquid ab blanditiis omnis odio repellat?</p>
-<p><button><a href="https://examplezola.tf/">KNOW MORE</a></button></p>
+<p><button><a href="https://examplezola.tf/">BUTTON</a></button></p>
 
                     
                 </div>
@@ -517,7 +517,7 @@ Parameters:
 
 
         <div id="" class="relative justify-center flex overflow-hidden  " style="">
-            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-start py-2 md:py-4 lg:pb-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-start py-2 md:py-4 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
         
          
 
@@ -568,7 +568,9 @@ Parameters:
             
         
     </div>
-</div><!-- section 3 -->
+</div><br>
+<br>
+<!-- section 3 -->
 <!-- row shortcode 
 Shortcode used in markdown for the creation of mobile compatible vertical rows
 Divides markdown into columns by splitting content using column identifier "|||"
@@ -692,7 +694,7 @@ Parameters:
 
 
         <div id="" class="relative justify-center flex overflow-hidden  " style="">
-            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-0 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-2 md:py-4 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
         
          
 
@@ -1175,7 +1177,7 @@ Parameters:
 
 
         <div id="" class="relative justify-center flex overflow-hidden  " style="">
-            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-0 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-2 md:py-4 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
         
          
 
@@ -1472,10 +1474,10 @@ Parameters:
 
 
 
-<footer class="bottom-0 mx-20">
+<footer class="bottom-0">
     
         
-        <div class="customize -mx-20">
+        <div class="customize">
             
             <p class="text-center">ALL RIGHTS RESERVED 2022</p>
         </div>

public/index.html

@@ -36,7 +36,7 @@
   <!-- **** CONCLUSION, favicons **** -->
 
   <!-- CSS/SCSS -->
-  <link rel="stylesheet" href="https://examplezola.tf/css/index.css?h=241c4886080bf8daf3ce48d39d27a62e1dd2217a3943e80ffa0e9ea80bd73d8b" />  <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style>
+  <link rel="stylesheet" href="https://examplezola.tf/css/index.css?h=8ea8a615d5a5a9339423096c45329cf61cd2193f52db4447f8ae0248efacaed8" />  <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style>
   
 </head>
 
@@ -362,9 +362,9 @@ Parameters:
                     <!-- handles mermaid markdown content display -->
 
                     
-                        <h1 id="title">TITLE</h1>
+                        <h1 id="text-8xl">TITLE</h1>
 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.<br> Quas, aliquid ab blanditiis omnis odio repellat?</p>
-<p><button><a href="https://examplezola.tf/">KNOW MORE</a></button></p>
+<p><button><a href="https://examplezola.tf/">BUTTON</a></button></p>
 
                     
                 </div>
@@ -515,7 +515,7 @@ Parameters:
 
 
         <div id="" class="relative justify-center flex overflow-hidden  " style="">
-            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-start py-2 md:py-4 lg:pb-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-start py-2 md:py-4 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
         
          
 
@@ -566,7 +566,9 @@ Parameters:
             
         
     </div>
-</div><!-- section 3 -->
+</div><br>
+<br>
+<!-- section 3 -->
 <!-- row shortcode 
 Shortcode used in markdown for the creation of mobile compatible vertical rows
 Divides markdown into columns by splitting content using column identifier "|||"
@@ -690,7 +692,7 @@ Parameters:
 
 
         <div id="" class="relative justify-center flex overflow-hidden  " style="">
-            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-0 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-2 md:py-4 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
         
          
 
@@ -1173,7 +1175,7 @@ Parameters:
 
 
         <div id="" class="relative justify-center flex overflow-hidden  " style="">
-            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-0 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-2 md:py-4 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
         
          
 
@@ -1468,10 +1470,10 @@ Parameters:
 
 
 
-<footer class="bottom-0 mx-20">
+<footer class="bottom-0">
     
         
-        <div class="customize -mx-20">
+        <div class="customize">
             
             <p class="text-center">ALL RIGHTS RESERVED 2022</p>
         </div>

public/page2/index.html

@@ -36,7 +36,7 @@
   <!-- **** CONCLUSION, favicons **** -->
 
   <!-- CSS/SCSS -->
-  <link rel="stylesheet" href="https://examplezola.tf/css/index.css?h=241c4886080bf8daf3ce48d39d27a62e1dd2217a3943e80ffa0e9ea80bd73d8b" />  <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style>
+  <link rel="stylesheet" href="https://examplezola.tf/css/index.css?h=8ea8a615d5a5a9339423096c45329cf61cd2193f52db4447f8ae0248efacaed8" />  <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style>
   
 </head>
 
@@ -394,10 +394,10 @@ Parameters:
 
 
 
-<footer class="bottom-0 mx-20">
+<footer class="bottom-0">
     
         
-        <div class="customize -mx-20">
+        <div class="customize">
             
             <p class="text-center">ALL RIGHTS RESERVED 2022</p>
         </div>

public/page3/index.html

@@ -36,7 +36,7 @@
   <!-- **** CONCLUSION, favicons **** -->
 
   <!-- CSS/SCSS -->
-  <link rel="stylesheet" href="https://examplezola.tf/css/index.css?h=241c4886080bf8daf3ce48d39d27a62e1dd2217a3943e80ffa0e9ea80bd73d8b" />  <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style>
+  <link rel="stylesheet" href="https://examplezola.tf/css/index.css?h=8ea8a615d5a5a9339423096c45329cf61cd2193f52db4447f8ae0248efacaed8" />  <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style>
   
 </head>
 
@@ -273,6 +273,16 @@ Parameters:
             
             
             
+                
+                    
+                    
+                
+            
+            
+        
+            
+            
+            
                 
             
             
@@ -374,6 +384,20 @@ Parameters:
                     
                         <h1 id="text-8xl">TITLE</h1>
 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
+<p><button><a href="https://examplezola.tf/">BUTTON</a></button></p>
+
+                    
+                </div>
+            
+         
+
+            <!-- Hides empty columns if displayed vertically in small screen -->
+            
+                <div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 ">
+                    <!-- handles mermaid markdown content display -->
+
+                    
+                        
 <p><img src="https://examplezola.tf/page3/placeholder.jpg#medium#mx-auto" alt="Image" /></p>
 
                     
@@ -394,10 +418,10 @@ Parameters:
 
 
 
-<footer class="bottom-0 mx-20">
+<footer class="bottom-0">
     
         
-        <div class="customize -mx-20">
+        <div class="customize">
             
             <p class="text-center">ALL RIGHTS RESERVED 2022</p>
         </div>

templates/partials/footer.html

@@ -7,13 +7,13 @@
 
 {% set subsections_str = section.subsections | join(sep=" ") %}
 
-<footer class="bottom-0 mx-20">
+<footer class="bottom-0">
     {% if "footer/_index.md" in subsections_str %}
         {%- set section = get_section(path="footer/_index.md") %}
         {{ section.content | safe }}
     {% else %}
         {% set footer_class = config.extra.footer_class | default(value='') %}
-        <div class="{{ footer_class ~ ' -mx-20'}}">
+        <div class="{{ footer_class }}">
             {# <img src="{{get_url(path='images/')}}" class="w-60" alt=""> #}
             <p class="text-center">ALL RIGHTS RESERVED 2022</p>
         </div>

templates/partials/header.html

@@ -97,7 +97,7 @@
 {% else %}
     <header id="header-container">
         {% set header_class = config.extra.header_class | default(value='') %}
-        <div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
+        <div class="{{'z-10 bg-white fixed w-screen max-w-full ' ~ header_class}}">
             <div class="relative z-50 shadow">
             <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>
@@ -173,7 +173,7 @@
         <div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
             <div>
                 <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
-                    <div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
+                    <div class="pt-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
     
                         <nav class="flex flex-col justify-around pb-12">
                         {% for page in section.pages %}

templates/shortcodes/row.html

@@ -66,7 +66,7 @@ Parameters:
     {% elif "bottom" in padding %}
         {% set padding_class = " py-2 md:py-4 lg:pb-28" %}
     {% elif "both" in padding %}
-        {% set padding_class = " py-2 md:py-4 lg:py-28" %}
+        {% set padding_class = " py-8 md:py-4 lg:py-28" %}
     {% endif %}
 {% endif %}