fixed profile-banner

assets/dist/_colors.css

@@ -2,7 +2,7 @@
 :root {
 	--white1: #fff;
 	--white2: #777;
-	--gray1: #111;
+	--gray1: #1c1c1c;
 	--gray2: #222;
 	--gray3: #333;
 	--gray4: #444;
@@ -13,16 +13,16 @@
 	--blue1: #3a9fde;
 	--blue2: #66befe;
 	--blue3: #82d8fd;
-	--error1: #860000;
+	--error1: #ff5555;
-	--error2: #ff9796;
+	--error2: #fddec6;
 	--error3: #dd2c2c;
 	--error-link: #01318C;
-	--green1: #94E749;
+	--green1: #baf39e;
 	--info-fg: var(--gray1);
 	--info-bg: #b3ddff;
 	--info-link: var(--error-link);
 	--fg: var(--white1);
-	--bg: var(--gray2);
+	--bg: var(--gray1);
 	--bg-trans: rgba(77, 78, 86, 0.62);
 	--bg-accent: var(--gray3);
 	--fg-accent: var(--blue3);

assets/dist/base.css

@@ -30,9 +30,9 @@
 }
 
 html {
-	-o-tab-size: 2;
+	font-size: 20px;
+	line-height: 1.25;
 	tab-size: 2;
-	line-height: 1.15;
 	-webkit-text-size-adjust: 100%;
 }
 
@@ -97,7 +97,7 @@ select,
 textarea {
 	font-family: inherit;
 	font-size: 100%;
-	line-height: 1.15;
+	line-height: 1.25;
 	margin: 0;
 }
 
@@ -176,34 +176,54 @@ body {
 		'Apple Color Emoji',
 		'Segoe UI Emoji';
 }
+nav
+, nav *
+, footer
+, footer *
+{ all: unset
+; margin: 0
+; padding: 0
+; display: flex
+; flex-wrap: wrap
+; box-sizing: border-box
+; font-family
+	: 'Kadwa'
+	, 'DejaVu Sans'
+	, 'PT Sans'
+	, 'Helvetica'
+	, 'Helvetica Rounded'
+	, sans-serif
+}
+nav
+{ padding : 3rem 1rem
+; justify-content: center
+}
 
 body {
-	padding: 1rem;
+	padding: 0 1rem;
 	margin: 0 auto;
-
 	min-height: 100vh;
 	max-width: 60rem;
-	gap: 1rem;
-
 	line-height: 1.5em;
-
 	display: flex;
 	flex-direction: column;
-
+	justify-content: flex-start;
-  justify-content: space-evenly;
 }
 
 .hidden {
 	display: none;
 }
 
+
+
 h1 {
 	margin: 0;
 	line-height: 2.4rem;
 }
 
