Move styling code into stylesheets and prevent header from covering content

This commit is contained in:
Rafael Nicdao
2021-07-24 20:26:06 +10:00
parent 7b8207e02c
commit 4115fa1bd0
4 changed files with 72 additions and 57 deletions

View File

@@ -138,6 +138,9 @@
--color-bg-secondary: #0d1117;
--color-bg-success: rgba(46, 160, 67, 0.1);
--color-bg-success-inverse: #2ea043;
--color-bg-table-of-contents-container: rgb(28, 33, 40);
--color-bg-table-of-contents-option-selected: rgb(31, 111, 235);
--color-fg-table-of-contents-option-selected: var(--color-text-primary);
--color-bg-tertiary: #161b22;
--color-bg-warning: rgba(187, 128, 9, 0.1);
--color-bg-warning-inverse: #bb8009;
@@ -681,4 +684,4 @@
--color-workflow-card-header-shadow: transparent;
--color-workflow-card-progress-complete-bg: #8b949e;
--color-workflow-card-progress-incomplete-bg: #30363d;
}
}

View File

@@ -1,3 +1,7 @@
html {
scroll-padding-top: 5em;
}
body {
margin: 0;
}
@@ -115,6 +119,54 @@ body {
outline: none;
}
/* TODO: Fix the fact that the sticky header covers some of the page content */
.sticky-header {
position: sticky;
top: 0;
}
.tippy-box {
border-radius: 10px;
}
.tippy-content {
border-radius: 10px;
background-color: var(--color-bg-table-of-contents-container);
border: 1px solid var(--color-border-primary);
overflow-y: hidden;
padding: 0;
}
#table-of-contents {
max-height: 30em;
overflow-y: scroll;
}
#table-of-contents > nav ul {
list-style-type: none;
}
#table-of-contents > nav > ul li > a {
color: var(--color-text-primary);
text-decoration: none;
padding: 0.5em;
border-radius: 6px;
display: block;
}
#table-of-contents > nav > ul li > a.table-of-contents-option-selected {
background-color: var(--color-bg-table-of-contents-option-selected);
color: var(--color-fg-table-of-contents-option-selected);
}
#table-of-contents > nav ul > li {
margin-left: 1em;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
#table-of-contents > nav > ul > li {
margin-left: 0;
}
@media (max-width: 768px) {
.Header {
padding-left: 24px!important;
@@ -137,4 +189,4 @@ body {
.pinned-item-desc img {
max-width: 100%;
}
}

View File

@@ -138,6 +138,9 @@
--color-bg-secondary: #fafbfc;
--color-bg-success: #dcffe4;
--color-bg-success-inverse: #28a745;
--color-bg-table-of-contents-container: rgb(255, 255, 255);
--color-bg-table-of-contents-option-selected: rgb(31, 111, 235);
--color-fg-table-of-contents-option-selected: rgb(255, 255, 255);
--color-bg-tertiary: #f6f8fa;
--color-bg-warning: #fff5b1;
--color-bg-warning-inverse: #ffd33d;
@@ -681,4 +684,4 @@
--color-workflow-card-header-shadow: rgba(27, 31, 35, 0.04);
--color-workflow-card-progress-complete-bg: #959da5;
--color-workflow-card-progress-incomplete-bg: #e1e4e8;
}
}