tidy stylesheets and improve replies styling

1 files changed, 5 insertions, 367 deletions

diff --git a/static/style.css b/static/style.css
index 698113d..da65e4a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,367 +1,5 @@
-html,
-body {
-  background: #fdf5ff;
-  color: #0f070f;
-  margin: 0;
-  padding: 0;
-  font-family: "DM Sans", sans-serif;
-  font-size: 12pt;
-  display: grid;
-  grid-template-rows: max-content 1fr;
-  justify-items: center;
-  min-height: 100vh;
-  width: 100%;
-}
-
-header {
-  background: #3b005e;
-  color: white;
-  position: sticky;
-  top: 0;
-  padding: 8px;
-  margin-bottom: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-#siteTitle {
-  font-weight: bold;
-}
-
-nav {
-  width: min(800px, 100%);
-  height: 32px;
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: 1fr max-content 1fr;
-  align-items: center;
-
-  > * {
-    margin: 0 8px;
-  }
-
-  > :last-child {
-    display: grid;
-    grid-template-columns: 1fr max-content;
-    align-items: center;
-    justify-self: end;
-    gap: 8px;
-  }
-
-  ul {
-    list-style: none;
-    display: inline;
-    padding: 0;
-    > li {
-      display: inline;
-      > .navlink {
-        border-radius: 4px;
-        background: #fff3;
-        padding: 4px 8px;
-        color: white;
-        text-decoration: none;
-        &.disabled {
-          opacity: 0.6;
-        }
-      }
-    }
-  }
-  img.avatar {
-    width: 32px;
-    aspect-ratio: 1;
-  }
-}
-
-main {
-  width: min(1300px, 100%);
-  display: grid;
-  grid-template-columns: 1fr min(700px, 100%) 1fr;
-  height: 100%;
-  #leftPane,
-  #rightPane {
-    position: sticky;
-    top: 56px;
-    height: max-content;
-  }
-  @media (width < 1300px) {
-    grid-auto-flow: row;
-    grid-template-columns: 1fr;
-  }
-}
-
-h1 {
-  margin: 32px 16px;
-  padding: 0;
-}
-
-hr {
-  border: none;
-  border-top: 1px solid #5554;
-  margin: 0px 16px;
-}
-
-.placeholder {
-  font-style: italic;
-  color: #555;
-  text-align: center;
-}
-
-.timelineReason {
-  background: #fee4;
-  border: 1px solid #3b005e44;
-  border-bottom: none;
-  border-radius: 8px 8px 0 0;
-  margin: 16px 16px -16px 16px;
-  padding: 8px;
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  align-items: center;
-  gap: 8px;
-
-  .icon {
-    font-size: 24px;
-  }
-  a {
-    text-decoration: none;
-    font-weight: bold;
-    color: inherit;
-  }
-
-  + article.note {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-}
-
-article.note {
-  background: #fee4;
-  border: 1px solid #3b005e44;
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 16px;
-
-  img.avatar {
-    width: 64px;
-    aspect-ratio: 1;
-  }
-
-  &.selected {
-    background: #ebf4;
-  }
-
-  .content {
-    font-size: 12pt;
-    padding: 4px 0;
-    .selected & {
-      font-size: 16pt;
-    }
-  }
-
-  .infoLine {
-    display: grid;
-    grid-template-columns: max-content 1fr max-content;
-    align-items: baseline;
-    margin-bottom: 4px;
-    gap: 8px;
-
-    .authorName {
-      font-weight: bold;
-    }
-    .authorHandle,
-    .timestamp {
-      font-size: 10pt;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-    a.timestamp {
-      color: inherit;
-      text-decoration: none;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .replyInfo a {
-    font-size: 10pt;
-    color: #555;
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .buttons {
-    margin-top: 8px;
-    padding: 0;
-    display: grid;
-    grid-auto-flow: column;
-    gap: 16px;
-    width: max-content;
-
-    button {
-      width: 24px;
-      font-size: 24px;
-      color: #3b005e44;
-      cursor: pointer;
-
-      &:disabled {
-        opacity: 0.5;
-      }
-
-      &.like.active {
-        color: #8c22d8;
-      }
-      &.dislike.active {
-        color: #c02e2e;
-      }
-      &.reshare.active {
-        color: #21a821;
-      }
-      &.reply.active {
-        color: #0761b6;
-      }
-    }
-  }
-}
-
-.alertbox {
-  border: 1px solid;
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
-  &.info {
-    border-color: #23f4;
-    background: #5673ff44;
-  }
-  p {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-button.icon {
-  border: none;
-  background: none;
-  aspect-ratio: 1;
-  margin: 0;
-  padding: 0;
-  &.active {
-    font-variation-settings: "FILL" 1;
-  }
-}
-
-a.icon {
-  color: inherit;
-  text-decoration: none;
-  font-size: 24px;
-}
-
-form {
-  border: 1px solid #3334;
-  background: #9892;
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
-  display: grid;
-  grid-auto-flow: row;
-  gap: 8px;
-  max-width: max-content;
-
-  label:has(+ input, + textarea) {
-    display: block;
-    font-size: 10pt;
-    color: #555;
-  }
-  input:not([type="checkbox"]),
-  textarea {
-    display: block;
-    border: 1px solid #3334;
-    border-radius: 8px;
-    margin: 8px 0;
-    padding: 8px;
-    font-family: inherit;
-    font-size: inherit;
-    color: inherit;
-    background: #fff;
-    width: min(60vw, 24em, calc(100% - 16px));
-  }
-  textarea {
-    resize: vertical;
-  }
-  button {
-    background: #3b005e;
-    color: #fff;
-    font-family: inherit;
-    font-size: inherit;
-    border-radius: 8px;
-    border: none;
-    width: 100%;
-    padding: 8px;
-    box-sizing: border-box;
-    cursor: pointer;
-    &:disabled {
-      opacity: 80%;
-      cursor: default;
-    }
-  }
-  .error {
-    background: #f004;
-    border: 1px solid #f007;
-    border-radius: 8px;
-    padding: 16px;
-    margin: 0;
-  }
-
-  &.noteReplyForm {
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-    margin-top: 8px;
-    max-width: 100%;
-    input:not([type="checkbox"]),
-    textarea,
-    button {
-      width: 100%;
-      box-sizing: border-box;
-    }
-  }
-}
-
-.fullProfile {
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
-  border: 1px solid #23f4;
-  background: #e6eaff44;
-
-  .basicInfo {
-    display: grid;
-    grid-template-columns: max-content 1fr max-content;
-    gap: 16px;
-
-    img.avatar {
-      width: 96px;
-      aspect-ratio: 1;
-    }
-    .displayName {
-      font-size: 16pt;
-      font-weight: bold;
-    }
-    .handle,
-    .joinedDate {
-      font-size: 10pt;
-    }
-  }
-}
-
-[hidden] {
-  display: none;
-}
+@import url(skeleton.css);
+@import url(note.css);
+@import url(form.css);
+@import url(profile.css);
+@import url(misc.css);