Skip to content

Instantly share code, notes, and snippets.

View kunukn's full-sized avatar

Kunuk Nykjær kunukn

View GitHub Profile
/* Responsive design, smallest device first */
#rendered .title::after {
content: ' - Phone';
}
@media (min-width: 480px) {
#rendered .title::after {
content: ' - Phone large';
}
#rendered {
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Google News</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel="stylesheet" type="text/css" href="google-news-responsive.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js'>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Handlebars Helloworld</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- handlebars from CDN -->
<script
(function(d){
var script = d.createElement('script');
script.src = '//rawgithub.com/kunukn/misc/master/src/temp/script/whiteOnBlack.js';
d.getElementsByTagName('head')[0].appendChild(script);
})(document)
(function(d){
if (typeof jQuery === 'undefined') {
var script = d.createElement('script');
script.src = '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
d.getElementsByTagName('head')[0].appendChild(script);
}
})(document)
!function() {
// attach a css file to a webpage dynamically
var cssUrl = '//rawgit.com/kunukn/misc/master/src/temp/styles/whiteOnBlack.css'
var styleElement = document.createElement('link');
styleElement.rel = 'stylesheet';
styleElement.type = 'text/css';
styleElement.href = cssUrl;
document.getElementsByTagName('head')[0].appendChild(styleElement);
}();
/*
Author: Kunuk Nykjaer
version 0.13
About: prototype util to make a webpage responsive
Usage: copy and run this code in a browser console
and see the result by changing the width size of the browser
Optionally edit the config data at the bottom of this script