website/site/site.css

492 lines
8.4 KiB
CSS

:root {
--width : 36;
--rounding : 8px;
--accent : #1d3456;
--dark-grey : #ddd;
--grey : #eee;
--light-grey : #f8f8f8;
--code : #bdd5f6;
--content : min(calc(1rem * var(--width) - 2rem),calc(100vw - 2rem));
}
@font-face {
font-family : 'Proza';
font-weight : 400;
src : url('/proza-r.woff2') format('woff2');
}
@font-face {
font-family : 'Proza';
font-weight : 300;
src : url('/proza-l.woff2') format('woff2');
}
@font-face {
font-family : 'Proza';
font-weight : 300;
font-style : italic;
src : url('/proza-li.woff2') format('woff2');
}
*,
::before,
::after {
box-sizing : border-box;
margin : 0;
}
html {
height : 100%;
font-family : Proza,sans-serif;
font-weight : 300;
font-size : clamp(16px, 100vw / var(--width), 20px);
font-feature-settings : 'onum','pnum';
line-height : 1.5;
-webkit-text-size-adjust : none;
text-size-adjust : none;
}
body {
display : grid;
grid-template-rows : max-content 1fr max-content;
height : 100%;
background : var(--accent);
color : #fff;
}
header,
footer {
font-weight : 400;
}
header {
display : grid;
grid-template-columns : 30px calc(min(100vw, 1rem * var(--width)) - 60px - 2rem) 30px;
justify-content : center;
align-items : center;
padding : 0 1rem;
}
header svg {
fill : #fff;
}
nav ul {
display : grid;
grid-auto-flow : column;
grid-auto-columns : min-content;
justify-content : center;
padding : 1rem;
}
nav li {
display : block;
}
nav a {
display : block;
padding : 0 0.5rem;
border-radius : 0.75rem;
color : inherit;
text-decoration : none;
}
nav a.section {
background : #fff;
color : var(--accent);
}
main {
padding-bottom : 1rem;
background : #fff;
color : #000;
}
footer {
padding : 1rem;
text-align : center;
}
footer > a{
color : #fff;
text-decoration-color : #fff;
}
h1,
h2,
h3,
p,
dl,
ol,
ul,
pre,
code,
table,
figure,
form,
main > div {
max-width : calc(1rem * var(--width));
margin : 0 auto;
padding : 1rem 1rem 0;
}
h1,
h2,
h3 {
font-weight : 400;
line-height : 1.1;
}
h1 {
font-size : 2rem;
}
h2 {
padding-top : 2rem;
font-size : 1.5rem;
}
h3 {
padding-top : 2rem;
font-size : 1.1rem;
}
dl {
padding : 0 2rem;
}
dt {
padding-top : 1rem;
}
dd {
padding-left : 1rem;
}
ol,
ul {
padding : 1rem 2rem 0 3rem;
}
ul ul {
padding : 0 0 0 1rem;
}
table {
margin-top : 1rem;
border-collapse : collapse;
font-feature-settings : 'lnum','tnum';
}
thead {
position : sticky;
top : 0;
}
th,
td {
padding : 0.25rem 0.5rem;
}
th {
background : var(--accent);
color : #fff;
font-weight : 400;
text-align : left;
}
.repotable tr:nth-child(even) td {
background : var(--grey);
}
.numeric {
text-align : right;
}
.negative {
color : #f00;
}
figure,
form {
width : max-content;
}
figure > img,
figure > svg {
max-width : calc(100vw - 2rem);
}
form > div {
padding : 1rem;
border-radius : var(--rounding);
background : var(--grey);
}
pre,
code {
font : 0.7rem/1.1rem 'Consolas',Menlo,monospace;
font-feature-settings : 'lnum','tnum';
}
pre {
margin-top : 1em;
border-left : 4px solid var(--accent);
border-radius : var(--rounding);
padding : 4px 4px 4px 8px;
background : var(--code);
overflow-x : auto;
width : min(calc(1rem * var(--width) - 2rem),calc(100vw - 2rem))
}
code {
padding : 2px 6px 2px;
border-radius : var(--rounding);
background : var(--code);
}
a {
color : var(--accent);
text-decoration-color : var(--accent);
text-decoration-thickness : 1px;
text-underline-offset : 2px;
}
a:visited {
color : inherit;
}
abbr {
font-variant : small-caps;
text-transform : lowercase;
}
img,
svg {
vertical-align : bottom;
}
input,
textarea,
select {
border : 2px solid var(--dark-grey);
border-radius : var(--rounding);
background : #fff no-repeat center center;
color : #000;
}
:is(input, textarea, select):where(:active:not(:disabled), :focus) {
border-color : var(--accent);
outline : none;
}
:is(input, textarea, select):disabled {
background : var(--grey);
color : #000;
}
input:where([type="password"], [type="text"]),
textarea,
select {
padding : calc(0.25rem - 2px) calc(0.5rem - 2px);
font-family : Proza,sans-serif;
font-weight : 300;
font-size : 1rem;
font-feature-settings : 'lnum','tnum';
line-height : 1.5;
}
input:where([inputmode="numeric"], [inputmode="decimal"]) {
text-align : right;
}
select {
-webkit-appearance : none;
appearance : none;
height : 2rem;
padding-right : 30px;
background-image : url('/select.svg');
background-position : right;
}
input:where([type="checkbox"], [type="radio"]) {
-webkit-appearance : none;
appearance : none;
width : 22px;
height : 22px;
margin : calc(0.75rem - 11px) 0.25rem 0 0;
vertical-align : top;
}
input[type="checkbox"]:checked {
background-image : url('/checkbox.svg');
}
input[type="radio"] {
border-radius : 50%;
}
input[type="radio"]:checked {
background-image : url('/radio.svg');
}
input[type="file"] {
position : absolute;
left : -100vw;
}
button{
margin : 0;
padding : 0;
border : 0;
background : transparent;
font-family : inherit;
font-size : inherit;
line-height : inherit;
}
button:-moz-focus-inner {
padding : 0;
border : 0;
}
button:where(:active, :focus) {
outline : none;
}
button > span,
.button {
display : inline-block;
padding : 0 0.5rem;
border : 2px solid var(--accent);
border-radius : calc(0.75rem + 2px);
background : var(--accent);
color : #fff;
font-weight : 400;
-webkit-user-select : none;
user-select : none;
cursor : pointer;
}
button:where(:active, :focus) > span,
.button:where(:active, :focus),
input[type="file"]:where(:active, :focus) + .button {
background : #fff;
color : var(--accent);
}
.repotable {
width : 100%;
border-radius: calc(0.75rem + 2px);
overflow : hidden;
text-align : left;
vertical-align: top;
width : min(calc(1rem * var(--width) - 2rem),calc(100vw - 2rem));
}
.highlight > div {
background : var(--light-grey);
overflow : hidden;
padding-right : 0.8rem;
border-radius : var(--rounding * 2);
}
.highlight table {
--horizontal : 0.8rem;
--vertical : 0.6rem;
width : 100%;
margin : 0;
padding : 0;
}
.highlight tr {
display : grid;
grid-template-columns : max-content 1fr;
gap : var(--horizontal);
background : green;
}
.highlight td:first-child {
padding : var(--vertical) var(--horizontal);
background : var(--grey);
color : #aaa;
}
.highlight td:last-child {
overflow : auto;
padding : var(--vertical) 0;
background : transparent;
}
.highlight code {
display : block;
padding : 0;
background : transparent;
}
.highlight :where(.c, .c1, .cm){
color : #aaa;
font-style : italic;
}
.highlight :where(.o, .p){
color : #aaa;
}
.highlight :where(.fm, .k, .kc, .kd, .nt),
.highlight .language-css :where(.nc, .nd, .nn, .s2){
color : #c66;
}
.highlight :where(.na, .nb, .nf, .nv),
.highlight .language-css :where(.k, .kc, .kp, .kt),
.highlight .language-javascript .nx{
color : #5b5;
}
.highlight :where(.cp, .nc, .ni, .nx),
.highlight .language-css :where(.n, .nv){
color : #e94;
}
.highlight :where(.m, .mf, .mh, .mi, .s, .s1, .s2, .sr){
color : #36b;
}
.avatar {
margin-top: 1em;
margin: 1em;
border-radius: 25%;
width: 140px;
height: 140px;
align: right;
float: right;
}
.photo-img {
width: 100%;
}
.photo-mid {
width: var(--content);
}
.photo-td {
width: calc((var(--content) / 3) - (4 * 4px));
padding: 4px;
}
.photo-table {
width: var(--content);
margin: auto;
border: 0;
padding: 0;
}
/* ASCIIDOCTOR FIXES */
.sect1, .sect0 {
padding: 0;
}
div#preamble {
padding: 0;
}