fix(header): Use data attributes for header mode

Partially fixes: #401

Signed-off-by: Khusika Dhamar Gusti <mail@khusika.com>
This commit is contained in:
Khusika Dhamar Gusti 2020-11-26 06:52:07 +07:00
parent fbceb4ad5d
commit 1281b13109
9 changed files with 15 additions and 15 deletions

View file

@ -52,11 +52,11 @@
.page {
width: 100%;
[header-mobile] & {
[data-header-mobile] & {
padding-top: $header-height;
}
[header-mobile=normal] & {
[data-header-mobile=normal] & {
padding-top: 0;
}

View file

@ -4,11 +4,11 @@
width: 60%;
margin: 0 auto;
[header-desktop] & {
[data-header-desktop] & {
padding-top: $header-height;
}
[header-desktop=normal] & {
[data-header-desktop=normal] & {
padding-top: 0;
}

View file

@ -151,7 +151,7 @@ header {
height: $header-height;
line-height: $header-height;
[header-desktop=normal] & {
[data-header-desktop=normal] & {
position: static;
}
@ -216,7 +216,7 @@ header {
height: $header-height;
line-height: $header-height;
[header-mobile=normal] & {
[data-header-mobile=normal] & {
position: static;
}

View file

@ -60,7 +60,7 @@
left: 0;
visibility: hidden;
[header-desktop=normal] & {
[data-header-desktop=normal] & {
top: 5rem;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -14,7 +14,7 @@
{{- partial "head/link.html" . -}}
{{- partial "head/seo.html" . -}}
</head>
<body header-desktop="{{ .Site.Params.header.desktopMode }}" header-mobile="{{ .Site.Params.header.mobileMode }}">
<body data-header-desktop="{{ .Site.Params.header.desktopMode }}" data-header-mobile="{{ .Site.Params.header.mobileMode }}">
{{- /* Check theme isDark before body rendering */ -}}
{{- $theme := .Site.Params.defaulttheme -}}
<script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('{{ $theme }}' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '{{ $theme }}' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

File diff suppressed because one or more lines are too long

View file

@ -419,7 +419,7 @@ class Theme {
const $tocLinkElements = $tocCore.querySelectorAll('a:first-child');
const $tocLiElements = $tocCore.getElementsByTagName('li');
const $headerLinkElements = document.getElementsByClassName('headerLink');
const headerIsFixed = document.body.getAttribute('header-desktop') !== 'normal';
const headerIsFixed = document.body.getAttribute('data-header-desktop') !== 'normal';
const headerHeight = document.getElementById('header-desktop').offsetHeight;
const TOP_SPACING = 20 + (headerIsFixed ? headerHeight : 0);
const minTocTop = $toc.offsetTop;
@ -632,8 +632,8 @@ class Theme {
onScroll() {
const $headers = [];
if (document.body.getAttribute('header-desktop') === 'auto') $headers.push(document.getElementById('header-desktop'));
if (document.body.getAttribute('header-mobile') === 'auto') $headers.push(document.getElementById('header-mobile'));
if (document.body.getAttribute('data-header-desktop') === 'auto') $headers.push(document.getElementById('header-desktop'));
if (document.body.getAttribute('data-header-mobile') === 'auto') $headers.push(document.getElementById('header-mobile'));
if (document.getElementById('comments')) {
const $viewComments = document.getElementById('view-comments');
$viewComments.href = `#comments`;