hazza/github-style
1
0
Fork 0
mirror of https://github.com/MeiK2333/github-style.git synced 2025-10-07 01:54:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move styling code into stylesheets and prevent header from covering content

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

65
layouts/partials/post.html
View File

@@ -1,58 +1,5 @@
<!-- TODO Remove these imports -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<!-- TODO Move these to the stylesheets -->
<style>
[data-color-mode=dark] {
--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);
}
[data-color-mode=light] {
--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);
}
.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;
}
</style>
<div>
<main>
<div class="gisthead pagehead bg-gray-light pb-0 pt-3 mb-4">
@@ -97,7 +44,7 @@
<div>
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-pytest" class="file my-2">
<div class="file-header d-flex flex-md-items-center flex-items-start sticky-header">
<div id="post-header" class="file-header d-flex flex-md-items-center flex-items-start sticky-header">
<div class="file-info d-flex flex-md-items-center flex-items-start flex-order-1 flex-auto">
<div class="text-mono f6 flex-auto pr-3 flex-order-2 flex-md-order-1 mt-2 mt-md-0">
<!-- Copied from github -->
@@ -142,6 +89,16 @@
</main>
</div>
<script>
// Set up `scroll-padding-top` which is relevant for preventing
// fixed headers from covering content
// See https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my
window.onload = function () {
const header = document.getElementById('post-header');
const headerHeight = header.offsetHeight;
// 10px for a bit of leeway
document.documentElement.style.scrollPaddingTop = headerHeight + 10 + "px";
}
const tocToggleButton = document.getElementById("toc-toggle");
const tippyInstance = tippy('#toc-toggle', {

5
static/css/dark.css
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;
}
}

54
static/css/github-style.css
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%;
}
}

5
static/css/light.css
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;
}
}