demo: Adjust manual titles to match HdyStatusPage

Use style classes rather than label attributes, make sure they wrap with
word-char mode and are centered.

Make the "Return to the preferences" buttons in preferences centered to
avoid stretching them with larger titles.

examples/hdy-demo-preferences-window.ui

@@ -201,11 +201,11 @@
         <property name="label" translatable="yes">This is a subpage</property>
         <property name="justify">center</property>
         <property name="wrap">True</property>
-        <property name="opacity">0.5</property>
-        <attributes>
-          <attribute name="weight" value="bold"/>
-          <attribute name="scale" value="2"/>
-        </attributes>
+        <property name="wrap-mode">word-char</property>
+        <style>
+          <class name="title"/>
+          <class name="large-title"/>
+        </style>
       </object>
     </child>
     <child>
@@ -213,6 +213,7 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="label" translatable="yes">Return to the preferences</property>
+        <property name="halign">center</property>
         <signal name="clicked" handler="return_to_preferences_cb" swapped="yes"/>
         <style>
           <class name="suggested-action"/>
@@ -236,11 +237,11 @@
         <property name="label" translatable="yes">This is another subpage</property>
         <property name="justify">center</property>
         <property name="wrap">True</property>
-        <property name="opacity">0.5</property>
-        <attributes>
-          <attribute name="weight" value="bold"/>
-          <attribute name="scale" value="2"/>
-        </attributes>
+        <property name="wrap-mode">word-char</property>
+        <style>
+          <class name="title"/>
+          <class name="large-title"/>
+        </style>
       </object>
     </child>
     <child>
@@ -248,6 +249,7 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="label" translatable="yes">Return to the preferences</property>
+        <property name="halign">center</property>
         <signal name="clicked" handler="return_to_preferences_cb" swapped="yes"/>
         <style>
           <class name="suggested-action"/>

examples/hdy-demo-window.ui

@@ -452,15 +452,15 @@
                               <object class="GtkLabel">
                                 <property name="visible">True</property>
                                 <property name="can_focus">False</property>
-                                <property name="opacity">0.5</property>
                                 <property name="halign">center</property>
                                 <property name="label" translatable="yes">Go back</property>
                                 <property name="justify">center</property>
                                 <property name="wrap">True</property>
-                                <attributes>
-                                  <attribute name="weight" value="bold"/>
-                                  <attribute name="scale" value="2"/>
-                                </attributes>
+                                <property name="wrap-mode">word-char</property>
+                                <style>
+                                  <class name="title"/>
+                                  <class name="large-title"/>
+                                </style>
                               </object>
                             </child>
                             <child>
@@ -1072,11 +1072,11 @@ Try using it with a horizontally expanded clamp to make your search entry adapti
                                 <property name="label" translatable="yes">Another page</property>
                                 <property name="justify">center</property>
                                 <property name="wrap">True</property>
-                                <property name="opacity">0.5</property>
-                                <attributes>
-                                  <attribute name="weight" value="bold"/>
-                                  <attribute name="scale" value="2"/>
-                                </attributes>
+                                <property name="wrap-mode">word-char</property>
+                                <style>
+                                  <class name="title"/>
+                                  <class name="large-title"/>
+                                </style>
                               </object>
                             </child>
                             <child>
@@ -1170,6 +1170,9 @@ Try using it with a horizontally expanded clamp to make your search entry adapti
                                 <property name="label" translatable="yes">Avatar</property>
                                 <property name="halign">center</property>
                                 <property name="xalign">0</property>
+                                <property name="wrap">True</property>
+                                <property name="wrap-mode">word-char</property>
+                                <property name="justify">center</property>
                                 <style>
                                   <class name="title"/>
                                   <class name="large-title"/>