diff --git a/index.html b/index.html
index 2f53983..92290ac 100644
--- a/index.html
+++ b/index.html
@@ -94,9 +94,10 @@
const myCW = document.createElement('summary');
const myButton = document.createElement('button');
myButton.addEventListener("click", showHide);
- myButton.textContent = "\u{1F648}";
+ myButton.title = "Show/Hide Content";
+ // myButton.textContent = "\u{1F648}";
myCW.textContent = obj.spoiler_text;
- myButton.classList.toggle("show");
+ myButton.classList.add("hide");
myHeader.appendChild(myCW);
myHeader.appendChild(myButton);
@@ -139,7 +140,7 @@
function populateFooter(item, obj){
const footer = document.createElement('footer');
const stats = document.createElement('ul');
- stats.innerHTML = `
${obj.favourites_count}${obj.reblogs_count}`;
+ stats.innerHTML = `${obj.favourites_count}${obj.reblogs_count}`;
footer.appendChild(stats);
item.appendChild(footer);
}
@@ -159,11 +160,13 @@
if( section.style.display == "none" ){
section.style.display = "block";
- button.classList.toggle("hide");
+ button.classList.add("show");
+ button.classList.remove("hide");
}
else {
section.style.display = "none";
- button.classList.toggle("show");
+ button.classList.add("hide");
+ buttom.classList.remove("show");
}
}
diff --git a/style.css b/style.css
index 6761a30..40d4438 100644
--- a/style.css
+++ b/style.css
@@ -39,19 +39,55 @@ article a {
article header {
width:100%;
grid-area: header;
- text-align:right;
+ display:grid;
+ grid-template-areas:
+ "cw button";
+ grid-template-columns: 3fr 1fr;
+
}
article header summary {
+ grid-area: cw;
font-weight: 300;
width:100%;
}
article header time {
+ width:100%;
+
padding-right:1em;
}
+article header button {
+ grid-area: button;
+ width: 2em;
+ height: 1.5em;
+ background: #313543;
+ border:solid thin #b4b5ba;
+ border-radius: 10px;
+
+ color:#b4b5ba;
+}
+
+article header button.show {
+ font-size: 2em;
+}
+
+article header button.show:before {
+ content: "\1F648";
+}
+
+article header button.hide {
+ font-size: 2em;
+
+}
+
+article header button.hide:before {
+ content: "\1F649";
+}
+
+
article aside {
grid-area: profile;
text-align:center;