themenator: Integrate to the site

Fixes #304 Signed-off-by: Quentin Glidic <sardemff7+git@sardemff7.net>
author: Quentin Glidic <sardemff7+git@sardemff7.net> 2016-01-03 14:15:35 +0100
committer: Quentin Glidic <sardemff7+git@sardemff7.net> 2016-01-03 15:05:52 +0100
commit: 041923315576fa2eb4b747e932853735cc8f90ce (patch)
tree: afe38f07a77a5f76509f8cdb08eeb43c69a7659f
parent: 591eb762c2d7744b139f45d4896d500359728104 (diff)
4 files changed, 211 insertions, 189 deletions
diff --git a/_layouts/default.html b/_layouts/default.html
index 6919be83..93629e01 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -8,6 +8,9 @@
     <link rel="stylesheet" type="text/css" href="{{ site.url }}/stylesheets/stylesheet.css" media="screen" />
     <link rel="stylesheet" type="text/css" href="{{ site.url }}/stylesheets/pygment_trac.css" media="screen" />
     <link rel="stylesheet" type="text/css" href="{{ site.url }}/stylesheets/print.css" media="print" />
+{% if page.generator %}
+    <link rel="stylesheet" type="text/css" href="{{ site.url }}/stylesheets/generator.css" media="screen" />
+{% endif %}
 
     <!--[if lt IE 9]>
     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
@@ -31,7 +34,7 @@
     <div id="content-wrapper">
       <div class="inner clearfix">
         <section id="main-content">
-          <h1>{{ page.title }}</h1> 
+          <h1>{{ page.title }}</h1>
           {{ content }}
 
         </section>
@@ -46,7 +49,6 @@
         <h2 class="menuentry">{{ iter_page.title }}</h2>
         {% endif %}
         {% endfor %} <!-- page -->
-        <h2 class="menuentry"><a href="generator.html">Theme Generator</a></h2>
         <h2 class="menuentry"><a href="{{ site.url }}/manpage.html">Manpage</a></h2>
             <h1>Stable</h1>
           <a
diff --git a/generator.html b/_layouts/generator.html
index cb0cbfda..65c25f30 100644
--- a/generator.html
+++ b/_layouts/generator.html
@@ -1,5 +1,10 @@
-<!DOCTYPE html>
-<html lang="en">
+---
+layout: default
+generator: yes
+---
+
+{{ content }}
+
 <!--
     Copyright © 2015 Quentin "Sardem FF7" Glidic
 
