jekyll-calconnect-theme 0.1.0 → 0.2.0

data/_layouts/default.html

@@ -3,238 +3,13 @@ layout: base
 ---
 
 <section class="documentation">
+  <!-- Mobile sidebar backdrop -->
+  <div class="docs-nav-backdrop"></div>
+
   <!-- Left Sidebar Navigation - Fully Data-Driven -->
   <nav class="docs-nav" aria-label="Section navigation">
     <div class="docs-nav-content">
-
-      {% comment %}
-        Find matching section based on page URL.
-        The layout has no knowledge of specific pages - all configuration is in _data/navigation_sidebar.yml
-      {% endcomment %}
-      {% assign current_section = nil %}
-      {% for section in site.data.navigation_sidebar.sections %}
-        {% if page.url contains section.match %}
-          {% assign current_section = section %}
-          {% break %}
-        {% endif %}
-      {% endfor %}
-
-      {% if current_section %}
-      <div class="nav-section">
-        <div class="nav-section-title">{{ current_section.title }}</div>
-        <ul class="nav-items">
-          {% for item in current_section.items %}
-
-            {% comment %} --- LINK TYPE --- {% endcomment %}
-            {% if item.type == 'link' or item.type == nil %}
-            {% assign is_active = false %}
-            {% if page.url == item.url %}
-              {% assign is_active = true %}
-            {% endif %}
-            <li>
-              <a href="{{ item.url | relative_url }}" {% if is_active %}class="active"{% endif %}>
-                {{ item.label }}
-              </a>
-            </li>
-
-            {% comment %} --- COLLECTION TYPE --- {% endcomment %}
-            {% elsif item.type == 'collection' %}
-              {% case item.collection %}
-                {% when 'about_pages' %}
-                  {% assign docs = site.about_pages %}
-                {% when 'membership_pages' %}
-                  {% assign docs = site.membership_pages %}
-                {% when 'events' %}
-                  {% assign docs = site.events %}
-                {% when 'resources' %}
-                  {% assign docs = site.resources %}
-                {% else %}
-                  {% assign docs = site.posts %}
-              {% endcase %}
-              {% if item.sort_field == 'date' and item.sort_order == 'desc' %}
-                {% assign sorted_docs = docs | sort: 'date' | reverse %}
-              {% elsif item.sort_field %}
-                {% assign sorted_docs = docs | sort: item.sort_field %}
-              {% else %}
-                {% assign sorted_docs = docs %}
-              {% endif %}
-              {% for doc in sorted_docs %}
-              {% assign is_doc_active = false %}
-              {% if page.url == doc.url %}
-                {% assign is_doc_active = true %}
-              {% endif %}
-              <li>
-                <a href="{{ doc.url | relative_url }}" {% if is_doc_active %}class="active"{% endif %}>
-                  {{ doc.title | default: doc.name }}
-                </a>
-              </li>
-              {% endfor %}
-
-            {% comment %} --- COLLAPSIBLE TYPE --- {% endcomment %}
-            {% elsif item.type == 'collapsible' %}
-              {% assign is_open = false %}
-              {% if page.url contains item.url_filter %}
-                {% assign is_open = true %}
-              {% endif %}
-              {% case item.collection %}
-                {% when 'about_pages' %}
-                  {% assign child_docs = site.about_pages %}
-                {% when 'membership_pages' %}
-                  {% assign child_docs = site.membership_pages %}
-                {% when 'events' %}
-                  {% assign child_docs = site.events %}
-                {% when 'resources' %}
-                  {% assign child_docs = site.resources %}
-                {% else %}
-                  {% assign child_docs = site.posts %}
-              {% endcase %}
-            <li>
-              <span class="nav-toggle {% if is_open %}open{% endif %}">{{ item.label }}</span>
-              <ul class="nav-subsection {% unless is_open %}collapsed{% endunless %}">
-                {% if item.first_child_label %}
-                {% assign first_is_active = false %}
-                {% if page.url contains item.url_filter %}
-                  {% assign first_is_active = true %}
-                {% endif %}
-                <li><a href="{{ item.url | relative_url }}" {% if first_is_active %}class="active"{% endif %}>{{ item.first_child_label }}</a></li>
-                {% endif %}
-                {% for doc in child_docs %}
-                  {% assign url_matches = false %}
-                  {% if doc.url contains item.url_filter %}
-                    {% assign url_matches = true %}
-                  {% endif %}
-                  {% assign is_excluded = false %}
-                  {% if doc.url == item.url %}
-                    {% assign is_excluded = true %}
-                  {% endif %}
-                  {% if item.exclude_urls %}
-                    {% for excl in item.exclude_urls %}
-                      {% if doc.url == excl %}
-                        {% assign is_excluded = true %}
-                      {% endif %}
-                    {% endfor %}
-                  {% elsif item.exclude_url %}
-                    {% if doc.url == item.exclude_url %}
-                      {% assign is_excluded = true %}
-                    {% endif %}
-                  {% endif %}
-                  {% if url_matches and is_excluded == false %}
-                {% assign child_is_active = false %}
-                {% if page.url == doc.url %}
-                  {% assign child_is_active = true %}
-                {% endif %}
-                <li>
-                  <a href="{{ doc.url | relative_url }}" {% if child_is_active %}class="active"{% endif %}>
-                    {{ doc.title }}
-                  </a>
-                </li>
-                  {% endif %}
-                {% endfor %}
-              </ul>
-            </li>
-
-            {% comment %} --- YEARS TYPE --- {% endcomment %}
-            {% elsif item.type == 'years' %}
-              {% assign years = site.data.news_years %}
-              {% for year in years %}
-              {% assign is_active = false %}
-              {% if page.url contains year %}
-                {% assign is_active = true %}
-              {% endif %}
-              <li>
-                <a href="/news/{{ year }}/" {% if is_active %}class="active"{% endif %}>
-                  {{ year }}
-                </a>
-              </li>
-              {% endfor %}
-
-            {% comment %} --- GROUP TYPE --- {% endcomment %}
-            {% elsif item.type == 'group' %}
-              </ul>
-              <div class="nav-group-title">{{ item.label }}</div>
-              <ul class="nav-items">
-                {% for child in item.children %}
-                  {% if child.type == 'link' or child.type == nil %}
-                  {% assign group_link_active = false %}
-                  {% if page.url == child.url %}
-                    {% assign group_link_active = true %}
-                  {% endif %}
-                  <li>
-                    <a href="{{ child.url | relative_url }}" {% if group_link_active %}class="active"{% endif %}>
-                      {{ child.label }}
-                    </a>
-                  </li>
-                  {% elsif child.type == 'collapsible' %}
-                    {% assign is_open = false %}
-                    {% if page.url contains child.url_filter %}
-                      {% assign is_open = true %}
-                    {% endif %}
-                    {% case child.collection %}
-                      {% when 'about_pages' %}
-                        {% assign child_docs = site.about_pages %}
-                      {% when 'membership_pages' %}
-                        {% assign child_docs = site.membership_pages %}
-                      {% when 'events' %}
-                        {% assign child_docs = site.events %}
-                      {% when 'resources' %}
-                        {% assign child_docs = site.resources %}
-                      {% else %}
-                        {% assign child_docs = site.posts %}
-                    {% endcase %}
-                  <li>
-                    <span class="nav-toggle {% if is_open %}open{% endif %}">{{ child.label }}</span>
-                    <ul class="nav-subsection {% unless is_open %}collapsed{% endunless %}">
-                      {% if child.first_child_label %}
-                      {% assign group_first_active = false %}
-                      {% if page.url contains child.url_filter %}
-                        {% assign group_first_active = true %}
-                      {% endif %}
-                      <li><a href="{{ child.url | relative_url }}" {% if group_first_active %}class="active"{% endif %}>{{ child.first_child_label }}</a></li>
-                      {% endif %}
-                      {% for doc in child_docs %}
-                        {% assign url_matches = false %}
-                        {% if doc.url contains child.url_filter %}
-                          {% assign url_matches = true %}
-                        {% endif %}
-                        {% assign is_excluded = false %}
-                        {% if doc.url == child.url %}
-                          {% assign is_excluded = true %}
-                        {% endif %}
-                        {% if child.exclude_urls %}
-                          {% for excl in child.exclude_urls %}
-                            {% if doc.url == excl %}
-                              {% assign is_excluded = true %}
-                            {% endif %}
-                          {% endfor %}
-                        {% elsif child.exclude_url %}
-                          {% if doc.url == child.exclude_url %}
-                            {% assign is_excluded = true %}
-                          {% endif %}
-                        {% endif %}
-                        {% if url_matches and is_excluded == false %}
-                      {% assign group_doc_active = false %}
-                      {% if page.url == doc.url %}
-                        {% assign group_doc_active = true %}
-                      {% endif %}
-                      <li>
-                        <a href="{{ doc.url | relative_url }}" {% if group_doc_active %}class="active"{% endif %}>
-                          {{ doc.title }}
-                        </a>
-                      </li>
-                        {% endif %}
-                      {% endfor %}
-                    </ul>
-                  </li>
-                  {% endif %}
-                {% endfor %}
-
-            {% endif %}
-
-          {% endfor %}
-        </ul>
-      </div>
-      {% endif %}
-
+      {% include sidebar-nav.html %}
     </div>
   </nav>
 

