Add layout styles for default project pages.

_includes/layouts/default-project-page.html

@@ -0,0 +1,13 @@
+---
+layout: layouts/home
+---
+
+<!--
+Opensac.org page layout.
+-->
+
+{% block styles %}
+<link rel="stylesheet" href="/public/css/pages/default-project-page.css">
+{% endblock %}
+
+{{ content }}

content/learningblocks/index.html

@@ -1,89 +1,109 @@
 ---
-layout: layouts/home
+layout: layouts/default-project-page
 ---
+
 <!--
-All projects page.
+Learning Blocks community project page.
 -->
-<h1>Learning Blocks community project page</h1>
+
+<h1 class="page-title">Learning Blocks community project page</h1>
 <a href="{{ bitly }}"></a>
 
+<div class="project-notes">
+  <a href="https://docs.google.com/document/d/1cwvV2iWSeTGWbViqKBw5x-m2hkmaYfH6CQECK_qJQIw/edit?usp=sharing">Project Notes (Last updated 12/12/2023 TODO Implement Google Drive API)</a>
+</div>
 
-<ul class="documentation-list">
-  <li>
+<div class="documentation-grid">
+  <div class="documentation-item">
+    <a href="https://github.com/code4sac/opensac.org/blob/main/public/documentation/Layouts_pages_and_components.md"
+       title="Web-based read me">
+      <h2>Layouts, pages, and components</h2>
+      <p>Application layouts, pages, and components for the Open Sacramento Website.</p>
+    </a>
+  </div>
+  <div class="documentation-item">
     <a href="https://github.com/code4sac/learning-blocks/blob/main/Documentation%20Directory/web_based_read_me.md"
        title="Web-based read me">
       <h2>Web-based read me</h2>
       <p>This document provides an overview of the Learning Blocks project and how to use it.</p>
     </a>
-  </li>
-  <li>
+  </div>
+  <div class="documentation-item">
     <a href="https://github.com/code4sac/learning-blocks/blob/main/Documentation%20Directory/Postman_documentation.md"
        title="Postman documentation">
       <h2>Postman documentation</h2>
       <p>This document provides instructions on how to use Postman to interact with the Learning Blocks API.</p>
     </a>
-  </li>
-  <li>
+  </div>
+  <div class="documentation-item">
     <a
       href="https://github.com/code4sac/learning-blocks/blob/main/Documentation%20Directory/Docker_version_documentation.md"
       title="Docker version documentation">
       <h2>Docker version documentation</h2>
       <p>This document provides instructions on how to set up and use the Docker version of the Learning Blocks
         project.</p>
     </a>
-  </li>
-  <li>
+  </div>
+  <div class="documentation-item">
+    <a href="https://github.com/code4sac/learning-blocks/blob/main/Documentation%20Directory/Docker_version_documentation.md"
+       title="Docker version documentation">
+      <h2>Docker version documentation</h2>
+      <p>This document provides instructions on how to set up and use the Docker version of the Learning Blocks
+        project.</p>
+    </a>
+  </div>
+  <div class="documentation-item">
     <a
       href="https://github.com/code4sac/learning-blocks/blob/main/Documentation%20Directory/Cavas_api_documentation.md"
       title="Canvas API documentation">
       <h2>Canvas API documentation</h2>
       <p>This document provides instructions on how to use the Canvas API in the Learning Blocks project.</p>
     </a>
-  </li>
-  <li>
+  </div>
+  <div class="documentation-item">
     <a
       href="https://github.com/code4sac/learning-blocks/blob/main/Documentation%20Directory/Individual_Python_Scripts_read_me.md"
       title="Individual Python Scripts read me">
       <h2>Individual Python Scripts read me</h2>
       <p>This document provides an overview of the individual Python scripts included in the Learning Blocks
         project.</p>
     </a>
-  </li>
-  <li>
+  </div>
+  <div class="documentation-item">
     <a href="https://github.com/code4sac/learning-blocks/blob/main/Documentation%20Directory/Problem_Statement.md"
        title="Problem Statement">
       <h2>Problem Statement</h2>
       <p>This document describes the problem that the Learning Blocks project solves.</p>
     </a>
-  </li>
-  <li>
+  </div>
+  <div class="documentation-item">
     <a href="https://github.com/code4sac/learning-blocks/blob/main/Documentation%20Directory/Readme.md" title="Readme">
       <h2>Readme</h2>
       <p>This document provides a high-level overview of the Learning Blocks project.</p>
     </a>
