1 files changed, 163 insertions, 0 deletions
diff --git a/treed.css b/treed.css
new file mode 100644
index 0000000..b7dbc09
--- /dev/null
+++ b/treed.css
@@ -0,0 +1,163 @@
+* {
+	box-sizing: border-box;
+	margin: 0;
+	font-family: sans-serif;
+	line-height: 1.5;
+
+	/* ripping off masto */
+	--border-color: #313144;
+	--background: #181821;
+	--background2: #20202c;
+	--foreground: #fff;
+	--foreground2: #c4c4de;
+	--links: #9494ff;
+}
+
+body {
+	max-width: 80ch;
+	padding-bottom: 100vh; /* don't jump around when collapsing people near the bottom */
+	margin: 1em auto;
+	background: var(--background);
+	color: var(--foreground);
+}
+
+.acct {
+	margin-top: .75em;
+	margin-bottom: .75em;
+	border: 1px solid var(--border-color);
+	background: var(--background2);
+}
+
+.acct__header {
+	display: flex;
+	align-items: center;
+
+	/* TODO
+	background: #fff;
+	position: sticky;
+	top: 0;
+	*/
+	border-bottom: 1px solid var(--border-color);
+	margin-bottom: -1px;
+
+	cursor: pointer;
+	user-select: none;
+}
+
+.acct__header .acct__username {
+	margin-left: 1em;
+
+	/* Mimic the default <details> style. */
+	display: list-item;
+	list-style: disclosure-closed inside;
+}
+
+.acct[open] .acct__header .acct__username {
+	list-style: disclosure-open inside;
+}
+
+.acct__counts {
+	margin-left: auto;
+	margin-right: 1ch;
+}
+
+.avatar {
+	width:  3em;
+	height: 3em;
+	border: 1px solid var(--border-color);
+	margin: -1px;
+	background: var(--background2);
+}
+
+.avatar-reblog {
+	margin-right: 8px;
+	border-radius: 8px;
+}
+
+pre {
+	white-space: pre-wrap;
+}
+
+.toot {
+	background: var(--background);
+	border: 1px solid var(--border-color);
+	/* padding: .2em 1em; */
+	padding: 0;
+	overflow: auto;
+	margin: .75em;
+}
+
+.toot__body {
+	margin: .2em 1em;
+}
+
+.toot__spoiler {
+	cursor: pointer;
+	display: list-item inline;
+	list-style: disclosure-closed inside;
+	margin-left: 1em;
+}
+
+.toot__spoiler_open {
+	list-style: disclosure-open inside;
+}
+
+
+.flex { display: flex; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-grow { flex-grow: 1; }
+.flex-basis-0 { flex-basis: 0; }
+.flex-column { flex-direction: column; }
+.flex-align-center { align-items: center; }
+
+a { color: var(--links); }
+
+.px-1em {
+	padding-left: 1em;
+	padding-right: 1em;
+}
+.pr-1em { padding-right: 1em; }
+.py-025em {
+	padding-top: .25em;
+	padding-bottom: .25em;
+}
+.pt-1em { padding-top: 1em; }
+
+.mb-05em { margin-bottom: .5em; }
+
+.border-bottom { border-bottom: 1px solid var(--border-color); }
+.border-bottom.border-sunk { margin-bottom: -1px; }
+
+.fg2 { color: var(--foreground2); }
+
+/* This class is already defined by, well, Material Icons.
+ * I'm just making some small changes. */
+.material-icons {
+	font-size: inherit !important;
+	line-height: inherit !important;
+	user-select: none;
+	vertical-align: bottom;
+}
+
+.link-stealth { text-decoration: none; }
+.link-stealth:hover { text-decoration: underline; }
+
+hr { border: 1px solid var(--border-color); }
+
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+
+.cursor-pointer { cursor: pointer; }
+
+.form-label {
+	display: block;
+	font-size: .8rem;
+}
+
+.mw-40ch {
+	max-width: 40ch;
+	margin: auto;
+}
+.w-100 { width: 100%; }
+
+img { max-width: 100%; }