Update website styling

This commit is contained in:
Talia 2022-06-09 13:11:25 +02:00
parent 761533fb39
commit 7d5cffcb79
2 changed files with 10 additions and 5 deletions

View File

@ -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",

View File

@ -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 {