Commit 878db12f authored by Alex Pearce's avatar Alex Pearce 🌈
Browse files

Initial commit.

parents
MIT License
Copyright (c) 2017 Alex Pearce
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
TWiki styling
=============
Styles for making a TWiki cleaner, prettier, and more readable.
![Example pages styled with the CSS in this repository.](preview.png)
This repository contains a CSS file which can be uploaded to your TWiki user
page, which you can then tell TWiki to use.
There is also an optional JavaScript file, which will replace the default
LaTeX-rendered-as-images with LaTeX rendered by [KaTeX][katex].
Style Installation instructions
-------------------------------
TWiki allows each user to define preferences on their personal user page. My
user page, as an example, is at:
```
https://twiki.cern.ch/twiki/bin/view/Main/AlexPearce
```
There is one set of preferences that allows the user to define a URL to a CSS
file, which is then used to style the site.
To ‘install’ the CSS style in this repository, download the file to your
machine, and then upload it to your TWiki user page.
Find the URL TWiki gives it, then edit your user page in the ‘raw edit’ mode
and add this fragment:
```
* Set USERSTYLEURL = %PUBURLPATH%/Main/AlexPearce/twiki.css
```
The preceding spaces are important. TWiki requires the preferences to be
defined in a unordered list, and in TWiki markup these are denoted with three
spaces followed by an asterisk `*`.
`%PUBURLPATH%` is a variable that is expanded by TWiki. For me, it expands to
the value ` /twiki/pub`, which happens to be the prefix of the CSS file’s
upload path.
JavaScript Installation instructions
------------------------------------
There are many ways of injecting custom JavaScript into a web page. I use
[Tampermonkey][tampermonkey].
To install the TWiki LaTeX prettification script, install something like
Tampermonkey, click on the Tampermonkey button that appears in your browser’s
toolbar, then click ‘Create a new script…’. Paste in the contents of the
JavaScript file from this repository, and click the ‘Save’ in the Tampermonkey
editor interface.
When you next visit a page whose URL matches the script’s matching rule
(currently `https://twiki.cern.ch/*`), the script will be loaded. You can check
that it’s working by clicking the Tampermonkey toolbar button, and seeing that
that script is listed as active.
Contributions
-------------
The styling is by no means complete, and contributions are most welcome, just
open a merge request.
In particular, tables have the default TWiki styling. I don’t find it
outrageously offensive, but it could be better.
[katex]: https://khan.github.io/KaTeX/
[tampermonkey]: http://tampermonkey.net
// ==UserScript==
// @name TWiki LaTeX prettifier
// @namespace https://alexpearce.me/
// @version 0.1
// @description Replace low-resolution rendered LaTeX with KaTEX
// @author Alex Pearce
// @match https://twiki.cern.ch/*
// @grant none
// ==/UserScript==
(function(window, document, undefined) {
'use strict';
var renderLaTeX = function() {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css';
var script = document.createElement('script');
script.type= 'text/javascript';
script.src = '//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js';
script.onload = function() {
var imgs = document.getElementsByTagName('img'),
imgsToReplace = [], spansToRender = [],
i, img, alt, latex, span;
for (i = 0; i < imgs.length; i++) {
img = imgs[i];
alt = img.alt;
if (!(alt.startsWith('$') && alt.endsWith('$'))) {
continue;
}
latex = alt.substr(1, alt.length - 2);
span = document.createElement('span');
span.dataset.alt = alt;
katex.render(latex, span);
imgsToReplace.push(img);
spansToRender.push(span);
}
for (i = 0; i < spansToRender.length; i++) {
img = imgsToReplace[i];
span = spansToRender[i];
img.parentNode.replaceChild(span, img);
}
};
head.appendChild(link);
head.appendChild(script);
};
renderLaTeX();
})(window, document);
@import url("https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css");
/* Layout */
body {
background-color: #f6f6f6;
}
#patternPage {
max-width: 960px;
border-color: #e2e2e2;
border-style: solid;
border-width: 0 1px 0px 1px;
}
#patternLeftBar {
display: none;
}
#patternOuter {
margin: 0;
}
/* Fonts and text styling */
#patternPage {
font-size: 130%;
line-height: 130%;
font-family: 'Source Sans Pro', sans-serif;
color: #333;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Source Serif Pro', serif;
color: #FE3200;
background: none;
}
pre, code {
font-family: 'Source Code Pro', monospace;
font-size: 0.9em;
color: #333;
}
pre {
background-color: #f6f6f6;
border: 1px solid #e2e2e2;
padding: 1em 1.5em;
}
.patternContent a {
color: #0935B1 !important;
border: none !important;
}
.patternContent a:hover {
text-decoration: underline !important;
background: none !important;
}
/* Don't show external link images */
a[target=_blank] img {
display: none;
}
a[target="_blank"]:after {
content: "\f29f";
font-family: "Ionicons";
font-size: 0.8em;
padding-left: 0.25em;
}
a[href$=".pdf"]:after {
content: "\f12f";
font-family: "Ionicons";
font-size: 0.8em;
padding-left: 0.25em;
}
.twikiToc {
display: inline-block;
background-color: #f6f6f6;
border: 1px solid #e2e2e2;
padding: 1em;
}
.twikiToc:before {
content: 'Table of contents';
display: block;
font-family: 'Source Serif Pro';
font-size: 1.1em;
margin: 0 0 0.5em 0;
}
ul, .twikiToc ul {
margin: 0 0 0 1.1em;
padding: 0;
list-style: disc inside none;
}
li, .twikiToc li {
margin: 0;
padding: 0;
background-image: none;
list-style-position: outside;
}
textarea.twikiTextarea {
font-family: 'Source Code Pro', monospace;
}
/* Action buttons */
.patternToolBar > span a:link {
display: inline-block;
margin: 0 0.25em;
padding: 0.25em 0.4em 0.25em 0.5em;
border: 1px solid #e2e2e2;
border-radius: 3px;
background: none;
font-size: 0.8em;
font-weight: 400;
}
.patternToolBar > span a:link:hover {
position: relative;
top: 1px;
background: #f9f9f9;
}
.patternToolBar > span a:link:active {
position: relative;
top: 2px;
background: #f3f3f3;
}
.patternToolBar > span img {
display: none;
}
.patternToolBar .twikiAccessKey {
border: none;
font-weight: 600;
}
.patternToolBar a:hover .twikiAccessKey {
border: none;
text-decoration: underline;
}
/* Put a little pencil next to the "Edit" action button,
* presumed to be the first in the list
*/
.patternToolBar > span:first-child .twikiAccessKey:before {
content: "\f2bf";
font-family: "Ionicons";
font-weight: 400;
font-size: 0.8em;
padding-right: 0.25em;
}
/* Editor buttons */
.patternTopicActions, .patternTopicAction {
background: none;
}
.twikiButton, .twikiSubmit {
display: inline-block;
margin: 0 0.25em;
padding: 0.25em 0.4em 0.25em 0.5em;
border: 1px solid #e2e2e2;
border-radius: 3px;
background: none;
font-weight: 400;
cursor: pointer;
}
.twikiButton:hover, .twikiSubmit:hover {
position: relative;
top: 1px;
}
.twikiButton:active, .twikiSubmit:active {
position: relative;
top: 2px;
}
.twikiSubmit {
color: #fff;
background-color: #0078e7;
border: none;
}
.twikiButtonCancel {
color: #fff;
background-color: #ca3c3c;
border: none;
}
.patternSigLine {
display: none;
}
/* Upload form */
.twikiFormSteps {
background: none;
}
.twikiFormStep {
margin-bottom: 20px;
padding-bottom: 60px;
}
.twikiFormStep:last-child {
border-bottom: none;
}
/* Footer */
#patternBottomBar {
display: none;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment