f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00
Code Issues Packages Releases Activity

Normalized attribute name in HTML

Browse Source 
Add prefix `data-` for following attributes:
- `topbar-visible`
- `mode`
- `label-text`
- `title-succeed`
This commit is contained in:
Cotes Chung
2022-01-13 00:23:08 +08:00
parent 96e7cd79af
commit f8f4dd889e
14 changed files with 43 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
_sass/addon/commons.scss
View File

@@ -11,22 +11,22 @@
}
}
html:not([mode]),
html[mode=light] {
html:not([data-mode]),
html[data-mode=light] {
@include mode-toggle();
}
html[mode=dark] {
html[data-mode=dark] {
@include mode-toggle(true);
}
@media (prefers-color-scheme: dark) {
html:not([mode]),
html[mode=dark] {
html:not([data-mode]),
html[data-mode=dark] {
@include mode-toggle(true);
}
html[mode=light] {
html[data-mode=light] {
@include mode-toggle();
}
}
@@ -247,7 +247,7 @@ img[data-src] {
}
}
[topbar-visible=true] & > div {
[data-topbar-visible=true] & > div {
top: 6rem;
}
}
@@ -873,7 +873,7 @@ $sidebar-display: "sidebar-display";
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
background-color: var(--topbar-wrapper-bg);
[topbar-visible=false] & {
[data-topbar-visible=false] & {
top: -$topbar-height; /* same as topbar height. */
}
}
@@ -1301,7 +1301,7 @@ $sidebar-display: "sidebar-display";
} // max-width: 849px
@media all and (max-width: 849px) and (orientation: portrait) {
[topbar-visible=false] #topbar-wrapper {
[data-topbar-visible=false] #topbar-wrapper {
top: 0;
}
}

14
_sass/addon/syntax.scss
View File

@@ -5,22 +5,22 @@
@import "colors/light-syntax";
@import "colors/dark-syntax";
html:not([mode]),
html[mode=light] {
html:not([data-mode]),
html[data-mode=light] {
@include light-syntax;
}
html[mode=dark] {
html[data-mode=dark] {
@include dark-syntax;
}
@media (prefers-color-scheme: dark) {
html:not([mode]),
html[mode=dark] {
html:not([data-mode]),
html[data-mode=dark] {
@include dark-syntax;
}
html[mode=light] {
html[data-mode=light] {
@include light-syntax;
}
}
@@ -206,7 +206,7 @@ div {
// label text
&::after {
content: attr(label-text);
content: attr(data-label-text);
font-size: 0.85rem;
font-weight: 600;
color: var(--code-header-text-color);