profile responsiveness, accessibility tweaks

web/source/css/profile.css

@@ -27,22 +27,18 @@ main.profile {
 	padding: 0.5rem;
 	border-radius: $br;
 
-	display: grid;
+	.column-split {
-	grid-template-rows: auto auto;
+		display: flex;
-	grid-template-columns: 35fr 65fr;
+		flex-wrap: wrap;
-	grid-template-areas:
-		"header header"
-		"about toots";
-
 		gap: 1rem;
+	}
 }
 
 main.profile .header {
-	grid-area: header;
-
 	background: $bg-accent;
 	border-radius: $br;
 	overflow: hidden;
+	margin-bottom: 1rem;
 
 	.header-image {
 		position: relative;
@@ -165,7 +161,6 @@ main.profile {
 		}
 
 		&.pinned {
-			margin: 0 1rem;
 			display: grid;
 			grid-template-columns: auto 1fr;
 			gap: 1rem;
@@ -178,29 +173,12 @@ main.profile {
 }
 
 main.profile .toots {
-	grid-area: toots;
+	flex: 65 25rem; 
-
 	display: flex;
 	flex-direction: column;
 	gap: 0.4rem;
 
-	.col-header {
-		margin: 0;
-		background: $gray4;
-		border-top-left-radius: $br;
-		border-top-right-radius: $br;
-		padding: 0.75rem;
-	}
-
 	.toot {
-		padding-top: 0.75rem;
-		box-shadow: none;
-		border: none;
-
-		.contentgrid {
-			padding: 0 0.75rem;
-		}
-
 		.info {
 			padding: 0.3rem 0.75rem;
 		}
@@ -212,7 +190,7 @@ main.profile .toots {
 }
 
 main.profile .about-user {
-	grid-area: about;
+	flex: 35 14rem;
 	border-radius: $br;
 	overflow: hidden;
 
@@ -237,10 +215,6 @@ main.profile .about-user {
 			&:first-child {
 				border-top: 0.1rem solid $gray2;
 			}
-
-			b {
-				color: $fg-accent;
-			}
 		}
 	}
 

web/template/profile.tmpl

@@ -26,7 +26,7 @@
             <img src="{{.account.Header}}" alt="" />
             {{ end }}
         </div>
-        <div class="basic-info">
+        <div class="basic-info" aria-hidden="true">
             <a class="avatar" href="{{.account.Avatar}}">
                 <img src="{{.account.Avatar}}" alt="">
             </a>
@@ -50,9 +50,16 @@
 				<i class="rss-icon fa fa-rss-square" aria-hidden="true"></i>
 			</a> -->
         </div>
+        <div class="sr-only">
+            Profile for
+            {{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}.
+            Username @{{.account.Username}}, {{acctInstance .account.Acct}}
+        </div>
     </div>
 
-    <div class="about-user">
+    <div class="column-split">
+
+        <section class="about-user">
             <div class="col-header">
                 <h3>About</h3>
             </div>
@@ -74,15 +81,22 @@
                 {{end}}
             </div>
 
-        <div class="accountstats">
+            <div class="sr-only" role="group">
+                <span>Joined on {{.account.CreatedAt | timestampVague}}.</span>
+                <span>{{.account.StatusesCount}} post{{if .account.StatusesCount | eq 1 | not}}s{{end}}.</span>
+                <span>Followed by {{.account.FollowersCount}}.</span>
+                <span>Following {{.account.FollowingCount}}.</span>
+            </div>
+
+            <div class="accountstats" aria-hidden="true">
                 <b>Joined</b><time datetime="{{.account.CreatedAt}}">{{.account.CreatedAt | timestampVague}}</time>
                 <b>Posts</b><span>{{.account.StatusesCount}}</span>
                 <b>Followed by</b><span>{{.account.FollowersCount}}</span>
                 <b>Following</b><span>{{.account.FollowingCount}}</span>
             </div>
-    </div>
+        </section>
 
-    <div class="toots">
+        <section class="toots">
             {{ if .pinned_statuses }}
             <div class="col-header pinned">
                 <h3>Pinned posts</h3>
@@ -97,8 +111,8 @@
             </section>
             {{ end }}
 
-        <div class="col-header" id="recent">
+            <div class="col-header">
-            <h3>Recent posts</h3>
+                <h3 id="recent" tabindex="-1">Recent posts</h3>
             </div>
 
             <section class="thread">
@@ -121,6 +135,7 @@
                 <a href="{{ .statuses_next }}" class="next">Show older</a>
                 {{ end }}
             </div>
+        </section>
     </div>
 </main>