aboutsummaryrefslogtreecommitdiffstats
path: root/dev-random/static
diff options
context:
space:
mode:
Diffstat (limited to 'dev-random/static')
-rw-r--r--dev-random/static/css/main.css139
-rw-r--r--dev-random/static/css/skeleton.css95
-rw-r--r--dev-random/static/img/corner.pngbin3629 -> 3671 bytes
-rw-r--r--dev-random/static/js/hex2ascii.js20
-rw-r--r--dev-random/static/js/microTags.js99
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
index 52e8690..e3f76cc 100644
--- a/dev-random/static/img/corner.png
+++ b/dev-random/static/img/corner.png
Binary files differ
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;
+}
+
+