Merge pull request #9 from opensolvers/site-updates

Add site navigation menu

Author: hugomeiland

README.md

@@ -3,7 +3,7 @@ Helping you focus on results instead of compiling and maintaining. OpenSolvers p
 Currently working on several generations of RISC-V cores and validating synthetic performance and real-world applications. 
 
 Learnings from different boards:
-- [StarFive VisionFive2](boards/VisionFive2.md)
-- [OrangePi RV2](boards/RV2.md)
-- [BananaPi F3](boards/F3.md) 
+- [StarFive VisionFive2](boards/VisionFive2.html)
+- [OrangePi RV2](boards/RV2.html)
+- [BananaPi F3](boards/F3.html) 
 

_config.yml

@@ -1 +1,16 @@
 theme: jekyll-theme-cayman
+title: OpenSolvers
+description: RISC-V learnings and fun
+
+navigation:
+  - title: Home
+    url: /
+  - title: VisionFive 2
+    url: /boards/VisionFive2.html
+  - title: OrangePi RV2
+    url: /boards/RV2.html
+  - title: BananaPi F3
+    url: /boards/F3.html
+  - title: GitHub
+    url: https://github.com/opensolvers/opensolvers.github.io
+    external: true

_includes/header.html

@@ -1,7 +1,20 @@
 <header class="page-header" role="banner">
-    <h1 class="project-name">OpenSolvers</h1>
-    <h2 class="project-tagline">RISC-V learnings and fun</h2>
-    
-    <a href="https://github.com/opensolvers/opensolvers.github.io" class="btn">Find us on GitHub</a>
-    
+    <h1 class="project-name">{{ site.title | default: "OpenSolvers" }}</h1>
+    <h2 class="project-tagline">{{ site.description | default: "RISC-V learnings and fun" }}</h2>
+
+    <nav class="site-nav" aria-label="Main navigation">
+        <ul class="site-nav-list">
+            {% for item in site.navigation %}
+            <li class="site-nav-item">
+                <a
+                    href="{% if item.external %}{{ item.url }}{% else %}{{ item.url | relative_url }}{% endif %}"
+                    class="site-nav-link{% if item.external %} site-nav-link--external{% endif %}{% if page.url == item.url %} is-active{% endif %}"
+                    {% if item.external %}target="_blank" rel="noopener noreferrer"{% endif %}
+                >
+                    {{ item.title }}
+                </a>
+            </li>
+            {% endfor %}
+        </ul>
+    </nav>
 </header>

assets/css/style.scss

@@ -0,0 +1,50 @@
+---
+---
+
+@import "{{ site.theme }}";
+
+.site-nav {
+  margin-top: 1.25rem;
+}
+
+.site-nav-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.site-nav-link {
+  display: inline-block;
+  padding: 0.35rem 0.9rem;
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 0.35rem;
+  color: rgba(255, 255, 255, 0.92);
+  font-size: 0.95rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.site-nav-link:hover,
+.site-nav-link:focus {
+  background-color: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.65);
+  color: #fff;
+  text-decoration: none;
+}
+
+.site-nav-link.is-active {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-color: #fff;
+  color: #fff;
+}
+
+.site-nav-link--external::after {
+  content: " ↗";
+  font-size: 0.8em;
+  opacity: 0.85;
+}