From c2177d27edd5058dacadc104a9cb07b010b63cc1 Mon Sep 17 00:00:00 2001 From: Nitish Khagwal Date: Sun, 19 Aug 2018 17:27:49 +0530 Subject: [PATCH] Updated View --- css/style.css | 147 ++++++++++++++-------------------------------- index.html | 39 ++++++++---- scripts/script.js | 6 +- 3 files changed, 72 insertions(+), 120 deletions(-) diff --git a/css/style.css b/css/style.css index 813b3ad..723d90a 100644 --- a/css/style.css +++ b/css/style.css @@ -13,6 +13,7 @@ body { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Source Sans Pro', sans-serif; + margin: 0; } a { @@ -20,115 +21,56 @@ a { text-decoration: none; } -a:hover { - text-decoration: underline; -} - -.ch-sidebar { - width: 85px; - padding: 10px; - position: absolute; - left: 0; - top: 0; - bottom: 0; - border-right: solid 1px #E5E5E5; +.ch-topbar { + width: 100%; + border-bottom: solid 1px #E5E5E5; background: #FFFFFF; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08); - z-index: 300; -} - -.ch-sidebar img { - display: block; - margin: 0 auto; -} - -.ch-share { - width: 32px; - height: 32px; - margin-top: 32px; - display: block; - margin: 15px auto; - opacity: .75; - transition: .25s ease-in; - position: relative; -} - -.ch-share:first-of-type { - margin-top: 25px; + font-size: 0; } -.ch-share:hover { - opacity: 1; -} - -.ch-share:after { - font-size: 14px; - left: 34px; - top: 0px; - position: absolute; - padding: 3px 15px 5px; - border-radius: 15px; - color: #534e5c; - background: #FFFFFF; - box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1); - opacity: 0; - transition: .25s ease-in; - margin-top: 3px; - transform: translateX(-2px); -} - -.ch-share:hover:after { - opacity: 1; - transform: translateX(2px); -} - -.ch-share.twitter:after { - content: "Tweet"; -} - -.ch-share.facebook:after { - content: "Share"; +.ch-topbar .grid-lt { + width: 25%; + display: inline-block; + vertical-align: middle; + padding: 10px; } -.ch-share.github:after { - content: "Star"; +.ch-topbar .grid-rt { + width: 75%; + display: inline-block; + text-align: right; + vertical-align: middle; + padding: 0 10px; } -.ch-starcount { - display: block; - text-align: center; - margin-top: -12px; +.ch-devmode { + display: inline-block; + vertical-align: middle; color: #534e5c; -} - -.twitter { - background-image: url("../images/icon-twitter.svg"); -} - -.facebook { - background-image: url("../images/icon-facebook.svg"); -} - -.github { - background-image: url("../images/icon-github.svg"); + font-size: 15px; + margin-left: 3px; + background: #f2f2f2; + border-radius: 15px; + padding: 2px 10px 4px 10px; } p { - text-align: left; font-size: 18px; color: #929197; padding: 15px 25px; } .ch-paper { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - padding: 20px 20px 20px 105px; - text-align: left; - overflow: auto; + width: 100%; + max-width: 1600px; + text-align: center; + margin: 20px auto; +} + +.ch-footer { + text-align: center; + padding: 0 0 25px 0; } .ch-gradient-brick { @@ -237,7 +179,6 @@ p { right: 0; z-index: 500; text-align: right; - overflow: none; } .ch-notify { @@ -257,9 +198,9 @@ p { } .ch-distro { - position: absolute; + position: fixed; z-index: 50; - left: 15px; + right: 15px; bottom: 15px; min-width: 200px; max-width: 100%; @@ -270,7 +211,7 @@ p { height: 50px; border-radius: 50%; position: absolute; - left: 0px; + right: 0px; bottom: 0px; background-color: #FFFFFF; background-image: url("../images/coolhue-sprite.svg"); @@ -312,7 +253,6 @@ p { font-size: 17px; background-position: left center; background-repeat: no-repeat; - vertical-align: middle; } .ch-distro-type:hover { @@ -419,12 +359,15 @@ noscript { } } -@media screen and (max-width: 600px) { - .ch-paper { - text-align: center; +@media screen and (max-width:480px) { + .ch-share-brick { + margin: 0; } - .ch-gradient-brick { - display: block; - margin: 35px auto; + .ch-share-brick:hover { + box-shadow: none; + } + .ch-share-text, + .ch-starcount { + display: none; } } \ No newline at end of file diff --git a/index.html b/index.html index 09ddd99..dab10f8 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + CoolHue 2.0 - Coolest Gradient Hues and Swatches @@ -11,21 +12,16 @@ - -
- CoolHue - -
-
-
- Sketch Palette - Photoshop Palette - Customize Palette -
+ +
+
+ CoolHue +
+
+ Dev Mode
-
- +
@@ -33,10 +29,27 @@
+ +
+

© Copyright + Webkul Software, All rights reserved.

+
+ +
+ +
+
+
+ Sketch Palette + Photoshop Palette + Customize Palette +
+
+ \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js index 919da76..b5349d1 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -12,6 +12,7 @@ document.addEventListener("DOMContentLoaded", function () { var gradientStart = " 10%, "; var gradientEnd = " 100%)"; var colorData; + var chStarCount = document.querySelector(".ch-starcount"); var xhr = new XMLHttpRequest(); xhr.open("GET", "scripts/coolhue.json", true); @@ -78,11 +79,6 @@ document.addEventListener("DOMContentLoaded", function () { nodeGradientBrick.appendChild(nodeColors); chPaper.appendChild(nodeGradientBrick); } - var footerWrapper = document.createElement("div"); - var para = document.createElement("p"); - para.innerHTML = "© Copyright Webkul Software, All rights reserved."; - footerWrapper.appendChild(para); - chPaper.appendChild(footerWrapper); } var coolHueAction = function (event) {