1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
.notebook-page {
display: flex;
flex-flow: column nowrap;
padding: clamp(1rem, 3vw, 2rem) 0;
background: #fff;
border: 1px solid #cacaca;
box-shadow: 1px 1px 0 0 #ebebeb, 1px 1px 0 1px #bebebe, 2px 2px 0 1px #ebebeb,
2px 2px 0 2px #bebebe, 3px 3px 0 2px #ebebeb, 3px 3px 0 3px #bebebe;
}
.notebook-page--mirror {
box-shadow: -1px 1px 0 0 #ebebeb, -1px 1px 0 1px #bebebe,
-2px 2px 0 1px #ebebeb, -2px 2px 0 2px #bebebe, -3px 3px 0 2px #ebebeb,
-3px 3px 0 3px #bebebe;
}
@media screen and (max-width: 1023px) {
.notebook-page {
grid-column: 1/-1;
}
.notebook-page--mirror {
display: none;
}
}
.notebook-page__header,
.notebook-page__footer,
.notebook-page__content {
padding: 0 3rem 0 2rem;
}
.notebook-page__title {
font-size: 1.8rem;
font-weight: 600;
margin: 1rem 0 0;
}
.notebook-page__title .form__input {
border: none;
font-weight: inherit;
padding: 0;
width: 100%;
}
.notebook-page__title .form__input:focus {
outline: none;
}
.notebook-page__content {
flex: 1;
display: flex;
margin: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 3vw, 3rem);
white-space: pre-wrap;
word-break: break-all;
hyphens: auto;
}
.notebook-page__content .form__textarea {
border: none;
line-height: inherit;
width: 100%;
height: 100%;
overflow: hidden;
padding: 0;
}
.notebook-page__content .form__textarea:focus {
outline: none;
resize: none;
}
.notebook-page__footer {
text-align: right;
}
.notebook-page__toolbar {
display: flex;
flex-flow: row;
gap: 1rem;
position: absolute;
top: -4rem;
right: 1rem;
}
|
