Add initial "no posts" empty state

i18n/en.yaml

@@ -16,6 +16,19 @@
 - id: footer_credits
   translation: "Powered by <a href=\"https://gohugo.io/\" rel=\"nofollow noopener\" target=\"_blank\">Hugo</a> and <a href=\"https://github.com/vimux/binario\" rel=\"nofollow noopener\" target=\"_blank\">Binario</a> theme."
 
+# "No posts" empty state
+- id: empty_title
+  translation: "You don't have any posts yet!"
+
+- id: empty_text_start
+  translation: "As posts are added in your <code>mainSection</code> folders"
+
+- id: empty_text_end
+  translation: "they'll appear here"
+
+- id: empty_tip
+  translation: "<b>Tip:</b> You could change <code>mainSection</code> folders in site config file."
+
 # 404
 - id: page404_title
   translation: "404 Page not found"

layouts/index.html

@@ -9,6 +9,14 @@
 			</div>
 		{{ end }}
 		</div>
+		{{- if eq $paginator.TotalNumberOfElements 0 }}
+			<div class="empty block center">
+				<div class="empty__icon">¯\_(ツ)_/¯</div>
+				<h3 class="empty__title">{{ T "empty_title" }}</h3>
+				<p class="empty__text">{{ T "empty_text_start" | safeHTML }} ({{ delimit (apply $mainSections "printf" "<code>content/%s</code>" ".") ", " | safeHTML }}), {{ T "empty_text_end" }}.</p>
+				<p class="empty__tip">{{ T "empty_tip" | safeHTML }}</p>
+			</div>
+		{{- end }}
 		{{ partial "pagination.html" . }}
 	</div>
 {{ partial "footer.html" . }}

static/css/main.css

@@ -767,6 +767,18 @@ mark {
 	font-size: 1.5rem;
 }
 
+/* Empty state */
+.empty__icon {
+	font-size: 3.5rem;
+	margin-bottom: 2rem;
+}
+
+.empty__tip {
+	padding: .5rem;
+	background-color: #202020;
+	margin: 4rem 0 0;
+}
+
 /* Footer */
 .footer {
 	padding: .625rem 0;