Changes for Kovok

1 files changed, 93 insertions, 99 deletions

diff --git a/layouts/index.html b/layouts/index.html
index 0c222ff..cb42436 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -5,12 +5,12 @@
 {{- partial "header.html" . -}}
         <!-- Masthead-->
         <header class="masthead">
-            <div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
+            <div class="container main px-4 px-lg-5 py-lg-5 d-flex h-100 align-items-end justify-content-center">
                 <div class="d-flex justify-content-center">
                     <div class="text-center">
                         {{ with site.Data.homepage.main }}
                         <h1 class="mx-auto my-0 text-uppercase">{{ .header.title }}</h1>
-                        <h2 class="text-white-50 mx-auto mt-2 mb-5">{{ .header.description }}</h2>
+                        <h2 class="text-white-75 mx-auto mt-2 mb-2 text-uppercase">{{ .header.description }}</h2>
                         <a class="btn btn-primary" href="{{ .header.button.url }}">{{ .header.button.text }}</a>
                         {{ end }}
                     </div>
@@ -23,131 +23,125 @@
             <div class="container px-4 px-lg-5">
                 <div class="row gx-4 gx-lg-5 justify-content-center">
                     <div class="col-lg-8">
-                        <h2 class="text-white mb-4">{{ .title }}</h2>
-                        <p class="text-white-50">{{ .desc }}</p>
+                        <h2 class="text-white mb-4 text-uppercase">{{ .title }}</h2>
+                        <p class="text-white-75">{{ .desc }}</p>
                         {{ if .button.enable }}
                         <a class="btn btn-primary about-btn" href="{{ .button.url }}">{{ .button.text }}</a>
                         {{ end }}
                     </div>
+                    <div class="about-row">
+                        <figure class="column text-center">
+                            <img class="about-img" src="{{ .image0.src }}" alt="A live picture of {{ .image0.text }}"/>
+                            <figcaption class="text-white-75 mx-auto mt-2 mb-5 text-uppercase">{{ .image0.text }}</figcaption>
+                        </figure>
+                        <figure class="column text-center">
+                            <img class="about-img" src="{{ .image1.src }}" alt="A live picture of {{ .image1.text }}"/>
+                            <figcaption class="text-white-75 mx-auto mt-2 mb-5 text-uppercase">{{ .image1.text }}</figcaption>
+                        </figure>
+                        <figure class="column text-center">
+                            <img class="about-img" src="{{ .image2.src }}" alt="A live picture of {{ .image2.text }}"/>
+                            <figcaption class="text-white-75 mx-auto mt-2 mb-5 text-uppercase">{{ .image2.text }}</figcaption>
+                        </figure>
+                        <figure class="column text-center">
+                            <img class="about-img" src="{{ .image3.src }}" alt="A live picture of {{ .image3.text }}"/>
+                            <figcaption class="text-white-75 mx-auto mt-2 mb-3 text-uppercase">{{ .image3.text }}</figcaption>
+                        </figure>
+                    </div>
                 </div>
-                <img class="img-fluid" src="{{ .image }}" alt="..." />
             </div>
         </section>
         {{ end }}
-        <!-- Projects-->
-        {{ with site.Data.homepage.projects }}
-        <section class="projects-section bg-light" id="projects">
+        {{ with site.Data.homepage.musicvideo }}
+        <!-- Listen-->
+        <section class="watch-section">
             <div class="container px-4 px-lg-5">
-                <!-- Featured Project Row-->
-                <div class="row gx-0 mb-4 mb-lg-5 align-items-center">
-                    <div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="{{ .card1.img }}" alt="..." /></div>
-                    <div class="col-xl-4 col-lg-5">
-                        <div class="featured-text text-center text-lg-left">
-                            <h4>{{ .card1.title }}</h4>
-                            <p class="text-black-50 mb-0">{{ .card1.text }}</p>
-                        </div>
-                    </div>
-                </div>
-                <!-- Project One Row-->
-                <div class="row gx-0 mb-5 mb-lg-0 justify-content-center">
-                    <div class="col-lg-6"><img class="img-fluid" src="{{ .card2.img }}" alt="..." /></div>
-                    <div class="col-lg-6">
-                        <div class="bg-black text-center h-100 project">
-                            <div class="d-flex h-100">
-                                <div class="project-text w-100 my-auto text-center text-lg-left">
-                                    <h4 class="text-white">{{ .card2.title }}</h4>
-                                    <p class="mb-0 text-white-50">{{ .card2.text }}</p>
-                                    <hr class="d-none d-lg-block mb-0 ms-0" />
-                                </div>
-                            </div>
-                        </div>
+                <div class="d-flex justify-content-center">
+                    <div class="col-lg-8 text-center">
+                        <h2 class="text-white mb-4 text-uppercase">{{ .title }}</h2>
+                        <p class="text-white-75 h2">{{ .desc }}</p>
                     </div>
                 </div>
