fix(header): Use data attributes for header mode

Partially fixes: #401

Signed-off-by: Khusika Dhamar Gusti <mail@khusika.com>

assets/css/_core/_media.scss

@@ -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;
     }
 

assets/css/_page/_index.scss

@@ -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;
   }
 

assets/css/_partial/_header.scss

@@ -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;
   }
 

assets/css/_partial/_single/_toc.scss

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