feat: index is ready

bigbrozer · May 1, 2023 · 4c929f9 · 4c929f9
1 parent c4732c2
commit 4c929f9
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 16 deletions.
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -27,10 +27,10 @@ VARIABLE OVERRIDES
 ====*/
 
 $global-background: #212529 !default;
-//$global-color: #dee2e6 !default;
 $global-color: rgba(0, 255, 53, 0.85) !default;
 $global-emphasis-color: #f626eed9 !default;
 $global-font-family: "Acme", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$global-secondary-background: #691066d9 !default;
 $navbar-background: #000 !default;
 
 /*====

diff --git a/index.hbs b/index.hbs
@@ -3,25 +3,70 @@
 {{> head}}
 {{> navbar}}
 
-<a id="about-me"></a>
 
-<div class="uk-section-default">
-    <div class="uk-section uk-light uk-background-cover uk-background-top-right" style="background-image: url({{asset "images/about-me-image.png"}})" uk-scrollspy="cls: uk-animation-fade">
+{{! Hero }}
+<div class="uk-section uk-background-cover uk-background-top-right" style="background-image: url({{asset "images/about-me-image.png"}})" uk-scrollspy="cls: uk-animation-fade">
+    <a id="about-me"></a>
 
-        <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
-            {{! Hero }}
+    <div class="uk-container uk-container-expand uk-height-large">
+        <div class="uk-grid-large uk-child-width-1-2@m" uk-grid>
             <div>
-                <div class="uk-container uk-overlay-primary" uk-scrollspy="cls: uk-animation-slide-left; delay: 500">
+                <div class="uk-padding uk-overlay-primary" uk-scrollspy="cls: uk-animation-slide-left; delay: 500">
                     <h2 class="uk-heading-divider">{{@config.custom.heroTitle}}</h2>
+
                     <div class="uk-hidden@m">{{{@config.custom.heroBody}}}</div>
                     <div class="uk-visible@m uk-text-large">{{{@config.custom.heroBody}}}</div>
                 </div>
             </div>
-            {{! /Hero }}
         </div>
+    </div>
+</div>
+{{! /Hero }}
+
+{{! Posts }}
+<div class="uk-section">
+    <a id="readings"></a>
+
+    <div class="uk-container uk-dark" uk-scrollspy="cls: uk-animation-slide-right">
+        <h2 class="uk-heading-divider">Readings</h2>
 
+        <div class="uk-grid-small uk-child-width-1-3@s" uk-grid uk-height-match=".uk-card">
+            {{#each posts}}
+                <div uk-scrollspy="cls: uk-animation-fade">
+                    <div class="uk-card uk-card-secondary">
+                        {{#checkIfAll featuredImage}}
+                        <div class="uk-cover-container uk-card-media-top">
+                            <img src="{{featuredImage.urlMd}}" alt="" uk-cover>
+                            <canvas width="300" height="300"></canvas>
+                        </div>
+                        {{/checkIfAll}}
+
+                        <div class="uk-card-header">
+                            <div class="uk-grid-small uk-flex-middle" uk-grid>
+                                <div class="uk-width-auto">
+                                    <img class="uk-border-circle" width="40" height="40" src="{{author.avatarImage.url}}" alt="Avatar">
+                                </div>
+                                <div class="uk-width-expand">
+                                    <h3 class="uk-card-title uk-margin-remove-bottom">{{title}}</h3>
+                                    <p class="uk-text-meta uk-margin-remove-top"><time>{{date createdAt "YYYY-MM-DD"}}</time></p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="uk-card-body" uk-height-viewport="expand: true">
+                            <p>{{excerpt}}</p>
+                        </div>
+
+                        <div class="uk-card-footer">
+                            <a href="{{url}}" class="uk-button uk-button-text">Read more</a>
+                        </div>
+                    </div>
+                </div>
+            {{/each}}
+        </div>
     </div>
 </div>
+{{! /Posts }}
 
 {{> footer}}
 

diff --git a/partials/menu.hbs b/partials/menu.hbs
@@ -11,13 +11,7 @@
          {{! check if the menu item is a link }}
          {{#if link}}
             <a
-               href="{{menuUrl}}"
-
-               {{! check if title attribute exists }}
-               {{#if title}}
-                  title="{{title}}"
-               {{/if}}
-               {{! /check if title attribute exists }}
+               href="{{menuUrl}}{{title}}"
 
                {{! check if target attribute exists }}
                {{#if target}}

diff --git a/partials/social.hbs b/partials/social.hbs
@@ -3,7 +3,7 @@
 
 <ul class="uk-iconnav" uk-scrollspy="target: > li; cls: uk-animation-slide-right; delay: 500">
     {{#each items}}
-        <li class="uk-margin-right">
+        <li>
             <a href="{{link}}" target="{{target}}" uk-tooltip="{{title}}">
                 <img height="64" width="64" src="https://cdn.simpleicons.org/{{label}}/f626eed9">
             </a>