@@ -21,186 +26,6 @@
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 -->
-    <head>
-        <meta charset="utf-8">
-        <title>Rofi themenator</title>
-        <style media="screen" type="text/css">
-            * {
-                box-sizing: border-box;
-            }
-            body {
-                position: relative;
-                margin: 30px 50px;
-                background: #444;
-                color: white;
-            }
-
-            h1 {
-                margin: 0 0 40px;
-            }
-
-            #reset {
-                position: absolute;
-                top: 0;
-                right: 0;
-            }
-
-            #preview {
-                display: inline-block;
-                margin: 0 1% 0 0;
-                padding: 6px;
-                width: 49%;
-                font-family: monospace;
-                background-color: black;
-                border: 2px dashed white;
-                vertical-align: top;
-            }
-
-            #preview * {
-                margin: 0;
-                padding: 0;
-            }
-
-            #preview .row {
-                padding: 4px 10px;
-                background-color: black;
-            }
-
-            #preview .row {
-                margin-bottom: 4px;
-            }
-
-            #preview-inside {
-                padding: 4px 4px 0;
-                border: 2px solid;
-            }
-
-            #preview-lines {
-                display: inline-block;
-                width: calc(100% - 19px);
-                vertical-align: top;
-            }
-
-            #preview-sep {
-                display: inline-block;
-                width: 15px;
-                height: 100px;
-                margin-left: 4px;
-                vertical-align: top;
-            }
-
-            #preview-sep-line {
-                height: 2px;
-                margin-bottom: 4px;
-            }
-
-            #generator {
-                display: inline-block;
-                width: 49%;
-                margin: 0 0 0 1%;
-
-                font-family: monospace;
-                vertical-align: top;
-            }
-
-            #config, #command {
-                margin: 0;
-                padding: 5px;
-                border: 2px dashed white;
-                background: #bbb;
-                color: black;
-            }
-
-            #command {
-                margin-top: 10px;
-            }
-
-            #config > span {
-                margin: 0;
-                padding: 0;
-                line-height: 150%;
-            }
-
-            #buttons {
-                margin: 30px -1%;
-                padding: 0;
-                color: black;
-                vertical-align: top;
-            }
-
-            #buttons > div {
-                display: inline-block;
-                margin: 0 1% 30px;
-                padding: 4px 10px;
-                width: 23%;
-                background: rgba(255, 255, 255, 0.7);
-                vertical-align: top;
-            }
-
-            #buttons > div > h2 {
-                margin: 4px 0;
-            }
-
-            #buttons > div > h2:not(:first-child) {
-                margin-top: 8px;
-            }
-
-            #buttons > div > label {
-                display: block;
-                margin: 5px 10px;
-                overflow: hidden;
-            }
-
-            #buttons > div > label > * {
-                display: inline-block;
-                vertical-align: middle;
-            }
-
-            #buttons > div > label > *:first-child {
-                width: 50%;
-            }
-
-            #buttons > div > label > *:not(:first-child) {
-                width: 23%;
-                margin: 0 1%;
-                padding: 0;
-                border: 0;
-            }
-
-            #buttons > div > label > input[type=button] {
-                padding: 3px 0;
-            }
-
-            #buttons > div > label > input[type=file] {
-                color: transparent;
-            }
-
-            #buttons > div > .drop-zone {
-                padding: 2px 4px;
-                border: 2px dashed black;
-            }
-
-            #buttons > div > .image-name {
-                text-align: center;
-            }
-
-            @media screen and (max-device-width: 640px) {
-                #preview {
-                    width: 100%;
-                }
-
-                #config, #command {
-                    display: none;
-                }
-
-                #buttons > div {
-                    width: 48%;
-                }
-            }
-        </style>
-    </head>
-<body>
-    <h1>Rofi themenator</h1>
     <input id="reset" type="button" value="Reset stored values" />
 
     <div id="preview">
