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

58
static/css/notes2.css
View file

@ -2,16 +2,43 @@ html {
background-color: #fff;
}
#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) {
#notes2 {
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 */
}
#notes2 #tree {
display: none;
}
}
#tree {
grid-area: tree;
padding: 16px;
background-color: #333;
color: #ddd;
z-index: 100;
}
#tree #logo {
display: grid;
position: relative;
justify-items: center;
margin-bottom: 32px;
margin-left: 24px;
margin-right: 24px;
}
#tree #logo img {
width: 128px;
left: -20px;
}
#tree .node {
display: grid;
grid-template-columns: 24px min-content;
@ -44,6 +71,9 @@ html {
display: none;
}
#crumbs {
grid-area: crumbs;
display: grid;
justify-items: center;
margin: 16px;
}
.crumbs {
@ -52,7 +82,7 @@ html {
padding: 8px 16px;
background: #e4e4e4;
color: #333;
border-radius: 6px;
border-radius: 5px;
}
.crumbs .crumb {
margin-right: 8px;
@ -72,12 +102,21 @@ html {
content: '';
margin-left: 0px;
}
#name {
color: #666;
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;
font-size: 1em;
}
.grow-wrap::after {
@ -109,16 +148,7 @@ 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 {
#node-content {
justify-self: center;
word-wrap: break-word;
font-family: monospace;
@ -129,7 +159,7 @@ html {
border: none;
outline: none;
}
.node-content:invalid {
#node-content:invalid {
background: #f5f5f5;
padding-top: 16px;
}