+
diff --git a/script/script.js b/script/script.js
index 973ab1d..8d7d70f 100644
--- a/script/script.js
+++ b/script/script.js
@@ -75,6 +75,7 @@ function change_sizes(e) {
}
create_board(size);
create_content(size, behavior);
+ add_active(e)
}
$size_btns.forEach($btn => {
$btn.addEventListener('click', change_sizes);
@@ -97,7 +98,6 @@ function rainbowColors () {
return `rgb(${r}, ${g}, ${b})`;
}
-console.log($rainbow)
$rainbow.addEventListener('click', rainbowColors)
//create a similly pop off look for basic colors
function show_basicColor() {
@@ -118,6 +118,7 @@ $etchy.addEventListener('click', () => {
behavior = !behavior;
})
+
// coloring the background of the target elements
// by adding adding a bg prop styling
function handle_mouse_moving(e) {
diff --git a/styles/style.css b/styles/style.css
index 0f3a56f..8fdf778 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -48,6 +48,7 @@ main .board {
display: grid;
background:rgb(223, 228, 226);
+ /* background-color: ; */
box-shadow: 1px -1px 4px rgb(37, 29, 24),-1px 1px 4px black;
}
@@ -67,6 +68,7 @@ main .board {
margin-top: .3rem;
margin-bottom: .3rem;
}
+
.colors button {
margin: 0;
border: 0;
@@ -76,9 +78,8 @@ main .board {
#currentColor {
- width: 3rem;
- height: 1.5rem;
- opacity: .7;
+ width: 3.2rem;
+ height: 1.62rem;
}
#basicColors {
position: relative;
@@ -88,7 +89,7 @@ main .board {
position: absolute;
top: -1.5rem;
background-color: rgb(75, 73, 73);
- width: 10rem;
+ width: 12rem;
height: 60px;
padding: 1rem;
@@ -97,24 +98,66 @@ main .board {
}
+.colors .mode #rainbow {
+ border-left: 1px solid rgb(43, 41, 41);
+ border-right: 1px solid rgb(43, 41, 41);
+}
+.colors {
+ border: 1px solid rgb(37, 29, 24);
+}
-/* footer */
-footer {
+/* ** Sizes ** */
+.sizes {
+ border:1px solid rgb(37, 29, 24);
display: flex;
- width: 100%;
justify-content: center;
- font-size: .9rem;
- gap: 5rem;
+}
+.size {
+ flex: 1;
+ border: 0;
+
+}
+.size:nth-child(2),
+.size:nth-child(4),
+.size:nth-child(6) {
+ /* background-color:; */
+ border-right: 1px solid rgb(37, 29, 24);
+ border-left: 1px solid rgb(37, 29, 24);
}
+.size:hover,
+button:hover {
+ background-color: rgb(169, 189, 248);
+}
-/* ** temporal ** */
+/* ** cleaning ** */
+.settings .cleaning {
+ display: flex;
+ justify-content: center;
+}
+.cleaning button:first-child{
+ border: 1px solid rgb(37, 29, 24);
+ /* border-right: 0; */
-.items {
- background-color: rgb(37, 36, 36);
}
+.cleaning button:last-child{
+ border: 1px solid rgb(37, 29, 24);
+ border-left: 0;
+}
+.cleaning button {
+ padding: .3rem .4rem;
+}
+
+/* footer */
+footer {
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ font-size: .9rem;
+ gap: 5rem;
+}