-
Notifications
You must be signed in to change notification settings - Fork 0
/
black-sea.html
95 lines (87 loc) · 3.5 KB
/
black-sea.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Black Sea colours</title>
<style>
@font-face {
font-family: 'PT-Root-UI';
src: url('PT-Root-UI_Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'PT-Root-UI';
src: url('PT-Root-UI_Light.woff') format('woff');
font-weight: lighter;
font-style: normal;
}
* {margin: 0;padding: 0;box-sizing: border-box;}
article {text-align: center; line-height: 16vh;}
html {font-family: 'PT-Root-UI'; color: #000000;}
h1, section{width: 100%; height: 16vh;}
h1 {font-size: x-large; font-weight: bold;}
section {
cursor: pointer; color: #ffffff;
font-size: large; font-weight: lighter;
position: relative;
transition-duration: 300ms;
transition-property: height line-height;
transition-timing-function: ease-out;
}
section.hover, section.click {
height: 25vh; line-height: 25vh;
}
section::after{
content: '';
position: absolute;
width: 1rem;
height: 1rem;
padding-left: 1rem;
top: 0.05rem;
opacity: 87%;
}
section.hover::after{
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19.1'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='.9' paint-order='stroke markers fill' transform='translate(-.4 -.5)'%3E%3Cpath d='M6 1a2 2 0 0 0-2 2v1h10a2 2 0 0 1 2 2v10h1a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Z'/%3E%3Crect width='15.1' height='15.1' x='.9' y='4.1' rx='2' ry='2'/%3E%3C/g%3E%3C/svg%3E");
}
section.click::after{
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.7 13.7'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='.9' d='m.5 7.4 6.9 5.8L18.3.5'/%3E%3C/svg%3E");
}
</style>
</head>
<body>
<article>
<header>
<h1>The Black Sea colours</h1>
</header>
<main id="colours"></main>
</article>
<script type="text/javascript">
function Colour(colour) {
this.node = document.createElement('section');
this.node.style.backgroundColor = colour;
this.node.innerHTML = colour;
this.node.addEventListener('mouseenter', () => {this.node.classList = ['hover']});
this.node.addEventListener('mouseleave', () => {this.node.classList = []});
this.node.addEventListener('click', () => {
navigator.clipboard.writeText(colour);
this.node.classList = ['click'];
});
};
let colours = [
new Colour("#486F73"),
new Colour("#81A9A6"),
new Colour("#A9BEB7"),
new Colour("#6EB0C6"),
new Colour("#86B3CA"),
new Colour("#6FADC9"),
new Colour("#7C9CB4"),
];
document.addEventListener('DOMContentLoaded', () => {
let coloursNode = document.getElementById('colours');
colours.forEach(colour => {coloursNode.appendChild(colour.node)});
});
</script>
</body>
</html>