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

wip

Browse source
This commit is contained in:
Magnus Åhall 2024-12-03 22:08:45 +01:00
parent 04c101982f
commit 13d0b15fd9
15 changed files with 507 additions and 1246 deletions
Download patch file Download diff file Expand all files Collapse all files

94
static/less/notes2.less
View file

@ -5,18 +5,75 @@ html {
}
#notes2 {
display: grid;
grid-template-columns: min-content 1fr;
min-height: 100vh;
display: grid;
grid-template-areas:
"tree crumbs"
"tree name"
"tree content"
"tree checklist"
"tree schedule"
"tree files"
"tree blank"
;
grid-template-columns: min-content 1fr;
grid-template-rows:
min-content /* crumbs */
min-content /* name */
min-content /* content */
min-content /* checklist */
min-content /* schedule */
min-content /* files */
1fr; /* blank */
@media only screen and (max-width: 600px) {
grid-template-areas:
"crumbs"
"name"
"content"
"checklist"
"schedule"
"files"
"blank"
;
grid-template-columns: 1fr;
grid-template-rows:
min-content /* crumbs */
min-content /* name */
min-content /* content */
min-content /* checklist */
min-content /* schedule */
min-content /* files */
1fr; /* blank */
#tree {
display: none;
}
}
}
#tree {
//grid-area: tree;
grid-area: tree;
padding: 16px;
background-color: #333;
color: #ddd;
z-index: 100; // Over crumbs shadow
#logo {
display: grid;
position: relative;
justify-items: center;
margin-bottom: 32px;
margin-left: 24px;
margin-right: 24px;
img {
width: 128px;
left: -20px;
}
}
.node {
display: grid;
grid-template-columns: 24px min-content;
@ -62,17 +119,20 @@ html {
}
#crumbs {
//grid-area: crumbs;
grid-area: crumbs;
display: grid;
justify-items: center;
margin: 16px;
}
.crumbs {
background: #e4e4e4;
display: flex;
flex-wrap: wrap;
padding: 8px 16px;
background: #e4e4e4;
color: #333;
border-radius: 6px;
border-radius: 5px;
.crumb {
margin-right: 8px;
@ -97,13 +157,22 @@ html {
}
#name {
color: @color3;
font-weight: bold;
text-align: center;
font-size: 1.15em;
margin-top: 32px;
margin-bottom: 16px;
}
/* ============================================================= *
* Textarea replicates the height of an element expanding height *
* ============================================================= */
.grow-wrap {
/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
display: grid;
//grid-area: content;
grid-area: content;
font-size: 1.0em;
}
.grow-wrap::after {
@ -139,18 +208,8 @@ html {
grid-area: 1 / 1 / 2 / 2;
}
/* ============================================================= */
.node-name {
background: #fff;
color: #000;
text-align: center;
font-weight: bold;
margin-top: 32px;
margin-bottom: 32px;
font-size: 1.5em;
}
.node-content {
//grid-area: content;
#node-content {
justify-self: center;
word-wrap: break-word;
font-family: monospace;
@ -160,7 +219,6 @@ html {
resize: none;
border: none;
outline: none;
&:invalid {
background: #f5f5f5;