mostly css

assets/dist/base.css

@@ -65,6 +65,10 @@ pre {
 	font-size: 1em;
 }
 
+pre {
+	max-width: 35rem;
+}
+
 small {
 	font-size: 80%;
 }
@@ -180,6 +184,8 @@ nav
 , nav *
 , footer
 , footer *
+, aside
+, aside *
 { all: unset
 ; margin: 0
 ; padding: 0
@@ -214,7 +220,52 @@ body {
 	display: none;
 }
 
+aside {
+	gap: 1.25rem;
+	justify-content: center;
+	margin-bottom: 3rem;
+}
+aside a {
+	flex-basis: 7rem;
+	justify-content: center;
+	border-radius: 0.125rem;
+	padding: 0.5rem 1rem;
+	border: 0.125rem solid var(--green1);
+}
+aside a:active,
+aside a:focus,
+aside a:hover {
+	background: var(--bg);
+	box-shadow:
+		0 0 0 0.125rem var(--bg)
+		, 0 0 0 0.25rem var(--green1)
+		;
+}
+aside a
+, aside a > span
+, aside a:any-link
+, aside a:any-link > span {
+	color: var(--green1);
+}
+aside a:any-link > span {
+	text-decoration: underline;
+}
 
+aside a.current {
+	border: 0.125rem dotted var(--orange2);
+}
+aside a.current
+, aside a.current > span {
+	color: var(--orange2);
+	cursor: unset;
+	text-decoration: unset;
+}
+aside a.current:active,
+aside a.current:focus,
+aside a.current:hover {
+	background: unset;
+	box-shadow: unset;
+}
 
 h1 {
 	margin: 0;
@@ -668,6 +719,23 @@ label {
 	}
 
 
+ul {
+	padding: 1rem 0;
+	margin: 0;
+}
+ul li {
+	list-style: none;
+	margin-left: 1rem;
+}
+ul li::before {
+	content: "–";
+	margin-left: -2rem;
+	padding-right: 0.5rem;
+	width: 2rem;
+	display: inline-block;
+	text-align: right;
+}
+
 .about {
 	gap: 3rem;
 	display: grid;
@@ -677,7 +745,8 @@ label {
 .about a {
 	border-radius: 0.125rem;
 }
-.about a[href^='https://dym.sh/'] {
+.about a[href^='https://dym.sh/']
+, .about a[href^='/'] {
 	color: var(--green1);
 }
 .about a:active,
@@ -704,11 +773,6 @@ label {
 .about p {
 	margin: 0;
 }
-.about ul {
-	padding-left: 0;
-	list-style: none;
-	padding: 1rem 0;
-}
 .col-2 {
 	columns: 2;
 }
@@ -723,17 +787,6 @@ label {
 .about ul: last-child {
 	padding-bottom: 0;
 }
-ul li {
-	margin-left: 1rem;
-}
-ul li::before {
-	content: "–";
-	margin-left: -2rem;
-	padding-right: 0.5rem;
-	width: 2rem;
-	display: inline-block;
-	text-align: right;
-}
 
 
 @media screen and (max-width: 600px) {

assets/dist/profile.css

@@ -1,3 +1,4 @@
+
 /*
 	GoToSocial
 	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
@@ -16,95 +17,174 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.profile {
+.page {
-	display: flex;
+	grid-template-columns: 1fr minmax(auto, 60rem) 1fr; /* fallback for lack of min() support */
-	gap: 1rem;
+	grid-template-columns: 1fr min(92%, 65rem) 1fr;
-}
-.profile .header {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	justify-content: flex-start;
-	width: 20rem;
-	word-break: break-all;
 }
 
-.profile .header > * {
+.profile {
+	padding: 0.5rem;
 	border-radius: var(--br);
 }
 
-.profile figure {
+.profile .column-split {
-	margin: 0 0 0.5rem 0;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+	}
+
+.profile .header {
+	background: var(--profile-bg);
 	border-radius: var(--br);
 	overflow: hidden;
-	display: flex;
+	margin-bottom: 1rem;
-	justify-content: space-between;
-	position: relative;
 }
-.profile figure img.bg {
+
+.profile .header .header-image {
+		position: relative;
+		padding-top: 33.33%;
+	}
+
+/* aspect-ratio 1/3 */
+
+.profile .header .header-image img {
 			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
 			width: 100%;
 			height: 100%;
-	z-index: 1;
+			-o-object-fit: cover;
 			   object-fit: cover;
+		}
+
+.profile .header {
+	--avatar-size: 8.5rem;
+	--name-size: 3rem;
+	--username-size: 2rem;
+
+	--overlap: calc(var(--avatar-size) - var(--name-size) - var(--username-size));
 }
 
-.profile figure img.avatar {
+/*
-	margin: 0.5rem;
+		Basic info container has the user's avatar, display- and username, and role
-	width: 5rem;
+		It's partially overlapped over the header image, by a negative margin-top
-	height: 5rem;
+	*/
-	z-index: 2;
+
-	object-fit: fill;
+.profile .header .basic-info {
+		position: relative;
+		display: grid;
+		box-sizing: border-box;
+		grid-template-columns: var(--avatar-size) auto 1fr;
+		grid-template-rows: var(--overlap) var(--name-size) auto;
+		grid-template-areas:
+			"avatar . ."
+			"avatar displayname displayname"
+			"avatar username role";
+
+		margin: 1rem;
+		margin-top: calc(-1 * var(--overlap));
+		gap: 0 1rem;
+	}
+
+.profile .header .basic-info .avatar {
+			grid-area: avatar;
+			height: var(--avatar-size);
+			width: var(--avatar-size);
+			border: 0.2rem solid var(--avatar-border);
 			border-radius: var(--br);
-}
+			overflow: hidden;
+		}
 
-.profile .header .user {
+/* prevents image extending beyond rounded borders */
-	background: var(--profile-bg);
-	display: flex;
-	flex-direction: column;
-	gap: 0.25rem;
-	padding: 1rem;
-}
 
-.profile .header .displayname {
+.profile .header .basic-info .avatar img {
-	line-height: 1.25rem;
+				height: 100%;
-	font-size: 1rem;
+				width: 100%;
-	font-weight: 600;
+				-o-object-fit: cover;
-}
+				   object-fit: cover;
+			}
 
-.profile .header .username {
+.profile .header .basic-info .displayname {
+			grid-area: displayname;
+			line-height: var(--name-size);
+			font-size: 1.5rem;
+			font-weight: bold;
+		}
+
+.profile .header .basic-info .username {
 			min-width: 0;
+			grid-area: username;
+			line-height: var(--username-size);
+
 			font-size: 1rem;
+			font-weight: bold;
 			color: var(--fg-accent);
 			-webkit-user-select: all;
 			        user-select: all;
-}
+		}
 
-.profile .header .role {
+.profile .header .basic-info .role {
 			background: var(--bg);
 			color: var(--fg);
+			border: 0.13rem solid var(--bg);
 
-	border: 0.075rem solid var(--bg);
+			grid-area: role;
-	border-radius: 0.25rem;
+			align-self: center;
-	margin: 0.5rem;
+			justify-self: start;
-	padding: 0.25rem;
+			border-radius: var(--br);
-	z-index: 2;
+			padding: 0.3rem;
-	line-height: 0.75em;
+
-	font-size: 0.75rem;
+			line-height: 1.1rem;
+			font-size: 0.9rem;
 			font-variant: small-caps;
-  align-self: flex-start;
+			font-weight: bold;
-}
+		}
 
-.profile .header .role.admin {
+.profile .header .basic-info .role.admin {
 				color: var(--role-admin);
 				border-color: var(--role-admin);
-}
+			}
 
-.profile .header .role.moderator {
+.profile .header .basic-info .role.moderator {
 				color: var(--role-mod);
 				border-color: var(--role-mod);
+			}
+
+@media screen and (max-width: 750px) {
+		.profile .header .basic-info {
+			grid-template-columns: auto 1fr;
+			grid-template-rows: var(--avatar-size) var(--name-size) auto;
+			grid-template-areas:
+				"avatar avatar"
+				"displayname displayname"
+				"username role";
+		}
+
+			.profile .header .basic-info .displayname {
+				font-size: 1.4rem;
+			}
 }
 
+.profile .col-header {
+	display: flex;
+	justify-content: start;
+	gap: 2rem;
+	align-items: center;
+
+	margin: 0;
+	background: var(--profile-bg);
+	border-top-left-radius: var(--br);
+	border-top-right-radius: var(--br);
+	padding: 0.75rem;
+}
+
+.profile .col-header h1, .profile .col-header h2 {
+		font-size: 1.2rem;
+		line-height: 1.3rem;
+		margin: 0;
+	}
+
 .profile .toots {
 	flex: 65 25rem;
 	display: flex;
@@ -116,79 +196,92 @@
 		display: grid;
 		grid-template-columns: auto 1fr;
 		gap: 1rem;
-}
+	}
 
 .profile .toots .col-header a {
 			justify-self: end;
-}
+		}
+
+.profile .toots .col-header .rss-icon {
+			display: block;
+			margin: -0.25rem 0;
+		}
+
+.profile .toots .col-header .rss-icon .fa {
+				font-size: 2rem;
+				-o-object-fit: contain;
+				   object-fit: contain;
+				vertical-align: middle;
+				color: var(--orange2);
+				/* can't size a single-color background, so we use a linear-gradient that's effectively white */
+				background: linear-gradient(to right, var(--white1) 100%, transparent 0) no-repeat center center;
+				background-size: 1.2rem 1.4rem;
+			}
 
 .profile .toots .toot {
-	border-radius: var(--br);
+		border-radius: 0;
-}
+	}
-.toot .info {
+
-	flex-direction: row;
+.profile .toots .toot .info {
-	gap: 1rem;
+			padding: 0.3rem 0.75rem;
-}
+		}
-.toot .info {
+
-	flex-direction: row;
+.profile .toots .toot:last-child {
-	gap: 1rem;
+			border-bottom-left-radius: var(--br);
-}
+			border-bottom-right-radius: var(--br);
+		}
 
 .profile .toots .backnextlinks {
 		display: flex;
 		justify-content: space-between;
-}
+	}
 
 .profile .toots .backnextlinks .next {
 			margin-left: auto;
+		}
+
+.profile .about-user {
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
 }
-
+.profile .about-user > * {
-.profile .col-header {
-	margin-bottom: -0.25rem;
-}
-
-
-.profile > * {
 	border-radius: var(--br);
 }
 
-.profile .fields {
+.profile .about-user .col-header {
+		margin-bottom: -0.25rem;
+	}
+
+.profile .about-user .fields {
 		background: var(--profile-bg);
 		display: grid;
-	grid-template-columns: 1fr 2fr;
+		grid-template: max-content 1fr;
-	padding: 0.5rem;
+		padding: 0 0.5rem;
-}
+	}
 
-.profile .fields > * {
+.profile .about-user .fields .field + .field {
-	padding: 0.5rem;
-}
-.profile .fields > b {
-	align-self: center;
-	justify-self: flex-end;
-	font-weight: 600;
-}
-.profile .fields > span + b,
-.profile .fields > time + b {
 				border-top: 0.1rem solid var(--gray2);
-	align-self: flex-start;
+			}
-	text-align: right;
-}
 
-.profile .rss-icon,
+.profile .about-user .bio {
-.profile .rss-icon img {
-	width: 20px;
-	height: 20px;
-}
-
-.profile .fields .flex,
-.profile .fields .flex * {
-	display: flex;
-	line-height: 1rem;
-	gap: 0.5rem;
-	align-items: center;
-}
-
-.profile .bio {
 		background: var(--profile-bg);
 		padding: 1rem;
+	}
+
+.profile .about-user .accountstats {
+		background: var(--bg-accent);
+		padding: 1rem;
+
+		display: grid;
+		grid-template-columns: auto auto;
+		gap: 0.5rem 1rem;
+	}
+.profile .about-user .accountstats > b {
+	justify-self: end;
+	font-weight: normal;
+}
+.profile .about-user .accountstats > b + * {
+	justify-self: start;
 }

assets/dist/settings-style.css

@@ -221,7 +221,7 @@ nav.menu-tree li.nested a.title {
 			padding-left: 1rem;
 			font-weight: normal;
 			color: var(--fg);
-			background: var(--gray3);
+			background: var(--gray4);
 		}
 
 nav.menu-tree li.nested a.title:focus {

assets/dist/status.css

@@ -495,10 +495,16 @@ a.plyr__control{text-decoration:none}
 .plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
 .plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
 .plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}
+.plyr--full-ui input[type=range]::-ms-track{color:#0000}
+.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
+.plyr--full-ui input[type=range]::-ms-fill-lower{background:#0000;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
+.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
+.plyr--full-ui input[type=range]::-ms-tooltip{display:none}
 .plyr--full-ui input[type=range]::-moz-focus-outer{border:0}
 .plyr--full-ui input[type=range]:focus{outline:0}
 .plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
 .plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
+.plyr--full-ui input[type=range]:focus-visible::-ms-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
 .plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}
 .plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}
 .plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}
@@ -522,6 +528,7 @@ a.plyr__control{text-decoration:none}
 .plyr__progress__buffer::-webkit-progress-bar{background:#0000}
 .plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}
 .plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}
+.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}
 .plyr--loading .plyr__progress__buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000}
 .plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)}
 .plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
@@ -533,8 +540,10 @@ a.plyr__control{text-decoration:none}
 .plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}
 .plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
 .plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
+.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
 .plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
 .plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
+.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
 .plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
 .plyr--video{overflow:hidden}
 .plyr--video.plyr--menu-open{overflow:visible}
@@ -554,8 +563,10 @@ a.plyr__control{text-decoration:none}
 .plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}
 .plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
 .plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
+.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
 .plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
 .plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
+.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
 .plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)}
 .plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}
 .plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}
