11/2/2016 - 1:35 PM

Stylesheet for CK Shene's websites (CS3331, etc.)

Stylesheet for CK Shene's websites (CS3331, etc.)


This is a minimal stylesheet for CK Shene's website(s), primarily focusing on CS3331.

Using a browser plugin like Stylus, it's easy to apply the stylesheet:

  1. Copy + paste the link to the raw stylesheet into something like RawGit (this is important as GitHub serves files with the wrong Content-Type to mitigate hotlinking) and copy the new URL to the file.
  2. Create a new style in Stylus or whatever style manager you're using:
@import url(URL_TO_STYLESHEET);
  1. Apply the style to the correct sites (e.g. with CS3331, URLs prefixed with
  • NOTE: you can use regex to apply the stylesheet to only HTML pages like so: https?://*?\.html
@import url(|Open+Sans:400,700);

:root {
  --font-sans-serif: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  --font-monospace:  Inconsolata, Consolas, Monaco, monospace;

body {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
  background: #fff;
  color: #111;

@media (max-width: 48rem) {
  body {
    padding: 1rem;

body * + * {
  margin-top: 2rem;

font[face*="Helvetica"] {
  font-family: var(--font-sans-serif);

blockquote > font:empty {
  display: none;

font[size] {
  font-size: 1em;

h3 {
  font-weight: bold;

font[face*="Courier"] {
  font-family: var(--font-monospace);
  font-weight: bold;
  background: #ddd;
  padding: .2em;
  border-radius: 2px;

img[src*="GrLine.gif"] {
  height: 0;
  border-bottom: 2px solid #333;
  margin-bottom: 1em;

img {
  display: block;
  max-width: 100%;
  height: auto;