Rules text and styling preview

public/styles/abstracts/_variables.sass

@@ -1,4 +1,4 @@
-// Background Colors 
+// Background Colors
 $background-primary: #000000
 $background-secondary: #262626
 $background-tertiary: #3f3f3f
@@ -14,6 +14,7 @@ $color-inactive-plus: #696969
 $family-title: "Russo One", "Electrolize", "Russo One"
 $family-subtitle: Chakra Petch, Electrolize, "Russo One"
 $family-paragraph: "Electrolize", Chakra Petch, "Russo One"
+$family-readability: Roboto, Arial, Sans-serif
 
 //Button Colors
 $button-inactive: #ec9d36

public/styles/layout/forms.sass

@@ -8,32 +8,32 @@
   @include mixins.gridMainContainer
   padding: 0vw
   gap: 0
-  
-    
+
+
 
 form
   align-self: center
 
-  
+
   p
 
     font-size: calc(var(--paragraph-font-size)*1)
     padding: 0.1em
- 
-    
-  
+
+
+
   .formStart
 
     display: inline-block
     p
       font-size: 16px
-      
+
     input
       min-width: 300px
       margin: 0.1em
       border: 0.2em solid variables.$background-primary
-      
-      
+
+
     .formHelp
       display: inline
       ul
@@ -45,9 +45,9 @@ form
           font-weight: normal
           line-height: 1.25em
 
-
 
-
+
+
 .formGroup
   p
     padding: 0.2em
@@ -63,18 +63,18 @@ form
   padding: 2em 1em
   textarea
     min-width: 500px
-  
+
 .form-control
   width: 300px
-
 
-
+
+
 .tosAgree
   label
     display: block
   input
     display: inline-block
-    
+
 .alert
   border-radius: 20px
   display: inline-block
@@ -107,42 +107,99 @@ form
     align-self: center
     .g-recaptcha
       display: inline-block
-
 
 
 
 
-
+
+
 // Markdown styling
 
 
 .container
-  background-color: rgba(0,0,0,0.8)
-  margin: 2vw 5vw
+  background-color: rgba(0, 0, 0, 0.9)
+  margin: 2vw auto
+  max-width: 950px
   padding: 2em 4vw
   border-radius: 20px
   text-align: left
-  .markdownButton
-    a
-      display: inline-block
-      margin: 1em
-      button
-        margin: 0
+
+  h1, h2, h3, h4, h5, h6
+    margin: 1.5em 0 -0.15em
+    padding: 0
+
+  h1
+    font-size: 2.5em
+
+  h2
+    font-size: 2em
+
+  h3
+    font-size: 1.5em
+
+  h4
+    font-size: 1.25em
+
+  h5
+    font-size: 1.1em
+
+  h6
+    font-size: 1em
+
+  p
+    font-family: variables.$family-readability
+    margin: 1em 0
+    padding: 0
+    font-size: 1em
+    line-height: 1.5em
+
   a
     color: variables.$button-inactive
     text-decoration: underline variables.$button-inactive
     transition: 0.4s
     &:hover
       color: variables.$button-active
       text-decoration: underline variables.$button-active
-
-  h2
-    padding: 1em
-
+
+  ul, ol
+    padding-left: 1.5em
+    margin: 1em 0
+
   li
-    padding: 0.5em
+    font-family: variables.$family-readability
+    margin: 0 0 0.5em
+    padding-top: 0
+    padding-bottom: 0
     font-size: 1em
-
+    line-height: 1.5em
+
+    ul
+      margin: 0
+
+      li
+        margin-top: 0.5em
+        margin-bottom: 0
+
+  pre, code
+    background-color: rgba(255, 255, 255, 0.1)
+    padding: 0.5em 1em
+    border-radius: 5px
+    font-family: monospace
+
+  blockquote
+    border-left: 5px solid rgba(255, 255, 255, 0.3)
+    margin: 1em 0
+    padding: 0.5em 1em
+    font-style: italic
+
+  .markdownButton
+    a
+      display: inline-block
+      margin: 2em 2em 0 0
+      button
+        margin: 0
+
+
 .containerCenter
   background-color: rgba(0,0,0,0.8)
   margin: 2vw 5vw
@@ -179,8 +236,8 @@ form
       text-align: center
     th
       padding: 1.5em
-      
-      
+
+
 @media (max-width: 600px)
   .accountForm
     .column6
@@ -191,7 +248,7 @@ form
           padding: 0.1em
     .formGroup, .form-group, h2, h3
       padding: 0.1em
-    
+
   form
     .formStart
       min-width: 100px

src/backend/routes/views/staticMarkdownRouter.js

@@ -3,12 +3,14 @@ const showdown = require('showdown')
 const fs = require('fs')
 const router = express.Router()
 
-function markdown(template) {
+// second argument containerClass can be used to inject a class, for page specific styling
+function markdown(template, containerClass = "") {
     return (req, res) => {
         res.render('markdown', {
             content: new showdown.Converter().makeHtml(
                 fs.readFileSync(template, 'utf-8')
             ),
+            containerClass: containerClass
         })
     }
 }

src/backend/templates/layouts/default.pug

@@ -35,6 +35,11 @@ html(lang='en')
             rel='stylesheet',
             href='https://fonts.googleapis.com/css2?family=Orbitron&display=swap'
         )
+        link(
+            href='https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap',
+            rel='stylesheet',
+            type='text/css'
+        )
 
         //- Customise the stylesheet for your site by editing /public/styles/site.sass
         link(

src/backend/templates/views/markdown.pug

@@ -1,5 +1,5 @@
 extends ../layouts/default
 
 block content
-    .container
+    .container(class=containerClass)
         != content

src/backend/templates/views/markdown/cg.md

@@ -9,7 +9,7 @@ We expect these guidelines to be honored by everyone who contributes to the FAFo
 These guidelines are not exhaustive or complete. They serve to distill our common understanding of a collaborative, shared environment and goals. We expect them to be followed in spirit as much as in the letter, so that they can enrich all of us and the technical communities in which we participate.
 They may be supplemented by further rules specifying desired and undesired behaviour in certain areas.
 
-The [Rules of the FAForever community](https://faforever.com/rules) also apply to contributors.
+The [Rules of the FAForever community](https://www.faforever.com/rules) also apply to contributors.
 
 
 ## Specific Guidelines

src/backend/templates/views/markdown/privacy-fr.md

@@ -11,7 +11,7 @@ Nous traitons tous nos utilisateurs de la même manière, et chacun et concerné
 
 ## Les informations que nous collectons et pourquoi
 
-Si vous ne faites que naviguer sur notre site (faforever.com, wiki.faforever.com, forum.faforever.com, ou tout site internet hébergé sur le domaine faforever.com), nous collectons la même quantité d'information basique que n'importe quel autre site internet. Cette information inclut le type de navigateur, les préférences linguistiques, le site qui vous y a amené et la date et l'heure de la requête internet. En plus de cela, nous collectons des informations possiblement personnellement-uniques comme les adresses IP. 
+Si vous ne faites que naviguer sur notre site (faforever.com, wiki.faforever.com, forum.faforever.com, ou tout site internet hébergé sur le domaine faforever.com), nous collectons la même quantité d'information basique que n'importe quel autre site internet. Cette information inclut le type de navigateur, les préférences linguistiques, le site qui vous y a amené et la date et l'heure de la requête internet. En plus de cela, nous collectons des informations possiblement personnellement-uniques comme les adresses IP.
 
 Cette information est collectée dans le cadre d'analyses, à fin de mieux comprendre qui visite nos sites.
 
@@ -72,4 +72,4 @@ Cette déclaration de confidentialité est sous la license [Creative Commons Zer
 ## Note
 
 Ce document a été traduit de l'anglais. En cas de litige, seul le document original fait foi.
-Vous pouvez trouver le document dans sa version originale à l'adresse suivante [ici](https://faforever.com/privacy).
+Vous pouvez trouver le document dans sa version originale à l'adresse suivante [ici](https://www.faforever.com/privacy).

src/backend/templates/views/markdown/privacy.md

@@ -4,7 +4,7 @@
 </a>
 
 <a href="/privacy-ru">
-<button> Privacy Pусский </button>
+<button> Privacy Русский </button>
 </a>
 </div>