Added markdown styling.

2018-11-01 22:35:10 +01:00 · 2018-11-01 22:35:10 +01:00 · 32ac6816f7
commit 32ac6816f7
parent afa1660596
14 changed files with 272 additions and 20 deletions
--- a/assets/less/classes/container.less
+++ b/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;
--- a/assets/less/link.less
+++ b/assets/less/link.less
@ -0,0 +1,8 @@
+.link {
+    color: var(--accent-colour);
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
--- a/assets/less/main.less
+++ b/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";
--- a/assets/less/markdown.less
+++ b/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;
+        }
+    }
+}
--- a/docs/contact.md
+++ b/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.
--- a/src/Parsers/BBCode/Tags/MarkdownTag.php
+++ b/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
        );
--- a/templates/_layout/header.twig
+++ b/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?t=rules" class="header__submenu__link">Rules</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/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>
--- a/templates/changelog/change.twig
+++ b/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 %}
--- a/templates/forum/macros.twig
+++ b/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>
--- a/templates/info/index.twig
+++ b/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>
-
-                <li>Misuzu Project</li>
+            </ul>
+            <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>
--- a/templates/info/view.twig
+++ b/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>
--- a/templates/news/macros.twig
+++ b/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>

--- a/templates/news/post.twig
+++ b/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>

--- a/templates/user/profile.twig
+++ b/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>