-a {
+a:any-link {
-  transition: all 0.25s ease-out;
+	cursor: pointer;
+	transition: box-shadow 0.25s ease-out;
 	color: var(--link-fg);
 }
 
@@ -449,82 +469,77 @@ hr {
 }
 
 footer {
-	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
 	padding: 3rem 1rem;
-	gap: 2rem;
+	align-content: flex-end;
+	flex-grow: 1;
+	flex-direction: row;
 }
-footer *
+.round
-{	display: flex }
-footer .round
 { border-radius: 999px }
-footer .bg-icon
+.bg-icon
-{ background-image : url( '/button-gradient.svg' )
+{ background-image :
-                   , url('/icon.png') !important
+		url( '/button-gradient.svg' )
+	, url('/icon.png')
+	!important
 }
 footer img
-{ max-width : 100vw
+{ max-width: 100vw
-; overflow : hidden
+; overflow: hidden
-}
-footer .buttons
-{ gap : 1rem
-; padding : 1rem
-; background : white
-; flex-wrap : nowrap
 }
 
-footer .buttons img
+.red { --b: #ff5555 }
-{ height : 2rem }
+.yellow { --b: #f4e7a3 }
+.green	{ --b: #baf39e }
+.blue { --b: #82d8fd }
+.rose { --b: #fddec6 }
+.teal { --b: #85F3CF }
+.orange { --b: #ffbf57 }
+.pink { --b: #FFA6FF }
+.gray { --b: #ccc }
 
-footer .buttons > *
+.buttons
-{ height : 2rem
+{ gap: 1rem
-; min-width : 2rem
+; padding: 1rem
+; background: white
+; flex-wrap: nowrap
 }
 
-footer .buttons > a:any-link
+.buttons img
+{ height: 2rem }
+
+.buttons > *
+{ height: 2rem
+; min-width: 2rem
+}
+
+.buttons > a:any-link
 { background :
 	var( --b, #ccc )
 	url( '/button-gradient.svg' )
 	50% 50% no-repeat
-; background-size : cover
+; background-size: cover
 ; box-shadow
 	: inset 0 0 0 0.125rem #fff0
 	, 0 0 0 0.125rem #0000
 }
 
-footer .buttons > a:any-link:is( :hover, :focus, :active )
+.buttons > a:any-link:hover
+, .buttons > a:any-link:focus
+, .buttons > a:any-link:active
 { box-shadow
 	: inset 0 0 0 0.125rem #fff
-    , 0 0 0 0.125rem var( --b, #ccc )
+	, 0 0 0 0.125rem var( --b, #808080 )
 }
 
-footer .buttons .group
+.buttons .group
-{ padding : 0 }
+{ padding: 0 }
 
-footer .buttons.round > *
+.buttons.round > *
-{ border-radius : 999px }
+{ border-radius: 999px }
 
 
-@media screen and (max-width: 600px) {
-	header {
-		text-align: center;
-	}
-
-	footer {
-		grid-template-columns: 1fr;
-	}
-
-		footer div {
-			text-align: initial;
-			width: 100%;
-		}
-
-	section.apps .applist {
-		grid-template-columns: 1fr;
-	}
-}
-
 .emoji {
 	width: 1.45em;
 	height: 1.45em;
@@ -652,20 +667,90 @@ label {
 		color: var(--fg);
 	}
 
+
 .about {
-	display: flex;
+	gap: 3rem;
-	flex-direction: column;
+	display: grid;
-	gap: 1rem;
+	grid-template-columns: 10rem 1fr;
+	align-items: baseline;
+}
+.about a {
+	border-radius: 0.125rem;
+}
+.about a[href^='https://dym.sh/'] {
+	color: var(--green1);
+}
+.about a:active,
+.about a:focus,
+.about a:hover {
+	background: var(--bg);
+	box-shadow:
+		0 0 0 0.125rem var(--bg)
+		, 0 0 0 0.25rem var(--fg)
+		,	0 0 0 0.5rem var(--bg);
 }
 
-.about h2 {
+.about h1,
-		margin: 2rem 0 0 0;
+.about h2,
-	}
+.about h3 {
+	margin: 0;
+	text-align: right;
+	font-size: 1rem;
+	color: var(--orange2);
+	font-weight: 500;
+}
 
 .about ul,
 .about p {
 	margin: 0;
+}
+.about ul {
+	padding-left: 0;
+	list-style: none;
+	padding: 1rem 0;
+}
+.col-2 {
+	columns: 2;
+}
+.about h1 + ul,
+.about h2 + ul,
+.about h3 + ul {
+	padding-top: 0;
+}
+.about ul + h1,
+.about ul + h2,
+.about ul + h3,
+.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) {
+	.about {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
 	}
+	.about h2 {
+		align-content: flex-start;
+	}
+}
+@media screen and (max-width: 1000px) {
+	.about .col-2.tablet-col-1 {
+		columns: 1;
+	}
+}
 
 .account-card {
 	display: inline-grid;

assets/dist/profile.css

@@ -16,159 +16,94 @@
 	along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
 
-.page {
-	grid-template-columns: 1fr minmax(auto, 60rem) 1fr; /* fallback for lack of min() support */
-	grid-template-columns: 1fr min(92%, 65rem) 1fr;
-}
-
 .profile {
-	padding: 0.5rem;
-	border-radius: var(--br);
-}
-
-.profile .column-split {
 	display: flex;
-		flex-wrap: wrap;
 	gap: 1rem;
-	}
+}
-
 .profile .header {
-	background: var(--profile-bg);
+	display: flex;
-	border-radius: var(--br);
+	flex-direction: column;
-	overflow: hidden;
+	gap: 1rem;
-	margin-bottom: 1rem;
+	justify-content: flex-start;
+	width: 20rem;
+	word-break: break-all;
 }
 
-.profile .header .header-image {
+.profile .header > * {
+	border-radius: var(--br);
+}
+
+.profile figure {
+	margin: 0 0 0.5rem 0;
+	border-radius: var(--br);
+	overflow: hidden;
+	display: flex;
+	justify-content: space-between;
 	position: relative;
-		padding-top: 33.33%;
+}
-	}
+.profile figure img.bg {
-
-/* aspect-ratio 1/3 */
-
-.profile .header .header-image img {
 	position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
 	width: 100%;
 	height: 100%;
-			-o-object-fit: cover;
+	z-index: 1;
 	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 {
-		Basic info container has the user's avatar, display- and username, and role
+	margin: 0.5rem;
-		It's partially overlapped over the header image, by a negative margin-top
+	width: 5rem;
-	*/
+	height: 5rem;
-
+	z-index: 2;
-.profile .header .basic-info {
+	object-fit: fill;
-		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  stats "
-			" avatar  username     role         stats ";
-
-		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;
+}
-		}
 
-/* prevents image extending beyond rounded borders */
+.profile .header .user {
-
+	background: var(--profile-bg);
-.profile .header .basic-info .avatar img {
+	display: flex;
-				height: 100%;
+	flex-direction: column;
-				width: 100%;
+	gap: 0.25rem;
-				-o-object-fit: cover;
+	padding: 1rem;
-				object-fit: cover;
+}
-			}
-
-.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);
 
+.profile .header .displayname {
+	line-height: 1.25rem;
+	font-size: 1rem;
+	font-weight: 600;
+}
+
+.profile .header .username {
+	min-width: 0;
 	font-size: 1rem;
-			font-weight: bold;
 	color: var(--fg-accent);
 	-webkit-user-select: all;
 	user-select: all;
-		}
+}
 
-.profile .header .basic-info .role {
+.profile .header .role {
 	background: var(--bg);
 	color: var(--fg);
 
-			border: 0.1rem 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.25rem 0.5rem 0.35rem 0.5rem;
+	line-height: 0.75em;
-			line-height: 0.75rem;
 	font-size: 0.75rem;
 	font-variant: small-caps;
-		}
+  align-self: flex-start;
-
-.profile .header .basic-info .role.admin {
-				color: var(--role-admin);
-				border-color: var(--role-admin);
-			}
-
-.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        "
-				" stats        stats       ";
-		}
-
-			.profile .header .basic-info .displayname {
-				font-size: 1.4rem;
-			}
 }
 
-.profile .col-header h1, .profile .col-header h2 {
+.profile .header .role.admin {
-		font-size: 1.2rem;
+	color: var(--role-admin);
-		line-height: 1.3rem;
+	border-color: var(--role-admin);
-		margin: 0;
+}
-	}
+
+.profile .header .role.moderator {
+	color: var(--role-mod);
+	border-color: var(--role-mod);
+}
 
 .profile .toots {
 	flex: 65 25rem;
@@ -181,102 +116,79 @@
 	display: grid;
 	grid-template-columns: auto 1fr;
 	gap: 1rem;
-	}
+}
 
 .profile .toots .col-header a {
 	justify-self: end;
-		}
+}
-
-.profile .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);
-	}
+}
 .toot .info {
 	flex-direction: row;
 	gap: 1rem;
-	}
+}
+.toot .info {
+	flex-direction: row;
+	gap: 1rem;
+}
 
 .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 .about-user .col-header {
+.profile .fields {
-		margin-bottom: -0.25rem;
-	}
-
-.profile .about-user .fields {
 	background: var(--profile-bg);
 	display: grid;
-		grid-template-columns: auto auto;
+	grid-template-columns: 1fr 2fr;
 	padding: 0.5rem;
-	}
+}
 
-.profile .about-user .fields > * {
+.profile .fields > * {
 	padding: 0.5rem;
-	}
+}
-.profile .about-user .fields > b {
+.profile .fields > b {
 	align-self: center;
 	justify-self: flex-end;
-			}
+	font-weight: 600;
-.profile .about-user .fields > span {
+}
-			}
+.profile .fields > span + b,
-.profile .about-user .fields > span + b {
+.profile .fields > time + b {
 	border-top: 0.1rem solid var(--gray2);
-			}
+	align-self: flex-start;
+	text-align: right;
+}
 
-.profile .about-user .bio {
+.profile .rss-icon,
+.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 .accountstats {
-		grid-area: stats;
-		display: grid;
-		grid-auto-flow: column;
-		grid-template: repeat(2, 1fr) / repeat(4, auto);
-		gap: 0 1rem;
-		align-self: center;
-	}
-
-.profile .accountstats > * {
-		padding: 0.5rem;
-		justify-self: center;
-	}
-
-.profile .accountstats > *,
-.profile .accountstats > * > * {
-		justify-content: center;
-		text-align: center;
-		display: flex;
-		gap: 0.25rem;
-		line-height: 20px;
-	}
-
-.profile .accountstats > b {
-	border-bottom: 0.1rem solid var(--gray2);
 }

assets/dist/status.css

@@ -495,16 +495,10 @@ 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}
@@ -528,7 +522,6 @@ 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)}
@@ -540,10 +533,8 @@ 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}
@@ -563,10 +554,8 @@ 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%}

template/about.tmpl

@@ -18,71 +18,61 @@
 */ -}}
 {{ template "header.tmpl" .}}
 <main class="about">
-	<h1>fediverse</h1>
+	<h1>/about</h1>
-	<div>
-		{{.instance.Description | noescape}}
-	</div>
 
-	<h2>social profiles</h2>
+	<p>Personal homepage of <a href="https://dym.sh/self/">Dym Sohin</a>, a professional Web/App/Ui Developer
-	<ul>
-		<li><a href="https://dym.sh/@dym">microblog</a></li>
-		<li><a href="https://lemmy.world/u/dym_sh">lemmy</a></li>
-		<li><a href="https://figma.com/@dym_sh">figma</a></li>
-		<li><a href="https://codepen.io/dym-sh">codepen</a></li>
-		<li><a href="https://indieweb.org/User:Dym.sh">indieweb</a></li>
-		<li><a href="mailto:re@dym.sh">email</a></li>
-	</ul>
-
-	<h2>server software</h2>
-	<ul>
-		<li><a href="https://gotosocial.org" target="_blank">GoToSocial</a></li>
-		<li>official <a href="https://github.com/superseriousbusiness/gotosocial" target="_blank">source code</a></li>
-		<li>my <a href="https://source.garden/styles/gts-web/" target="_blank">custom templates</a></li>
-	</ul>
-
-	<h2>features</h2>
-	<ul>
-		<li>
-			Registration is
-			{{if .instance.Registrations}}
-			enabled{{if .instance.ApprovalRequired}}, but requires admin approval{{end}}.
-			{{else}}
-			disabled.
-			{{end}}
-		</li>
-		{{if .instance.Configuration.Accounts.AllowCustomCSS}}
-		<li>
-			Users are allowed to set <a href="https://docs.gotosocial.org/en/latest/user_guide/custom_css/"
-				target="_blank" rel="noopener noreferrer">Custom CSS</a> for their profiles.
-		</li>
-		{{end}}
-		<li>
-			Toots can contain up to {{.instance.Configuration.Statuses.MaxCharacters}} characters and
-			{{.instance.Configuration.Statuses.MaxMediaAttachments}} media attachments.
-		</li>
-		<li>
-			Polls can have up to {{.instance.Configuration.Polls.MaxOptions}} options, with
-			{{.instance.Configuration.Polls.MaxCharactersPerOption}} characters each.
-		</li>
-	</ul>
-
-	<h2>moderated servers</h2>
-	<p>
-		ActivityPub instances exchange (federate) data with other servers, including accounts and toots.
-		This can be prevented for specific domains by suspending them. None of their content is stored,
-		and interaction with their users is blocked both ways.</br>
-		{{if .blocklistExposed}}
-		<a href="/about/suspended">View the list of suspended domains</a>
-		{{else}}
-		This instance does not publically share this list.
-		{{end}}
 	</p>
 
-	<h2>stats</h2>
+	<h2>(self-imposed)<br>terms&nbsp;of&nbsp;service</h2>
 	<ul>
-		<li>Users: <span class="count">{{.instance.Stats.user_count}}</span></li>
+		<li>no hate</li>
-		<li>Posts: <span class="count">{{.instance.Stats.status_count}}</span></li>
+		<li>no drama</li>
-		<li>Federates with: <span class="count">{{.instance.Stats.domain_count}}</span> instances</li>
+		<li>no bullshit</li>
+	</ul>
+
+	<h2>content license</h2>
+	<section>
+		<p>Unless noted otherwise,</p>
+		<ul>
+			<li>texts, pictures, and audio/visual media are distributed under
+				<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>
+			</li>
+			<li>code snippets are distributed under
+				<a href="https://spdx.org/licenses/0BSD.html" target="_blank">0BSD</a>
+			</li>
+		</ul>
+		<p>(regular use within fediverse and blogosphere already complies with those by default)
+		</p>
+		<p>you can <a href="https://dym.sh/contacts/">contact</a> me for other uses (i.e. commercial distribution)
+		</p>
+	</section>
+
+	<h2>fediverse</h2>
+	<ul class="col-2 tablet-col-1">
+		<li>server runs on <a href="https://gotosocial.org" target="_blank">GoToSocial</a></li>
+		<li>see official <a href="https://github.com/superseriousbusiness/gotosocial" target="_blank">source code</a> repo</li>
+		<li>also applied my <a href="https://source.garden/styles/gts-web/" target="_blank">custom templates</a></li>
+		<li>posts can contain up to {{.instance.Configuration.Statuses.MaxCharacters}} characters and
+			{{.instance.Configuration.Statuses.MaxMediaAttachments}} media attachments
+		</li>
+		<li>polls can have up to {{.instance.Configuration.Polls.MaxOptions}} options, with
+			{{.instance.Configuration.Polls.MaxCharactersPerOption}} characters each
+		</li>
+		<li>federating with <span class="count">{{.instance.Stats.domain_count}}</span> instances</li>
+		<li>list of <a href="/about/suspended" target="_blank">suspended domians</a></a>
+	</ul>
+
+	<h2>social profiles</h2>
+	<ul class="col-2">
+ 		<li><a target="_blank" href="mailto:re@dym.sh">email</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://figma.com/@dym_s h">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://indieweb.org/User:Dym.sh">indieweb</a></li>
 	</ul>
 
 </main>

template/header.tmpl

@@ -73,3 +73,18 @@
 </head>
 
 <body>
+
+<nav class="c">
+  <div class="buttons round">
+    <a href="/graphics/" class="red" title="graphics"><span class="hidden">graphics</span>
+    </a>
+    <a href="/photos/" class="yellow" title="photos"><span class="hidden">photos</span>
+    </a>
+    <a href="/comics/" class="green" title="comics"><span class="hidden">comics</span>
+    </a>
+    <a href="/code/" class="blue" title="code"><span class="hidden">code</span>
+    </a>
+    <a href="/notes/" class="rose" title="notes"><span class="hidden">notes</span>
+    </a>
+  </div>
+</nav>

template/profile.tmpl

@@ -20,79 +20,67 @@
 {{ template "header.tmpl" .}}
 
 <main class="profile">
+
 	<div class="header">
-		<div class="header-image">
+
-			{{ if .account.Header }}
+		<section class="user">
-			<img src="{{.account.Header}}" alt="" />
+			<figure>
-			{{ end }}
+				<img src="{{.account.Header}}" class="bg" alt="">
-		</div>
+				<img src="{{.account.Avatar}}" class="avatar" alt="">
-		<div class="basic-info" aria-hidden="true">
-			<a class="avatar" href="{{.account.Avatar}}">
-				<img src="{{.account.Avatar}}" alt="">
-			</a>
-			<span class="displayname text-cutoff">
-				{{if .account.DisplayName}}
-				{{emojify .account.Emojis (escape .account.DisplayName)}}
-				{{else}}
-				{{.account.Username}}
-				{{end}}
-			</span>
-			<span class="username text-cutoff">@{{.account.Username}}@{{.instance.AccountDomain}}</span>
-			{{- /* Only render account role if 1. it's present and 2. it's not equal to the standard 'user' role */ -}}
 				{{ if and (.account.Role) (ne .account.Role.Name "user") }}
-			<div class="role {{ .account.Role.Name }}">
+				<figcaption class="role {{ .account.Role.Name }}">
 					{{ if and (.account.Role) (eq .account.Role.Name "admin") }}
 						webmain
 					{{ else }}
 						{{ .account.Role.Name }}
 					{{ end }}
-			</div>
+				</figcaption>
 				{{ end }}
+			</figure>
 
-			<div class="accountstats">
+			<div class="displayname">
-				<b>joined</b><time datetime="{{.account.CreatedAt}}">{{.account.CreatedAt | timestampVague}}</time>
+				{{if .account.DisplayName}}
-				<b>posts</b><span>
+				{{emojify .account.Emojis (escape .account.DisplayName)}}
-					{{ if .rssFeed }}
+				{{else}}
-					<a href="{{ .rssFeed }}" class="rss-icon" aria-label="RSS feed">
+				{{.account.Username}}
-						<img src="/rss.svg" width="20" height="20">
+				{{end}}
-					</a>
-					{{ end }}
-					<span>{{.account.StatusesCount}}</span>
-				</span>
-				<b>followers</b><span>{{.account.FollowersCount}}</span>
-				<b>follows</b><span>{{.account.FollowingCount}}</span>
-			</div>
 			</div>
 
-	</div>
+			<div class="username">@{{.account.Username}}@{{.instance.AccountDomain}}</div>
+		</section>
 
-	<div class="column-split">
+		<section class="bio">
-
-		<section class="about-user">
-
-			<div class="bio">
 			{{ if .account.Note }}
 			{{emojify .account.Emojis (noescape .account.Note)}}
 			{{else}}
 			no bio
 			{{end}}
-			</div>
+		</section>
 
-			<div class="fields">
+		<section class="fields">
 			{{ range .account.Fields }}
 			<b>{{emojify $.account.Emojis (noescape .Name)}}</b>
 			<span>{{emojify $.account.Emojis (noescape .Value)}}</span>
 			{{ end }}
-			</div>
-
 		</section>
 
+		<section class="fields">
+			<b>joined</b><time datetime="{{.account.CreatedAt}}">{{.account.CreatedAt | timestampVague}}</time>
+			<b>followers</b><span>{{.account.FollowersCount}}</span>
+			<b>follows</b><span>{{.account.FollowingCount}}</span>
+			<b>posts</b><span class="flex">
+				<span>{{.account.StatusesCount}}</span>
+				{{ if .rssFeed }}
+				<a href="{{ .rssFeed }}" class="rss-icon" aria-label="RSS feed">
+					<img src="/rss.svg" width="20" height="20">
+				</a>
+				{{ end }}
+			</span>
+		</section>
+	</div>
+
 	<section class="toots">
 		{{ if .pinned_statuses }}
-			<div class="col-header">
-				<h2>Pinned posts</h2>
-				<a href="#recent">jump to recent</a>
-			</div>
 		<section class="thread">
 			{{ range .pinned_statuses }}
 			<article class="toot expanded" id="{{.ID}}">
@@ -123,7 +111,7 @@
 			{{ end }}
 		</div>
 	</section>
-	</div>
+
 </main>
 
 {{ template "footer.tmpl" .}}

template/status_profile.tmpl

@@ -85,6 +85,6 @@
 	{{if .Pinned}}
 	<span>/pinned</span>
 	{{end}}{{if .RepliesCount | eq 0 | not}}
-	<span>replies:{{.RepliesCount}}</span>
+	<span>replies: {{.RepliesCount}}</span>
 	{{end}}
 </a>