@@ -446,7 +271,8 @@ rofi.color-enabled: true</span></pre><p id="command">rofi</p></div>
 
     for ( var name in colors ) {
         var ge = document.createElement('div');
-        var title = document.createElement('h2');
+        var title = document.createElement('p');
+        title.setAttribute('class', 'group-name');
         title.appendChild(new Text(name));
         ge.appendChild(title);
 
@@ -544,10 +370,13 @@ rofi.color-enabled: true</span></pre><p id="command">rofi</p></div>
 
 
     var window_settings = buttons.firstChild;
-    var title = document.createElement('h2');
+    var title = document.createElement('p');
+    title.setAttribute('class', 'group-name');
     title.appendChild(new Text('Overall background'));
+    var text = document.createElement('small');
+    text.appendChild(new Text("(Transparency testing only, not in the theme)"));
+    title.appendChild(text);
     window_settings.appendChild(title);
-    window_settings.appendChild(new Text("(This is not part of the theme, but to test the effect of transparency)"));
 
     var label = document.createElement('label');
 
@@ -598,5 +427,3 @@ rofi.color-enabled: true</span></pre><p id="command">rofi</p></div>
     attachEvent(preview, 'drop', setImage);
 
     </script>
-</body>
-</html>
diff --git a/p11-Generator.md b/p11-Generator.md
new file mode 100644
index 00000000..ba5d474e
--- /dev/null
+++ b/p11-Generator.md
@@ -0,0 +1,4 @@
+---
+layout: generator
+title: Theme generator
+---
diff --git a/stylesheets/generator.css b/stylesheets/generator.css
new file mode 100644
index 00000000..d150cf54
--- /dev/null
+++ b/stylesheets/generator.css
@@ -0,0 +1,189 @@
+
+#main-content {
+    position: relative;
+}
+
+#main-content * {
+    box-sizing: border-box;
+}
+
+h1 {
+    margin: 0 0 40px;
+}
+
+#reset {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+#preview {
+    display: inline-block;
+    margin: 0 1% 0 0;
+    padding: 6px;
+    width: 49%;
+    font-family: monospace;
+    font-size: 0.9em;
+    background-color: black;
+    border: 2px dashed black;
+    vertical-align: top;
+}
+
+#preview * {
+    margin: 0;
+    padding: 0;
+}
+
+#preview .row {
+    margin-bottom: 4px;
+    padding: 4px 10px;
+    background-color: black;
+    line-height: 1em;
+}
+
+#preview-inside {
+    padding: 4px 4px 0;
+    border: 2px solid;
+}
+
+#preview-lines {
+    display: inline-block;
+    width: calc(100% - 19px);
+    vertical-align: top;
+}
+
+#preview-sep {
+    display: inline-block;
+    width: 15px;
+    height: 100px;
+    margin-left: 4px;
+    vertical-align: top;
+}
+
+#preview-sep-line {
+    height: 2px;
+    margin-bottom: 4px;
+}
+
+#generator {
+    display: inline-block;
+    width: 49%;
+    margin: 0 0 0 1%;
+
+    font-family: monospace;
+    vertical-align: top;
+}
+
+#config, #command {
+    margin: 0;
+    padding: 5px;
+    border: 2px dashed black;
+    background: #bbb;
+    color: black;
+    font-size: 13px;
+}
+
+#command {
+    margin-top: 10px;
+}
+
+#config > span {
+    margin: 0;
+    padding: 0;
+    line-height: 150%;
+}
+
+#buttons {
+    margin: 30px -1%;
+    padding: 0;
+    color: black;
+    vertical-align: top;
+}
+
+#buttons > div {
+    display: inline-block;
+    margin: 0 1% 30px;
+    padding: 4px 10px;
+    width: 48%;
+    background: rgba(255, 255, 255, 0.7);
+    vertical-align: top;
+}
+
+#buttons > div > .group-name {
+    margin: 4px 0;
+    font-size: 1.1em;
+    font-weight: bold;
+}
+
+#buttons > div > .group-name:not(:first-child) {
+    margin-top: 8px;
+}
+
+#buttons > div > .group-name > small {
+    margin-left: 1em;
+    font-size: 0.5em;
+    font-weight: normal;
+}
+
+#buttons > div > label {
+    display: block;
+    margin: 5px 10px;
+    overflow: hidden;
+}
+
+#buttons > div > label > * {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+#buttons > div > label > *:first-child {
+    width: 50%;
+}
+
+#buttons > div > label > *:not(:first-child) {
+    width: 23%;
+    margin: 0 1%;
+    padding: 0;
+    border: 0;
+}
+
+#buttons > div > label > input {
+    background: transparent;
+}
+
+#buttons > div > label > input[type=button] {
+    padding: 3px 0;
+    background: #444;
+    color: white;
+}
+
+#buttons > div > label > input[type=button]:hover, #buttons > div > label > input[type=button]:active {
+    background: #268bd2;
+}
+
+#buttons > div > label > input[type=file] {
+    color: transparent;
+}
+
+#buttons > div > .drop-zone {
+    padding: 2px 4px;
+    border: 2px dashed black;
+}
+
+#buttons > div > .image-name {
+    text-align: center;
+}
+
+@media screen and (max-device-width: 640px) {
+    #preview {
+        width: 100%;
+    }
+
+    #config, #command {
+        display: none;
+    }
+
+    #buttons > div {
+        width: 48%;
+    }
+}
author	Quentin Glidic <sardemff7+git@sardemff7.net>	2016-01-03 14:15:35 +0100
committer	Quentin Glidic <sardemff7+git@sardemff7.net>	2016-01-03 15:05:52 +0100
commit	041923315576fa2eb4b747e932853735cc8f90ce (patch)
tree	afe38f07a77a5f76509f8cdb08eeb43c69a7659f
parent	591eb762c2d7744b139f45d4896d500359728104 (diff)