Added public keys page

This commit is contained in:
2025-05-23 20:34:25 +02:00
parent a6085a4891
commit f8d8b5b63b
6 changed files with 174 additions and 1 deletions

View File

@@ -92,4 +92,59 @@ nav {
}
margin-bottom: 2rem;
}
.page-keys {
main {
margin-bottom: 2rem;
}
h2:has(+ p) {
margin-bottom: 0;
}
h2 + p {
margin-top: 0.25rem;
}
.key {
width: 100%;
display: flex;
justify-content: center;
align-items: stretch;
input, textarea {
background-color: oklch(from colors.$background-color calc(l - 0.1) c h);
border: none;
padding: 1rem;
width: 100%;
line-height: 2em;
line-break: anywhere;
resize: none;
&:focus-visible, &:focus {
outline: none;
}
}
button {
background-color: oklch(from colors.$background-color calc(l - 0.2) c h);
border: 0;
padding: 1rem;
width: auto;
cursor: pointer;
&:hover {
background-color: oklch(from colors.$background-color calc(l - 0.25) c h);
}
&:active {
background-color: oklch(from colors.$background-color calc(l - 0.3) c h);
}
img {
height: 1.5em;
}
}
}
}

View File

@@ -78,6 +78,50 @@ nav > div > div:last-child {
max-width: 100%;
}
.page-keys main {
margin-bottom: 2rem;
}
.page-keys h2:has(+ p) {
margin-bottom: 0;
}
.page-keys h2 + p {
margin-top: 0.25rem;
}
.page-keys .key {
width: 100%;
display: flex;
justify-content: center;
align-items: stretch;
}
.page-keys .key input, .page-keys .key textarea {
background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.1) c h);
border: none;
padding: 1rem;
width: 100%;
line-height: 2em;
line-break: anywhere;
resize: none;
}
.page-keys .key input:focus-visible, .page-keys .key input:focus, .page-keys .key textarea:focus-visible, .page-keys .key textarea:focus {
outline: none;
}
.page-keys .key button {
background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.2) c h);
border: 0;
padding: 1rem;
width: auto;
cursor: pointer;
}
.page-keys .key button:hover {
background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.25) c h);
}
.page-keys .key button:active {
background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.3) c h);
}
.page-keys .key button img {
height: 1.5em;
}
body {
font-family: "Open Sans", apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: oklch(97% 0.0261 90.1deg);

View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["fonts.scss","layout.scss","body.scss","colors.scss","index.scss","radio.scss"],"names":[],"mappings":"AAAQ;ACER;EACI;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;IACA;;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAKZ;EAOI;;AALI;EACI;;;ACtFZ;EACI,aFFS;EEGT,kBCLe;EDMf;;;AEHA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EAOA;EACA;;AANA;EANJ;IAOQ;IACA;;;AAMJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AAEA;EAkBI;;AAjBA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EAdJ;IAeQ;;;AAOJ;EACI;;AAGJ;EACI;EACA;;AAKJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EAfJ;IAgBQ;IACA;;;AAMhB;EHxGA;;;AIjBA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGI;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;;AAKZ;EAzBJ;IA0BQ;;;AAGJ;EA7BJ;IA8BQ;;;AAGJ;EAjCJ;IAkCQ","file":"style.css"}
{"version":3,"sourceRoot":"","sources":["fonts.scss","layout.scss","body.scss","colors.scss","index.scss","radio.scss"],"names":[],"mappings":"AAAQ;ACER;EACI;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;IACA;;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAKZ;EAOI;;AALI;EACI;;;AAQR;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AC9IhB;EACI,aFFS;EEGT,kBCLe;EDMf;;;AEHA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EAOA;EACA;;AANA;EANJ;IAOQ;IACA;;;AAMJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AAEA;EAkBI;;AAjBA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EAdJ;IAeQ;;;AAOJ;EACI;;AAGJ;EACI;EACA;;AAKJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EAfJ;IAgBQ;IACA;;;AAMhB;EHxGA;;;AIjBA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGI;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;;AAKZ;EAzBJ;IA0BQ;;;AAGJ;EA7BJ;IA8BQ;;;AAGJ;EAjCJ;IAkCQ","file":"style.css"}

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M16 20v2h-1v1H3v-1H2V6h1V5h3v15z"/><path fill="currentColor" d="M16 7V1H8v1H7v16h1v1h13v-1h1V7zm4 10H9V3h5v6h6z"/><path fill="currentColor" d="M22 5v1h-5V1h1v1h1v1h1v1h1v1z"/></svg>

After

Width:  |  Height:  |  Size: 293 B