-                <!-- Project Two Row-->
-                <div class="row gx-0 justify-content-center">
-                    <div class="col-lg-6"><img class="img-fluid" src="{{ .card3.img }}" alt="..." /></div>
-                    <div class="col-lg-6 order-lg-first">
-                        <div class="bg-black text-center h-100 project">
-                            <div class="d-flex h-100">
-                                <div class="project-text w-100 my-auto text-center text-lg-right">
-                                    <h4 class="text-white">{{ .card3.title }}</h4>
-                                    <p class="mb-0 text-white-50">{{ .card3.text }}</p>
-                                    <hr class="d-none d-lg-block mb-0 me-0" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                <div class="text-center gx-4 gx-lg-5 justify-content-center about-row">
+                    <video class="musicvideo mx-auto" controls preload="metadata" id="watch" alt="Music video for Path of Emotions">
+                        <source src='{{ .src }}' type="audio/ogg">
+                    </video>
                 </div>
             </div>
         </section>
         {{ end }}
-        <!-- Signup-->
-        <section class="signup-section" id="signup">
+        {{ with site.Data.homepage.listen }}
+        <!-- Listen-->
+        <section class="listen-section" id="listen">
             <div class="container px-4 px-lg-5">
-                <div class="row gx-4 gx-lg-5">
-                    <div class="col-md-10 col-lg-8 mx-auto text-center">
-                        <i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
-                        <h2 class="text-white mb-5">Subscribe to receive updates!</h2>
-                        <form class="form-signup" id="contactForm" data-sb-form-api-token="{{ site.Params.sbtoken }}">
-                            <div class="row input-group-newsletter">
-                                <div class="col"><input class="form-control" id="emailAddress" type="email" placeholder="Enter email address..." aria-label="Enter email address..." data-sb-validations="required,email" /></div>
-                                <div class="col-auto"><button class="btn btn-primary disabled" id="submitButton" type="submit">Notify Me!</button></div>
-                            </div>
-                            <div class="invalid-feedback mt-2" data-sb-feedback="emailAddress:required">An email is required.</div>
-                            <div class="invalid-feedback mt-2" data-sb-feedback="emailAddress:email">Email is not valid.</div>
-                            <div class="d-none" id="submitSuccessMessage">
-                                <div class="text-center mb-3 mt-2 text-white">
-                                    <div class="fw-bolder">Form submission successful!</div>
-                                </div>
-                            </div>
-                            <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3 mt-2">Error sending message!</div></div>
-                        </form>
+                <div class="d-flex justify-content-center">
+                    <div class="col-lg-8 text-center">
+                        <h2 class="text-white mb-4 text-uppercase">{{ .title }}</h2>
+                        <p class="text-white-75 h2">{{ .desc }}</p>
                     </div>
                 </div>
+                <div class="text-center mx-auto mt-2 mb-2">
+                    <img class="listen-img" src="{{ .image }}" alt="Workart for our EP Take Away"/>
+                </div>
+                <div class="text-center gx-4 gx-lg-5 justify-content-center about-row">
+                    <section class="text-white-75 text-uppercase"> {{ .audio0.title }} </section>
+                    <audio class="mx-auto mt-1 mb-1" controls preload="metadata">
+                        <source src='{{ .audio0.src }}' type="audio/ogg">
+                    </audio>
+
+                    <section class="text-white-75 text-uppercase"> {{ .audio1.title }} </section>
+                    <audio class="mx-auto mt-1 mb-1" controls preload="metadata">
+                        <source src='{{ .audio1.src }}' type="audio/ogg">
+                    </audio>
+
+                    <section class="text-white-75 text-uppercase"> {{ .audio2.title }} </section>
+                    <audio class="mx-auto mt-1 mb-1" controls preload="metadata">
+                        <source src='{{ .audio2.src }}' type="audio/ogg">
+                    </audio>
+
+                    <section class="text-white-75 text-uppercase"> {{ .audio3.title }} </section>
+                    <audio class="mx-auto mt-1 mb-1" controls preload="metadata">
+                        <source src='{{ .audio3.src }}' type="audio/ogg">
+                    </audio>
+                </div>
             </div>
         </section>
