Improve Matrix tutorial img sizes and spacing #126

Change <img> tags to markdown format in community.md
common-workflow-language · Mar 31, 2022 · 45bde04 · 45bde04
1 parent f86634e
commit 45bde04
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 9 deletions.
diff --git a/content/_sass/partials/_helpers.scss b/content/_sass/partials/_helpers.scss
@@ -9,6 +9,10 @@
   text-decoration: none;
 }
 
+.box-shadow-grey {
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.41);
+}
+
 .black-text {
   color: $black;
 }
@@ -21,6 +25,15 @@
   font-weight: normal;
 }
 
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+.mbt-12 {
+  margin-bottom: 12px;
+  margin-top: 12px;
+}
+
 .mb-12 {
   margin-bottom: 12px;
 }
@@ -29,6 +42,35 @@
   margin-top: 12px;
 }
 
+.mbt-16 {
+  margin-bottom: 16px;
+  margin-top: 16px;
+}
+
+.mb-16 {
+  margin-bottom: 16px;
+}
+
+.mt-16 {
+  margin-top: 16px;
+}
+
+.ml-2em {
+  margin-left: 2em;
+}
+
 .w-480 {
   width: 480px;
 }
+
+.d-block {
+  display: block;
+}
+
+.matrix-tutorial-img {
+  display: block;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.41);
+  margin: 16px 0;
+  max-width: 480px;
+}
+
diff --git a/content/community.md b/content/community.md
@@ -38,21 +38,18 @@ If you haven’t used Matrix before then follow these instructions:
 
 1. Go to <https://matrix.to/#/#cwl:matrix.org>
 2. Choose the “Element” App if you don’t have a Matrix client already.
-
-   <img src="/assets/img/matrix-element-app.png" class="mb-12 mt-12 w-480" alt="screenshot of Matrix app chooser dialog." />
+    ![screenshot of Matrix app chooser dialog.](/assets/img/matrix-element-app.png){:.matrix-tutorial-img}
 
 3. You can download the native Element app for your operating system if you want, but choosing to “Continue in your browser” is fine.
+    ![screenshot of 'Continue in your Browser' button](/assets/img/continue-in-your-browser.png){:.mt-16 .mb-10}
 
-   <img src="/assets/img/continue-in-your-browser.png" class="mb-12 mt-12" alt="screenshot of 'Continue in your Browser' button" />
-
-4. From the Element native app, or browser session choose "Join" <img src="/assets/img/join.png" alt="screenshot of 'Join' button" />
-5. And then choose “Create Account” <img src="/assets/img/create-account.png" alt="screenshot of 'Create Account' button" > using your own Google, GitHub, or GitLab, account.
+4. From the Element native app, or browser session choose "Join" ![screenshot of 'Join' button](/assets/img/join.png)
 
-   <img src="/assets/img/continue-with-icons.png" class="mb-12 mt-12 w-480" alt="screenshot of third party login chooser dialog" />
+5. And then choose “Create Account” ![screenshot of 'Create Account' button](/assets/img/create-account.png) using your own Google, GitHub, or GitLab, account.
+    ![screenshot of third party login chooser dialog](/assets/img/continue-with-icons.png){:.matrix-tutorial-img}
 
 6. Now that you’re signed in, join the “CWL Conference” room.
-
-   <img src="/assets/img/cwl-conference-suggested-rooms.png" class="mb-12 mt-12" alt="screenshot of 'CWL Conference' under 'Suggested Rooms' in the CWL Matrix Space." />
+    ![screenshot of 'CWL Conference' under 'Suggested Rooms' in the CWL Matrix Space.](/assets/img/cwl-conference-suggested-rooms.png){:.matrix-tutorial-img}
 
 ## Code of Conduct