Convert docs theme to minima and add template elements for baseline site

.gitignore

@@ -3,3 +3,6 @@ docs/versions/devel.md
 
 # generated output from go run ./... compile
 checklist.md
+Gemfile
+Gemfile.lock
+docs/_site

docs/_config.yml

@@ -1,12 +1,79 @@
-# Configure generation of web page(s).
-name: OpenSSF Security Baseline
-title: null
+title: Open Source Project Security Baseline
+author:
+  name: OpenSSF Security Baseline SIG
+  email: [email protected]
+logo: /assets/logo.svg
+url: "https://baseline.openssf.org"
+description: > 
+  The Open Source Project Security (OSPS) Baseline is a set of security 
+  criteria that projects should meet to demonstrate a strong security posture. 
+  The controls are organized by maturity level and category.
+
+titles_from_headings:
+  enabled:     true
+  strip_title: true
+
 kramdown:
   toc_levels: "2"
 
-defaults:
-  -
-    scope:
-      path: "" # an empty string here means all files in the project
-    values:
-      author: Open Source Security Foundation (OpenSSF) Security Baseline SIG
+# Add to plugins: list
+plugins:
+  - jekyll-remote-theme
+  - jekyll-feed
+  - jekyll-seo-tag
+
+remote_theme: jekyll/minima
+
+# Minima-specific settings (applicable to Minima v3 and above only)
+# -----------------------------------------------------------------
+#
+#  *All described config keys below should be nested under the top-level
+#   `minima` key.*
+#
+minima:
+#   Minima skin selection. Available skins are:
+#     * classic            Default, light color scheme.
+#     * dark               Dark variant of the classic skin.
+#     * auto               Adaptive skin based on the classic and dark skins.
+#     * solarized-light    Light variant of solarized color scheme.
+#     * solarized-dark     Dark variant of solarized color scheme.
+#     * solarized          Adaptive skin for solarized color scheme skins.
+   skin: classic
+#
+#   Specific pages for site navigation.
+#     If you wish to link only specific pages in the site-navigation, use this
+#     and list the `path` property (as represented via Liquid) of the pages in
+#     the order they should be rendered.
+   nav_pages:
+     - index.md
+     - versions/2025-02-25.md
+     - faq.md
+     - maintenance.md
+#
+#   Set to `true` to show excerpts on the homepage.
+   show_excerpts: false
+#
+#   Minima date format.
+#     The default value is "%b %d, %Y" (e.g. Nov 14, 2023).
+#     Refer to https://shopify.github.io/liquid/filters/date/ for valid values
+#   date_format: "%b-%d-%Y"
+#
+#   Social Media Links.
+#     Renders icons via Font Awesome Free webfonts CDN, based on ordered list of
+#     entries. Valid entry keys:
+#       * title    Tooltip rendered on hovering over icon.
+#       * icon     Font Awesome icon id. `github` corresponds to `fa-github`.
+#       * url      Full URL of social profile.
+   social_links:
+     - title: OpenSSF GitHub
+       icon: github
+       url: "https://github.com/ossf"
+     - title: OpenSSF at X (formerly Twitter)
+       icon: x-twitter
+       url: "https://x.com/openssf"
+     - title: OpenSSF at BlueSky
+       icon: bluesky
+       url: "https://bsky.app/profile/openssf.org"
+     - title: OpenSSF at LinkedIn
+       icon: linkedin
+       url: "https://www.linkedin.com/company/openssf/"

docs/_includes/custom-head.html

@@ -0,0 +1,5 @@
+<!-- favicons - these settings are from top openssf.org and
+     and we will just reference them
+-->
+<link rel="icon" href="/assets/favicon.ico" sizes="32x32" />
+<meta name="msapplication-TileImage" content="https://openssf.org/wp-content/uploads/sites/132/2021/09/cropped-favicon-270x270.png" />

docs/_includes/footer.html

@@ -0,0 +1,38 @@
+      <link id="fa-stylesheet" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css">
+
+<footer class="site-footer h-card">
+  <data class="u-url" value="{{ '/' | relative_url }}"></data>
+
+  <div class="wrapper">
+
+    <div class="footer-col-wrapper">
+      <div class="footer-col">
+      {%- if site.author %}
+        <ul class="contact-list">
+          {% if site.author.name -%}
+            <li class="p-name">{{ site.author.name | escape }}</li>
+          {% endif -%}
+          {% if site.author.email -%}
+            <li><a class="u-email" href="mailto:{{ site.author.email }}">{{ site.author.email }}</a></li>
+          {%- endif %}
+        </ul>
+      {%- endif %}
+      </div>
+      <div class="footer-col">
+        <p>{{ site.description | escape }}</p>
+      </div>
+    </div>
+
+    <div class="social-links">
+      {%- include social.html -%}
+    </div>
+
+    <div class="wrapper">
+        Copyright © OSPS Baseline contributors, a Series of LF Projects, LLC.
+        For website terms of use, trademark policy, and other project policies please see <a href="https://lfprojects.org">https://lfprojects.org</a>.
+        This site is open source. View or contribute at <a href="{{ site.github.repository_url }}">GitHub</a>.
+    </div>
+
+  </div>
+
+</footer>    

docs/_includes/header.html

@@ -0,0 +1,23 @@
+<header class="site-header">
+    <div class="wrapper header-wrapper">
+      {%- assign default_paths = site.pages | map: "path" -%}
+      {%- assign page_paths = site.minima.nav_pages | default: default_paths -%}
+      {%- assign page_titles = site.pages | map: 'title' | compact %}
+      <a class="site-logo" href="https://openssf.org">
+        <img src="{{ site.baseurl }}/assets/logo.svg" alt="OpenSSF" height="85">
+      </a>
+      <a class="site-title" rel="author" href="{{ '/' | relative_url }}">{{ site.title | escape }}</a>
+    </div>
+    <div class="wrapper">
+    {%- unless page_titles == empty %}
+      <nav class="site-nav">
+        <input type="checkbox" id="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon"></span>
+        </label>
+
+        {% include nav-items.html paths = page_paths %}
+      </nav>
+    {%- endunless %}
+    </div>
+</header>

docs/_includes/nav-items.html

@@ -0,0 +1,10 @@
+<div class="nav-items">
+  {%- for path in include.paths -%}
+  {%- assign hyperpage = site.pages | where: "path", path | first -%}
+  {%- if hyperpage.nav-title -%}
+  <a class="nav-item" href="{{ hyperpage.url | relative_url }}">{{ hyperpage.nav-title | escape }}</a>
+  {%- else hyperpage.title -%}
+  <a class="nav-item" href="{{ hyperpage.url | relative_url }}">{{ hyperpage.title | escape }}</a>
+  {%- endif -%}
+  {%- endfor %}
+</div>

docs/_layouts/default.html

@@ -1,32 +1,27 @@
-<!-- Modified from upstream pages-themes/primer project
-https://github.com/pages-themes/primer/blob/9990647c50551180ec28d60a3273214f2e279311/_layouts/default.html
--->
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: site.lang | default: "en-US" }}">
+<html lang="{{ site.lang | default: "en-US" }}">
   <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
 {% seo %}
-    <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
-    {% include head-custom.html %}
+        <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
+    <!--[if lt IE 9]>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <![endif]-->
   </head>
   <body>
-    <div class="container-lg px-3 my-5 markdown-body">
-      {% if site.title and site.title != page.title %}
-      <h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
-      {% endif %}
 
-      {{ content }}
+    {%- include header.html -%}
 
-      <div class="footer border-top border-gray-light mt-5 pt-3 text-right text-gray">
-        Copyright © OSPS Baseline contributors, a Series of LF Projects, LLC.
-        For website terms of use, trademark policy, and other project policies please see <a href="https://lfprojects.org">https://lfprojects.org</a>.
-        This site is open source. View or contribute at <a href="{{ site.github.repository_url }}">GitHub</a>.
+    <main class="page-content" aria-label="Content">
+      <div class="wrapper">
+        {{ content }}
       </div>
-    </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
-    <script>anchors.add();</script>
+      {%- include footer.html -%}
+    </main>
+
   </body>
+
 </html>

docs/assets/css/style.scss

@@ -1,7 +1,91 @@
 ---
 ---
 
-@import "{{ site.theme }}";
+@import
+  "minima/skins/{{ site.minima.skin | default: 'auto' }}",
+  "minima/initialize";
+
+/* For information on use Jekyll in GitHub:
+  https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/adding-a-theme-to-your-github-pages-site-using-jekyll
+8?
+*/
+
+/* Use OpenSSF style, see
+   https://openssf.org/brand-guidelines/
+*/
+
+/* Follow OpenSSF CSS view, see https://openssf.org/brand-guidelines/ */
+
+body, .markdown-body {
+    font-family: "Cairo", sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: "IBMPlexSans", sans-serif;
+}
+
+@font-face {
+  font-family: "Cairo";
+  /* ../assets/fonts/Cairo/Cairo-VariableFont_slnt,wght.ttf"); */
+  src: url("/assets/fonts/Cairo/Cairo-VariableFont_slnt,wght.ttf");
+}
+
+@font-face {
+  font-family: "IBMPlexSans";
+  src: url("/assets/fonts/IBMPlexSans/IBMPlexSans-Regular.ttf");
+}
+
+/* Increase weight so bold/strong are easier to identify as such.
+   Without this, Cairo bold looks like unbolded text.
+*/
+b, strong {
+  font-weight: 700;
+}
+
+/* Avoid creating orphans at the bottom of the page when printing.
+   Firefox 115 doesn't support this, but it will do no harm there.
+   https://stackoverflow.com/questions/34808650/orphan-css-how-avoid-headers-h1-h2-on-bottom-page
+   https://caniuse.com/?search=break-after
+*/
+h1, h2, h3, h4, h5, h6 {
+    break-after: avoid-page;
+}
+
+/* Set links to some color listed in the OpenSSF pallette in
+ * https://openssf.org/about/brand-guidelines/ */
+/* unvisited link */
+a:link {
+  color: #45208c;
+}
+/* visited link */
+a:visited {
+  color: #604693;
+}
+/* mouse over link */
+a:hover {
+  color: #170D34;
+}
+/* selected link */
+a:active {
+  color: #04ee5f;
+}
+.header-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding-bottom: 10px;
+}
+
+.site-logo {
+  flex: 0 0 auto;
+}
+
+.site-title {
+  flex: 1 1 auto;
+  text-align: right;
+  margin-bottom: 0;
+  padding-left: 20px;
+}
 
 .warning {
     background: rgba(114, 83, 237, 0.2);