-  </li>
-  <li>
+  </div>
+  <div class="documentation-item">
     <a href="https://github.com/code4sac/learning-blocks/blob/main/Documentation%20Directory/Running_with_VSCode.md"
        title="Running with VSCode">
       <h2>Running with VSCode</h2>
       <p>This document provides instructions on how to set up and run the Learning Blocks project in Visual Studio
         Code.</p>
     </a>
-  </li>
-  <li>
+  </div>
+  <div class="documentation-item">
     <a href="https://github.com/code4sac/learning-blocks/blob/main/Documentation%20Directory/SSSP_Read_Me.md"
        title="SSSP Read Me">
       <h2>SSSP Read Me</h2>
       <p>This document describes the SSSP algorithm and how it is implemented in the Learning Blocks project.</p>
     </a>
-  </li>
-  <li>
+  </div>
+  <div class="documentation-item">
     <a
       href="https://github.com/code4sac/learning-blocks/blob/main/Documentation%20Directory/Stand_alone_FastAPI_setup.md"
       title="Stand-alone FastAPI setup">
       <h2>Stand-alone FastAPI setup</h2>
       <p>This document provides instructions on how to set up and run the Learning Blocks project as a stand-alone
         FastAPI application.</p>
     </a>
-  </li>
-</ul>
+  </div>
+</div>

content/opensac/index.html

@@ -1,33 +1,35 @@
 ---
-layout: layouts/home
+layout: layouts/default-project-page
 ---
+
 <!--
-project.com project page.
+Opensac.org page.
 -->
-<h1>Open Sac website community project page</h1>
+
+<h1 class="page-title">Open Sac website community project page</h1>
 <a href="{{ bitly }}"></a>
 
-<ul class="documentation-list">
-  <li>
-    <a href="https://github.com/code4sac/opensac.org/blob/main/public/documentation/Layouts_pages_and_components.md"
-       title="Web-based read me">
+<div class="project-notes">
+  <a href="https://docs.google.com/document/d/1ShCsZvGtTuUoNcyGOV7G5f86hzvi3fqQtKpBgD_lwHM/edit?usp=sharing">Project Notes (Last updated 12/11/2023 TODO Implement Google Drive API)</a>
+</div>
+
+<div class="documentation-grid">
+  <div class="documentation-item">
+    <a href="https://github.com/code4sac/opensac.org/blob/main/public/documentation/Layouts_pages_and_components.md" title="Web-based read me">
       <h2>Layouts, pages, and components</h2>
       <p>Application layouts, pages, and components for the Open Sacramento Website.</p>
     </a>
-  </li>
-  <li>
-    <a href="https://github.com/code4sac/opensac.org/blob/main/public/documentation/Old_data.md"
-       title="Old Data">
+  </div>
+  <div class="documentation-item">
+    <a href="https://github.com/code4sac/opensac.org/blob/main/public/documentation/Old_data.md" title="Old Data">
       <h2>Old Data</h2>
       <p>Data files from the old website codeforsac.org.</p>
     </a>
-  </li>
-  <li>
-    <a
-      href="https://github.com/code4sac/opensac.org/blob/main/public/documentation/Project_folder_structure.md"
-      title="Project folder structure">
+  </div>
+  <div class="documentation-item">
+    <a href="https://github.com/code4sac/opensac.org/blob/main/public/documentation/Project_folder_structure.md" title="Project folder structure">
       <h2>Project Folder Structure</h2>
       <p>Project folder structure for the Open Sacramento Website</p>
     </a>
-  </li>
-</ul>
+  </div>
+</div>

package.json

@@ -34,4 +34,4 @@
     "js-yaml": "^4.1.0",
     "sass": "^1.69.5"
   }
-}
+}

styles/pages/default-project-page.scss

@@ -0,0 +1,36 @@
+@import "../abstracts/variables";
+@import "../abstracts/mixins";
+
+/*
+Opensac.org page layout
+ */
+
+.page-title {
+    padding-top: 16px;
+}
+.project-notes {
+  padding-bottom: 16px;
+}
+
+.documentation-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  padding-top: 16px;
+}
+
+.documentation-item {
+  background-color: #f5f5f5;
+  padding: 1rem;
+  border-radius: 4px;
+  max-width: 200px;
+}
+
+.documentation-item h2 {
+  margin-bottom: 0.5rem;
+}
+
+a {
+  color: #007bff;
+  text-decoration: none;
+}