databook-theme 0.1.1 → 0.1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (109) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE.txt +21 -21
  3. data/README.MD +1 -1
  4. data/_includes/blog/blog.liquid +50 -50
  5. data/_includes/blog/features.liquid +36 -36
  6. data/_includes/blog/full.liquid +3 -3
  7. data/_includes/blog/list.liquid +41 -41
  8. data/_includes/blog/post.liquid +6 -6
  9. data/_includes/components/analytics.google.liquid +11 -11
  10. data/_includes/components/analytics.liquid +11 -11
  11. data/_includes/components/comments.disqus.liquid +17 -17
  12. data/_includes/components/comments.gitalk.liquid +22 -22
  13. data/_includes/components/comments.liquid +13 -13
  14. data/_includes/components/navmenu.items.liquid +51 -51
  15. data/_includes/components/navmenu.liquid +4 -4
  16. data/_includes/components/pagination.liquid +83 -83
  17. data/_includes/components/prevnext.liquid +1 -1
  18. data/_includes/components/search.baidu.liquid +7 -7
  19. data/_includes/components/search.bing.liquid +6 -6
  20. data/_includes/components/search.google.liquid +6 -6
  21. data/_includes/components/search.liquid +21 -21
  22. data/_includes/components/social_button.liquid +9 -9
  23. data/_includes/components/social_link.liquid +14 -14
  24. data/_includes/components/title.liquid +41 -41
  25. data/_includes/components/toc.liquid +28 -28
  26. data/_includes/custom/analytics.liquid +3 -3
  27. data/_includes/custom/blog.liquid +3 -3
  28. data/_includes/custom/body.liquid +3 -3
  29. data/_includes/custom/comments.liquid +3 -3
  30. data/_includes/custom/favicon.liquid +11 -0
  31. data/_includes/custom/footer.liquid +3 -3
  32. data/_includes/custom/head.liquid +3 -3
  33. data/_includes/custom/katex.liquid +15 -15
  34. data/_includes/custom/mathjax.liquid +19 -19
  35. data/_includes/custom/search.liquid +3 -3
  36. data/_includes/extensions/toc.liquid +182 -182
  37. data/_includes/functions/get_config.liquid +11 -11
  38. data/_includes/functions/get_config_data.liquid +23 -23
  39. data/_includes/functions/get_icon.liquid +5 -5
  40. data/_includes/functions/get_page_meta.liquid +74 -60
  41. data/_includes/functions/get_page_thumbnail.liquid +22 -23
  42. data/_includes/functions/get_page_title.liquid +7 -7
  43. data/_includes/functions/get_recent_posts.liquid +17 -17
  44. data/_includes/functions/get_taxonomy_link.liquid +9 -9
  45. data/_includes/head/head.liquid +11 -12
  46. data/_includes/head/meta.liquid +50 -41
  47. data/_includes/head/requirements.liquid +87 -87
  48. data/_includes/head/styles.liquid +10 -10
  49. data/_includes/js/codes.js +116 -116
  50. data/_includes/js/scrollspy.js +16 -16
  51. data/_includes/layout/article.liquid +74 -71
  52. data/_includes/layout/footer.liquid +53 -53
  53. data/_includes/layout/header.liquid +31 -31
  54. data/_includes/layout/hero.liquid +29 -29
  55. data/_includes/layout/page.liquid +33 -33
  56. data/_includes/layout/pagehead.liquid +17 -17
  57. data/_includes/layout/sidebar.liquid +178 -178
  58. data/_includes/localize +29 -29
  59. data/_includes/notice +6 -6
  60. data/_includes/version +1 -1
  61. data/_layouts/article.liquid +10 -10
  62. data/_layouts/default.liquid +132 -131
  63. data/_layouts/home.liquid +20 -20
  64. data/_layouts/page.liquid +9 -9
  65. data/_layouts/post.liquid +9 -9
  66. data/_layouts/system.liquid +35 -35
  67. data/_layouts/taxonomy.liquid +67 -67
  68. data/_sass/_databook.scss +42 -42
  69. data/_sass/_debug.scss +7 -7
  70. data/_sass/_variables.scss +24 -24
  71. data/_sass/base/_mixins.scss +32 -32
  72. data/_sass/base/_normalize.scss +45 -45
  73. data/_sass/base/_responsive.scss +28 -28
  74. data/_sass/components/_archive.scss +49 -49
  75. data/_sass/components/_blog.scss +249 -249
  76. data/_sass/components/_forms.scss +30 -30
  77. data/_sass/components/_hero.scss +70 -70
  78. data/_sass/components/_misc.scss +3 -3
  79. data/_sass/components/_notice.scss +27 -27
  80. data/_sass/components/_notification.scss +10 -10
  81. data/_sass/components/_post.scss +19 -19
  82. data/_sass/components/_sidebar.scss +303 -303
  83. data/_sass/components/_tabs.scss +67 -67
  84. data/_sass/components/_text.scss +27 -27
  85. data/_sass/components/_toc.scss +50 -50
  86. data/_sass/layout/_article.scss +211 -211
  87. data/_sass/layout/_body.scss +26 -26
  88. data/_sass/layout/_footer.scss +75 -75
  89. data/_sass/layout/_header.scss +124 -124
  90. data/_sass/layout/_main.scss +8 -8
  91. data/_sass/layout/_misc.scss +7 -7
  92. data/_sass/layout/_navbar.scss +323 -323
  93. data/_sass/layout/_sidebar.scss +115 -115
  94. data/_sass/layout/_wrapper.scss +7 -7
  95. data/_sass/theme/_scheme.scss +112 -112
  96. data/_sass/typography/_article.scss +49 -49
  97. data/_sass/typography/_doc.scss +104 -104
  98. data/_sass/typography/_highlight.scss +208 -208
  99. data/_sass/typography/_markdown.scss +18 -18
  100. data/_sass/typography/_table.scss +119 -119
  101. data/_sass/typography/_typography.scss +103 -108
  102. data/_sass/utilities/_thinscrollbar.scss +35 -35
  103. data/assets/databook/css/databook.scss +6 -6
  104. data/assets/databook/js/databook.js +8 -8
  105. data/assets/databook/js/search.js +47 -47
  106. data/assets/databook/version.json +9 -9
  107. data/assets/search.json +30 -30
  108. metadata +8 -8
  109. data/_includes/head/opengraph.liquid +0 -1
