Update information

assets/scripts/script.js

@@ -1,39 +1,41 @@
 let likesTexst, dislikesTexst;
 
-function changeBackground(color)
-    {
-        document.getElementById("main").style.backgroundColor = `rgb(${color/2}, ${color}, ${color/3})`;
+function changeBackground(color) {
+    if (color > 8 || color < 6) {
+        let colorChangebleItems = Array.prototype.slice.call(document.getElementsByClassName('color-changeble'));
+        colorChangebleItems.forEach((element) => {
+            element.style.backgroundColor = `rgb(${color * 16}, ${color * 16}, ${color * 16})`;
+            element.style.color = `rgb(${255 - color * 16}, ${255 - color * 16}, ${255 - color * 16})`;
+        });
     }
+}
 
-function makeBorderBlue()
-    {
-        document.getElementById("page").style.borderColor = "blue";
-    }
+function makeBorderBlue() {
+    document.getElementById('page').style.borderColor = 'blue';
+}
 
-function makeBorderGreen()
-    {
-        document.getElementById("page").style.borderColor = "green";
-    }
+function makeBorderGreen() {
+    document.getElementById('page').style.borderColor = 'green';
+}
 
-function makeBorderYellow()
-    {
-        document.getElementById("page").style.borderColor = "yellow";
-    }
+function makeBorderYellow() {
+    document.getElementById('page').style.borderColor = 'yellow';
+}
+
+document.getElementById('likes').onmouseenter = function () {
+    likesTexst = this.textContent;
+    this.innerHTML = '&#127822; &#127828; &#9917; &#127952; &#127936; &#129461; &#127928; &#128021 &#128665; &#128250;';
+};
+
+document.getElementById('likes').onmouseleave = function () {
+    this.innerHTML = likesTexst;
+};
+
+document.getElementById('dislikes').onmouseenter = function () {
+    dislikesTexst = this.textContent;
+    this.innerHTML = '&#129324; &#128545; &#128555 &#128008; &#129326; &#128580;';
+};
 
-document.getElementById('likes').onmouseenter = function() {
-        likesTexst=this.textContent;
-        this.innerHTML = "&#127822; &#127828; &#9917; &#127952; &#127936; &#129461; &#127928; &#128021 &#128665; &#128250;";
-    };
-
-document.getElementById('likes').onmouseleave = function() {
-        this.innerHTML = likesTexst;
-    };
-
-document.getElementById('dislikes').onmouseenter = function() {
-        dislikesTexst=this.textContent;
-        this.innerHTML = "&#129324; &#128545; &#128555 &#128008; &#129326; &#128580;";
-    };
-
-document.getElementById('dislikes').onmouseleave = function() {
-        this.innerHTML = dislikesTexst;
-    };
+document.getElementById('dislikes').onmouseleave = function () {
+    this.innerHTML = dislikesTexst;
+};

assets/stylesheets/style.css

@@ -10,12 +10,20 @@ input[type="range"] {
 
 #ava {
   border-radius: 100%;
+  width: 110px;
+  height: 150px;
+  padding: 0;
+  margin: 0 50px 0 20px;
 }
 
 ul > li::before {
   content: "📌";
 }
 
+.with-secret {
+  min-height: 52px;
+}
+
 .color.blue::before {
   background-color: blue;
 }
@@ -27,3 +35,40 @@ ul > li::before {
 .color.green::before {
   background-color: green;
 }
+
+.color-picker-container {
+  display: flex;
+}
+
+.slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 10px;
+  border-radius: 2pt;
+  box-shadow: 0 0 0 1pt grey;
+  outline: none;
+  margin: 5px;
+}
+
+.slider:hover {
+  opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 5px;
+  height: 25px;
+  border: 0;
+  background-color: rgb(78, 15, 15);
+  color: black;
+  content: 'oE';
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}