Skip to content

Commit b394ca3

Browse files
ronaldtseronaldtse
committed
Fix page styling and redesign information architecture
- Sidebar nav: use theme CSS classes instead of inline Tailwind utilities - toc-type.html: wrap landing page content in .body for proper typography - toc.html: add header styling, wrap content in .body - page.html: wrap content in .body for typography styling - post.html: add border-bottom header, use post-content class - toc-mainPage-placeholder: add proper link styling - Navbar: iCalendar, CalDAV, CardDAV, Scheduling, Contents, About - Remove 'All Topics' and 'Contribute' from navbar - Add About link to calconnect.org/about - Footer: add CalConnect column with calconnect.org, About, Standards Registry - Mobile menu: grouped into Standards, Formats, Protocols sections
1 parent 990628b commit b394ca3

11 files changed

Lines changed: 2122 additions & 42 deletions

File tree

‎Gemfile‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
source "https://rubygems.org"
22

33
gem "jekyll", "~> 4.3.4"
4+
gem "csv"
5+
gem "base64"
46
gem "calconnect-theme", path: "../calconnect-theme"
57

68
group :jekyll_plugins do

‎_config.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ twitter_username: wsdwl
88

99
theme: calconnect-theme
1010

11+
plugins:
12+
- jekyll/vite
13+
1114
collections:
1215
pages:
1316
output: true

‎_includes/footer.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<footer class="bg-gray-50 dark:bg-gray-950 border-t border-gray-200 dark:border-white/10 transition-colors">
22
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
3-
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
3+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
44
<div>
55
<h4 class="text-sm font-semibold uppercase tracking-wider text-gray-900 dark:text-white mb-4">Table of Contents</h4>
66
<ul class="space-y-2">
@@ -26,6 +26,15 @@ <h4 class="text-sm font-semibold uppercase tracking-wider text-gray-900 dark:tex
2626
{% endfor %}
2727
</ul>
2828
</div>
29+
<div>
30+
<h4 class="text-sm font-semibold uppercase tracking-wider text-gray-900 dark:text-white mb-4">CalConnect</h4>
31+
<ul class="space-y-2">
32+
<li><a href="https://www.calconnect.org/" class="text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400">calconnect.org</a></li>
33+
<li><a href="https://www.calconnect.org/about/" class="text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400">About CalConnect</a></li>
34+
<li><a href="https://standards.calconnect.org/" class="text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400">Standards Registry</a></li>
35+
<li><a href="/Appendix/How-to-Contribute/" class="text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400">How to Contribute</a></li>
36+
</ul>
37+
</div>
2938
</div>
3039
<div class="mt-8 pt-8 border-t border-gray-200 dark:border-white/10">
3140
<p class="text-sm text-gray-500 dark:text-gray-400">

‎_includes/header.html‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111
</a>
1212
</div>
1313
<nav class="hidden lg:flex items-center gap-1">
14-
<a href="{{ '/' | relative_url }}" class="px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">Home</a>
1514
<a href="/iCalendar-Topics/" class="px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">iCalendar</a>
1615
<a href="/CalDAV/" class="px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">CalDAV</a>
1716
<a href="/CardDAV/" class="px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">CardDAV</a>
1817
<a href="/Scheduling/" class="px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">Scheduling</a>
19-
<a href="/Table-of-Contents/" class="px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">All Topics</a>
20-
<a href="/Appendix/How-to-Contribute/" class="px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">Contribute</a>
18+
<a href="/Table-of-Contents/" class="px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">Contents</a>
19+
<span class="w-px h-5 bg-gray-300 dark:bg-gray-700 mx-1"></span>
20+
<a href="https://www.calconnect.org/about/" class="px-3 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">About</a>
2121
</nav>
2222
<div class="flex items-center gap-2">
2323
<button id="theme-toggle" class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" aria-label="Toggle dark mode">
@@ -32,23 +32,25 @@
3232
</div>
3333
<div id="mobile-menu" class="hidden lg:hidden border-t border-gray-200 dark:border-gray-800">
3434
<div class="px-4 py-3 space-y-1">
35-
<a href="{{ '/' | relative_url }}" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Home</a>
36-
<div class="px-3 pt-2 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider">Data Formats</div>
35+
<div class="px-3 pt-2 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider">Standards</div>
3736
<a href="/iCalendar-Topics/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">iCalendar</a>
38-
<a href="/vCard/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">vCard</a>
39-
<a href="/jsCalendar-Topics/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">jsCalendar</a>
40-
<div class="px-3 pt-2 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider">Protocols</div>
4137
<a href="/CalDAV/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">CalDAV</a>
4238
<a href="/CardDAV/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">CardDAV</a>
4339
<a href="/Scheduling/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Scheduling</a>
40+
<div class="px-3 pt-2 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider">Formats</div>
41+
<a href="/vCard/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">vCard</a>
42+
<a href="/jsCalendar-Topics/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">jsCalendar</a>
43+
<a href="/Data-Model/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Data Model</a>
44+
<a href="/Tasks/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Tasks</a>
45+
<div class="px-3 pt-2 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider">Protocols</div>
4446
<a href="/iMIP/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">iMIP</a>
4547
<a href="/iTIP/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">iTIP</a>
46-
<div class="px-3 pt-2 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider">More</div>
4748
<a href="/Time-Zones/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Time Zones</a>
48-
<a href="/Data-Model/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Data Model</a>
49-
<a href="/Tasks/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Tasks</a>
50-
<a href="/Table-of-Contents/" class="block px-3 py-2 text-sm font-medium text-gray-900 dark:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">All Topics</a>
51-
<a href="/Appendix/How-to-Contribute/" class="block px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Contribute</a>
49+
<div class="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700 space-y-1">
50+
<a href="/Table-of-Contents/" class="block px-3 py-2 text-sm font-medium text-gray-900 dark:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Full Table of Contents</a>
51+
<a href="https://www.calconnect.org/about/" class="block px-3 py-2 text-sm text-gray-500 dark:text-gray-400 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">About CalConnect</a>
52+
<a href="https://www.calconnect.org/" class="block px-3 py-2 text-sm text-gray-500 dark:text-gray-400 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">calconnect.org</a>
53+
</div>
5254
</div>
5355
</div>
5456
</header>

