From 32ac6816f70d6acacfc3a23cd6f689556f7408ab Mon Sep 17 00:00:00 2001 From: flashwave Date: Thu, 1 Nov 2018 22:35:10 +0100 Subject: [PATCH] Added markdown styling. --- assets/less/classes/container.less | 10 +- assets/less/link.less | 8 + assets/less/main.less | 6 +- assets/less/markdown.less | 222 ++++++++++++++++++++++++ docs/contact.md | 15 ++ src/Parsers/BBCode/Tags/MarkdownTag.php | 2 +- templates/_layout/header.twig | 4 +- templates/changelog/change.twig | 2 +- templates/forum/macros.twig | 2 +- templates/info/index.twig | 11 +- templates/info/view.twig | 4 +- templates/news/macros.twig | 2 +- templates/news/post.twig | 2 +- templates/user/profile.twig | 2 +- 14 files changed, 272 insertions(+), 20 deletions(-) create mode 100644 assets/less/link.less create mode 100644 assets/less/markdown.less create mode 100644 docs/contact.md diff --git a/assets/less/classes/container.less b/assets/less/classes/container.less index 774667a4..68cddbb8 100644 --- 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; diff --git a/assets/less/link.less b/assets/less/link.less new file mode 100644 index 00000000..618bb790 --- /dev/null +++ b/assets/less/link.less @@ -0,0 +1,8 @@ +.link { + color: var(--accent-colour); + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} diff --git a/assets/less/main.less b/assets/less/main.less index 3ec3d5ea..553b3ba3 100644 --- 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"; diff --git a/assets/less/markdown.less b/assets/less/markdown.less new file mode 100644 index 00000000..b859e646 --- /dev/null +++ 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; + } + } +} diff --git a/docs/contact.md b/docs/contact.md new file mode 100644 index 00000000..c896d2d3 --- /dev/null +++ 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. diff --git a/src/Parsers/BBCode/Tags/MarkdownTag.php b/src/Parsers/BBCode/Tags/MarkdownTag.php index 035f20a3..37911457 100644 --- 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('
%s
', parse_text($matches[1], MSZ_PARSER_MARKDOWN)); }, $text ); diff --git a/templates/_layout/header.twig b/templates/_layout/header.twig index 6b4525f3..3df4ea5b 100644 --- a/templates/_layout/header.twig +++ b/templates/_layout/header.twig @@ -25,8 +25,8 @@ diff --git a/templates/changelog/change.twig b/templates/changelog/change.twig index 2b72f005..f0777d6a 100644 --- a/templates/changelog/change.twig +++ b/templates/changelog/change.twig @@ -60,7 +60,7 @@
-
+
{% if change.change_text|length >= 1 %} {{ change.change_text|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }} {% else %} diff --git a/templates/forum/macros.twig b/templates/forum/macros.twig index 08d4c0c1..634d3174 100644 --- a/templates/forum/macros.twig +++ b/templates/forum/macros.twig @@ -361,7 +361,7 @@
-
+
{{ post.post_text|escape|parse_text(post.post_parse)|raw }}
diff --git a/templates/info/index.twig b/templates/info/index.twig index 22c62516..8abef125 100644 --- a/templates/info/index.twig +++ b/templates/info/index.twig @@ -4,18 +4,19 @@ {% set title = 'Info' %} {% block content %} -
+
{{ container_title('Flashii Informational Pages') }} -
+

Here's a listing of a few informational pages that'll probably come in handy during your Flashii Experience™.

+

Flashii

+

Misuzu Project

+
  • Read me
  • License
  • Code of Conduct
    • diff --git a/templates/info/view.twig b/templates/info/view.twig index fae5e9be..b92d551f 100644 --- a/templates/info/view.twig +++ b/templates/info/view.twig @@ -4,10 +4,10 @@ {% set title = document.title %} {% block content %} -
    +
    {{ container_title(document.title) }} -
    +
    {{ document.content|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }}
    diff --git a/templates/news/macros.twig b/templates/news/macros.twig index 9b237f60..8afd1c03 100644 --- a/templates/news/macros.twig +++ b/templates/news/macros.twig @@ -6,7 +6,7 @@
    -
    +
    {{ post.post_text|first_paragraph|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }}
    diff --git a/templates/news/post.twig b/templates/news/post.twig index c9f80a33..cb4e5d59 100644 --- a/templates/news/post.twig +++ b/templates/news/post.twig @@ -11,7 +11,7 @@ {{ container_title(post.post_title) }}
    -
    +
    {{ post.post_text|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }}
    diff --git a/templates/user/profile.twig b/templates/user/profile.twig index 116f0485..5fa76a8b 100644 --- a/templates/user/profile.twig +++ b/templates/user/profile.twig @@ -164,7 +164,7 @@
    {{ container_title('About ' ~ profile.username) }} -
    +
    {% if is_editing %} {{ input_select('about[parser]', constant('MSZ_PARSERS_NAMES'), profile.user_about_parser, '', '', false, 'profile__about__select') }}