diff options
Diffstat (limited to 'dev-random/static')
-rw-r--r-- | dev-random/static/css/main.css | 139 | ||||
-rw-r--r-- | dev-random/static/css/skeleton.css | 95 | ||||
-rw-r--r-- | dev-random/static/img/corner.png | bin | 3629 -> 3671 bytes | |||
-rw-r--r-- | dev-random/static/js/hex2ascii.js | 20 | ||||
-rw-r--r-- | dev-random/static/js/microTags.js | 99 |
5 files changed, 247 insertions, 106 deletions
diff --git a/dev-random/static/css/main.css b/dev-random/static/css/main.css index 7978af3..39d8b62 100644 --- a/dev-random/static/css/main.css +++ b/dev-random/static/css/main.css @@ -5,25 +5,7 @@ /******************************************************************************/ -article, section, -header, footer, -aside, nav { - display: block; -} - -html { - width: 100%; - height: 100%; - margin: 0; - padding: 0; -} - body { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - min-width: 750px; background-color: white; color: #101010; @@ -47,7 +29,6 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; - text-decoration: inherit; } @@ -64,11 +45,32 @@ a { text-decoration: none; } - a:hover { text-decoration: underline; } +img, table, pre { + margin: 1em .5em; + padding: .25em; + border: thin solid silver; + overflow: auto; +} + +figure { + display: block; + margin: 1em auto; + border: thin solid silver; + text-align: center; + font-size: .9em; +} + +figure img { + margin: .1em; + padding: .1em; + border: none; + max-width: 100%; + overflow: auto; +} pre { margin: 1em .5em; @@ -83,6 +85,30 @@ pre { overflow: auto; } +table { + border-collapse: collapse; + border-spacing: 0; + border-radius: 4px; +} + +table th { + font-weight: bolder; + margin: .6em .5em; +} + +table td { + margin: .4em .5em; +} + +table th, +table td { + border: thin dashed silver; +} + +table tr { + border: thin solid silver; +} + /******************************************************************************/ @@ -90,7 +116,7 @@ pre { /******************************************************************************/ -.page .head h1 { +.page-head h1 { margin: .7em auto; font-family: Georgia, "Times New Roman", Times, serif; @@ -107,12 +133,12 @@ pre { font-variant: small-caps; } -.content #page-title { +.page-content #page-title { font-size: .9em; } -.content .post { +.page-content .post { clear: both; margin: 1em 0 3em 0; } @@ -185,7 +211,7 @@ pre { } -.page .foot p { +.page-footer p { display: block; width: 60%; @@ -194,25 +220,64 @@ pre { margin-right: auto; } +#pagination { + display: block; + clear: both; + text-align: center; +} + /******************************************************************************/ /* Misc */ /******************************************************************************/ -#github-link { +// GitHub button + +@media screen and (min-width: 800px) { + #github-link { + display: block; + position: absolute; + top: 0; + left: 0; + width: 50px; + height: 100px; + background-image: url("../img/corner.png"); + margin: 0; + border: none; + text-decoration: none; + color: transparent; + font-size: 0; + } +} + +// Tag list + +ul#tagslist { display: block; - position: absolute; - top: 0; - left: 0; - width: 50px; - height: 100px; - background-image: url("../img/corner.png"); - margin: 0; - border: none; - text-decoration: none; - color: transparent; - font-size: 0px; - text-decoration: none; + width: 75%; + margin: 1em auto; + list-style-type: none; +} + +ul#tagslist li { + display: inline-block; + list-style-type: none; + margin: .5em .2em; + transition: transform 1s ease 0s; + -o-transition: -o-transform 1s ease 0s; + -ms-transition: -ms-transform 1s ease 0s; + -moz-transition: -moz-transform 1s ease 0s; + -webkit-transition: -webkit-transform 1s ease 0s; +} + + + +ul#tagslist li:hover { + transform: rotate(0deg) scale(1.2, 1.2) !important; + -o-transform: rotate(0deg) scale(1.2, 1.2) !important; + -ms-transform: rotate(0deg) scale(1.2, 1.2) !important; + -moz-transform: rotate(0deg) scale(1.2, 1.2) !important; + -webkit-transform: rotate(0deg) scale(1.2, 1.2) !important; } diff --git a/dev-random/static/css/skeleton.css b/dev-random/static/css/skeleton.css index 02010f7..dba964f 100644 --- a/dev-random/static/css/skeleton.css +++ b/dev-random/static/css/skeleton.css @@ -1,68 +1,65 @@ +article, section, +header, footer, +aside, nav { + display: block; +} + +body, .page { + margin: 0; + padding: 0; +} + .page { - display: block; - margin-top: 5%; + display: block; + margin: 2% 4%; } -.page .head, -.page .main, -.page .foot { +.page-head, +.page-footer { display: block; width: 100%; clear: both; } -.page .main { - display: table; - border-collapse: separate; - border-spacing: .5%; - width: 75%; - margin: .5em auto; - clear: both; -} - -.page .main .sidebar { - display: table-cell; - width: 25%; +.page-content { + display: block; + float: right; + margin-left: 1%; + margin-right: 1%; + width: 68%; } -.page .main .content { - display: table-cell; - width: 74%; +.page-sidebar { + display: block; + margin-left: 1%; + margin-right: 1%; + width: 28%; + float: left; } -@media screen and (max-width: 800px) { - .page .main { - width: 100%; - clear: both; - } +@media screen and (min-width: 800px) { + .page { margin: 5% 10%; } } -@media screen and (max-width: 700px) { - .page .main { - display: block; - } - - .page .main .sidebar, - .page .main .content { - display: block; - margin: 0 .5em; - width: 100%; - clear: both; - } - - .widget { - display: block; - } - - .widget ul, - .widget li { - display: inline; - } - - .widget h3 { display: none; } +@media screen and (max-width: 600px) { + .page { margin: 0; } + .page-content, + .page-sidebar { + width: 98%; + clear: both; + } } @media print { - .sidebar { display: none; } + .page { margin: 0; } + .page-content { + width: 98%; + clear: both; + } + .page-head, + .page-footer, + .page-sidebar { + display: none; + } } diff --git a/dev-random/static/img/corner.png b/dev-random/static/img/corner.png Binary files differindex 52e8690..e3f76cc 100644 --- a/dev-random/static/img/corner.png +++ b/dev-random/static/img/corner.png diff --git a/dev-random/static/js/hex2ascii.js b/dev-random/static/js/hex2ascii.js deleted file mode 100644 index 3dde36f..0000000 --- a/dev-random/static/js/hex2ascii.js +++ /dev/null @@ -1,20 +0,0 @@ - -window.hex2ascii = {}; -window.hex2ascii.init = function() { - var els = document.getElementsByClassName('hex'), - hex, text, - i, j, e; - - for(i=0; i < els.length; i++) { - e = els[i]; - hex = e.innerHTML.split(' '); - text = ""; - - for(j=0; j < hex.length; j++) { - text += String.fromCharCode(parseInt(hex[j], 16)); - } - - e.innerHTML = text; - e.className = e.className.replace('hex',''); - } -}; diff --git a/dev-random/static/js/microTags.js b/dev-random/static/js/microTags.js new file mode 100644 index 0000000..2f389b0 --- /dev/null +++ b/dev-random/static/js/microTags.js @@ -0,0 +1,99 @@ + +var µTags = function(element, options) { + this._el = element; + this._children = element.childNodes; + + this._max_size = 3; + this._min_size = 0.7; + this._max_angle = 15; + this._min_angle = -15; + + if (options != undefined) + this._set_options(options); + + this._max_count = this._get_max_count(); + this._set_sizes(); + this._set_tilt(); +} + +µTags.prototype.version = "0.1a" + +µTags.prototype._set_options = function(options) { + var max_size = options['max-size'], + min_size = options['min-size'], + max_angle = options['max-angle'], + min_angle = options['min-angle']; + + if ((max_size >= 1) && (max_size > min_size)) + this._max_size = max_size; + else + console.error("µTags: option `max-size` must be >= 1 and > min-size"); + + if ((min_size > 0) && (min_size < max_size)) + this._min_size = min_size; + else + console.error("µTags: option `min-size` must be > 0 and < max-size"); + + if (max_angle > min_angle) { + this._max_angle = max_angle; + this._min_angle = min_angle; + } + else + console.error("µTags: option `max-angle` must be > `min-angle`"); + +} + +µTags.prototype.eachTag = function(callback) { + var i, child, tag, count; + for (i=0; i < this._children.length; i++) { + child = this._children[i]; + if (child.attributes != undefined) { + window._c = child; + count = parseInt(child.attributes["data-count"].value || "1"); + callback(child, count); + } + } +} + +µTags.prototype._get_max_count = function() { + var max = 0; + this.eachTag(function(element, count) { + max = (max < count) ? count : max; + }); + return max; +} + +µTags.prototype._set_sizes = function() { + var size, + max = this._max_size, + min = this._min_size, + max_count = this._max_count; + + this.eachTag(function(element, count) { + size = (count * max / max_count); + size = (size >= min) ? size : min; + console.debug(element+ ': ' + count + ': ' + size ); + element.style['fontSize'] = size + 'em'; + }); +} + +µTags.prototype._set_tilt = function() { + var angle, + max = this._max_angle, + min = this._min_angle; + this.eachTag(function(element, count) { + angle = min + (Math.random() * (max - min)); + element.style['transform'] = 'rotate(' + angle + 'deg)'; + element.style['MozTransform'] = 'rotate(' + angle + 'deg)'; + element.style['OTransform'] = 'rotate(' + angle + 'deg)'; + element.style['WebkitTransform'] = 'rotate(' + angle + 'deg)'; + element.style['msTransform'] = 'rotate(' + angle + 'deg)'; + }); + +} + +if (window != undefined) { + window.µTags = µTags; +} + + |