magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better grid layout

Browse source
This commit is contained in:
Magnus Åhall 2025-02-09 11:50:11 +01:00
parent e276e6d156
commit bb6279c55a
3 changed files with 38 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

20
static/css/notes2.css
View file

@ -6,6 +6,7 @@ html {
display: grid;
grid-template-areas: "tree crumbs" "tree sync" "tree name" "tree content" "tree blank";
grid-template-columns: min-content 1fr;
grid-template-rows: 64px 56px 48px min-content 1fr;
}
@media only screen and (max-width: 600px) {
#notes2 {
@ -77,6 +78,7 @@ html {
#crumbs {
grid-area: crumbs;
display: grid;
align-items: center;
justify-items: center;
margin: 16px;
}
@ -84,19 +86,14 @@ html {
grid-area: sync;
display: grid;
justify-items: center;
justify-self: center;
width: 100%;
max-width: 900px;
height: 56px;
position: relative;
}
#sync-progress.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 500ms, opacity 500ms linear;
}
#sync-progress progress {
width: calc(100% - 16px);
width: 100%;
padding: 0 7px;
max-width: 900px;
height: 16px;
border-radius: 4px;
}
@ -121,11 +118,18 @@ html {
border-radius: 4px;
}
#sync-progress .count {
width: min-content;
white-space: nowrap;
margin-top: 0px;
color: #888;
position: absolute;
top: 22px;
}
#sync-progress.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 500ms, opacity 500ms linear;
}
.crumbs {
display: flex;
flex-wrap: wrap;