Matthew Mead's DigiPen website readability optimization with custom CSS/JS

0_README.md

About

I spent some time to optimize Meads website for readability. This CSS provides more readable fonts, eye strain reducing layout and makes sections of texts easier to distinguish.

Nothing revolutionary, it just something makes my day slightly better. ❤️

Installation

Option 1: Styler Chrome Extension

1. Install chrome extension Styler
2. Visit meads website
3. Copy the inject CSS into styler.

Option 2: Tampermonkey Chrome Extension

1. Install chrome extension Tampermonkey
2. Click this to install CSS injector script

Comment questions and I'll reply.

Preview

Versions

• V1.5 Even better fonts, provided from google
• V1.4 Changed margins for even more readability and now auto detects small aspect ratio screens and adjusts margins for better readability on mobile and meads projector in Plato room at DigiPen campus.
• V1.3 Optimized title line height for mobile and verticle screens.
• V1.2 The ultimate readability font family. (Copied directly from GitHub's css)
• V1.1 Deleted the background image of body and fixed margin

1_mead_inject.css

/**
    V1.5 Even better fonts, provided from google
    V1.4 Changed margins for even more readability and now auto detects small aspect ratio screens and adjusts margins for better readability on mobile and meads projector in Plato room at DigiPen campus.
    V1.3 Optimized title line height for mobile and verticle screens.
    V1.2 The ultimate readability font family. (Copied directly from GitHub's css)
    V1.1 Deleted the background image of body and fixed margin
*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
	max-width: 70%;
  	padding-left: 15%;  
	font-family: 'Open Sans', sans-serif;
  	background: initial;
  	margin: 0;
}

.SectionHeader, h1 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size : 40pt !important;
  border-color: initial;
  border-style: initial;
  background: initial;
  padding: 0 0 0 0;
  margin: 65px 0 15px 0;
  line-height: 55px;
}

.SectionHeader::before {
  	position: absolute;
    display: block;
  	width: 70%;
    content: "";
  	margin-top: -25px;
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
}

TT {
 font-size: inherit; 
}

PRE.SourceCode {
}

@media (max-aspect-ratio: 3/2) {
  body {
	max-width: 95%;
	padding-left: 2.5%;
  }
}

2_DoNotUseIfAlreadyUsingStyler_GreaseMonkeyCSSInjector.user.js

// ==UserScript==
// @name         Mead Website Style Optimizer
// @namespace    http://bit.ly/MeadStyleOpt
// @version      1.5
// @description  Github page: http://bit.ly/MeadStyleOpt
// @author       Louis Hong
// @match        https://azrael.digipen.edu/~mmead/*
// @match        http://veronica.xmmg.com/dpweb/*
// @match        http://pontus0.digipen.edu/~mmead/*
// @match        http://gina.xmmg.com/dpweb/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function addGlobalStyle(css) {
        var head, style;
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }
    addGlobalStyle('@import url(https://fonts.googleapis.com/css?family=Open+Sans);body{max-width:70%;padding-left:15%;font-family:'Open Sans',sans-serif;background:initial;margin:0}.SectionHeader,h1{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:40pt!important;border-color:initial;border-style:initial;background:initial;padding:0;margin:65px 0 15px;line-height:55px}.SectionHeader::before{position:absolute;display:block;width:70%;content:"";margin-top:-25px;height:6px;background:url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x;border:0}TT{font-size:inherit}@media (max-aspect-ratio:3/2){body{max-width:95%;padding-left:2.5%}}');
})();