Pinjasaur
11/2/2016 - 1:35 PM

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

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

readme.md
content_copyfile_download
  • Rendered
  • Source

Installation

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 raw.githack.com (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 http://www.csl.mtu.edu/cs3331.ck/www/).
  • NOTE: you can use regex to apply the stylesheet to only HTML pages like so: https?://www.csl.mtu.edu/cs3331.ck/www/.*?\.html
style.css
content_copyfile_download
@import url(https://fonts.googleapis.com/css?family=Inconsolata:700|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;
}

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

blockquote > font:empty {
  display: none;
}

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

h3 {
  font-weight: bold;
}

pre,
code,
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;
}