Added markdown styling.
This commit is contained in:
parent
afa1660596
commit
32ac6816f7
14 changed files with 272 additions and 20 deletions
|
|
@ -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;
|
||||
|
|
|
|||
8
assets/less/link.less
Normal file
8
assets/less/link.less
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.link {
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
222
assets/less/markdown.less
Normal file
222
assets/less/markdown.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
docs/contact.md
Normal file
15
docs/contact.md
Normal file
|
|
@ -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.
|
||||
|
|
@ -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
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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™.</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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue