Use new color scheme and remove color configurator

jsor · jsor · commit 8de682e91592 · 2017-02-07T11:55:33.000+01:00
diff --git a/redesign/index.html b/redesign/index.html
@@ -5,13 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>ReactPHP</title>
 
-    <style id="css-config">
-        :root {
-            --color-base: #2b3e51;
-            --color-highlight: #fc4349;
-        }
-    </style>
-
     <link href="https://fonts.googleapis.com/css?family=Raleway:300,700|Source+Sans+Pro:400,400i,700,700i|Roboto Mono" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
     <link href="style.css" rel="stylesheet">
@@ -235,103 +228,5 @@ <h2>Example</h2>
 
 <script>hljs.configure({classPrefix: ''});hljs.initHighlightingOnLoad();</script>
 
-<style>
-#color-picker {
-    position: fixed;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 5px;
-    background: #fff;
-    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
-}
-
-#color-picker fieldset {
-    display: inline-block;
-    white-space: nowrap;
-    border: 0;
-    padding: 5px;
-}
-</style>
-<form id="color-picker">
-    <fieldset>
-        <label>Base</label>
-        <input type="color" value="#2B3E51" id="base">
-    </fieldset>
-
-    <fieldset>
-        <label>Highlight</label>
-        <input type="color" value="#FC4349" id="highlight">
-    </fieldset>
-</form>
-
-<script>
-    function parseQueryParams(query){
-        if (query.indexOf('?') === 0) {
-            query = query.substr(1);
-        }
-        if (query.indexOf('#') === 0) {
-            query = query.substr(1);
-        }
-
-        if (!query) {
-            return {};
-        }
-
-        var pairs = query.split('&');
-        var obj = {}, p;
-
-        for (var i = 0, n = pairs.length; i < n; i++) {
-            if (!pairs[i]) {
-                continue;
-            }
-
-            p = pairs[i].split('=');
-            obj[p[0]] = decodeURIComponent(p[1]);
-        }
-
-        return obj;
-    }
-
-    function getColors() {
-        var query = parseQueryParams(location.hash);
-
-        query.base = query.base || '#2b3e51';
-        query.highlight = query.highlight || '#fc4349';
-
-        return query;
-    }
-
-    function setColors() {
-        var colors = getColors();
-
-        document.getElementById('css-config').innerHTML = ':root { --color-base: ' + colors.base + '; --color-highlight: ' + colors.highlight + '; }';
-    }
-
-    function changeColor(type, color) {
-        var colors = getColors();
-
-        colors[type] = color;
-        location.hash = 'base=' + encodeURIComponent(colors.base) + '&highlight=' + encodeURIComponent(colors.highlight);
-    }
-
-    var base = document.getElementById('base');
-    var highlight = document.getElementById('highlight');
-
-    var colors = getColors();
-
-    base.setAttribute('value', colors.base);
-    base.addEventListener('change', function(e) {
-        changeColor('base', e.target.value);
-    }, false);
-
-    highlight.setAttribute('value', colors.highlight);
-    highlight.addEventListener('change', function(e) {
-        changeColor('highlight', e.target.value);
-    }, false);
-
-    setColors();
-    window.onhashchange = setColors;
-</script>
 </body>
 </html>
diff --git a/redesign/style.css b/redesign/style.css
@@ -1,3 +1,11 @@
+:root {
+    --color-base: #333;
+    --color-highlight: #8892bf;
+    --color-highlight-dark: #4f5b93;
+    --color-highlight-light: #c4c9df;
+    --color-highlight-lighter: #e2e4ef;
+}
+
 html {
     box-sizing: border-box;
 }
@@ -30,7 +38,7 @@ h2 {
 }
 
 h3 {
-    color:var(--color-highlight);
+    color:var(--color-highlight-dark);
     text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
 }
 
@@ -79,12 +87,12 @@ code {
     background: var(--color-base);
     padding: 40px;
     text-align: center;
-    color: rgba(255, 255, 255, .85);
+    color: var(--color-highlight-lighter);
     text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
 }
 
 .hero2 h2 {
-    color: var(--color-highlight);
+    color: var(--color-highlight-light);
 }
 
 .hero3 {
