andras/reconcile
1
0
Fork 0
Code Issues Pull requests 5 Projects Releases Packages Wiki Activity Actions

Improve example

Browse source
This commit is contained in:
Andras Schmelczer 2025-06-22 21:57:45 +01:00
parent 779579d38f
commit a0cfef3238
No known key found for this signature in database
GPG key ID: FC8F2C3D3D1A718C
5 changed files with 167 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

59
examples/website/style.css
View file

@ -11,24 +11,33 @@ body {
body {
font-family: "Segoe UI", Arial, sans-serif;
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);
color: #23272f;
overflow-y: auto;
}
.page-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);
}
header {
padding: 32px 20px 0 20px;
text-align: center;
padding: 32px 32px 0 32px;
}
header > h1 {
font-size: 2.5rem;
font-weight: 700;
color: #2451a6;
margin-bottom: 8px;
margin-bottom: 24px;
text-align: center;
}
p,
p * {
user-select: text;
}
header > p {
@ -37,16 +46,18 @@ header > p {
margin-bottom: 0;
}
header > p:not(:first-of-type) {
margin-top: 16px;
}
main {
flex: 1;
display: grid;
grid-template-rows: auto auto auto;
grid-template-rows: min-content;
grid-template-columns: 1fr 1fr;
gap: 20px;
justify-items: center;
align-items: center;
padding: 32px 12vw 32px 12vw;
min-height: 540px;
}
.diamond-parent {
@ -70,6 +81,15 @@ main {
align-items: center;
}
.diamond-result label {
display: flex;
align-items: center;
}
.diamond-result svg {
margin-left: 6px;
}
.text-area-card {
display: flex;
flex-direction: column;
@ -108,12 +128,10 @@ textarea {
resize: none;
outline: none;
margin-bottom: 0;
height: 100%;
}
#merged {
width: 100%;
text-align: left;
user-select: text;
}
@ -143,39 +161,42 @@ textarea {
@media (max-width: 768px) {
main {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
}
main > * {
grid-column: 1;
grid-template-rows: auto auto auto auto;
}
.diamond-parent {
grid-column: 1;
grid-row: 1;
}
.diamond-left {
grid-column: 1;
grid-row: 2;
}
.diamond-right {
grid-column: 1;
grid-row: 3;
}
.diamond-result {
grid-row: 5;
grid-column: 1;
grid-row: 4;
}
}
footer {
padding: 16px;
width: 100%;
position: relative;
margin-top: 32px;
padding: 28px 0 18px 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
color: #5a6272;
font-size: 1rem;
box-shadow: 0 -4px 12px 0 rgba(28, 28, 87, 0.1),
0 -1px 2px 0 rgba(1, 1, 3, 0.1);
background-color: #fff;
}
.github-link > svg {