data/_sass/layout/_sidebar.scss CHANGED
@@ -1,115 +1,115 @@
1
- .l-sidebar {
2
- --db-sidebar-width: #{$side-width};
3
-
4
- background-color: var(--db-surface-color);
5
- background-image: var(--db-surface-overlay);
6
- border-right: 1px solid var(--db-border-color);
7
-
8
- color: var(--db-text-color-active);
9
- display: none;
10
- flex-direction: column;
11
- overflow: auto;
12
- position: fixed;
13
- width: 100%;
14
- z-index: 999;
15
-
16
- height: 100vh;
17
- padding-top: var(--db-header-height);
18
-
19
- @media #{$medium-screen} {
20
- width: var(--db-sidebar-width);
21
- overflow: auto;
22
- }
23
-
24
- @media #{$large-screen} {
25
- display: flex;
26
- overflow: initial;
27
- position: static;
28
- margin-top: 0;
29
- padding-top: 0;
30
- height: auto;
31
-
32
- &--sticky {
33
- position: sticky;
34
- top: 0;
35
- align-self: flex-start;
36
- height: 100vh;
37
- }
38
- }
39
-
40
- &.is-toggled {
41
- display: flex;
42
- position: fixed;
43
- box-shadow: 0 0 1rem 0 var(--db-surface-shadow-color);
44
-
45
- @media #{$large-screen} {
46
- display: none;
47
- }
48
- }
49
-
50
- &__header {
51
- @include flex-center;
52
- border-bottom: 1px solid var(--db-border-color);
53
- height: var(--db-header-height);
54
- display: none;
55
-
56
- @media #{$large-screen} {
57
- display: flex;
58
- }
59
-
60
- }
61
-
62
- &__body {
63
- flex: 1;
64
- padding: 1rem;
65
- display: flex;
66
- flex-direction: column;
67
- }
68
-
69
- &__footer {
70
- color: var(--db-text-color-inactive);
71
- font-size: 80%;
72
- padding: 1.5rem 1rem;
73
- text-align: center;
74
- }
75
- }
76
-
77
- .c-navbutton--sidebar {
78
- @include fontawesome-icon;
79
-
80
- &::before {
81
- content: "\f105";
82
- @media #{$large-screen} {
83
- content: "\f104";
84
- }
85
- }
86
-
87
- &.is-toggled::before {
88
- content: "\f104";
89
- @media #{$large-screen} {
90
- content: "\f105";
91
- }
92
- }
93
-
94
- }
95
-
96
- #sidebar-toggler {
97
- display: none;
98
-
99
- &:checked + .l-sidebar {
100
- display: flex;
101
- position: fixed;
102
- box-shadow: 0 0 1rem 0 var(--db-surface-shadow-color);
103
-
104
- @media #{$large-screen} {
105
- display: none;
106
- }
107
- }
108
-
109
- &:checked ~ .l-main .c-navbutton--sidebar::before {
110
- content: "\f104";
111
- @media #{$large-screen} {
112
- content: "\f105";
113
- }
114
- }
115
- }
1
+ .l-sidebar {
2
+ --db-sidebar-width: #{$side-width};
3
+
4
+ background-color: var(--db-surface-color);
5
+ background-image: var(--db-surface-overlay);
6
+ border-right: 1px solid var(--db-border-color);
7
+
8
+ color: var(--db-text-color-active);
9
+ display: none;
10
+ flex-direction: column;
11
+ overflow: auto;
12
+ position: fixed;
13
+ width: 100%;
14
+ z-index: 999;
15
+
16
+ height: 100vh;
17
+ padding-top: var(--db-header-height);
18
+
19
+ @media #{$medium-screen} {
20
+ width: var(--db-sidebar-width);
21
+ overflow: auto;
22
+ }
23
+
24
+ @media #{$large-screen} {
25
+ display: flex;
26
+ overflow: initial;
27
+ position: static;
28
+ margin-top: 0;
29
+ padding-top: 0;
30
+ height: auto;
31
+
32
+ &--sticky {
33
+ position: sticky;
34
+ top: 0;
35
+ align-self: flex-start;
36
+ height: 100vh;
37
+ }
38
+ }
39
+
40
+ &.is-toggled {
41
+ display: flex;
42
+ position: fixed;
43
+ box-shadow: 0 0 1rem 0 var(--db-surface-shadow-color);
44
+
45
+ @media #{$large-screen} {
46
+ display: none;
47
+ }
48
+ }
49
+
50
+ &__header {
51
+ @include flex-center;
52
+ border-bottom: 1px solid var(--db-border-color);
53
+ height: var(--db-header-height);
54
+ display: none;
55
+
56
+ @media #{$large-screen} {
57
+ display: flex;
58
+ }
59
+
60
+ }
61
+
62
+ &__body {
63
+ flex: 1;
64
+ padding: 1rem;
65
+ display: flex;
66
+ flex-direction: column;
67
+ }
68
+
69
+ &__footer {
70
+ color: var(--db-text-color-inactive);
71
+ font-size: 80%;
72
+ padding: 1.5rem 1rem;
73
+ text-align: center;
74
+ }
75
+ }
76
+
77
+ .c-navbutton--sidebar {
78
+ @include fontawesome-icon;
79
+
80
+ &::before {
81
+ content: "\f105";
82
+ @media #{$large-screen} {
83
+ content: "\f104";
84
+ }
85
+ }
86
+
87
+ &.is-toggled::before {
88
+ content: "\f104";
89
+ @media #{$large-screen} {
90
+ content: "\f105";
91
+ }
92
+ }
93
+
94
+ }
95
+
96
+ #sidebar-toggler {
97
+ display: none;
98
+
99
+ &:checked + .l-sidebar {
100
+ display: flex;
101
+ position: fixed;
102
+ box-shadow: 0 0 1rem 0 var(--db-surface-shadow-color);
103
+
104
+ @media #{$large-screen} {
105
+ display: none;
106
+ }
107
+ }
108
+
109
+ &:checked ~ .l-main .c-navbutton--sidebar::before {
110
+ content: "\f104";
111
+ @media #{$large-screen} {
112
+ content: "\f105";
113
+ }
114
+ }
115
+ }
data/_sass/layout/_wrapper.scss CHANGED
@@ -1,7 +1,7 @@
1
- .l-wrapper {
2
- display: flex;
3
- flex-direction: row;
4
- min-height: 100vh;
5
- width: 100%;
6
- color: var(--db-text-color-active);
7
- }
1
+ .l-wrapper {
2
+ display: flex;
3
+ flex-direction: row;
4
+ min-height: 100vh;
5
+ width: 100%;
6
+ color: var(--db-text-color-active);
7
+ }
data/_sass/theme/_scheme.scss CHANGED
@@ -1,112 +1,112 @@
1
- @mixin scheme-light {
2
- --db-accent-color-h: 223;
3
- --db-accent-color-s: 5%;
4
- --db-accent-color-l: 50%;
5
- --db-accent-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), var(--db-accent-color-l));
6
-
7
- --db-overlay-color-rgb: 0, 0, 0;
8
- --db-hover-color-rgb: 255, 255, 255;
9
-
10
-
11
- --db-background-color: hsl(0, 0%, 100%);
12
- --db-background-hover-color: var(--db-surface-color);
13
-
14
- --db-border-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 80%);
15
- --db-border-color-inactive: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 90%);
16
-
17
- --db-surface-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 95%);
18
- --db-surface-overlay: radial-gradient(#FFFFFF22, #FFFFFF00);
19
- --db-surface-shadow-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 33%);
20
- --db-surface-hover-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, .2);
21
-
22
- --db-control-color: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * 1.5), 33%);
23
- --db-control-border-color: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * 1.5), 22%);
24
- --db-control-text-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 95%);
25
- --db-control-shadow-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 33%);
26
-
27
- --db-text-color-active: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 5%);
28
- --db-text-color-important: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 15%);
29
- --db-text-color-inactive: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * .66), 40%);
30
- --db-text-color-disabled: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * .33), 60%);
31
-
32
- --db-highlight-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 15%);
33
- --db-highlight-color-hover: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 20%);
34
- }
35
-
36
- @mixin scheme-dark {
37
- --db-accent-color-h: 223;
38
- --db-accent-color-s: 5%;
39
- --db-accent-color-l: 50%;
40
- --db-accent-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), var(--db-accent-color-l));
41
-
42
- --db-overlay-color-rgb: 255, 255, 255;
43
- --db-hover-color-rgb: 0, 0, 0;
44
-
45
- --db-background-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 8%);
46
- --db-background-hover-color: var(--db-surface-color);
47
-
48
- --db-border-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 30%);
49
- --db-border-color-inactive: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 20%);
50
-
51
- --db-surface-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 15%);
52
- --db-surface-overlay: radial-gradient(#FFFFFF11, #FFFFFF11);
53
- --db-surface-hover-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 80%);
54
- --db-surface-shadow-color: transparent;
55
-
56
- --db-control-color: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * .3), 70%);
57
- --db-control-border-color: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * .3), 80%);
58
- --db-control-text-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 15%);
59
- --db-control-shadow-color: transparent;
60
-
61
- --db-text-color-active: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 95%);
62
- --db-text-color-important: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 85%);
63
- --db-text-color-inactive: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 60%);
64
- --db-text-color-disabled: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 40%);
65
-
66
- --db-highlight-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 85%);
67
- --db-highlight-color-hover: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 80%);
68
-
69
- img {
70
- filter: brightness(.8) contrast(1.2);
71
- }
72
- }
73
-
74
- :root {
75
- color-scheme: normal;
76
-
77
- &[data-color-scheme="light"] {
78
- color-scheme: light;
79
- }
80
-
81
- @include scheme-light;
82
-
83
- @media (prefers-color-scheme: dark) {
84
- @include scheme-dark;
85
- }
86
-
87
- &[data-color-scheme="dark"] {
88
- color-scheme: dark;
89
- @include scheme-dark;
90
- }
91
-
92
- &[data-accent-color="red"] {
93
- --db-accent-color-h: 2;
94
- }
95
- &[data-accent-color="yellow"] {
96
- --db-accent-color-h: 37;
97
- }
98
- &[data-accent-color="green"] {
99
- --db-accent-color-h: 137;
100
- }
101
- &[data-accent-color="blue"] {
102
- --db-accent-color-h: 223;
103
- }
104
- &[data-accent-color="purple"] {
105
- --db-accent-color-h: 293;
106
- }
107
- &[data-accent-color] {
108
- --db-accent-color-s: 66%;
109
- accent-color: var(--db-accent-color);
110
- }
111
-
112
- }
1
+ @mixin scheme-light {
2
+ --db-accent-color-h: 223;
3
+ --db-accent-color-s: 5%;
4
+ --db-accent-color-l: 50%;
5
+ --db-accent-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), var(--db-accent-color-l));
6
+
7
+ --db-overlay-color-rgb: 0, 0, 0;
8
+ --db-hover-color-rgb: 255, 255, 255;
9
+
10
+
11
+ --db-background-color: hsl(0, 0%, 100%);
12
+ --db-background-hover-color: var(--db-surface-color);
13
+
14
+ --db-border-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 80%);
15
+ --db-border-color-inactive: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 90%);
16
+
17
+ --db-surface-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 95%);
18
+ --db-surface-overlay: radial-gradient(#FFFFFF22, #FFFFFF00);
19
+ --db-surface-shadow-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 33%);
20
+ --db-surface-hover-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, .2);
21
+
22
+ --db-control-color: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * 1.5), 33%);
23
+ --db-control-border-color: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * 1.5), 22%);
24
+ --db-control-text-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 95%);
25
+ --db-control-shadow-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 33%);
26
+
27
+ --db-text-color-active: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 5%);
28
+ --db-text-color-important: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 15%);
29
+ --db-text-color-inactive: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * .66), 40%);
30
+ --db-text-color-disabled: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * .33), 60%);
31
+
32
+ --db-highlight-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 15%);
33
+ --db-highlight-color-hover: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 20%);
34
+ }
35
+
36
+ @mixin scheme-dark {
37
+ --db-accent-color-h: 223;
38
+ --db-accent-color-s: 5%;
39
+ --db-accent-color-l: 50%;
40
+ --db-accent-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), var(--db-accent-color-l));
41
+
42
+ --db-overlay-color-rgb: 255, 255, 255;
43
+ --db-hover-color-rgb: 0, 0, 0;
44
+
45
+ --db-background-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 8%);
46
+ --db-background-hover-color: var(--db-surface-color);
47
+
48
+ --db-border-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 30%);
49
+ --db-border-color-inactive: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 20%);
50
+
51
+ --db-surface-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 15%);
52
+ --db-surface-overlay: radial-gradient(#FFFFFF11, #FFFFFF11);
53
+ --db-surface-hover-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 80%);
54
+ --db-surface-shadow-color: transparent;
55
+
56
+ --db-control-color: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * .3), 70%);
57
+ --db-control-border-color: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * .3), 80%);
58
+ --db-control-text-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 15%);
59
+ --db-control-shadow-color: transparent;
60
+
61
+ --db-text-color-active: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 95%);
62
+ --db-text-color-important: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 85%);
63
+ --db-text-color-inactive: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 60%);
64
+ --db-text-color-disabled: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 40%);
65
+
66
+ --db-highlight-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 85%);
67
+ --db-highlight-color-hover: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 80%);
68
+
69
+ img {
70
+ filter: brightness(.8) contrast(1.2);
71
+ }
72
+ }
73
+
74
+ :root {
75
+ color-scheme: normal;
76
+
77
+ &[data-color-scheme="light"] {
78
+ color-scheme: light;
79
+ }
80
+
81
+ @include scheme-light;
82
+
83
+ @media (prefers-color-scheme: dark) {
84
+ @include scheme-dark;
85
+ }
86
+
87
+ &[data-color-scheme="dark"] {
88
+ color-scheme: dark;
89
+ @include scheme-dark;
90
+ }
91
+
92
+ &[data-accent-color="red"] {
93
+ --db-accent-color-h: 2;
94
+ }
95
+ &[data-accent-color="yellow"] {
96
+ --db-accent-color-h: 37;
97
+ }
98
+ &[data-accent-color="green"] {
99
+ --db-accent-color-h: 137;
100
+ }
101
+ &[data-accent-color="blue"] {
102
+ --db-accent-color-h: 223;
103
+ }
104
+ &[data-accent-color="purple"] {
105
+ --db-accent-color-h: 293;
106
+ }
107
+ &[data-accent-color] {
108
+ --db-accent-color-s: 66%;
109
+ accent-color: var(--db-accent-color);
110
+ }
111
+
112
+ }
data/_sass/typography/_article.scss CHANGED
@@ -1,49 +1,49 @@
1
- .l-typography--article {
2
- h1 {
3
- --db-h-font-size: 3rem;
4
- --db-h-padding: 1rem;
5
- --db-h-margin: 1rem;
6
- --db-h-border: 1px solid var(--db-border-color);
7
- }
8
- h2 {
9
- --db-h-font-size: 1.75rem;
10
- --db-h-padding: .75rem;
11
- --db-h-margin: .75rem;
12
- --db-h-border: 1px solid var(--db-border-color);
13
- }
14
- h3 {
15
- --db-h-font-size: 1.5rem;
16
- --db-h-padding: .75rem;
17
- --db-h-margin: .75rem;
18
- --db-h-border: 1px dashed var(--db-border-color);
19
- }
20
- h4 {
21
- --db-h-font-size: 1.4rem;
22
- --db-h-padding: .25rem;
23
- --db-h-margin: .25rem;
24
- }
25
- h5 {
26
- --db-h-font-size: 1.3rem;
27
- --db-h-padding: .25rem;
28
- --db-h-margin: .25rem;
29
- }
30
- h6 {
31
- --db-h-font-size: 1.2rem;
32
- --db-h-padding: .25rem;
33
- --db-h-margin: .25rem;
34
- }
35
-
36
-
37
- h1, h2, h3, h4, h5, h6 {
38
- font-weight: bold;
39
- font-size: var(--db-h-font-size);
40
- padding: var(--db-h-padding) 0;
41
- border-bottom: var(--db-h-border, none);
42
-
43
- margin-bottom: var(--db-h-margin);
44
-
45
- &:not(:first-child) {
46
- margin-top: calc(var(--db-h-margin) * 1.5);
47
- }
48
- }
49
- }
1
+ .l-typography--article {
2
+ h1 {
3
+ --db-h-font-size: 3rem;
4
+ --db-h-padding: 1rem;
5
+ --db-h-margin: 1rem;
6
+ --db-h-border: 1px solid var(--db-border-color);
7
+ }
8
+ h2 {
9
+ --db-h-font-size: 1.75rem;
10
+ --db-h-padding: .75rem;
11
+ --db-h-margin: .75rem;
12
+ --db-h-border: 1px solid var(--db-border-color);
13
+ }
14
+ h3 {
15
+ --db-h-font-size: 1.5rem;
16
+ --db-h-padding: .75rem;
17
+ --db-h-margin: .75rem;
18
+ --db-h-border: 1px dashed var(--db-border-color);
19
+ }
20
+ h4 {
21
+ --db-h-font-size: 1.4rem;
22
+ --db-h-padding: .25rem;
23
+ --db-h-margin: .25rem;
24
+ }
25
+ h5 {
26
+ --db-h-font-size: 1.3rem;
27
+ --db-h-padding: .25rem;
28
+ --db-h-margin: .25rem;
29
+ }
30
+ h6 {
31
+ --db-h-font-size: 1.2rem;
32
+ --db-h-padding: .25rem;
33
+ --db-h-margin: .25rem;
34
+ }
35
+
36
+
37
+ h1, h2, h3, h4, h5, h6 {
38
+ font-weight: bold;
39
+ font-size: var(--db-h-font-size);
40
+ padding: var(--db-h-padding) 0;
41
+ border-bottom: var(--db-h-border, none);
42
+
43
+ margin-bottom: var(--db-h-margin);
44
+
45
+ &:not(:first-child) {
46
+ margin-top: calc(var(--db-h-margin) * 1.5);
47
+ }
48
+ }
49
+ }