‎_includes/toc-mainPage-placeholder.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
{% assign content_size = subpage.content | strip | size %}
1212
{% if content_size > 0 %}
1313
<li>
14-
<a href="{{ subpage.url }}" class="{% if currentPageUrl contains subpage.url %}active{% endif %}">{{ subpage.title }}</a>
14+
<a href="{{ subpage.url }}" class="{% if currentPageUrl contains subpage.url %}text-indigo-600 dark:text-indigo-400 font-medium{% endif %}">{{ subpage.title }}</a>
1515
</li>
1616
{% endif %}
1717
{% endfor %}

‎_includes/toc-sidebar.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,21 +25,21 @@
2525
<li class="{% if subpages.size > 0 %}has-subitems{% endif %} {% if currentPageUrl contains page.url %}active{% endif %} {% if activeParent %}active{% endif %}">
2626
{% if include.level %}
2727
{% if content_size == 0 %}
28-
<span class="block px-3 py-2 text-sm text-gray-400 dark:text-gray-500">{{ page.title }}</span>
28+
<span class="nav-toggle">{{ page.title }}</span>
2929
{% else %}
30-
<a href="{{ page.url }}" class="block px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors {% if currentPageUrl contains page.url %}active{% endif %}">{{ page.title }}</a>
30+
<a href="{{ page.url }}" class="{% if currentPageUrl contains page.url %}active{% endif %}">{{ page.title }}</a>
3131
{% endif %}
3232
{% endif %}
3333

3434
{% if page.path contains '_appendixes' %}
3535
{% if content_size != 0 %}
36-
<a href="{{ page.url }}" class="block px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors {% if currentPageUrl contains page.url %}active{% endif %}">{{ page.title }}</a>
36+
<a href="{{ page.url }}" class="{% if currentPageUrl contains page.url %}active{% endif %}">{{ page.title }}</a>
3737
{% endif %}
3838

3939
{% endif %}
4040

4141
{% if subpages.size > 0 %}
42-
<ul class="nav-subsection ml-3 border-l-2 border-gray-200 dark:border-gray-700 pl-3 mt-1 space-y-0.5">
42+
<ul class="nav-subsection">
4343
{% include toc-sidebar.html pages=subpages currentMainParent=page.mainParent level="secondary" %}
4444
</ul>
4545
{% endif %}

‎_layouts/page.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: default
33
---
44
<div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
5-
6-
{{ content }}
7-
5+
<div class="body">
6+
{{ content }}
7+
</div>
88
</div>

‎_layouts/post.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@
44
<div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
55
<article itemscope itemtype="http://schema.org/BlogPosting">
66

