Skip to content

Commit

Permalink
style: 2 columns for TOC
Browse files Browse the repository at this point in the history
  • Loading branch information
@YUUU23
YUUU23 committed Jul 31, 2024
1 parent 04fafc4 commit 3797b0d
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 58 deletions.
120 changes: 66 additions & 54 deletions components/TableOfContents.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,81 +9,93 @@ import "../src/css/toc.css";
*/
export default function TableOfContents() {
return (
<div className="TOC">
<div className="TOC-container">
<h2>Table of Contents</h2>
<ul>
<li>
<a href="../docs">Introduction</a>
</li>
<li>
<a href="../docs/quick_start">Quick Start</a>
</li>
<li>
<a href="../docs/prerequisites">Prerequisites</a>
</li>
<li>
Project Organization
<div className="TOC-content">
<div className="TOC-col">
<ul>
<li>
<a href="../docs/directory_structure">Directory Structure</a>
<a href="../docs">Introduction</a>
</li>
<li>
<a href="../docs/npm_scripts">NPM Scripts</a>
<a href="../docs/quick_start">Quick Start</a>
</li>
<li>
<a href="../docs/environment_variables">Environment Variables</a>
<a href="../docs/prerequisites">Prerequisites</a>
</li>
<li>
<a href="../docs/ci_cd">Continuous Integration / Deployment</a>
Project Organization
<ul>
<li>
<a href="../docs/directory_structure">Directory Structure</a>
</li>
<li>
<a href="../docs/npm_scripts">NPM Scripts</a>
</li>
<li>
<a href="../docs/environment_variables">
Environment Variables
</a>
</li>
<li>
<a href="../docs/ci_cd">
Continuous Integration / Deployment
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
Deployment
</div>
<div className="TOC-col">
<ul>
<li>
<a href="../docs/local_application">Local Application</a>
Deployment
<ul>
<li>
<a href="../docs/local_application">Local Application</a>
</li>
<li>
<a href="../docs/firebase">Firebase</a>
</li>
<li>
<a href="../docs/psiturk">PsiTurk</a>
</li>
<li>
<a href="../docs/gh_pages">GitHub Pages</a>
</li>
</ul>
</li>
<li>
<a href="../docs/firebase">Firebase</a>
External Tools
<ul>
<li>
<a href="../docs/event_triggers">Event Triggers</a>
</li>
<li>
<a href="../docs/prolific">Prolific</a>
</li>
</ul>
</li>
<li>
<a href="../docs/psiturk">PsiTurk</a>
Further Reading
<ul>
<li>
<a href="../docs/github_discussions">Github Discussions</a>
</li>
<li>
<a href="../docs/version_control">Version Control</a>
</li>
<li>
<a href="../docs/javascript">JavaScript</a>
</li>
</ul>
</li>
<li>
<a href="../docs/gh_pages">GitHub Pages</a>
<a href="../docs/troubleshooting">Troubleshooting</a>
</li>
</ul>
</li>
<li>
External Tools
<ul>
<li>
<a href="../docs/event_triggers">Event Triggers</a>
</li>
<li>
<a href="../docs/prolific">Prolific</a>
</li>
</ul>
</li>
<li>
Further Reading
<ul>
<li>
<a href="../docs/github_discussions">Github Discussions</a>
</li>
<li>
<a href="../docs/version_control">Version Control</a>
</li>
<li>
<a href="../docs/javascript">JavaScript</a>
</li>
</ul>
</li>
<li>
<a href="../docs/troubleshooting">Troubleshooting</a>
</li>
</ul>
</div>
</div>
</div>
);
}
24 changes: 20 additions & 4 deletions src/css/toc.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,23 @@
/**
* For table of contents items
*/
.TOC {
.TOC-container {
display: flex;
flex-direction: column;
justify-content: center;
}

.TOC-content {
display: flex;
flex-direction: row;
align-items: top;
justify-self: center;
margin: 1.5vh 0;
gap: 5.5vw;
padding: 0;
}

.TOC-col {
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -10,20 +26,20 @@
padding: 0;
}

.TOC > ul {
.TOC-col > ul {
display: inline-block;
text-align: center;
list-style: none;
padding: 0;
margin: 0;
}

.TOC > ul > li {
.TOC-col > ul > li {
margin-bottom: 1.5vh;
font-size: large;
}

.TOC > ul > li > ul {
.TOC-col > ul > li > ul {
text-align: center;
list-style: none;
padding: 0;
Expand Down

0 comments on commit 3797b0d

Please sign in to comment.