implement pages

1 files changed, 97 insertions, 0 deletions

diff --git a/static/pages.css b/static/pages.css
new file mode 100644
index 0000000..f19a856
--- /dev/null
+++ b/static/pages.css
@@ -0,0 +1,97 @@
+.notePage {
+  margin: var(--spacing-double);
+  article h1 {
+    margin: 0;
+    padding: var(--spacing-double) 0 var(--spacing-half) 0;
+    font-size: var(--font-heading-size);
+  }
+  .created,
+  .modified {
+    font-size: var(--font-small-size);
+  }
+
+  hr {
+    margin: var(--spacing-double) 0;
+  }
+}
+.pageAuthor {
+  display: flex;
+  gap: var(--spacing-single);
+  color: inherit;
+  text-decoration: none;
+  margin-bottom: var(--spacing-single);
+  align-items: center;
+
+  .displayName {
+    font-weight: bold;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+  img {
+    width: var(--icon-size);
+    aspect-ratio: 1;
+  }
+}
+
+.pageContent {
+  margin-top: var(--spacing-double);
+
+  p,
+  ul,
+  ol,
+  blockquote {
+    margin: 0 0 0.4lh 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  blockquote {
+    padding-left: var(--spacing-double);
+    border-left: var(--border);
+    border-left-color: var(--clr-lesser-foreground);
+  }
+
+  h1,
+  h2 {
+    margin: 0.2lh 0 0.2lh 0;
+    font-size: var(--font-big-size);
+  }
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0.1lh 0 0.2lh 0;
+    font-size: var(--font-normal-size);
+  }
+
+  img {
+    max-height: 8lh;
+  }
+}
+
+.pageItem {
+  display: grid;
+  grid-template-columns: max-content auto;
+  border: var(--border);
+  border-radius: var(--border-radius);
+  background-color: var(--clr-note-background);
+  margin: var(--spacing-double);
+  padding: var(--spacing-double);
+  gap: var(--spacing-double);
+  text-decoration: none;
+  color: inherit;
+
+  img {
+    width: var(--avatar-size);
+    aspect-ratio: 1;
+    border-radius: var(--border-radius);
+  }
+
+  .title {
+    font-size: var(--font-big-size);
+    font-weight: bold;
+  }
+}