2 files changed, 8 insertions, 8 deletions
diff --git a/templates/src/mf2.rs b/templates/src/mf2.rs
index 643db15..787d3ed 100644
--- a/templates/src/mf2.rs
+++ b/templates/src/mf2.rs
@@ -438,7 +438,7 @@ markup::define! {
     }
     WebInteractions<'a>(post: &'a serde_json::Value, from_feed: bool) {
         footer.webinteractions {
-            p[style="display: none", "aria-hidden"="false"] {
+            p."screen-reader-only" {
                 "Webmention counters:"
             }
             ul.counters {
diff --git a/templates/src/onboarding.rs b/templates/src/onboarding.rs
index 6ee90bf..65132b5 100644
--- a/templates/src/onboarding.rs
+++ b/templates/src/onboarding.rs
@@ -1,6 +1,6 @@
 markup::define! {
     OnboardingPage {
-        h1[style="text-align: center"] {
+        h1 #onboarding_greet {
             "Welcome to Kittybox"
         }
         script[type="module", src="/.kittybox/static/onboarding.js"] {}
@@ -73,13 +73,13 @@ markup::define! {
                     "."
                 }
             }
-            ul #progressbar[style="display: none"] {
+            ul.hidden #progressbar {
                 li #intro { "Introduction" }
                 li #hcard { "Your profile" }
                 li #settings { "Your website" }
                 li #firstpost { "Your first post" }
             }
-            fieldset #intro[style="display: none"] {
+            fieldset.inactive #intro {
                 legend { "Introduction" }
                 p {
                     "Kittybox is a CMS that can act as a member of the IndieWeb. "
@@ -94,7 +94,7 @@ markup::define! {
                 }
             }
 
-            fieldset #hcard[style="display: none"] {
+            fieldset.inactive #hcard {
                 legend { "Your profile" }
                 p { "An h-card is an IndieWeb social profile, and we're gonna make you one!" }
                 p { "Thanks to some clever markup, it will be readable by both humans and machines looking at your homepage."}
@@ -156,7 +156,7 @@ markup::define! {
                 }
             }
 
-            fieldset #settings[style="display: none"] {
+            fieldset.inactive #settings {
                 legend { "Your website" }
                 p { "Ok, it's nice to know you more. Tell me about what you'll be writing and how you want to name your blog." }
                 // TODO: site-name, saved to settings
@@ -210,7 +210,7 @@ markup::define! {
                 }
             }
 
-            fieldset #firstpost[style="display: none"] {
+            fieldset.inactive #firstpost {
                 legend { "Your first post" }
                 p { "Maybe you should start writing your first posts now. How about a short note?" }
                 p { "A note is a short-form post (not unlike a tweet - but without the actual character limit) that doesn't bear a title." }
@@ -222,7 +222,7 @@ markup::define! {
                     " here to spice up your note!)"
                 }
 
-                textarea #first_post_content[style="width: 100%; height: 8em", placeholder="Hello! I am really excited about #IndieWeb"] {}
+                textarea #first_post_content[placeholder="Hello! I am really excited about #IndieWeb"] {}
 
                 div.switch_card_buttons {
                     button.switch_card.prev_card[type="button", "data-card"="settings"] { "Previous" }