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

View file

@ -26,17 +26,17 @@ customElements.define("code-block", CodeBlock)
document.head.append(html.style(css({
'code-block': {
code: {
fontSize: CSS.em(1.2),
padding: CSS.em(.6),
//backgroundColor: "#00000006",
backgroundColor: "#fff4",
borderRadius: CSS.em(.6),
backgroundColor: "#efedff",
border: 'none',
boxShadow: [
[...[.2, .2, .4].map(CSS.em), '#0000000a', 'inset'],
[...[.2, .4, .6].map(CSS.em), '#0002'],
[...[.2, .4, .6].map(CSS.em), '#0003'],
],
border: "none",
tabSize: 3,
display: "block",
fontSize: CSS.em(1.2),
padding: [[.8, 1.2].map(CSS.em)],
tabSize: 3,
}
}
})))

View file

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