Added markdown styling.

assets/less/classes/container.less

@@ -6,6 +6,12 @@
     box-shadow: 0 1px 2px #000A;
     text-shadow: 0 1px 4px #000;
 
+    // this should probably be default behaviour
+    &--no-overflow {
+        overflow: hidden;
+        word-wrap: break-word;
+    }
+
     // should this exist?
     &--hidden { // __title should always be the first element of a container
         > :not(:first-child) {
@@ -13,10 +19,6 @@
         }
     }
 
-    &--translucent {
-        background-color: #111E;
-    }
-
     &__title {
         display: block;
         overflow: hidden;

assets/less/link.less

@@ -0,0 +1,8 @@
+.link {
+    color: var(--accent-colour);
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}

assets/less/main.less

@@ -1,6 +1,8 @@
 @mio-font-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
 @mio-font-mono: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 @site-mobile-width: 800px;
+@font-size: 12px;
+@line-height: 20px;
 
 :root {
     --site-max-width: 1200px;
@@ -38,7 +40,7 @@ body {
     flex-direction: column;
     background-image: var(--background-image);
     background-color: var(--background-colour);
-    font: 12px/20px @mio-font-regular;
+    font: @font-size/@line-height @mio-font-regular;
     color: var(--text-colour);
     background-attachment: fixed;
     background-position: center center;
@@ -78,6 +80,8 @@ body {
 
 // Misc
 @import "animations";
+@import "link";
+@import "markdown";
 
 // Input elements
 @import "classes/input/button";

assets/less/markdown.less

@@ -0,0 +1,222 @@
+.markdown {
+    line-height: 1.7em;
+
+    a {
+        .link();
+    }
+
+    a:not([href]) {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    p,
+    blockquote,
+    ul,
+    ol,
+    dl,
+    table,
+    pre {
+        margin-top: 0;
+        margin-bottom: @font-size;
+    }
+
+    hr {
+        height: 2px;
+        padding: 0;
+        margin: @font-size 0;
+        background-color: var(--accent-colour);
+        border: 0;
+    }
+
+    blockquote {
+        padding: 0 1em;
+        color: var(--accent-colour);
+        border-left: 0.25em solid var(--accent-colour);
+
+        > :first-child {
+          margin-top: 0;
+        }
+
+        > :last-child {
+          margin-bottom: 0;
+        }
+    }
+
+    kbd {
+        display: inline-block;
+        padding: 3px 5px;
+        font-size: 11px;
+        line-height: 10px;
+        color: #777;
+        vertical-align: middle;
+        background-color: #000;
+        border: solid 1px darken(#333, 4%);
+        border-bottom-color: #444;
+        border-radius: 3px;
+        box-shadow: inset 0 -1px 0 #444;
+    }
+
+    code {
+        padding: .2em .4em;
+        margin: 0;
+        background-color: #000A;
+        border-radius: 2px;
+    }
+
+    del code {
+        text-decoration: inherit;
+    }
+
+    pre code {
+        display: inline;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+        line-height: inherit;
+        word-wrap: break-word;
+        background: transparent;
+        border: 0;
+    }
+
+    pre {
+        word-wrap: normal;
+
+        > code {
+            word-break: normal;
+            white-space: pre;
+        }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin-top: @font-size * 1.2;
+        margin-bottom: @font-size;
+        font-weight: 700;
+
+        tt,
+        code {
+            font-size: inherit;
+        }
+    }
+
+    h1 {
+        padding-bottom: 0.3em;
+        font-size: 2em;
+        border-bottom: 1px solid var(--accent-colour);
+    }
+
+    h2 {
+        padding-bottom: 0.3em;
+        font-size: 1.5em;
+        border-bottom: 1px solid var(--accent-colour);
+    }
+
+    h3 {
+        font-size: 1.25em;
+    }
+
+    h4 {
+        font-size: 1em;
+    }
+
+    h5 {
+        font-size: 0.875em;
+    }
+
+    h6 {
+        font-size: 0.85em;
+        color: var(--accent-colour);
+    }
+
+    img {
+        box-sizing: content-box;
+        background-color: var(--background-color);
+        max-width: 100%;
+        max-height: 100%;
+
+        &[align=right] {
+            padding-left: 20px;
+        }
+
+        &[align=left] {
+            padding-right: 20px;
+        }
+    }
+
+    ul,
+    ol {
+        padding-left: 2em;
+    }
+
+    ul ul,
+    ul ol,
+    ol ol,
+    ol ul {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    li {
+        word-wrap: break-all;
+    }
+
+    li > p {
+        margin-top: @font-size;
+    }
+
+    li + li {
+        margin-top: .25em;
+    }
+
+    dl {
+        padding: 0;
+
+        dt {
+            padding: 0;
+            margin-top: @font-size;
+            font-size: 1em;
+            font-style: italic;
+            font-weight: 700;
+        }
+
+        dd {
+            padding: 0 @font-size;
+            margin-bottom: @font-size;
+        }
+    }
+
+    table {
+        display: block;
+        width: 100%;
+        overflow: auto;
+
+        th {
+            font-weight: 700;
+        }
+
+        th,
+        td {
+            padding: 6px 13px;
+            border: 1px solid var(--accent-colour);
+        }
+
+        tr {
+            background-color: var(--background-colour);
+            border-top: 1px solid var(--accent-colour);
+
+            &:nth-child(2n) {
+                background-image: linear-gradient(0deg, var(--background-colour-translucent), var(--background-colour-translucent));
+                background-color: var(--accent-colour);
+            }
+        }
+
+        img {
+            background-color: transparent;
+        }
+    }
+}

docs/contact.md

@@ -0,0 +1,15 @@
+# Contact
+
+If you need to reach us outside of this website, this is the page for you. Below are a few ways of contact.
+
+## E-mail
+  - [flash](mailto:me@flash.moe): Site Administrator
+
+## Twitter
+  - [@flashiinet](https://twitter.com/flashiinet): General updates and conversation.
+  - [@smugwave](https://twitter.com/smugwave): Twitter of the owner, enter with caution!
+
+## Source Code
+  - [Misuzu](https://github.com/flashwave/misuzu): Backend of the website.
+  - [Railgun](https://github.com/flashwave/railgun): Chat Server software.
+  - [Backup Manager](https://github.com/flashii/backup-manager): Program that runs every day at 12:00am UTC to back up any user generated content.

src/Parsers/BBCode/Tags/MarkdownTag.php

@@ -11,7 +11,7 @@ final class MarkdownTag extends BBCodeTag
         return preg_replace_callback(
             '#\[md\](.*?)\[/md\]#s',
             function ($matches) {
-                return MarkdownParser::getOrCreateInstance()->parseText($matches[1]);
+                return sprintf('<div class="markdown">%s</div>', parse_text($matches[1], MSZ_PARSER_MARKDOWN));
             },
             $text
         );

templates/_layout/header.twig

@@ -25,8 +25,8 @@
                 <ul class="header__submenu">
                     <li class="header__submenu__item"><a href="/members.php" class="header__submenu__link">Members</a></li>
                     <li class="header__submenu__item"><a href="/changelog.php" class="header__submenu__link">Changelog</a></li>
-                    {#<li class="header__submenu__item"><a href="/info.php?t=contact" class="header__submenu__link">Contact</a></li>
+                    <li class="header__submenu__item"><a href="/info.php/contact" class="header__submenu__link">Contact</a></li>
-                    <li class="header__submenu__item"><a href="/info.php?t=rules" class="header__submenu__link">Rules</a></li>#}
+                    <li class="header__submenu__item"><a href="/info.php/rules" class="header__submenu__link">Rules</a></li>
                     <li class="header__submenu__item"><a href="https://twitter.com/flashiinet" class="header__submenu__link">Twitter</a></li>
                 </ul>
             </li>

templates/changelog/change.twig

@@ -60,7 +60,7 @@
                         </div>
 
                         <div class="changelog__change__column changelog__change__column--change-info">
-                            <div class="changelog__change__text">
+                            <div class="changelog__change__text markdown">
                                 {% if change.change_text|length >= 1 %}
                                     {{ change.change_text|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }}
                                 {% else %}

templates/forum/macros.twig

@@ -361,7 +361,7 @@
                 </a>
             </div>
 
-            <div class="forum__post__text">
+            <div class="forum__post__text{% if post.post_parse == constant('MSZ_PARSER_MARKDOWN') %} markdown{% endif %}">
                 {{ post.post_text|escape|parse_text(post.post_parse)|raw }}
             </div>
         </div>

templates/info/index.twig

@@ -4,18 +4,19 @@
 {% set title = 'Info' %}
 
 {% block content %}
-    <div class="container">
+    <div class="container container--no-overflow">
         {{ container_title('Flashii Informational Pages') }}
 
-        <div class="container__content">
+        <div class="container__content markdown">
             <p>Here's a listing of a few informational pages that'll probably come in handy during your Flashii Experience&trade;.</p>
+            <h2>Flashii</h2>
             <ul>
-                <li>Flashii</li>
                 <li><a href="/info.php/rules">Rules</a></li>
                 <li><a href="/info.php/terms">Terms of Service</a></li>
                 <li><a href="/info.php/privacy">Privacy Policy</a></li>
-
+            </ul>
-                <li>Misuzu Project</li>
+            <h2>Misuzu Project</h2>
+            <ul>
                 <li><a href="/info.php/misuzu">Read me</a></li>
                 <li><a href="/info.php/misuzu/license">License</a></li>
                 <li><a href="/info.php/misuzu/code_of_conduct">Code of Conduct</a></li>

templates/info/view.twig

@@ -4,10 +4,10 @@
 {% set title = document.title %}
 
 {% block content %}
-    <div class="container">
+    <div class="container container--no-overflow">
         {{ container_title(document.title) }}
 
-        <div class="container__content">
+        <div class="container__content markdown">
             {{ document.content|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }}
         </div>
     </div>

templates/news/macros.twig

@@ -6,7 +6,7 @@
 
         <div class="news__preview__container">
             <div class="news__preview__content">
-                <div class="news__preview__text">
+                <div class="news__preview__text markdown">
                     {{ post.post_text|first_paragraph|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }}
                 </div>
 

templates/news/post.twig

@@ -11,7 +11,7 @@
         {{ container_title(post.post_title) }}
 
         <div class="news__post__content">
-            <div class="news__post__text">
+            <div class="news__post__text markdown">
                 {{ post.post_text|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }}
             </div>
 

templates/user/profile.twig

@@ -164,7 +164,7 @@
                         <div class="container profile__about" id="about">
                             {{ container_title('About ' ~ profile.username) }}
 
-                            <div class="profile__about__content{% if is_editing %} profile__about__content--edit{% endif %}">
+                            <div class="profile__about__content{% if is_editing %} profile__about__content--edit{% elseif profile.user_about_parser == constant('MSZ_PARSER_MARKDOWN') %} markdown{% endif %}">
                                 {% if is_editing %}
                                     {{ input_select('about[parser]', constant('MSZ_PARSERS_NAMES'), profile.user_about_parser, '', '', false, 'profile__about__select') }}
                                     <textarea name="about[text]" class="input__textarea profile__about__editor" id="about-textarea">{{ profile.user_about_content|escape }}</textarea>