Rules text and styling preview (#558)

---------

Co-authored-by: Rümeysa Güven <[email protected]>

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,101 @@ form
     align-self: center
     .g-recaptcha
       display: inline-block
-
 
 
 
 
-
+
+
 // Markdown styling
 
 
 .container
-  background-color: rgba(0,0,0,0.8)
-  margin: 2vw 5vw
+  position: relative
+  z-index: 99999
+  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 +238,8 @@ form
       text-align: center
     th
       padding: 1.5em
-      
-      
+
+
 @media (max-width: 600px)
   .accountForm
     .column6
@@ -191,7 +250,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,
         })
     }
 }
@@ -36,5 +38,9 @@ router.get(
 )
 router.get('/rules', markdown('src/backend/templates/views/markdown/rules.md'))
 router.get('/cg', markdown('src/backend/templates/views/markdown/cg.md'))
+router.get(
+    '/moderation',
+    markdown('src/backend/templates/views/markdown/moderation.md')
+)
 
 module.exports = router

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(
@@ -273,6 +278,8 @@ html(lang='en')
                             a(href='/cg') CONTRIBUTION GUIDELINES
                         li
                             a(href='/rules') RULES
+                            span  /
+                            a(href='/moderation')  MODERATION
 
                     ul CONTRIBUTE
                         li

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