update css
parent
b4bacd07e7
commit
c011866df4
370
css/style.css
370
css/style.css
|
|
@ -1,123 +1,321 @@
|
|||
/* variables */
|
||||
:root {
|
||||
--font-size: 12pt;
|
||||
--line-height: 1.625;
|
||||
--height-unit: calc(var(--font-size) * var(--line-height));
|
||||
--width-unit: 1ch;
|
||||
--padding-left: calc(1 * var(--width-unit));
|
||||
--padding-right: calc(1 * var(--width-unit));
|
||||
--padding-top: calc(1 * var(--height-unit));
|
||||
--padding-bottom: calc(1 * var(--height-unit));
|
||||
--gap-vertical: calc(1 * var(--height-unit));
|
||||
--gap-horizontal: calc(2 * var(--width-unit));
|
||||
--column-width: clamp(32ch, 72ch, calc(100vw - var(--gap-horizontal) - var(--padding-left) - var(--padding-right) - var(--width-unit)));
|
||||
--color-fg: #000000;
|
||||
--color-bg: #ffffff;
|
||||
--color-link: #0000EE;
|
||||
--color-visited: #551A8B;
|
||||
--color-active: #EE0000;
|
||||
font: var(--font-size)/var(--line-height) monospace;
|
||||
color-scheme: light dark;
|
||||
--line-height: 1.625;
|
||||
--font-family: serif;
|
||||
|
||||
/* font-derived width and height units */
|
||||
--w-un: 1ch;
|
||||
--h-un: calc(var(--font-size) * var(--line-height));
|
||||
|
||||
/* font-derived max text width */
|
||||
--text-w: clamp(60ch, 72ch, 100vw);
|
||||
|
||||
/* colors */
|
||||
--fg-c: light-dark(#000000, #fff);
|
||||
--bg-c: light-dark(#fff, #000000);
|
||||
--link-c: light-dark(hsl(240 100% 50%), hsl(240 100% 75%));
|
||||
--visited-c: light-dark(hsl(270 100% 50%), hsl(270 100% 75%));
|
||||
--active-c: light-dark(hsl(0 100% 50%), hsl(0 100% 75%));
|
||||
}
|
||||
|
||||
/* reset */
|
||||
/* box-sizing */
|
||||
:root {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
box-sizing: inherit;
|
||||
hyphens: auto;
|
||||
}
|
||||
body {
|
||||
color: light-dark(var(--color-fg), var(--color-bg));
|
||||
background-color: light-dark(var(--color-bg), var(--color-fg));
|
||||
margin: 0;
|
||||
|
||||
/* margin */
|
||||
* {
|
||||
margin: unset;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font: inherit;
|
||||
|
||||
/* :root */
|
||||
:root {
|
||||
color: var(--fg-c);
|
||||
background-color: var(--bg-c);
|
||||
color-scheme: light dark;
|
||||
font: var(--font-size)/var(--line-height) var(--font-family);
|
||||
}
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
margin: var(--height-unit) 0 var(--height-unit) 0;
|
||||
|
||||
/* content sectioning */
|
||||
address {
|
||||
font-style: unset;
|
||||
}
|
||||
h2, h3, h4, h5, h6 {
|
||||
font-style: italic;
|
||||
margin: var(--height-unit) 0 var(--height-unit) 0;
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) {
|
||||
font-size: unset;
|
||||
font-weight: bold;
|
||||
}
|
||||
p {
|
||||
margin: var(--height-unit) 0 0 0;
|
||||
hyphens: auto;
|
||||
|
||||
article {
|
||||
max-width: var(--text-w);
|
||||
counter-reset: heading;
|
||||
}
|
||||
|
||||
article :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-block-start: 1em;
|
||||
}
|
||||
|
||||
article h1:before {
|
||||
content:
|
||||
counter(heading)". ";
|
||||
counter-increment: heading;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
counter-reset: subheading;
|
||||
}
|
||||
|
||||
article h2:before {
|
||||
content:
|
||||
counter(heading)"."
|
||||
counter(subheading)". ";
|
||||
counter-increment: subheading;
|
||||
}
|
||||
|
||||
article h2 {
|
||||
counter-reset: subsubheading;
|
||||
}
|
||||
|
||||
article h3:before {
|
||||
content:
|
||||
counter(heading)"."
|
||||
counter(subheading)"."
|
||||
counter(subsubheading)". ";
|
||||
counter-increment: subsubheading;
|
||||
}
|
||||
|
||||
article h3 {
|
||||
counter-reset: subsubsubheading;
|
||||
}
|
||||
|
||||
article h4:before {
|
||||
content:
|
||||
counter(heading)"."
|
||||
counter(subheading)"."
|
||||
counter(subsubheading)"."
|
||||
counter(subsubsubheading)". ";
|
||||
counter-increment: subsubsubheading;
|
||||
}
|
||||
|
||||
article h4 {
|
||||
counter-reset: subsubsubsubheading;
|
||||
}
|
||||
|
||||
article h5:before {
|
||||
content:
|
||||
counter(heading)"."
|
||||
counter(subheading)"."
|
||||
counter(subsubheading)"."
|
||||
counter(subsubsubheading)"."
|
||||
counter(subsubsubsubheading)". ";
|
||||
counter-increment: subsubsubsubheading;
|
||||
}
|
||||
|
||||
article h5 {
|
||||
counter-reset: subsubsubsubsubheading;
|
||||
}
|
||||
|
||||
article h6:before {
|
||||
content:
|
||||
counter(heading)"."
|
||||
counter(subheading)"."
|
||||
counter(subsubheading)"."
|
||||
counter(subsubsubheading)"."
|
||||
counter(subsubsubsubheading)"."
|
||||
counter(subsubsubsubsubheading)". ";
|
||||
counter-increment: subsubsubsubsubheading;
|
||||
}
|
||||
|
||||
article>* {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
div>* {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* text content */
|
||||
|
||||
:is(blockquote, dl, figure, hr, menu, ol, p, pre, ul) +
|
||||
:is(blockquote, dl, figure, hr, menu, ol, p, pre, ul) {
|
||||
margin-block-start: var(--h-un);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: var(--height-unit) calc(2 * var(--width-unit));
|
||||
margin-inline: calc(4 * var(--w-un));
|
||||
}
|
||||
ul, ol {
|
||||
margin: var(--height-unit) 0;
|
||||
padding: 0 0 0 calc(4 * var(--width-unit));
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
ul>li::marker {
|
||||
content: "- ";
|
||||
|
||||
pre {
|
||||
margin-inline: var(--w-un);
|
||||
padding-inline: var(--w-un);
|
||||
padding-block: calc(0.5 * var(--h-un));
|
||||
color: var(--bg-c);
|
||||
background-color: var(--fg-c);
|
||||
overflow-x: scroll;
|
||||
}
|
||||
ul ul {
|
||||
margin: 0;
|
||||
|
||||
ol, ul, menu {
|
||||
padding-inline-start: calc(4 * var(--w-un));
|
||||
}
|
||||
|
||||
:is(ol, ul, menu) :is(ol, ul, menu) {
|
||||
margin-block: unset;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: inherit;
|
||||
border: none;
|
||||
margin: var(--height-unit) 0;
|
||||
color: unset;
|
||||
border: unset;
|
||||
margin-block: calc(0.5 * var(--h-un));
|
||||
border-top: var(--fg-c) solid 0.1pt;
|
||||
}
|
||||
hr:after {
|
||||
content: "---";
|
||||
|
||||
/* inline text semantics */
|
||||
a {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
form {
|
||||
margin: var(--height-unit) calc(2 * var(--width-unit));
|
||||
|
||||
a:link {
|
||||
color: var(--link-c);
|
||||
}
|
||||
input[type="text"], input[type="password"] {
|
||||
width: 100%;
|
||||
height: var(--height-unit);
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-bottom: solid thin light-dark(var(--color-fg), var(--color-bg));
|
||||
font: inherit;
|
||||
|
||||
a:link:active {
|
||||
color: var(--active-c);
|
||||
}
|
||||
button, input[type="submit"] {
|
||||
background: none;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
color: var(--color-link);
|
||||
|
||||
a:visited {
|
||||
color: var(--visited-c);
|
||||
}
|
||||
|
||||
a:visited:active {
|
||||
color: var(--active-c);
|
||||
}
|
||||
|
||||
/* image and multimedia */
|
||||
:is(audio, img, video) {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* embedded content */
|
||||
:is(embed, iframe, object, picture, portal, source) {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* svg */
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* scripting */
|
||||
canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* forms */
|
||||
fieldset {
|
||||
padding-block: var(--h-un);
|
||||
padding-inline: var(--w-un);
|
||||
border: var(--fg-c) groove 1pt;
|
||||
overflow: clip;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="datetime-local"],
|
||||
input[type="email"],
|
||||
input[type="month"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="text"],
|
||||
input[type="time"],
|
||||
input[type="url"],
|
||||
input[type="week"] {
|
||||
display: block;
|
||||
padding: unset;
|
||||
border: unset;
|
||||
font: unset;
|
||||
font-family: monospace;
|
||||
width: 100%;
|
||||
border-bottom: var(--link-c) solid 1pt;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: unset;
|
||||
border-bottom: var(--active-c) solid 1pt;
|
||||
}
|
||||
|
||||
input[type="submit"],
|
||||
input[type="reset"] {
|
||||
display: block;
|
||||
padding: unset;
|
||||
font: unset;
|
||||
border: unset;
|
||||
background: unset;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
color: var(--link-c);
|
||||
}
|
||||
|
||||
input[type="submit"]:active,
|
||||
input[type="reset"]:active {
|
||||
color: var(--active-c);
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
border: unset;
|
||||
font: unset;
|
||||
font-family: monospace;
|
||||
border: var(--link-c) solid 1pt;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
outline: unset;
|
||||
border: var(--active-c) solid 1pt;
|
||||
}
|
||||
|
||||
|
||||
/* layout */
|
||||
body {
|
||||
padding: var(--height-unit) var(--width-unit);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
max-width: var(--text-w);
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
padding: var(--h-un) var(--w-un);
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-gap: calc(0.5 * var(--h-un));
|
||||
}
|
||||
|
||||
/* header */
|
||||
body>header>h1 {
|
||||
margin: unset;
|
||||
display: inline-block;
|
||||
body>header {
|
||||
padding-bottom: calc(0.5 * var(--h-un));
|
||||
border-bottom: var(--fg-c) solid 1pt;
|
||||
}
|
||||
|
||||
/* main */
|
||||
body>main {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
body>footer {
|
||||
padding-top: calc(0.5 * var(--h-un));
|
||||
border-top: var(--fg-c) solid 1pt;
|
||||
}
|
||||
|
||||
body>main>article {
|
||||
width: var(--column-width);
|
||||
main {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* .actions */
|
||||
.actions>ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
.error {
|
||||
color: var(--active-c);
|
||||
}
|
||||
.actions>ul>li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue