projects / tengwarjs.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: d8e34c8)
Alternate aesthetic for Parmaitë
authorKris Kowal <kris.kowal@cixar.com>
Tue, 4 Sep 2012 23:32:51 +0000 (16:32 -0700)
committerKris Kowal <kris.kowal@cixar.com>
Tue, 4 Sep 2012 23:32:51 +0000 (16:32 -0700)
editor/index.css patch | blob | history
editor/index.html patch | blob | history
editor/index.js patch | blob | history
editor/paper.jpg [new file with mode: 0644] patch | blob

diff --git a/editor/index.css b/editor/index.css
index 134b66e..202914e 100644 (file)
--- a/editor/index.css
+++ b/editor/index.css
@@ -6,7 +6,10 @@ body {
     width: 100%;
 
     overflow: auto;
-    color: #ff0;
+
+}
+
+body.annatar {
 
     background-repeat: no-repeat;
     background: #fefcea; /* Old browsers */
@@ -18,8 +21,25 @@ body {
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#c97e16',GradientType=0 ); /* IE6-9 */
     background: linear-gradient(top, #fefcea 0%,#f9e63b 7%,#e0a928 53%,#d69a2c 94%,#c97e16 99%); /* W3C */
 
+    color: #ff0;
     text-shadow: 0px 0px 10px #730 ;
+}
+
+body.parmaite {
+    background-image: url(paper.jpg);
+    background-repeat: no-repeat;
+    background-size: 100%;
+
+    color: #000;
+    text-shadow: 0px 0px 4px #ffc;
+}
+
+body.annatar .error {
+    text-shadow: 0px 0px 10px #f00 ;
+}
 
+body.parmaite .error {
+    color: #700;
 }
 
 body, textarea {
@@ -32,22 +52,25 @@ textarea, .copy {
     color: black;
 }
 
-a {
+body..annatar a {
     color: #a00;
 }
-
-a:visited {
+body.annatar a:visited {
     color: #c00;
 }
 
-a:hover {
+body.parmaite a {
+    color: #00a;
+}
+body.parmaite a:visited {
+    color: #007;
 }
 
-a:focus {
+
+a:hover {
 }
 
-.error {
-    text-shadow: 0px 0px 10px #f00 ;
+a:focus {
 }
 
 .tengwar.annatar > p {
@@ -61,9 +84,16 @@ a:focus {
 #output {
     text-align: center;
     line-height: 150px;
+}
+
+#output.tengwar.annatar {
     font-size: 60px;
 }
 
+#output.tengwar.parmaite {
+    font-size: 100px;
+}
+
 #output-box, #input-box {
     overflow: auto;
 }
diff --git a/editor/index.html b/editor/index.html
index de945b6..b867478 100644 (file)
--- a/editor/index.html
+++ b/editor/index.html
@@ -6,7 +6,7 @@
         <link rel="stylesheet" type="text/css" href="../tengwar-annatar.css">
         <link rel="stylesheet" type="text/css" href="index.css">
     </head>
-    <body>
+    <body class="annatar">
 
         <noscript>
             <br>This transcriber makes extensive use
diff --git a/editor/index.js b/editor/index.js
index 2138aa1..61697b5 100644 (file)
--- a/editor/index.js
+++ b/editor/index.js
@@ -45,7 +45,9 @@ function update() {
     var mode = modes[query.mode] || TengwarParmaite;
     var font = fonts[query.font] || TengwarAnnatar;
     output.classList.remove(query.font !== "parmaite" ? "parmaite" : "annatar");
+    body.classList.remove(query.font !== "parmaite" ? "parmaite" : "annatar");
     output.classList.add(query.font === "parmaite" ? "parmaite" : "annatar");
+    body.classList.add(query.font === "parmaite" ? "parmaite" : "annatar");
     output.innerHTML = mode.transcribe(value, {font: font, block: true});
     inputBox.style.height = query.height + "px";
 }
diff --git a/editor/paper.jpg b/editor/paper.jpg
new file mode 100644 (file)
index 0000000..fb62732
Binary files /dev/null and b/editor/paper.jpg differ
Tengwar Transcriber