zepp
/
alternate.thiscat.rocks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling updates and tidying of JS file

This commit is contained in:
emma 2024-10-28 10:31:07 -04:00
parent d480bcf962
commit c044dc10bd
2 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/script.js
View File

@ -24,12 +24,12 @@ icon.forEach((item) => {
titleBar.appendChild(closeButton); titleBar.appendChild(closeButton);
let windowTilte = document.createElement("h2"); let windowTilte = document.createElement("h2");
windowTilte.classList.add("title") windowTilte.classList.add("title");
windowTilte.textContent = item.querySelector("figcaption").textContent; windowTilte.textContent = item.querySelector("figcaption").textContent;
titleBar.appendChild(windowTilte); titleBar.appendChild(windowTilte);
let separator = document.createElement("div"); let separator = document.createElement("div");
separator.classList.add("separator") separator.classList.add("separator");
imageWindow.appendChild(titleBar); imageWindow.appendChild(titleBar);
imageWindow.appendChild(separator); imageWindow.appendChild(separator);
@ -72,10 +72,7 @@ icon.forEach((item) => {
closeButton.addEventListener("click", () => { closeButton.addEventListener("click", () => {
imageWindow.remove(); imageWindow.remove();
document.querySelector(".window").style.display = "block" document.querySelector(".window").style.display = "block";
}); });
}); });
}); });

13
style/style.css
View File

@ -3,24 +3,19 @@
padding: 0; padding: 0;
} }
html {
font-size: 16px;
}
body { body {
box-sizing: border-box; box-sizing: border-box;
height: 100vh; height: 100vh;
width: auto; width: auto;
display: grid; display: grid;
grid-template-columns: 2fr 1fr; grid-template-columns: 2fr 1fr;
gap: 0.25rem; gap: 1.25rem;
} }
.site-info { .site-info {
height: 20rem; height: 20rem;
width: auto; width: auto;
margin: 1rem; margin: 3rem 2rem 0 0;
margin-top: 3rem;
} }
h1 { h1 {
@ -45,6 +40,10 @@ p {
justify-items: center; justify-items: center;
} }
.window {
margin: 1rem 0 1rem 2rem;
}
.img-icon { .img-icon {
padding-left: 1.25rem; padding-left: 1.25rem;
} }