Permalink
Browse files

Added markdown styling.

  • Loading branch information...
flashwave committed Nov 1, 2018
1 parent 744bc83 commit bc5d87959d9dfeb9a1b6227177ebcb6a57b18e07
@@ -6,17 +6,19 @@
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) {
display: none;
}
}
&--translucent {
background-color: #111E;
}
&__title {
display: block;
overflow: hidden;
View
@@ -0,0 +1,8 @@
.link {
color: var(--accent-colour);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
View
@@ -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";
View
@@ -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;
}
}
}
View
@@ -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 @@ public function parseText(string $text): string
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>
View
@@ -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>
View
@@ -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>
View
@@ -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>
Oops, something went wrong.

0 comments on commit bc5d879

Please sign in to comment.