1 files changed, 83 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Page.css b/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Page.css
new file mode 100644
index 0000000..873df47
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Page.css
@@ -0,0 +1,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;
+}