Add "Resources" section to pinniped.dev web site

site/content/resources/_index.html

@@ -0,0 +1,48 @@
+---
+title: Pinniped Resources
+layout: section
+---
+
+<div class="hero subpage">
+    <div class="wrapper">
+        <h1>Resources</h1>
+    </div>
+</div>
+<div class="wrapper resources">
+    <h2>Resources about Pinniped, such as videos, podcasts, and community articles</h2>
+    <div class="grid three">
+
+        <div class="col">
+            <div class="embed-responsive">
+                <iframe class="embed-responsive-item"
+                        src="https://www.youtube-nocookie.com/embed/YGeO1jKfgac?start=138"
+                        title="YouTube video player"
+                        frameborder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowfullscreen>
+                </iframe>
+            </div>
+            <div class="content">
+                <p>
+                    <a href="https://www.cncf.io/online-programs/cncf-live-webinar-easy-secure-kubernetes-authentication-with-pinniped/"
+                       target="_blank">
+                        CNCF Live Webinar: Easy, Secure Kubernetes Authentication With Pinniped - August 24, 2021
+                    </a>
+                </p>
+            </div>
+        </div>
+
+        <div class="col">
+            <a href="https://github.com/vmware-tanzu/pinniped">
+                <div class="icon">
+                    <img src="/img/logo.svg"/>
+                </div>
+                <div class="content">
+                    <p class="strong">Pinniped Source Code:</p>
+                    <p>https://github.com/vmware-tanzu/pinniped</p>
+                </div>
+            </a>
+        </div>
+
+    </div>
+</div>

site/themes/pinniped/assets/scss/_components.scss

@@ -400,6 +400,49 @@
     }
 }
 
+.resources {
+    background-color: #fff;
+    margin-top: -90px;
+    padding: 30px 30px 50px 30px;
+
+    .embed-responsive {
+        position: relative;
+        &:before {
+            padding-top: 56.25%;
+            display: block;
+            content: "";
+        }
+        .embed-responsive-item {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: 0;
+        }
+    }
+
+    .grid {
+        .col {
+            border: 1px solid #F2F2F2;
+            .icon {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                min-height: 140px;
+            }
+            .content {
+                padding: 0px 20px 20px 20px;
+                text-align: center;
+                h3 {
+                    margin-top: 0px;
+                }
+            }
+        }
+    }
+}
+
 .docs {
     background-color: #fff;
     margin-top: -90px;
@@ -532,4 +575,4 @@
             padding: 10px 30px;
         }
     }
-}
+}

site/themes/pinniped/layouts/partials/header.html

@@ -6,6 +6,7 @@
 			<li><a href="/community/" {{ if (eq .RelPermalink "/community/")  }}class="active"{{ end }}>Community</a></li>
 			<li><a href="/blog/" {{ if or (eq .Page.Section "posts") (eq .Page.Section "tags") }}class="active"{{ end }}>Blog</a></li>
 			<li><a href="/docs/" {{ if (eq .Page.Section "docs") }}class="active"{{ end }}>Docs</a></li>
+			<li><a href="/resources/" {{ if (eq .RelPermalink "resources") }}class="active"{{ end }}>Resources</a></li>
 		</ul>
 		<button type="button" class="mobile" id="mobile-menu-button">
 			<img class="collapsed-icon" src="/img/hamburger.svg" alt="Mobile nav icon">
@@ -17,6 +18,7 @@
 				<li><a href="/community/" {{ if (eq .RelPermalink "/community/")  }}class="active"{{ end }}>Community</a></li>
 				<li><a href="/blog/" {{ if or (eq .Page.Section "posts") (eq .Page.Section "tags") }}class="active"{{ end }}>Blog</a></li>
 				<li><a href="/docs/" {{ if (eq .Page.Section "docs") }}class="active"{{ end }}>Docs</a></li>
+				<li><a href="/resources/" {{ if (eq .RelPermalink "resources") }}class="active"{{ end }}>Resources</a></li>
 			</ul>
 			<div class="social">
 				<a href="https://twitter.com/projectpinniped"><img src="/img/twitter.png" />Twitter</a>
@@ -25,4 +27,4 @@
 			</div>
 		</div>
 	</div>
-</header>
+</header>