Update website styling
This commit is contained in:
parent
761533fb39
commit
7d5cffcb79
2 changed files with 10 additions and 5 deletions
|
@ -2,7 +2,7 @@ import {html} from "../skooma.js"
|
||||||
import {css, variable} from "../css.js"
|
import {css, variable} from "../css.js"
|
||||||
import {template} from "../template.js"
|
import {template} from "../template.js"
|
||||||
|
|
||||||
document.head.append(html.link({rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/styles/default.min.css'}))
|
document.head.append(html.link({rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/styles/github.min.css'}))
|
||||||
import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/es/highlight.min.js';
|
import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/es/highlight.min.js';
|
||||||
import javascript from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/es/languages/javascript.min.js';
|
import javascript from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/es/languages/javascript.min.js';
|
||||||
hljs.registerLanguage('javascript', javascript);
|
hljs.registerLanguage('javascript', javascript);
|
||||||
|
@ -27,9 +27,14 @@ customElements.define("code-block", CodeBlock)
|
||||||
document.head.append(html.style(css({
|
document.head.append(html.style(css({
|
||||||
'code-block': {
|
'code-block': {
|
||||||
code: {
|
code: {
|
||||||
|
fontSize: CSS.em(1.2),
|
||||||
padding: CSS.em(.6),
|
padding: CSS.em(.6),
|
||||||
borderRadius: CSS.em(.6),
|
borderRadius: CSS.em(.6),
|
||||||
backgroundColor: "#eee",
|
backgroundColor: "#efedff",
|
||||||
|
boxShadow: [
|
||||||
|
[...[.2, .2, .4].map(CSS.em), '#0000000a', 'inset'],
|
||||||
|
[...[.2, .4, .6].map(CSS.em), '#0002'],
|
||||||
|
],
|
||||||
border: "none",
|
border: "none",
|
||||||
tabSize: 3,
|
tabSize: 3,
|
||||||
display: "block",
|
display: "block",
|
||||||
|
|
|
@ -4,16 +4,16 @@
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
--color-bg: white;
|
--color-bg: white;
|
||||||
--color-fg: #222;
|
--color-fg: #222;
|
||||||
--color-ac: #fbb;
|
--color-ac: hsl(274deg 100% 90%);
|
||||||
--color-hl: #f64;
|
--color-hl: hsl(274deg 100% 70%);
|
||||||
|
|
||||||
--line-mid: .14rem;
|
--line-mid: .14rem;
|
||||||
--line-thick: .2rem;
|
--line-thick: .2rem;
|
||||||
|
color: var(--color-fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: var(--color-fg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
Loading…
Reference in a new issue