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

34
static/less/notes2.less
View file

@ -19,6 +19,13 @@ html {
"tree blank"
;
grid-template-columns: min-content 1fr;
grid-template-rows:
64px
56px
48px
min-content
1fr;
@media only screen and (max-width: 600px) {
grid-template-areas:
@ -46,6 +53,10 @@ html {
color: #ddd;
z-index: 100; // Over crumbs shadow
&:focus {
//background-color: #f0f;
}
#logo {
display: grid;
position: relative;
@ -114,6 +125,7 @@ html {
#crumbs {
grid-area: crumbs;
display: grid;
align-items: center;
justify-items: center;
margin: 16px;
}
@ -122,20 +134,15 @@ html {
grid-area: sync;
display: grid;
justify-items: center;
justify-self: center;
width: 100%;
max-width: 900px;
height: 56px;
position: relative;
&.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 500ms, opacity 500ms linear;
}
progress {
width: calc(100% - 16px);
width: 100%;
padding: 0 7px;
max-width: 900px;
height: 16px;
border-radius: 4px;
}
@ -166,11 +173,20 @@ html {
}
.count {
width: min-content;
white-space: nowrap;
margin-top: 0px;
color: #888;
position: absolute;
top: 22px;
}
&.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 500ms, opacity 500ms linear;
}
}
.crumbs {