@@ -601,62 +612,80 @@ main {
 .thread {
 	display: flex;
 	flex-direction: column;
-	gap: 1rem;
 	border-radius: var(--br);
 }
 .toot {
 	background: var(--toot-bg);
+	box-shadow: var(--boxshadow);
+	border: var(--boxshadow-border);
 	border-radius: var(--br);
-	display: flex;
+	position: relative;
-	flex-direction: column;
+	margin-bottom: var(--br);
-	padding: 1rem;
+	padding-top: 0.75rem;
-	gap: 0.75rem;
 }
 .toot a {
+		position: relative;
+		z-index: 1;
 		color: inherit;
 		text-decoration: none;
 	}
-.toot .author {
+.toot .author > a {
-		display: flex;
+		padding: 0 0.75rem;
-		flex-direction: row;
+		display: grid;
-		flex-wrap: nowrap;
+		grid-template-columns: 3.5rem 1fr auto;
-		gap: 0.75rem;
+		grid-template-rows: auto auto;
+		grid-template-areas:
+			"avatar display date"
+			"avatar user .";
+		gap: 0 0.5rem;
 	}
-.toot .author .avatar {
+.toot .author > a .avatar {
-		height: 3rem;
+			grid-area: avatar;
-		width: 3rem;
+			height: 3.5rem;
+			width: 3.5rem;
 			-o-object-fit: cover;
 			   object-fit: cover;
+
+			border: 0.15rem solid var(--avatar-border);
 			border-radius: var(--br);
 			overflow: hidden;
 		}
-.toot .author .avatar img {
+/* hides corners from img overflowing */
+.toot .author > a .avatar img {
 				height: 100%;
 				width: 100%;
 				-o-object-fit: cover;
 				   object-fit: cover;
+				background: var(--bg);
 			}
+.toot .author > a .displayname, .toot .author > a .username {
+			justify-self: start;
+			align-self: start;
 		
-.toot .author .user-info {
+			max-width: 100%;
-		display: flex;
-		flex-direction: column;
-		flex-wrap: nowrap;
-		justify-content: space-around;
-	}
-.toot .author .displayname,
-.toot .author .username {
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
-.toot .author .displayname {
+.toot .author > a .displayname {
+			grid-area: display;
 			font-weight: bold;
+			font-size: 1rem;
+			line-height: 1.3rem;
+			/* margin-top: -0.5rem; */
 		}
-.toot .author .username {
+.toot .author > a .username {
+			grid-area: user;
 			color: var(--link-fg);
+			font-size: 1rem;
+			line-height: 1.3rem;
+		}
+.toot .author > a .timestamp {
+			grid-area: date;
+			color: var(--fg-reduced);
 		}
-
 .toot .body {
+		padding: 0.5rem 0.75rem;
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
@@ -672,6 +701,16 @@ main {
 			white-space: nowrap;
 			cursor: pointer;
 		}
+.toot .text {
+		margin: 0;
+		grid-row: span 1;
+		grid-column: 1 / span 3;
+
+		position: relative;
+		z-index: 2;
+
+		width: 100%;
+	}
 .toot .text details > summary {
 			padding-bottom: 0.5rem;
 		}
@@ -687,8 +726,8 @@ main {
 			word-break: break-word;
 		}
 .toot .text .content blockquote {
-				padding: 0.25rem 0 0.25rem 0.5rem;
+				padding: 0.5rem 0 0.5rem 0.5rem;
-				border-left: 0.25rem solid var(--border-accent);
+				border-left: 0.2rem solid var(--border-accent);
 				margin: 0;
 				font-style: italic;
 			}
@@ -699,20 +738,19 @@ main {
 				background-color: var(--gray2);
 			}
 .toot .text .content code {
-				padding: 0.25rem 0.5rem;
+				padding: 0.25rem;
 				border-radius: var(--br-inner);
 			}
 .toot .text .content pre {
 				display: flex;
 				border-radius: var(--br);
-				overflow: hidden;
+				padding: 0.5rem;
-				margin: 0;
 			}
 .toot .text .content pre code {	
-					padding: 0.25rem 0.5rem;
+					padding: 0.5rem;
 					white-space: pre;
 					border-radius: 0;
-					overflow: auto;
+					overflow-x: auto;
 					-webkit-overflow-scrolling: touch;
 				}
 .toot .text .content img {
@@ -744,7 +782,7 @@ main {
 			height: 100%;
 			width: 100%;
 			box-sizing: border-box;
-			border: 0.15rem solid var(--gray2);
+			border: 0.15rem solid var(--gray1);
 			border-radius: var(--br);
 			position: relative;
 			overflow: hidden;
@@ -821,7 +859,7 @@ main {
 					width: 100%;
 					-o-object-fit: contain;
 					   object-fit: contain;
-					background: var(--gray2);
+					background: var(--gray1);
 				}
 .toot .media.single .media-wrapper {
 			grid-column: span 2;
@@ -835,33 +873,36 @@ main {
 			-o-object-fit: cover;
 			   object-fit: cover;
 		}
-.toot .meta {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		gap: 0.75rem;
-		align-items: flex-start;
-		justify-content: space-between;
-}
-
 .toot .info {
 		display: flex;
-		flex-direction: column;
+		background: var(--toot-info-bg);
-		flex-wrap: wrap;
-		gap: 0.5rem;
-		line-height: 1rem;
 		color: var(--fg-reduced);
-		align-items: flex-end;
+		border-top: 0.15rem solid var(--toot-info-border);
-}
+		padding: 0.5rem 0.75rem;
+	}
+.toot .info div, .toot .info time {
+			padding-right: 1rem;
+		}
 .toot .info .stats {
 			display: flex;
-		flex-direction: row;
+		}
+.toot .info{
+
+		grid-column: span 3;
 		flex-wrap: wrap;
-		gap: 1rem;
-		line-height: 1rem;
-		color: var(--fg-reduced);
 }
-.stats
+.toot .toot-link {
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		overflow: hidden;
+		text-indent: 100%;
+		white-space: nowrap;
+
+		position: absolute;
+		z-index: 0;
+	}
 .toot:first-child {
 		/* top left, top right */
 		border-top-left-radius: var(--br);
@@ -875,6 +916,7 @@ main {
 	}
 .toot.expanded {
 		background: var(--toot-focus-bg);
+		padding-bottom: 0;
 	}
 .toot.expanded .info {
 			background: var(--toot-focus-info-bg);

template/about.tmpl

@@ -67,12 +67,14 @@
  		<li><a target="_blank" href="mailto:re@dym.sh">email</a>/<a target="_blank" href="/pgp.txt">pgp</a></li>
 		<li><a target="_blank" href="https://dym.sh/@dym">microblog</a></li>
 		<li><a target="_blank" href="https://lemmy.world/u/dym_sh">lemmy</a></li>
+		<li><a target="_blank" href="https://indieweb.org/User:Dym.sh">indieweb</a></li>
+		<li><a target="_blank" href="https://dym-sh.tumblr.com">tumblr</a></li>
+
 		<li><a target="_blank" href="https://figma.com/@dym_sh">figma</a></li>
 		<li><a target="_blank" href="https://layers.to/dym_sh">layers</a></li>
 		<li><a target="_blank" href="https://codepen.io/dym-sh">codepen</a></li>
 		<li><a target="_blank" href="https://userstyles.world/user/dym-sh">userstyles</a></li>
-		<li><a target="_blank" href="https://github/dym-sh">github</a></li>
+		<li><a target="_blank" href="https://github.com/dym-sh">github</a></li>
-		<li><a target="_blank" href="https://indieweb.org/User:Dym.sh">indieweb</a></li>
 	</ul>
 
 </main>

template/profile.tmpl

@@ -28,13 +28,11 @@
 				<img src="{{.account.Header}}" class="bg" alt="">
 				<img src="{{.account.Avatar}}" class="avatar" alt="">
 				{{ if and (.account.Role) (ne .account.Role.Name "user") }}
-				<figcaption class="role {{ .account.Role.Name }}">
+				<figcaption class="role {{ .account.Role.Name }}">{{
-					{{ if and (.account.Role) (eq .account.Role.Name "admin") }}
+					if and (.account.Role) (eq .account.Role.Name "admin")
-						webmain
+					}}webmain{{
-					{{ else }}
+					else }}{{ .account.Role.Name }}{{ end
-						{{ .account.Role.Name }}
+				}}</figcaption>
-					{{ end }}
-				</figcaption>
 				{{ end }}
 			</figure>
 

template/status.tmpl

@@ -28,7 +28,7 @@
 				{{.Account.Username}}
 				{{end}}
 			</span>
-			<span class="username">@{{.Account.Username}}</span>
+			<span class="username">@{{.Account.Username}}</div>
 		</span>
 	</a>