7-
<header class="mb-8">
7+
<header class="mb-8 pb-6 border-b border-gray-200 dark:border-gray-700">
88
<h1 class="text-3xl font-bold text-gray-900 dark:text-white" itemprop="name headline">{{ page.title | escape }}</h1>
99
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
1010
<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
1111
{{ page.date | date: "%b %-d, %Y" }}
1212
</time>
1313
{% if page.author %}
14-
&bull; <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>
14+
&bull; <span itemprop="author" itemscope itemtype="http://Schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>
1515
{% endif %}
1616
</p>
1717
</header>
1818

19-
<div class="body" itemprop="articleBody">
19+
<div class="post-content body" itemprop="articleBody">
2020
{{ content }}
2121
</div>
2222

‎_layouts/toc-type.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,17 @@
1919
</div>
2020
</nav>
2121
<article>
22-
<nav class="hidden lg:flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-4" aria-label="Breadcrumb">
22+
<nav class="hidden lg:flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-4" aria-label="Breadcrumb" style="text-decoration:none">
2323
<ol class="flex items-center flex-wrap gap-2 list-none p-0 m-0">
24-
<li><a href="{{ '/' | relative_url }}" class="hover:text-gray-700 dark:hover:text-gray-300">Home</a></li>
24+
<li><a href="{{ '/' | relative_url }}" class="hover:text-gray-700 dark:hover:text-gray-300 no-underline">{{ 'Home' }}</a></li>
2525
{% if page.path contains '_appendixes' %}
2626
{% else %}
27-
<li>/ <a href="/Table-of-Contents/" class="hover:text-gray-700 dark:hover:text-gray-300">Table of Contents</a></li>
27+
<li><span class="mx-1">/</span> <a href="/Table-of-Contents/" class="hover:text-gray-700 dark:hover:text-gray-300 no-underline">{{ 'Table of Contents' }}</a></li>
2828
{% endif %}
2929
{% assign pageParents = page.parents | split:';' %}
3030
{% for parent in pageParents %}
3131
{% assign pageParentsDetails = parent| split:':' %}
32-
<li>/ <a href="{{pageParentsDetails[1]}}" class="hover:text-gray-700 dark:hover:text-gray-300">{{pageParentsDetails[0]}}</a></li>
32+
<li><span class="mx-1">/</span> <a href="{{pageParentsDetails[1]}}" class="hover:text-gray-700 dark:hover:text-gray-300 no-underline">{{pageParentsDetails[0]}}</a></li>
3333
{% endfor %}
3434
</ol>
3535
</nav>
@@ -39,19 +39,19 @@
3939
{{ content }}
4040
</div>
4141
{% else %}
42-
<header>
42+
<div class="body">
4343
<h1>{{ page.title }}</h1>
44-
</header>
45-
<p>For information on {{ page.title }} see:</p>
46-
{% assign currentMainParent = page.mainParent %}
44+
<p>For information on {{ page.title }} see:</p>
45+
{% assign currentMainParent = page.mainParent %}
4746

48-
{% if page.path contains '_appendixes' %}
49-
{% assign loopPages = site.appendixes | where: "parent", "/" | sort: "order" %}
50-
{% else %}
51-
{% assign loopPages = site.pages | where: "parent", "/" | sort: "order" %}
52-
{% endif %}
47+
{% if page.path contains '_appendixes' %}
48+
{% assign loopPages = site.appendixes | where: "parent", "/" | sort: "order" %}
49+
{% else %}
50+
{% assign loopPages = site.pages | where: "parent", "/" | sort: "order" %}
51+
{% endif %}
5352

54-
{% include toc-mainPage-placeholder.html loopPages=loopPages currentMainParent=currentMainParent %}
53+
{% include toc-mainPage-placeholder.html loopPages=loopPages currentMainParent=currentMainParent %}
54+
</div>
5555
{% endif %}
5656

5757
</article>

‎_layouts/toc.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@
22
layout: default
33
---
44
<div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
5-
<h1>Table of Contents</h1>
5+
<header class="mb-8 pb-6 border-b border-gray-200 dark:border-gray-700">
6+
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Table of Contents</h1>
7+
</header>
68

7-
{{ content }}
9+
<div class="body">
10+
{{ content }}
11+
</div>
812

913
</div>
1014

@@ -20,7 +24,7 @@ <h2>Appendixes</h2>
2024
{% assign appendixes = site.appendixes | sort: "order" %}
2125
{% for appendix in appendixes %}
2226
{% if appendix.title != 'Appendixes' %}
23-
<li><a href="{{ appendix.url }}" class="text-indigo-500 hover:text-indigo-600 underline">{{ appendix.title }}</a></li>
27+
<li><a href="{{ appendix.url }}">{{ appendix.title }}</a></li>
2428
{% endif %}
2529
{% endfor %}
2630
</ol>

0 commit comments

Comments
 (0)