Various improvements to /attend

attend/existing.md

@@ -10,9 +10,13 @@ description: How to attend SeaGL 2022 with an existing Matrix account
 
 SeaGL uses [Matrix] to run our virtual conference. The whole conference is in a Matrix space and is primarily designed with [Element]'s interface in mind. You can of course use your own preferred Matrix client - just bear in mind we won't be able to help you out as much. Here's the button to get into the space:
 
-TODO button
+<div class="text-center">
+  <p><a class="btn btn-primary btn-large" href="https://matrix.to/#/#PuFN-2022:kvalhe.im">Join the SeaGL space</a></p>
+</div>
 
-Below are some tips on navigating the conference in Element. If you run into any trouble, you can always email <[email protected]>.
+TODO make this button point at the production space
+
+Below are some tips on navigating the conference in Element. If you run into any trouble, you can always email <[email protected]>. Remember, participation in any room in the SeaGL space is subject to our [Code of Conduct](/code_of_conduct).
 
 ## Navigating spaces
 
@@ -22,11 +26,11 @@ TODO screenshot
 
 Getting here is simple but can be difficult to find on your own. First make sure the spaces list on the far left is expanded (you may have to hover your mouse over the left side to see the arrow):
 
-TODO screenshot
+<img class="align-center" alt="Screenshot of the top-left of the Element client pointing out the arrow directly to the right of the profile picture in the upper-left corner" src="/img/element-sidebar-arrow.webp" />
 
 Then hover over the SeaGL space and click the three dots menu:
 
-TODO screenshot
+<img class="align-center" alt="Screenshot of the SeaGL space item in the Element left pane, with the three dots button at the right of the list item highlighted" src="/img/element-three-dots-menu.webp" />
 
 You can also click the arrow on the left side of the SeaGL space to see the subspaces, which can help with navigation.
 TODO screenshot

css/app/seagl.scss

@@ -366,3 +366,8 @@ p img {
 .navbar {
   margin: 0;
 }
+
+img.align-center {
+  display: block;
+  margin: auto;
+}