one post: add less to be safe

2023-09-30 15:31:18 -04:00 · 2023-09-30 15:31:18 -04:00 · 2e3f946bd5
commit 2e3f946bd5
parent 705a352d4e
1 changed files with 178 additions and 0 deletions
--- a/html/one-post.less
+++ b/html/one-post.less
@ -0,0 +1,178 @@
+@longan: rgb(var(--color-longan));
+@not-white: rgb(var(--color-notWhite));
+@not-black: rgb(var(--color-notBlack));
+@fg: rgb(var(--color-foreground));
+@bg: rgb(var(--color-background));
+
+@height: 20rem;
+
+* {
+  margin: 0;
+}
+
+hr {
+  border-color: rgb(191 186 181);
+  margin: 0 0.75rem;
+}
+
+.hrish {
+  background-color: @not-white;
+}
+
+#fake-main {
+  height: @height;
+  margin: -1rem 0;
+}
+
+#main {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: @height;
+  display: flex;
+  background-color: @bg;
+  flex-direction: column;
+}
+
+.bottom {
+  background: @not-white;
+  font-size: 0.875rem;
+  color: gray;
+  padding: 0.75rem;
+  width: 100%;
+  max-width: 100%;
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+  box-shadow: 0px 4px 5px rgba(25,25,25,.14),0px 1px 10px rgba(25,25,25,.12),0px 2px 4px rgba(0,0,0,.2);
+}
+
+.bottom-inner {
+  display: flex;
+  justify-content: space-between;
+  vertical-align: middle;
+}
+
+// V compromise V
+a {
+  text-decoration: none;
+}
+
+.comments {
+  width: max-content;
+  flex: none;
+}
+
+.interactions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.content {
+  background-color: white;
+  padding: 0 0.75rem;
+  display: flex;
+  min-height: min-content;
+  flex-grow: 1;
+  padding-top: 0.5rem;
+}
+
+.middle {
+  // V the main feed uses gap: 3rem V
+  height: 3rem;
+}
+
+.top {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  background-color: @not-white;
+  padding: 0.75rem;
+  box-shadow: 0px -4px 5px rgba(25,25,25,.14),0px -1px 10px rgba(25,25,25,.12),0px -2px 4px rgba(0,0,0,.2);
+}
+
+.top-info {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 0%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  line-height: 1;
+}
+
+.display-name {
+  max-width: 100%;
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 700;
+  color: @not-black;
+}
+
+.username {
+  color: rgb(104 102 100);
+}
+
+.posted {
+  display: block;
+  flex: none;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  // not doing the weird tabular-nums thing, i don't get it
+  color: rgb(130 127 124);
+}
+
+.headline {
+  padding: 0.75rem;
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+}
+
+.headline > a {
+  flex-grow: 1;
+  align-self: center;
+  overflow-wrap: break-word;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.headline > a > h1 {
+  color: black;
+  font-size: inherit;
+}
+
+.post-content {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.post-inner {
+  box-shadow: 0px 4px 5px rgba(0,0,0,.14),0px 1px 10px rgba(0,0,0,.12),0px 2px 4px rgba(0,0,0,.2);
+  z-index: -413;
+}
+
+.posts {
+  display: flex;
+  flex-direction: column;
+  //box-shadow: 0px 4px 5px rgba(0,0,0,.14),0px 1px 10px rgba(0,0,0,.12),0px 2px 4px rgba(0,0,0,.2);
+  gap: 2rem;
+  flex-grow: 1;
+}