Skip to content

Commit

Permalink
Updated the styling a bit
Browse files Browse the repository at this point in the history
  • Loading branch information
@quinthar
quinthar committed Oct 4, 2024
1 parent 202d7c7 commit 29532e2
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 40 deletions.
27 changes: 19 additions & 8 deletions help/_includes/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,11 @@
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
width: 250px;
border: 1px solid #eaecef;
border-radius: 6px;
width: 100%;
box-sizing: border-box;
margin-bottom: 20px;
}

/* Modal background */
Expand All @@ -48,7 +50,8 @@
width: 60%;
max-width: 600px;
position: relative;
border-radius: 5px;
border-radius: 6px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Close button */
Expand All @@ -65,23 +68,31 @@
#search-results {
margin-top: 20px;
max-height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
overflow-y: auto;
border-top: 1px solid #eaecef;
padding-top: 10px;
}

.search-result {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eaecef;
}

.search-result-title {
font-weight: bold;
margin-bottom: 5px;
color: #0366d6;
text-decoration: none;
}

.search-result-title:hover {
text-decoration: underline;
}

.search-result-context {
font-size: 14px;
color: gray;
color: #586069;
}
</style>

Expand Down
76 changes: 44 additions & 32 deletions help/_layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
body {
display: flex;
margin: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
background-color: #f9fafb;
color: #333;
}

/* Sidebar navigation for TOC */
Expand All @@ -18,16 +21,19 @@
top: 0;
bottom: 0;
left: 0;
background-color: #f8f9fa;
background-color: #fff;
padding: 20px;
overflow-y: auto;
border-right: 1px solid #ddd;
border-right: 1px solid #eaecef;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

/* Styling the TOC list */
.toc-sidebar ul {
list-style: none; /* Remove bullet points */
list-style: none;
padding-left: 0;
line-height: 1.8;
font-size: 15px;
}

.toc-sidebar li {
Expand All @@ -36,7 +42,7 @@

.toc-sidebar a {
text-decoration: none;
color: #007bff;
color: #0366d6;
}

.toc-sidebar a:hover {
Expand All @@ -45,14 +51,44 @@

/* Main content area */
main {
margin-left: 270px; /* Make room for the TOC sidebar */
margin-left: 270px;
padding: 20px;
flex-grow: 1;
max-width: 900px;
}

main h1 {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}

main h2 {
font-size: 28px;
margin-bottom: 16px;
}

main h3 {
font-size: 24px;
margin-bottom: 12px;
}

main p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
}

.is-active-link {
font-weight: bold;
}

/* Footer */
footer {
margin-top: 40px;
font-size: 14px;
color: #586069;
}
</style>
</head>
<body>
Expand All @@ -68,31 +104,7 @@
{{ content }}

<footer>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>Footer content; should be at least one page to make sure TocBot can highlight the top header.</p>
<p>&copy; {{ site.time | date: "%Y" }} Your Company. All rights reserved.</p>
</footer>
</main>

Expand All @@ -101,8 +113,8 @@
tocbot.init({
tocSelector: '.js-toc',
contentSelector: '.js-toc-content',
headingSelector: 'h1, h2, h3, h4, h5, h6', // Include all levels
collapseDepth: 3 // This ensures all levels are visible, without collapsing.
headingSelector: 'h1, h2, h3, h4, h5, h6',
collapseDepth: 3
});
</script>

Expand Down

0 comments on commit 29532e2

Please sign in to comment.