feat(index): refactor padding and hero layout

.github/workflows/ci.yaml

@@ -13,10 +13,10 @@ jobs:
     steps:
       - uses: "actions/checkout@v3"
 
-      - name: "Use Node.js 20.x"
+      - name: "Use Node.js LTS"
         uses: "actions/setup-node@v3"
         with:
-          node-version: "20.x"
+          node-version: "18.17.x"
           cache: "npm"
 
       - name: "Install dependencies"

.github/workflows/release.yaml

@@ -29,10 +29,10 @@ jobs:
           git config user.name "${GITHUB_ACTOR}"
           git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
 
-      - name: "Use Node.js 20.x"
+      - name: "Use Node.js LTS"
         uses: "actions/setup-node@v3"
         with:
-          node-version: "20.x"
+          node-version: "18.17.x"
           cache: "npm"
 
       - name: "Install dependencies"

assets/scss/main.scss

@@ -26,6 +26,7 @@ FONT FACES
 VARIABLE OVERRIDES
 ====*/
 
+$global-font-size: 18px !default;
 $global-background: #000000 !default;
 $global-color: rgba(0, 255, 53, 0.85) !default;
 $global-emphasis-color: #f626eed9 !default;
@@ -65,6 +66,10 @@ footer {
     background-color: $navbar-background;
 }
 
+.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle {
+    min-height: 0 !important;
+}
+
 /* IMAGES */
 
 [class*='post__image'] > img {

author.hbs

@@ -19,7 +19,7 @@
 				<div class="uk-visible@m">{{{description}}}</div>
 			</div>
 			<div class="">
-				<img  class="uk-align-center" src="{{asset "images/about-me-image_orig.png"}}" />
+				<img  class="uk-align-center" src="{{asset "images/about-me-image.webp"}}" />
 			</div>
 		</div>
 	</div>

index.hbs

@@ -5,7 +5,7 @@
 
 
 {{! Portfolio }}
-<div class="uk-section">
+<div class="uk-section uk-padding-small">
     <a id="portfolio"></a>
 
     <div
@@ -20,7 +20,7 @@
 {{! /Portfolio }}
 
 {{! Posts }}
-<div class="uk-section">
+<div class="uk-section uk-padding-small">
     <a id="readings"></a>
 
     <div class="uk-container uk-dark" uk-scrollspy="cls: uk-animation-slide-right">
@@ -39,26 +39,29 @@
 
 {{! Hero }}
 <div
-	class="uk-section"
+	class="uk-section uk-padding-small"
 	uk-scrollspy="cls: uk-animation-fade"
 >
     <a id="about-me"></a>
 
     <div class="uk-container">
-        <div class="uk-grid uk-child-width-expand@s uk-flex-center" uk-grid>
-            <div
-				uk-scrollspy="cls: uk-animation-slide-left; delay: 500"
-			>
+        <div class="uk-grid uk-child-width-expand@s uk-flex-center uk-flex-middle" uk-grid>
+            <div 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>{{{@config.custom.heroBody}}}</div>
 				{{#getAuthor 1}}
 				<a href="{{url}}" class="uk-button uk-button-text">Read more</a>
 				{{/getAuthor}}
             </div>
-			<div class="uk-width-1-3@s">
-				<img  class="uk-align-center" height="600" src="{{asset "images/about-me-image_orig.png"}}" />
+			<div>
+				<img
+					class="uk-align-center uk-object-contain"
+					width="600"
+					height="600"
+					alt=""
+					style="aspect-ratio: 1 / 1;"
+					src="{{asset "images/about-me-image.webp"}}" />
 			</div>
         </div>
     </div>

partials/footer.hbs

@@ -1,5 +1,5 @@
-		<footer class="uk-section uk-container-expand uk-height-small uk-dark">
-			<div class="uk-flex uk-flex-center">
+		<footer class="uk-section uk-padding-small uk-padding-remove-top uk-container-expand uk-dark">
+			<div class="uk-flex-center">
 				{{! checks if any menu is assigned to the Footer menu position }}
 				{{#if menus.footerMenu}}
 					{{> social menus.footerMenu}}

partials/menu.hbs

@@ -1,11 +1,11 @@
 {{! check if this is a first menu level }}
 {{#unless level}}
-	<ul class="uk-navbar-nav">
+	<ul class="uk-navbar-nav uk-flex-center" uk-grid>
 {{/unless}}
 {{! /check if this is a first menu lavel }}
 		{{! loop generating a list of menu items}}
 		{{#each items}}
-			<li{{menuItemClasses}}> {{! menuItemClasses generates the following CSS classses: .active and .has-submenu }}
+			<li class="uk-padding-remove"> {{! menuItemClasses generates the following CSS classses: .active and .has-submenu }}
 				{{! check if the menu item is a link }}
 				{{#if link}}
 					<a

partials/navbar.hbs

@@ -1,5 +1,5 @@
 <nav class="uk-navbar-container" uk-navbar uk-sticky>
-	<div class="uk-navbar-left uk-navbar-center">
+	<div class="uk-navbar-center uk-flex-center">
 		<a class="uk-navbar-item uk-logo" href="{{@website.url}}" aria-label="Back to Home">
 			{{#if @website.logo}}
 				<img src="{{@website.logo}}" alt="{{@website.name}}">

partials/social.hbs

@@ -1,7 +1,11 @@
 {{! loop generating a list of social items }}
 {{! We use SimpleIcons for the brands: https://simpleicons.org/ }}
 
-<ul class="uk-iconnav" uk-scrollspy="target: > li; cls: uk-animation-slide-right; delay: 500">
+<ul
+	class="uk-iconnav uk-flex-center"
+	uk-scrollspy="target: > li; cls: uk-animation-slide-right; delay: 500"
+	uk-grid
+>
     {{#each items}}
         <li>
             <a href="{{link}}" target="{{target}}" uk-tooltip="{{title}}">