danix
's git repository
home
/
my projects
/
theme-danix.xyz.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
fixed higlighting of form items when focused
[theme-danix.xyz.git]
/
assets
/
sass
/
base
/
_typography.scss
diff --git
a/assets/sass/base/_typography.scss
b/assets/sass/base/_typography.scss
index
b615f44
..
d172291
100644
(file)
--- a/
assets/sass/base/_typography.scss
+++ b/
assets/sass/base/_typography.scss
@@
-7,7
+7,10
@@
/* Type */
\r
\r
body, input, select, textarea {
\r
/* Type */
\r
\r
body, input, select, textarea {
\r
- color: _palette(fg);
\r
+ color: _palette_light(fg);
\r
+ @media screen and (prefers-color-scheme: dark) {
\r
+ color: _palette_dark(fg);
\r
+ }
\r
font-family: _font(family);
\r
font-size: 17pt;
\r
font-weight: _font(weight);
\r
font-family: _font(family);
\r
font-size: 17pt;
\r
font-weight: _font(weight);
\r
@@
-38,16
+41,25
@@
\r
&:hover {
\r
border-bottom-color: transparent;
\r
\r
&:hover {
\r
border-bottom-color: transparent;
\r
- color: _palette(highlight) !important;
\r
+ color: _palette_light(highlight) !important;
\r
+ @media screen and (prefers-color-scheme: dark) {
\r
+ color: _palette_dark(highlight);
\r
+ }
\r
}
\r
\r
&:active {
\r
}
\r
\r
&:active {
\r
- color: desaturate(darken(_palette(highlight), 15), 5) !important;
\r
+ color: desaturate(darken(_palette_light(highlight), 15), 5) !important;
\r
+ @media screen and (prefers-color-scheme: dark) {
\r
+ color: desaturate(darken(_palette_dark(highlight), 15), 5) !important;
\r
+ }
\r
}
\r
}
\r
\r
strong, b {
\r
}
\r
}
\r
\r
strong, b {
\r
- color: _palette(fg-bold);
\r
+ color: _palette_light(fg-bold);
\r
+ @media screen and (prefers-color-scheme: dark) {
\r
+ color: _palette_dark(fg-bold);
\r
+ }
\r
font-weight: _font(weight-bold);
\r
}
\r
\r
font-weight: _font(weight-bold);
\r
}
\r
\r
@@
-60,7
+72,10
@@
}
\r
\r
h1, h2, h3, h4, h5, h6 {
\r
}
\r
\r
h1, h2, h3, h4, h5, h6 {
\r
- color: _palette(fg-bold);
\r
+ color: _palette_light(fg-bold);
\r
+ @media screen and (prefers-color-scheme: dark) {
\r
+ color: _palette_dark(fg-bold);
\r
+ }
\r
font-weight: _font(weight-bold);
\r
line-height: 1.65;
\r
margin: 0 0 (_size(element-margin) * 0.5) 0;
\r
font-weight: _font(weight-bold);
\r
line-height: 1.65;
\r
margin: 0 0 (_size(element-margin) * 0.5) 0;
\r
@@
-122,14
+137,20
@@
}
\r
\r
blockquote {
\r
}
\r
\r
blockquote {
\r
- border-left: solid 4px _palette(border);
\r
+ border-left: solid 4px _palette_light(border);
\r
+ @media screen and (prefers-color-scheme: dark) {
\r
+ border-left: solid 4px _palette_dark(border);
\r
+ }
\r
font-style: italic;
\r
margin: 0 0 _size(element-margin) 0;
\r
padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
\r
}
\r
\r
code {
\r
font-style: italic;
\r
margin: 0 0 _size(element-margin) 0;
\r
padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
\r
}
\r
\r
code {
\r
- background: _palette(border-bg);
\r
+ background: _palette_light(border-bg);
\r
+ @media screen and (prefers-color-scheme: dark) {
\r
+ background: _palette_dark(border-bg);
\r
+ }
\r
font-family: _font(family-fixed);
\r
font-size: 0.9em;
\r
margin: 0 0.25em;
\r
font-family: _font(family-fixed);
\r
font-size: 0.9em;
\r
margin: 0 0.25em;
\r
@@
-152,7
+173,10
@@
\r
hr {
\r
border: 0;
\r
\r
hr {
\r
border: 0;
\r
- border-bottom: solid 1px _palette(border);
\r
+ border-bottom: solid 1px _palette_light(border);
\r
+ @media screen and (prefers-color-scheme: dark) {
\r
+ border-bottom: solid 1px _palette_dark(border);
\r
+ }
\r
margin: _size(element-margin) 0;
\r
\r
&.major {
\r
margin: _size(element-margin) 0;
\r
\r
&.major {
\r
@@
-173,6
+197,23
@@
}
\r
\r
.screen-reader-text,
\r
}
\r
\r
.screen-reader-text,
\r
- .hidden {
\r
+ .hidden,
\r
+ .js-hidden {
\r
@include hide-visually;
\r
}
\r
@include hide-visually;
\r
}
\r
+
\r
+ // large code blocks are wrapped in the highlight shortcode
\r
+ .highlight {
\r
+ max-width: 100%;
\r
+ overflow-x: auto;
\r
+ }
\r
+
\r
+ .has-dropcap:first-letter {
\r
+ font-family: _font(family-fixed);
\r
+ font-weight: 900;
\r
+ float: left;
\r
+ font-size: 6rem;
\r
+ line-height: 0.65;
\r
+ margin: 0.1em 0.1em 0.2em 0;
\r
+ }
\r
+
\r