latest blogposts section on homepage (#28)

Author: cacama-valvata

layouts/index.html

@@ -9,7 +9,7 @@ <h1 class="hero-title py-1">{{ .Site.Params.FullTitle }}</h1>
   </div>
 </div>
 
-<div class="bg-light justify-content-center"  style="min-height: 60vh;">
+<div class="bg-light justify-content-center"  style="min-height: 45vh;">
   <div class="blurb-box d-flex flex-wrap justify-content-around">
     {{ range .Site.Sections }}
       {{ if eq .Type "home" }}
@@ -21,4 +21,20 @@ <h1 class="hero-title py-1">{{ .Site.Params.FullTitle }}</h1>
   </div>
 </div>
 
+<div class=" bg-light infopage-content"  style="min-height: 60vh;">
+  <div class="d-flex flex-wrap justify-content-center latest-blogposts-title latest-blogposts">
+    <h1>Latest  Blogposts</h1>
+    <!-- We use our blog to post write-ups from competitions or wargame challenges, summaries of our meetings, important upcoming events, or something cool in security. -->
+  </div>
+  
+  <div class="blogcards d-flex flex-wrap justify-content-center latest-blogposts">
+    {{ range ( where .Site.RegularPages "Type" "blog" ) | first 3 }}
+      {{ partial "blogcard.html" . }}
+    {{ end }}
+  </div>
+  <div class="d-flex flex-wrap justify-content-center latest-blogposts">
+    <button class="btn blog-button mx-3" onclick="window.location.href = {{ range .Site.Menus.main }}{{ if eq .Name "Blog" }}{{ .URL | markdownify }}{{ end }}{{ end }};">See All Blog Posts</button>
+  </div>
+</div>
+
 {{ end }}

static/caseyhates.css

@@ -106,13 +106,14 @@ body {
     color: white;
 }
 
-.sli-button {
+.sli-button, .blog-button {
     background-color: var(--primary-color);
 }
 
 
-.sli-button:hover {
+.sli-button:hover, .blog-button:hover {
     background-color: var(--secondary-color);
+    color:white;
 }
 
 .discord-button {
@@ -294,3 +295,25 @@ body {
 .blog-content-text {
     margin-top: 2rem;
 }
+
+.latest-blogposts-title {
+    padding: 2.5rem 0 1.5rem 0;
+}
+
+.latest-blogposts {
+    background: #f0f0f0;
+}
+
+.blog-button {
+    height: auto;
+    min-width: 10vw;
+    font-family: "Open Sans", sans-serif;
+    font-size: .85rem;
+    font-weight: 400;
+    padding: .65rem 2rem;
+    line-height: 1.6rem;
+    color: white;
+    text-transform: uppercase;
+
+    margin: 1.5rem 0 2.5rem 0;
+}