+        {{ end }}
         <!-- Contact-->
-        <section class="contact-section bg-black">
+        {{ with site.Data.homepage.contact }}
+        <section class="contact-section bg-black" id="contact">
+            <div class="d-flex justify-content-center">
+                <div class="col-lg-8 text-center">
+                    <h2 class="text-white mb-4 text-uppercase">{{ .title }}</h2>
+                </div>
+            </div>
             <div class="container px-4 px-lg-5">
-                <div class="row gx-4 gx-lg-5">
-                    <div class="col-md-4 mb-3 mb-md-0">
-                        <div class="card py-4 h-100">
-                            <div class="card-body text-center">
-                                <i class="fas fa-map-marked-alt text-primary mb-2"></i>
-                                <h4 class="text-uppercase m-0">Address</h4>
-                                <hr class="my-4 mx-auto" />
-                                <div class="small text-black-50">{{ site.Params.address }}</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-md-4 mb-3 mb-md-0">
-                        <div class="card py-4 h-100">
-                            <div class="card-body text-center">
-                                <i class="fas fa-envelope text-primary mb-2"></i>
-                                <h4 class="text-uppercase m-0">Email</h4>
-                                <hr class="my-4 mx-auto" />
-                                <div class="small text-black-50"><a href="#!">{{ site.Params.email }}</a></div>
-                            </div>
+                <div class="row gx-4 gx-lg-5 justify-content-center">
+                    <div class="btn btn-primary mx-2 col-md-4 mb-3 mb-md-0">
+                            <a  href="mailto:{{ .email }}">
+                            <i class="fas fa-envelope text-primary mb-2"></i>
+                            <h4 class="text-uppercase m-4 text-white-75">Email</h4>
+                            <div class="small my-4 text-white-75">{{ .email }}</div>
+                        </a>
                         </div>
-                    </div>
-                    <div class="col-md-4 mb-3 mb-md-0">
-                        <div class="card py-4 h-100">
-                            <div class="card-body text-center">
-                                <i class="fas fa-mobile-alt text-primary mb-2"></i>
-                                <h4 class="text-uppercase m-0">Phone</h4>
-                                <hr class="my-4 mx-auto" />
-                                <div class="small text-black-50">{{ site.Params.phone }}</div>
-                            </div>
+                    <div class="column btn btn-primary mx-2 col-md-4 mb-3 mb-md-0">
+                            <a href="xmpp:{{ .xmpp }}?message">
+                            <i class="fas fa-envelope text-primary mb-2"></i>
+                            <h4 class="text-uppercase m-4 text-white-75">XMPP</h4>
+                            <div class="small my-4 text-white-75">{{ .xmpp }}</div>
+                        </a>
                         </div>
-                    </div>
                 </div>
+                {{ with site.Data.homepage.social }}
                 <div class="social d-flex justify-content-center">
-                    <a class="mx-2" href="{{ site.Params.twitter }}"><i class="fab fa-twitter"></i></a>
-                    <a class="mx-2" href="{{ site.Params.facebook }}"><i class="fab fa-facebook-f"></i></a>
-                    <a class="mx-2" href="{{ site.Params.github }}"><i class="fab fa-github"></i></a>
+                    <a class="mx-2" href="{{ .fediverse.url }}"><img class="social-img" src="{{ .fediverse.src }}" alt="{{ .fediverse.altext }}"/></a>
+                    <a class="mx-2" href="{{ .instagram.url }}"><img class="social-img" src="{{ .instagram.src }}" alt="{{ .instagram.altext }}"/></a>
+                    <a class="mx-2" href="{{ .youtube.url }}"><img class="social-img" src="{{ .youtube.src }}" alt="{{ .youtube.altext }}"/></a>
+                    <a class="mx-2" href="{{ .peertube.url }}"><img class="social-img" src="{{ .peertube.src }}" alt="{{ .peertube.altext }}"/></a>
                 </div>
+                {{ end }}
             </div>
         </section>
+        {{ end }}
 {{- partial "footer.html" . -}}
 </body>
-</html>
\ No newline at end of file
+</html>