Skip to content

Commit c2177d2

Browse files
khagwalkhagwal
committed
Updated View
1 parent 0aa3b3a commit c2177d2

File tree

3 files changed

+72
-120
lines changed

3 files changed

+72
-120
lines changed

‎css/style.css‎

Lines changed: 45 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -13,122 +13,64 @@ body {
1313
-webkit-font-smoothing: subpixel-antialiased;
1414
-moz-osx-font-smoothing: grayscale;
1515
font-family: 'Source Sans Pro', sans-serif;
16+
margin: 0;
1617
}
1718

1819
a {
1920
color: #2750C4;
2021
text-decoration: none;
2122
}
2223

23-
a:hover {
24-
text-decoration: underline;
25-
}
26-
27-
.ch-sidebar {
28-
width: 85px;
29-
padding: 10px;
30-
position: absolute;
31-
left: 0;
32-
top: 0;
33-
bottom: 0;
34-
border-right: solid 1px #E5E5E5;
24+
.ch-topbar {
25+
width: 100%;
26+
border-bottom: solid 1px #E5E5E5;
3527
background: #FFFFFF;
3628
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
37-
z-index: 300;
38-
}
39-
40-
.ch-sidebar img {
41-
display: block;
42-
margin: 0 auto;
43-
}
44-
45-
.ch-share {
46-
width: 32px;
47-
height: 32px;
48-
margin-top: 32px;
49-
display: block;
50-
margin: 15px auto;
51-
opacity: .75;
52-
transition: .25s ease-in;
53-
position: relative;
54-
}
55-
56-
.ch-share:first-of-type {
57-
margin-top: 25px;
29+
font-size: 0;
5830
}
5931

60-
.ch-share:hover {
61-
opacity: 1;
62-
}
63-
64-
.ch-share:after {
65-
font-size: 14px;
66-
left: 34px;
67-
top: 0px;
68-
position: absolute;
69-
padding: 3px 15px 5px;
70-
border-radius: 15px;
71-
color: #534e5c;
72-
background: #FFFFFF;
73-
box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1);
74-
opacity: 0;
75-
transition: .25s ease-in;
76-
margin-top: 3px;
77-
transform: translateX(-2px);
78-
}
79-
80-
.ch-share:hover:after {
81-
opacity: 1;
82-
transform: translateX(2px);
83-
}
84-
85-
.ch-share.twitter:after {
86-
content: "Tweet";
87-
}
88-
89-
.ch-share.facebook:after {
90-
content: "Share";
32+
.ch-topbar .grid-lt {
33+
width: 25%;
34+
display: inline-block;
35+
vertical-align: middle;
36+
padding: 10px;
9137
}
9238

93-
.ch-share.github:after {
94-
content: "Star";
39+
.ch-topbar .grid-rt {
40+
width: 75%;
41+
display: inline-block;
42+
text-align: right;
43+
vertical-align: middle;
44+
padding: 0 10px;
9545
}
9646

97-
.ch-starcount {
98-
display: block;
99-
text-align: center;
100-
margin-top: -12px;
47+
.ch-devmode {
48+
display: inline-block;
49+
vertical-align: middle;
10150
color: #534e5c;
102-
}
103-
104-
.twitter {
105-
background-image: url("../images/icon-twitter.svg");
106-
}
107-
108-
.facebook {
109-
background-image: url("../images/icon-facebook.svg");
110-
}
111-
112-
.github {
113-
background-image: url("../images/icon-github.svg");
51+
font-size: 15px;
52+
margin-left: 3px;
53+
background: #f2f2f2;
54+
border-radius: 15px;
55+
padding: 2px 10px 4px 10px;
11456
}
11557

11658
p {
117-
text-align: left;
11859
font-size: 18px;
11960
color: #929197;
12061
padding: 15px 25px;
12162
}
12263

12364
.ch-paper {
124-
position: absolute;
125-
top: 0;
126-
bottom: 0;
127-
left: 0;
128-
right: 0;
129-
padding: 20px 20px 20px 105px;
130-
text-align: left;
131-
overflow: auto;
65+
width: 100%;
66+
max-width: 1600px;
67+
text-align: center;
68+
margin: 20px auto;
69+
}
70+
71+
.ch-footer {
72+
text-align: center;
73+
padding: 0 0 25px 0;
13274
}
13375

13476
.ch-gradient-brick {
@@ -237,7 +179,6 @@ p {
237179
right: 0;
238180
z-index: 500;
239181
text-align: right;
240-
overflow: none;
241182
}
242183

243184
.ch-notify {
@@ -257,9 +198,9 @@ p {
257198
}
258199

259200
.ch-distro {
260-
position: absolute;
201+
position: fixed;
261202
z-index: 50;
262-
left: 15px;
203+
right: 15px;
263204
bottom: 15px;
264205
min-width: 200px;
265206
max-width: 100%;
@@ -270,7 +211,7 @@ p {
270211
height: 50px;
271212
border-radius: 50%;
272213
position: absolute;
273-
left: 0px;
214+
right: 0px;
274215
bottom: 0px;
275216
background-color: #FFFFFF;
276217
background-image: url("../images/coolhue-sprite.svg");
@@ -312,7 +253,6 @@ p {
312253
font-size: 17px;
313254
background-position: left center;
314255
background-repeat: no-repeat;
315-
vertical-align: middle;
316256
}
317257

318258
.ch-distro-type:hover {
@@ -419,12 +359,15 @@ noscript {
419359
}
420360
}
421361

422-
@media screen and (max-width: 600px) {
423-
.ch-paper {
424-
text-align: center;
362+
@media screen and (max-width:480px) {
363+
.ch-share-brick {
364+
margin: 0;
425365
}
426-
.ch-gradient-brick {
427-
display: block;
428-
margin: 35px auto;
366+
.ch-share-brick:hover {
367+
box-shadow: none;
368+
}
369+
.ch-share-text,
370+
.ch-starcount {
371+
display: none;
429372
}
430373
}

‎index.html‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
45
<title>CoolHue 2.0 - Coolest Gradient Hues and Swatches</title>
56
<script src="scripts/script.js" type="text/javascript"></script>
@@ -11,32 +12,44 @@
1112
</head>
1213

1314
<body>
14-
<!-- Sidebar -->
15-
<div class="ch-sidebar">
16-
<img src="images/coolhue-logo.png" title="CoolHue" alt="CoolHue" width="64"/>
17-
<!--Distro-->
18-
<div class="ch-distro">
19-
<div class="ch-distro-icon"></div>
20-
<div class="ch-distro-wrapper ch-distro-wrapper-flap-up">
21-
<a class="ch-distro-type" href="http://bit.ly/coolhue-sketch" target="_blank">Sketch Palette</a>
22-
<a class="ch-distro-type" href="http://bit.ly/coolhue-ps" target="_blank">Photoshop Palette</a>
23-
<a class="ch-distro-type" href="http://bit.ly/coolhue-dev" target="_blank">Customize Palette</a>
24-
</div>
15+
<!-- Topbar -->
16+
<div class="ch-topbar">
17+
<div class="grid-lt">
18+
<img src="images/coolhue-logo.png" title="CoolHue" alt="CoolHue" width="64" />
19+
</div>
20+
<div class="grid-rt">
21+
<span class="ch-devmode">Dev Mode</span>
2522
</div>
26-
<!--//Distro-->
2723
</div>
28-
<!-- /Sidebar -->
24+
<!-- /Topbar -->
2925

3026
<!--Paper-->
3127
<div class="ch-paper">
3228
<noscript>We are sorry but we can't help it, unless your browser supports Javascript.</noscript>
3329
</div>
3430
<!--//Paper-->
3531

32+
<!-- Footer -->
33+
<div>
34+
<p class="ch-footer">&copy; Copyright
35+
<a href="https://webkul.com" target="_blank" rel="noopener">Webkul Software</a>, All rights reserved.</p>
36+
</div>
37+
<!-- //Footer -->
38+
3639
<!--Notification-->
3740
<div class="ch-notify-plank">
3841
</div>
3942
<!--Notification-->
43+
<!--Distro-->
44+
<div class="ch-distro">
45+
<div class="ch-distro-icon"></div>
46+
<div class="ch-distro-wrapper ch-distro-wrapper-flap-up">
47+
<a class="ch-distro-type" href="http://bit.ly/coolhue-sketch" target="_blank">Sketch Palette</a>
48+
<a class="ch-distro-type" href="http://bit.ly/coolhue-ps" target="_blank">Photoshop Palette</a>
49+
<a class="ch-distro-type" href="http://bit.ly/coolhue-dev" target="_blank">Customize Palette</a>
50+
</div>
51+
</div>
52+
<!--//Distro-->
4053
</body>
4154

4255
</html>

‎scripts/script.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ document.addEventListener("DOMContentLoaded", function () {
1212
var gradientStart = " 10%, ";
1313
var gradientEnd = " 100%)";
1414
var colorData;
15+
var chStarCount = document.querySelector(".ch-starcount");
1516

1617
var xhr = new XMLHttpRequest();
1718
xhr.open("GET", "scripts/coolhue.json", true);
@@ -78,11 +79,6 @@ document.addEventListener("DOMContentLoaded", function () {
7879
nodeGradientBrick.appendChild(nodeColors);
7980
chPaper.appendChild(nodeGradientBrick);
8081
}
81-
var footerWrapper = document.createElement("div");
82-
var para = document.createElement("p");
83-
para.innerHTML = "&copy; Copyright <a href=\"https://webkul.com\" target=\"_blank\" rel=\"noopener\">Webkul Software</a>, All rights reserved.";
84-
footerWrapper.appendChild(para);
85-
chPaper.appendChild(footerWrapper);
8682
}
8783

8884
var coolHueAction = function (event) {

0 commit comments

Comments
 (0)