darkwiiplayer
/
js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Further update page styles

This commit is contained in:
Talia 2022-06-22 14:09:08 +02:00
parent 9d579b1dd3
commit 93f6a60444
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
page/codeblock.js
View File

@ -26,17 +26,17 @@ 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), //backgroundColor: "#00000006",
padding: CSS.em(.6), backgroundColor: "#fff4",
borderRadius: CSS.em(.6), borderRadius: CSS.em(.6),
backgroundColor: "#efedff", border: 'none',
boxShadow: [ boxShadow: [
[...[.2, .2, .4].map(CSS.em), '#0000000a', 'inset'], [...[.2, .4, .6].map(CSS.em), '#0003'],
[...[.2, .4, .6].map(CSS.em), '#0002'],
], ],
border: "none",
tabSize: 3,
display: "block", display: "block",
fontSize: CSS.em(1.2),
padding: [[.8, 1.2].map(CSS.em)],
tabSize: 3,
} }
} }
}))) })))

14
page/style.css
View File

@ -2,7 +2,7 @@
:root { :root {
font-family: sans-serif; font-family: sans-serif;
--color-bg: white; --color-bg: #eef0f2;
--color-fg: #222; --color-fg: #222;
--color-ac: hsl(274deg 100% 90%); --color-ac: hsl(274deg 100% 90%);
--color-hl: hsl(274deg 100% 70%); --color-hl: hsl(274deg 100% 70%);
@ -23,11 +23,14 @@ body {
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
padding: 1em 2em; padding: 1em 2em;
color: #333;
background: var(--color-bg);
} }
body>section { body>section {
width: 100%; width: 100%;
max-width: 60em; max-width: 60em;
margin-top: 1em;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@ -61,7 +64,8 @@ hr {
.button { .button {
--color-primary: var(--color-hl); --color-primary: var(--color-hl);
--color-secondary: var(--color-bg); --color-secondary: white;
--color-shadow: #0004;
display: inline-block; display: inline-block;
transition: all .3s; transition: all .3s;
cursor: pointer; cursor: pointer;
@ -72,11 +76,15 @@ hr {
color: var(--color-primary); color: var(--color-primary);
font-weight: bold; font-weight: bold;
} }
.button.important {
--color-primary: var(--color-hl);
--color-secondary: white;
}
.button:hover { .button:hover {
color: var(--color-secondary); color: var(--color-secondary);
background-color: var(--color-primary); background-color: var(--color-primary);
text-shadow: .2em .3em .2em #0004; text-shadow: .2em .3em .2em var(--color-shadow);
} }
pre>code { pre>code {