data/_sass/calconnect/_code-copy.scss

@@ -0,0 +1,33 @@
+.code-block-wrapper {
+  position: relative;
+}
+
+.code-copy-btn {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
+  color: var(--color-gray-400, #94a3b8);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 0.375rem;
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.15s ease;
+}
+
+.documentation .doc-content pre:hover .code-copy-btn {
+  opacity: 1;
+}
+
+.code-copy-btn:hover {
+  color: var(--color-gray-200, #e2e8f0);
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.code-copy-btn.copied {
+  color: #4ade80;
+  border-color: #4ade80;
+}

data/_sass/calconnect/_code.scss

@@ -1,8 +1,8 @@
 // Code blocks and inline code
 
 .documentation .body pre {
-  background: #1e293b;
-  color: #e2e8f0;
+  background: var(--color-gray-900, #1e293b);
+  color: var(--color-gray-200, #e2e8f0);
   padding: 1rem 1.25rem;
   border-radius: 0.5rem;
   overflow-x: auto;
@@ -10,14 +10,14 @@
 }
 
 .documentation .body code {
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace);
   font-size: 0.875rem;
 }
 
 .documentation .body :not(pre) > code {
-  background: #f1f5f9;
+  background: var(--color-gray-100, #f1f5f9);
   padding: 0.125rem 0.375rem;
   border-radius: 0.25rem;
-  color: #1e293b;
+  color: var(--color-gray-800, #1e293b);
   font-size: 0.8125rem;
 }

data/_sass/calconnect/_dark-mode.scss

@@ -1,50 +1,59 @@
 // Dark mode overrides
+// Uses CSS custom properties from Tailwind's @theme where possible.
 
 // Layout
 .dark .documentation > article > header {
-  border-bottom-color: #334155;
+  border-bottom-color: var(--color-gray-700, #334155);
 }
 
 .dark .documentation > article > header h1 {
-  color: #f8fafc;
+  color: var(--color-gray-50, #f8fafc);
 }
 
 // Navigation
 .dark .docs-nav .nav-group-title {
-  color: #64748b;
-  border-top-color: #334155;
+  color: var(--color-gray-500, #64748b);
+  border-top-color: var(--color-gray-700, #334155);
 }
 
 .dark .docs-nav .nav-items a:hover {
-  background: #1e293b;
-  color: #f1f5f9;
+  background: var(--color-gray-800, #1e293b);
+  color: var(--color-gray-100, #f1f5f9);
 }
 
 .dark .docs-nav .nav-items a.active {
-  background: #312e81;
-  color: #a5b4fc;
+  background: var(--color-primary-900, #312e81);
+  color: var(--color-primary-300, #a5b4fc);
 }
 
 .dark .nav-toggle:hover {
-  background: #1e293b;
-  color: #f1f5f9;
+  background: var(--color-gray-800, #1e293b);
+  color: var(--color-gray-100, #f1f5f9);
 }
 
 .dark .nav-subsection {
-  border-left-color: #334155;
+  border-left-color: var(--color-gray-700, #334155);
+}
+
+// Mobile sidebar drawer
+@media (max-width: 1023px) {
+  .dark .docs-nav {
+    background: var(--color-gray-950, #0f172a);
+    border-right-color: var(--color-gray-700, #334155);
+  }
 }
 
 // Typography
 .dark .documentation .body h2 {
-  color: #f1f5f9;
+  color: var(--color-gray-100, #f1f5f9);
 }
 
 .dark .documentation .body h3 {
-  color: #e2e8f0;
+  color: var(--color-gray-200, #e2e8f0);
 }
 
 .dark .documentation .body p {
-  color: #94a3b8;
+  color: var(--color-gray-400, #94a3b8);
 }
 
 .dark .documentation .body ul,
@@ -56,36 +65,36 @@
 .dark .documentation .sectionbody ul,
 .dark .documentation .sectionbody ol,
 .dark .documentation .sectionbody dl {
-  color: #94a3b8;
+  color: var(--color-gray-400, #94a3b8);
 }
 
 .dark .documentation .body li::marker,
 .dark .documentation .post-content li::marker,
 .dark .documentation .sectionbody li::marker {
-  color: #818cf8;
+  color: var(--color-primary-400, #818cf8);
 }
 
 .dark .documentation .body dt {
-  color: #f1f5f9;
+  color: var(--color-gray-100, #f1f5f9);
 }
 
 .dark .documentation .body dd {
-  color: #94a3b8;
+  color: var(--color-gray-400, #94a3b8);
 }
 
 // Code
 .dark .documentation .body :not(pre) > code {
-  background: #334155;
-  color: #e2e8f0;
+  background: var(--color-gray-700, #334155);
+  color: var(--color-gray-200, #e2e8f0);
 }
 
 // Tables
 .dark .documentation .body th,
 .dark .documentation .body td {
-  border-bottom-color: #334155;
+  border-bottom-color: var(--color-gray-700, #334155);
 }
 
 .dark .documentation .body th {
-  background: #1e293b;
-  color: #f1f5f9;
+  background: var(--color-gray-800, #1e293b);
+  color: var(--color-gray-50, #f1f5f9);
 }

data/_sass/calconnect/_edit-on-github.scss

@@ -0,0 +1,24 @@
+.edit-on-github {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 1rem;
+  font-size: 0.8125rem;
+  color: var(--color-gray-400, #94a3b8);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.edit-on-github:hover {
+  color: var(--color-primary-500, #6366f1);
+  text-decoration: none;
+}
+
+.dark .edit-on-github:hover {
+  color: var(--color-primary-400, #818cf8);
+}
+
+.edit-on-github svg {
+  width: 14px;
+  height: 14px;
+}

data/_sass/calconnect/_layout.scss

@@ -18,7 +18,7 @@
   flex-shrink: 0;
 }
 
-// Sticky sidebar content
+// Sticky sidebar content (desktop)
 @media (min-width: 1024px) {
   .docs-nav-content {
     position: sticky;
@@ -28,6 +28,48 @@
   }
 }
 
+// Mobile sidebar drawer
+.docs-nav-backdrop {
+  display: none;
+}
+
+@media (max-width: 1023px) {
+  .docs-nav-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+    background: rgba(15, 23, 42, 0.5);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+  }
+
+  .docs-nav-backdrop.active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .docs-nav {
+    position: fixed;
+    top: 64px;
+    left: 0;
+    bottom: 0;
+    width: 280px;
+    z-index: 45;
+    background: var(--color-gray-0, #fff);
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    overflow-y: auto;
+    padding: 1.5rem 1rem;
+    border-right: 1px solid var(--color-gray-200, #e2e8f0);
+  }
+
+  .docs-nav.mobile-open {
+    transform: translateX(0);
+  }
+}
+
 // Main article
 .documentation > article {
   flex: 1;
@@ -38,20 +80,13 @@
 .documentation > article > header {
   margin-bottom: 2rem;
   padding-bottom: 1.5rem;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid var(--color-gray-200, #e2e8f0);
 }
 
 .documentation > article > header h1 {
   font-size: 2.25rem;
   font-weight: 700;
-  color: #0f172a;
+  color: var(--color-gray-950, #0f172a);
   line-height: 1.2;
   margin: 0;
 }
-
-// Hide sidebar on mobile
-@media (max-width: 1023px) {
-  .docs-nav {
-    display: none;
-  }
-}

data/_sass/calconnect/_mobile-sidebar-toggle.scss

@@ -0,0 +1,35 @@
+.mobile-sidebar-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-primary-500, #6366f1);
+  background: var(--color-primary-50, #eef2ff);
+  border: 1px solid var(--color-primary-200, #c7d2fe);
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.dark .mobile-sidebar-toggle {
+  color: var(--color-primary-300, #a5b4fc);
+  background: var(--color-primary-900, #312e81);
+  border-color: var(--color-primary-700, #4338ca);
+}
+
+.mobile-sidebar-toggle:hover {
+  background: var(--color-primary-100, #e0e7ff);
+}
+
+.dark .mobile-sidebar-toggle:hover {
+  background: var(--color-primary-800, #3730a3);
+}
+
+@media (min-width: 1024px) {
+  .mobile-sidebar-toggle {
+    display: none;
+  }
+}

data/_sass/calconnect/_navigation.scss

@@ -9,7 +9,7 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: #94a3b8;
+  color: var(--color-gray-400, #94a3b8);
   margin-bottom: 0.5rem;
   padding: 0 0.75rem;
 }
@@ -20,11 +20,11 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: #94a3b8;
+  color: var(--color-gray-400, #94a3b8);
   margin-top: 1rem;
   margin-bottom: 0.25rem;
   padding: 0.25rem 0.75rem;
-  border-top: 1px solid #e2e8f0;
+  border-top: 1px solid var(--color-gray-200, #e2e8f0);
 }
 
 .docs-nav .nav-group-title:first-child {
@@ -45,7 +45,7 @@
 .docs-nav .nav-items a {
   display: block;
   padding: 0.5rem 0.75rem;
-  color: #64748b;
+  color: var(--color-gray-500, #64748b);
   text-decoration: none;
   border-radius: 0.375rem;
   font-size: 0.875rem;
@@ -53,20 +53,20 @@
 }
 
 .docs-nav .nav-items a:hover {
-  background: #f1f5f9;
-  color: #1e293b;
+  background: var(--color-gray-100, #f1f5f9);
+  color: var(--color-gray-800, #1e293b);
 }
 
 .docs-nav .nav-items a.active {
-  background: #eef2ff;
-  color: #4f46e5;
+  background: var(--color-primary-50, #eef2ff);
+  color: var(--color-primary-600, #4f46e5);
   font-weight: 500;
 }
 
 // Collapsible subsections
 .nav-subsection {
   margin-left: 0.75rem;
-  border-left: 2px solid #e2e8f0;
+  border-left: 2px solid var(--color-gray-200, #e2e8f0);
   padding-left: 0.75rem;
   margin-top: 0.25rem;
 }
@@ -77,7 +77,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem 0.75rem;
-  color: #64748b;
+  color: var(--color-gray-500, #64748b);
   font-size: 0.875rem;
   border-radius: 0.375rem;
   cursor: pointer;
@@ -86,8 +86,8 @@
 }
 
 .nav-toggle:hover {
-  background: #f1f5f9;
-  color: #1e293b;
+  background: var(--color-gray-100, #f1f5f9);
+  color: var(--color-gray-800, #1e293b);
 }
 
 // Arrow indicator