When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:
main {
max-width: 38rem;
padding: 2rem;
margin: auto;
}
module FlowGraphsAndClassDiagrams | |
import analysis::flow::ObjectFlow; | |
import lang::java::flow::JavaToObjectFlow; | |
import List; | |
import Relation; | |
import lang::java::m3::Core; | |
import IO; | |
import vis::Figure; |
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Subnetmask calculator</title> | |
<link href="style.css" rel="stylesheet"> | |
<script src="script.js"></script> | |
<script src="subnetmaskCalculator.js"></script> | |
<body> | |
<div id="page"> |
// Paul Irish animation loop polyfill | |
// https://gist.github.com/paulirish/1579671 | |
(function() { | |
var lastTime = 0; | |
var vendors = ['ms', 'moz', 'webkit', 'o']; | |
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { | |
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; | |
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] | |
|| window[vendors[x]+'CancelRequestAnimationFrame']; |
/** | |
* Very simple css3 polaroid styling | |
*/ | |
body{ | |
background: #f06; | |
background: linear-gradient(45deg, orange, yellow); | |
min-height:100%; | |
} | |
div#container{ | |
width:900px; |
/** | |
* Very simple css3 polaroid styling | |
*/ | |
body{ | |
background: #f06; | |
background: linear-gradient(45deg, orange, yellow); | |
min-height:100%; | |
} | |
#photo{ | |
width:200px; |
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ | |
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating | |
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel | |
// MIT license | |
(function() { | |
var lastTime = 0; | |
var vendors = ['ms', 'moz', 'webkit', 'o']; |